diff --git a/blazor-toc.html b/blazor-toc.html
index e89f1b6333..bc4d02f04b 100644
--- a/blazor-toc.html
+++ b/blazor-toc.html
@@ -56,10 +56,10 @@
 				<a href="/blazor/getting-started/razor-class-library">Razor Class Library in Visual Studio</a>
 			</li>
 			<li>
-				<a href="/blazor/getting-started/maui-blazor-app">.NET MAUI Blazor App (Hybrid)</a>
+				<a href="/blazor/getting-started/maui-blazor-app">.NET MAUI Blazor Hybrid App</a>
 			</li>
 			<li>
-				<a href="/blazor/getting-started/maui-blazor-web-app">.NET MAUI Blazor Hybrid App with Blazor Web App</a>
+				<a href="/blazor/getting-started/maui-blazor-web-app">.NET MAUI Blazor Hybrid App and Web App</a>
 			</li>
 			<li>
 				<a href="/blazor/getting-started/microsoft-teams-app">Microsoft Teams App</a>
@@ -73,6 +73,9 @@
 			<li>
 				<a href="/blazor/getting-started/winforms-blazor-app">WinForms Blazor App</a>
 			</li>
+			<li>
+				<a href="/blazor/getting-started/blazor-web-app-authentication">Blazor Web App with Authentication</a>
+			</li>
 			<li>
 				<a href="/blazor/getting-started/blazor-webassembly-authentication">Blazor Standalone WebAssembly App with Authentication Library</a>
 			</li>
@@ -644,11 +647,13 @@
 		</ul>
 	</li>
 	<li>AI Base
-		<li><a href="/blazor/ai/overview">Overview</a></li>
-		<li><a href="/blazor/ai/openAI">OpenAI Integration</a></li>
-		<li><a href="/blazor/ai/azure-openai">AzureOpenAI Integration</a></li>
-		<li><a href="/blazor/ai/ollama">Ollama Local Models Integration</a></li>
-		<li><a href="/blazor/ai/custom-ai-service">Custom AI Providers</a></li>
+		<ul>
+			<li><a href="/blazor/ai/overview">Overview</a></li>
+			<li><a href="/blazor/ai/openAI">OpenAI Integration</a></li>
+			<li><a href="/blazor/ai/azure-openai">AzureOpenAI Integration</a></li>
+			<li><a href="/blazor/ai/ollama">Ollama Local Models Integration</a></li>
+			<li><a href="/blazor/ai/custom-ai-service">Custom AI Providers</a></li>
+		</ul>
 	</li>
 	<li>AI AssistView
 		<ul>
@@ -2588,9 +2593,24 @@
 					</li>
 				</ul>
 			</li>
+			<li>
+				<a href="/blazor/dialog/modal-dialog">Modal Dialog</a>
+			</li>
 			<li>
 				<a href="/blazor/dialog/draggable">Draggable</a>
 			</li>
+			<li>
+				<a href="/blazor/dialog/dialogbuttons">Dialog Buttons</a>
+			</li>
+			<li>
+				<a href="/blazor/dialog/minimize-and-maximize">Minimize and Maximize</a>
+			</li>
+			<li>
+				<a href="/blazor/dialog/show-dialog-with-fullscreen">Full Screen</a>
+			</li>
+			<li>
+				<a href="/blazor/dialog/state-persistent">Persistent State</a>
+			</li>
 			<li>
 				<a href="/blazor/dialog/resize">Resizing</a>
 			</li>
@@ -2604,7 +2624,7 @@
 				<a href="/blazor/dialog/animation">Animation</a>
 			</li>
 			<li>
-				<a href="/blazor/dialog/style">Style and Appearance</a>
+				<a href="/blazor/dialog/style">Dialog Customization</a>
 			</li>
 			<li>
 				<a href="/blazor/dialog/localization">Localization</a>
@@ -2621,7 +2641,6 @@
 					<li><a href="/blazor/dialog/how-to/achieve-two-way-binding-to-the-visible-property">Achieve two-way binding using the visible property</a></li>
 					<li><a href="/blazor/dialog/how-to/position-the-dialog-on-center-of-the-page-on-scrolling">Position the Dialog in center of the page on scrolling</a></li>
 					<li><a href="/blazor/dialog/how-to/render-a-dialog-header-dynamically">Render a dialog header dynamically</a></li>
-					<li><a href="/blazor/dialog/how-to/show-dialog-with-fullscreen">Show Dialog with fullscreen</a></li>
 					<li><a href="/blazor/dialog/how-to/display-a-dialog-with-custom-position">Display a Dialog with custom position</a></li>
 					<li><a href="/blazor/dialog/how-to/prevent-closing-of-modal-dialog">Prevent closing of modal Dialog</a></li>
 					<li><a href="/blazor/dialog/how-to/prevent-the-focus-on-the-first-element">Prevent the focus on the first element</a></li>
@@ -3787,7 +3806,7 @@
 			<li> <a href="/blazor/pdfviewer-2/globalization">Globalization and RTL</a></li>
 			<li>How To
 				<ul>
-					<li> <a href="/blazor/pdfviewer-2/how-to/how-to-load-PDF-from-URL-to-server-side-PDF-viewer">How to load PDF from URL to server-side PDF viewer</a></li>
+					<li> <a href="/blazor/pdfviewer-2/how-to/how-to-load-PDF-from-URL-to-server-side-PDF-viewer">Load PDF from URL to server-side PDF viewer</a></li>
 					<li> <a href="/blazor/pdfviewer-2/how-to/create-sfpdfviewer-in-a-popup-window">Create a SfPdfViewer within a popup window in Blazor</a></li>
 					<li> <a href="/blazor/pdfviewer-2/how-to/load-pdf-document-dynamically">Load PDF documents dynamically in Blazor SfPdfViewer Component</a></li>
 					<li> <a href="/blazor/pdfviewer-2/how-to/load-office-files">Load Office files in Blazor SfPdfViewer</a></li>
@@ -3824,7 +3843,7 @@
 					<li> <a href="/blazor/pdfviewer-2/how-to/load-font-collection">Load Font Collection in a PDF Viewer</a></li>
 					<li> <a href="/blazor/pdfviewer-2/how-to/reduce-slowness-while-running-the-wasm-sample-in-Visual-Studio">Reduce slowness while running the WASM sample in Visual Studio</a></li>
 					<li> <a href="/blazor/pdfviewer-2/how-to/coordinate-conversion-between-page-and-client-points">Coordinate Conversion Between Page and Client Points</a></li>
-
+					<li> <a href="/blazor/pdfviewer-2/how-to/content-security-policy">Use strict CSP in Blazor SfPdfViewer Component</a></li>
 				</ul>
 			</li>
 			<li>
@@ -5407,7 +5426,7 @@
 	</li>
 
 	<li>Release Notes
-	            <ul><li>2025 Volume 2 - 30.*<ul><li>Weekly Release<ul><li><a href="/blazor/release-notes/30.1.38">30.1.38</a></li></ul></li><li><a href="/blazor/release-notes/30.1.37">30.1.37 Main Release</a></li></ul></li><li>2025 Volume 1 - 29.*<ul><li>Weekly Nuget Release<ul><li><a href="/blazor/release-notes/29.2.11">29.2.11</a></li><li><a href="/blazor/release-notes/29.2.10">29.2.10</a></li><li><a href="/blazor/release-notes/29.2.8">29.2.8</a></li><li><a href="/blazor/release-notes/29.2.7">29.2.7</a></li><li><a href="/blazor/release-notes/29.2.5">29.2.5</a></li><li><a href="/blazor/release-notes/29.1.41">29.1.41</a></li><li><a href="/blazor/release-notes/29.1.40">29.1.40</a></li><li><a href="/blazor/release-notes/29.1.39">29.1.39</a></li><li><a href="/blazor/release-notes/29.1.38">29.1.38</a></li><li><a href="/blazor/release-notes/29.1.37">29.1.37</a></li><li><a href="/blazor/release-notes/29.1.35">29.1.35</a></li></ul></li><li><a href="/blazor/release-notes/29.2.4">29.2.4 Service Pack Release</a></li><li><a href="/blazor/release-notes/29.1.33">29.1.33 Main Release</a></li></ul></li><li>2024 Volume 4 - 28.*<ul><li>Weekly Nuget Release<ul><li><a href="/blazor/release-notes/28.2.12">28.2.12</a></li><li><a href="/blazor/release-notes/28.2.11">28.2.11</a></li><li><a href="/blazor/release-notes/28.2.9">28.2.9</a></li><li><a href="/blazor/release-notes/28.2.7">28.2.7</a></li><li><a href="/blazor/release-notes/28.2.6">28.2.6</a></li><li><a href="/blazor/release-notes/28.2.5">28.2.5</a></li><li><a href="/blazor/release-notes/28.2.4">28.2.4</a></li><li><a href="/blazor/release-notes/28.1.41">28.1.41</a></li><li><a href="/blazor/release-notes/28.1.39">28.1.39</a></li><li><a href="/blazor/release-notes/28.1.38">28.1.38</a></li><li><a href="/blazor/release-notes/28.1.37">28.1.37</a></li><li><a href="/blazor/release-notes/28.1.36">28.1.36</a></li><li><a href="/blazor/release-notes/28.1.35">28.1.35</a></li></ul></li><li><a href="/blazor/release-notes/28.2.3">28.2.3 Service Pack Release</a></li><li><a href="/blazor/release-notes/28.1.33">28.1.33 Main Release</a></li></ul></li><li>2024 Volume 3 - 27.*<ul><li>Weekly Release <ul><li><a href="/blazor/release-notes/27.2.5">27.2.5</a></li><li><a href="/blazor/release-notes/27.2.4">27.2.4</a></li><li><a href="/blazor/release-notes/27.2.3">27.2.3</a></li><li><a href="/blazor/release-notes/27.1.58">27.1.58</a></li><li><a href="/blazor/release-notes/27.1.57">27.1.57</a></li><li><a href="/blazor/release-notes/27.1.56">27.1.56</a></li><li><a href="/blazor/release-notes/27.1.55">27.1.55</a></li><li><a href="/blazor/release-notes/27.1.53">27.1.53</a></li><li><a href="/blazor/release-notes/27.1.52">27.1.52</a></li><li><a href="/blazor/release-notes/27.1.51">27.1.51</a></li><li><a href="/blazor/release-notes/27.1.50">27.1.50</a></li></ul></li><li><a href="/blazor/release-notes/27.2.2">27.2.2 Service Pack Release</a></li><li><a href="/blazor/release-notes/27.1.48">27.1.48 Main Release</a></li></ul></li><li>2024 Volume 2 - 26.*<ul><li>Weekly Nuget Release<ul><li><a href="/blazor/release-notes/26.2.14">26.2.14</a></li><li><a href="/blazor/release-notes/26.2.13">26.2.13</a></li><li><a href="/blazor/release-notes/26.2.12">26.2.12</a></li><li><a href="/blazor/release-notes/26.2.11">26.2.11</a></li><li><a href="/blazor/release-notes/26.2.10">26.2.10</a></li><li><a href="/blazor/release-notes/26.2.9">26.2.9</a></li><li><a href="/blazor/release-notes/26.2.8">26.2.8</a></li><li><a href="/blazor/release-notes/26.2.7">26.2.7</a></li><li><a href="/blazor/release-notes/26.2.5">26.2.5</a></li><li><a href="/blazor/release-notes/26.1.42">26.1.42</a></li><li><a href="/blazor/release-notes/26.1.41">26.1.41</a></li><li><a href="/blazor/release-notes/26.1.40">26.1.40</a></li><li><a href="/blazor/release-notes/26.1.39">26.1.39</a></li><li><a href="/blazor/release-notes/26.1.38">26.1.38</a></li></ul></li><li><a href="/blazor/release-notes/26.2.4">26.2.4 Service Pack Release</a></li><li><a href="/blazor/release-notes/26.1.35">26.1.35 Main Release</a></li></ul></li><li>2024 Volume 1 - 25.*<ul><li>Weekly Nuget Release<ul><li><a href="/blazor/release-notes/25.2.7">25.2.7</a></li><li><a href="/blazor/release-notes/25.2.6">25.2.6</a></li><li><a href="/blazor/release-notes/25.2.5">25.2.5</a></li><li><a href="/blazor/release-notes/25.2.4">25.2.4</a></li><li><a href="/blazor/release-notes/25.1.42">25.1.42</a></li><li><a href="/blazor/release-notes/25.1.41">25.1.41</a></li><li><a href="/blazor/release-notes/25.1.40">25.1.40</a></li><li><a href="/blazor/release-notes/25.1.39">25.1.39</a></li><li><a href="/blazor/release-notes/25.1.38">25.1.38</a></li><li><a href="/blazor/release-notes/25.1.37">25.1.37</a></li></ul></li><li><a href="/blazor/release-notes/25.2.3">25.2.3 Service Pack Release</a></li><li><a href="/blazor/release-notes/25.1.35">25.1.35 Main Release</a></li></ul></li><li>2023 Volume 4 - 24.*<ul><li>Weekly Nuget Release <ul><li><a href="/blazor/release-notes/24.2.9">24.2.9</a></li><li><a href="/blazor/release-notes/24.2.8">24.2.8</a></li><li><a href="/blazor/release-notes/24.2.7">24.2.7</a></li><li><a href="/blazor/release-notes/24.2.6">24.2.6</a></li><li><a href="/blazor/release-notes/24.2.5">24.2.5</a></li><li><a href="/blazor/release-notes/24.2.4">24.2.4</a></li><li><a href="/blazor/release-notes/24.1.47">24.1.47</a></li><li><a href="/blazor/release-notes/24.1.46">24.1.46</a></li><li><a href="/blazor/release-notes/24.1.45">24.1.45</a></li><li><a href="/blazor/release-notes/24.1.44">24.1.44</a></li><li><a href="/blazor/release-notes/24.1.43">24.1.43</a></li></ul></li><li><a href="/blazor/release-notes/24.2.3">24.2.3 Service Pack Release</a></li><li><a href="/blazor/release-notes/24.1.41">24.1.41 Main Release</a></li></ul></li><li>2023 Volume 3 - 23.*<ul><li> Weekly Nuget Release <ul><li><a href="/blazor/release-notes/23.1.44">23.1.44</a></li><li><a href="/blazor/release-notes/23.1.43">23.1.43</a></li><li><a href="/blazor/release-notes/23.1.42">23.1.42</a></li><li><a href="/blazor/release-notes/23.1.41">23.1.41</a></li><li><a href="/blazor/release-notes/23.1.40">23.1.40</a></li><li><a href="/blazor/release-notes/23.1.39">23.1.39</a></li><li><a href="/blazor/release-notes/23.1.38">23.1.38</a></li></ul></li><li><a href="/blazor/release-notes/23.2.4">23.2.4 Service Pack Release</a></li><li><a href="/blazor/release-notes/23.1.36">23.1.36 Main Release</a></li></ul></li><li>2023 Volume 2 - 22.*<ul><li> Weekly Nuget Release <ul><li><a href="/blazor/release-notes/22.2.12">22.2.12</a></li><li><a href="/blazor/release-notes/22.2.11">22.2.11</a></li><li><a href="/blazor/release-notes/22.2.10">22.2.10</a></li><li><a href="/blazor/release-notes/22.2.9">22.2.9</a></li><li><a href="/blazor/release-notes/22.2.8">22.2.8</a></li><li><a href="/blazor/release-notes/22.2.7">22.2.7</a></li><li><a href="/blazor/release-notes/22.1.39">22.1.39</a></li><li><a href="/blazor/release-notes/22.1.38">22.1.38</a></li><li><a href="/blazor/release-notes/22.1.37">22.1.37</a></li><li><a href="/blazor/release-notes/22.1.36">22.1.36</a></li></ul></li><li><a href="/blazor/release-notes/22.2.5">22.2.5 Service Pack Release</a></li><li><a href="/blazor/release-notes/22.1.34">22.1.34 Main Release</a></li></ul></li><li>2023 Volume 1 - 21.*<ul><li> Weekly Nuget Release <ul><li><a href="/blazor/release-notes/21.2.10">21.2.10</a></li><li><a href="/blazor/release-notes/21.2.9">21.2.9</a></li><li><a href="/blazor/release-notes/21.2.8">21.2.8</a></li><li><a href="/blazor/release-notes/21.2.6">21.2.6</a></li><li><a href="/blazor/release-notes/21.2.5">21.2.5</a></li><li><a href="/blazor/release-notes/21.2.4">21.2.4</a></li><li><a href="/blazor/release-notes/21.1.41">21.1.41</a></li><li><a href="/blazor/release-notes/21.1.39">21.1.39</a></li><li><a href="/blazor/release-notes/21.1.38">21.1.38</a></li><li><a href="/blazor/release-notes/21.1.37">21.1.37</a></li></ul></li><li><a href="/blazor/release-notes/21.2.3">21.2.3 Service Pack Release</a></li><li><a href="/blazor/release-notes/21.1.35">21.1.35 Main Release</a></li></ul></li>
+	            <ul><li>2025 Volume 2 - 30.*<ul><li>Weekly Release<ul><li><a href="/blazor/release-notes/30.2.5">30.2.5</a></li><li><a href="/blazor/release-notes/30.1.42">30.1.42</a></li><li><a href="/blazor/release-notes/30.1.41">30.1.41</a></li><li><a href="/blazor/release-notes/30.1.40">30.1.40</a></li><li><a href="/blazor/release-notes/30.1.39">30.1.39</a></li><li><a href="/blazor/release-notes/30.1.38">30.1.38</a></li></ul></li><li><a href="/blazor/release-notes/30.2.4">30.2.4 Service Pack Release</a></li><li><a href="/blazor/release-notes/30.1.37">30.1.37 Main Release</a></li></ul></li><li>2025 Volume 1 - 29.*<ul><li>Weekly Nuget Release<ul><li><a href="/blazor/release-notes/29.2.11">29.2.11</a></li><li><a href="/blazor/release-notes/29.2.10">29.2.10</a></li><li><a href="/blazor/release-notes/29.2.8">29.2.8</a></li><li><a href="/blazor/release-notes/29.2.7">29.2.7</a></li><li><a href="/blazor/release-notes/29.2.5">29.2.5</a></li><li><a href="/blazor/release-notes/29.1.41">29.1.41</a></li><li><a href="/blazor/release-notes/29.1.40">29.1.40</a></li><li><a href="/blazor/release-notes/29.1.39">29.1.39</a></li><li><a href="/blazor/release-notes/29.1.38">29.1.38</a></li><li><a href="/blazor/release-notes/29.1.37">29.1.37</a></li><li><a href="/blazor/release-notes/29.1.35">29.1.35</a></li></ul></li><li><a href="/blazor/release-notes/29.2.4">29.2.4 Service Pack Release</a></li><li><a href="/blazor/release-notes/29.1.33">29.1.33 Main Release</a></li></ul></li><li>2024 Volume 4 - 28.*<ul><li>Weekly Nuget Release<ul><li><a href="/blazor/release-notes/28.2.12">28.2.12</a></li><li><a href="/blazor/release-notes/28.2.11">28.2.11</a></li><li><a href="/blazor/release-notes/28.2.9">28.2.9</a></li><li><a href="/blazor/release-notes/28.2.7">28.2.7</a></li><li><a href="/blazor/release-notes/28.2.6">28.2.6</a></li><li><a href="/blazor/release-notes/28.2.5">28.2.5</a></li><li><a href="/blazor/release-notes/28.2.4">28.2.4</a></li><li><a href="/blazor/release-notes/28.1.41">28.1.41</a></li><li><a href="/blazor/release-notes/28.1.39">28.1.39</a></li><li><a href="/blazor/release-notes/28.1.38">28.1.38</a></li><li><a href="/blazor/release-notes/28.1.37">28.1.37</a></li><li><a href="/blazor/release-notes/28.1.36">28.1.36</a></li><li><a href="/blazor/release-notes/28.1.35">28.1.35</a></li></ul></li><li><a href="/blazor/release-notes/28.2.3">28.2.3 Service Pack Release</a></li><li><a href="/blazor/release-notes/28.1.33">28.1.33 Main Release</a></li></ul></li><li>2024 Volume 3 - 27.*<ul><li>Weekly Release <ul><li><a href="/blazor/release-notes/27.2.5">27.2.5</a></li><li><a href="/blazor/release-notes/27.2.4">27.2.4</a></li><li><a href="/blazor/release-notes/27.2.3">27.2.3</a></li><li><a href="/blazor/release-notes/27.1.58">27.1.58</a></li><li><a href="/blazor/release-notes/27.1.57">27.1.57</a></li><li><a href="/blazor/release-notes/27.1.56">27.1.56</a></li><li><a href="/blazor/release-notes/27.1.55">27.1.55</a></li><li><a href="/blazor/release-notes/27.1.53">27.1.53</a></li><li><a href="/blazor/release-notes/27.1.52">27.1.52</a></li><li><a href="/blazor/release-notes/27.1.51">27.1.51</a></li><li><a href="/blazor/release-notes/27.1.50">27.1.50</a></li></ul></li><li><a href="/blazor/release-notes/27.2.2">27.2.2 Service Pack Release</a></li><li><a href="/blazor/release-notes/27.1.48">27.1.48 Main Release</a></li></ul></li><li>2024 Volume 2 - 26.*<ul><li>Weekly Nuget Release<ul><li><a href="/blazor/release-notes/26.2.14">26.2.14</a></li><li><a href="/blazor/release-notes/26.2.13">26.2.13</a></li><li><a href="/blazor/release-notes/26.2.12">26.2.12</a></li><li><a href="/blazor/release-notes/26.2.11">26.2.11</a></li><li><a href="/blazor/release-notes/26.2.10">26.2.10</a></li><li><a href="/blazor/release-notes/26.2.9">26.2.9</a></li><li><a href="/blazor/release-notes/26.2.8">26.2.8</a></li><li><a href="/blazor/release-notes/26.2.7">26.2.7</a></li><li><a href="/blazor/release-notes/26.2.5">26.2.5</a></li><li><a href="/blazor/release-notes/26.1.42">26.1.42</a></li><li><a href="/blazor/release-notes/26.1.41">26.1.41</a></li><li><a href="/blazor/release-notes/26.1.40">26.1.40</a></li><li><a href="/blazor/release-notes/26.1.39">26.1.39</a></li><li><a href="/blazor/release-notes/26.1.38">26.1.38</a></li></ul></li><li><a href="/blazor/release-notes/26.2.4">26.2.4 Service Pack Release</a></li><li><a href="/blazor/release-notes/26.1.35">26.1.35 Main Release</a></li></ul></li><li>2024 Volume 1 - 25.*<ul><li>Weekly Nuget Release<ul><li><a href="/blazor/release-notes/25.2.7">25.2.7</a></li><li><a href="/blazor/release-notes/25.2.6">25.2.6</a></li><li><a href="/blazor/release-notes/25.2.5">25.2.5</a></li><li><a href="/blazor/release-notes/25.2.4">25.2.4</a></li><li><a href="/blazor/release-notes/25.1.42">25.1.42</a></li><li><a href="/blazor/release-notes/25.1.41">25.1.41</a></li><li><a href="/blazor/release-notes/25.1.40">25.1.40</a></li><li><a href="/blazor/release-notes/25.1.39">25.1.39</a></li><li><a href="/blazor/release-notes/25.1.38">25.1.38</a></li><li><a href="/blazor/release-notes/25.1.37">25.1.37</a></li></ul></li><li><a href="/blazor/release-notes/25.2.3">25.2.3 Service Pack Release</a></li><li><a href="/blazor/release-notes/25.1.35">25.1.35 Main Release</a></li></ul></li><li>2023 Volume 4 - 24.*<ul><li>Weekly Nuget Release <ul><li><a href="/blazor/release-notes/24.2.9">24.2.9</a></li><li><a href="/blazor/release-notes/24.2.8">24.2.8</a></li><li><a href="/blazor/release-notes/24.2.7">24.2.7</a></li><li><a href="/blazor/release-notes/24.2.6">24.2.6</a></li><li><a href="/blazor/release-notes/24.2.5">24.2.5</a></li><li><a href="/blazor/release-notes/24.2.4">24.2.4</a></li><li><a href="/blazor/release-notes/24.1.47">24.1.47</a></li><li><a href="/blazor/release-notes/24.1.46">24.1.46</a></li><li><a href="/blazor/release-notes/24.1.45">24.1.45</a></li><li><a href="/blazor/release-notes/24.1.44">24.1.44</a></li><li><a href="/blazor/release-notes/24.1.43">24.1.43</a></li></ul></li><li><a href="/blazor/release-notes/24.2.3">24.2.3 Service Pack Release</a></li><li><a href="/blazor/release-notes/24.1.41">24.1.41 Main Release</a></li></ul></li><li>2023 Volume 3 - 23.*<ul><li> Weekly Nuget Release <ul><li><a href="/blazor/release-notes/23.1.44">23.1.44</a></li><li><a href="/blazor/release-notes/23.1.43">23.1.43</a></li><li><a href="/blazor/release-notes/23.1.42">23.1.42</a></li><li><a href="/blazor/release-notes/23.1.41">23.1.41</a></li><li><a href="/blazor/release-notes/23.1.40">23.1.40</a></li><li><a href="/blazor/release-notes/23.1.39">23.1.39</a></li><li><a href="/blazor/release-notes/23.1.38">23.1.38</a></li></ul></li><li><a href="/blazor/release-notes/23.2.4">23.2.4 Service Pack Release</a></li><li><a href="/blazor/release-notes/23.1.36">23.1.36 Main Release</a></li></ul></li><li>2023 Volume 2 - 22.*<ul><li> Weekly Nuget Release <ul><li><a href="/blazor/release-notes/22.2.12">22.2.12</a></li><li><a href="/blazor/release-notes/22.2.11">22.2.11</a></li><li><a href="/blazor/release-notes/22.2.10">22.2.10</a></li><li><a href="/blazor/release-notes/22.2.9">22.2.9</a></li><li><a href="/blazor/release-notes/22.2.8">22.2.8</a></li><li><a href="/blazor/release-notes/22.2.7">22.2.7</a></li><li><a href="/blazor/release-notes/22.1.39">22.1.39</a></li><li><a href="/blazor/release-notes/22.1.38">22.1.38</a></li><li><a href="/blazor/release-notes/22.1.37">22.1.37</a></li><li><a href="/blazor/release-notes/22.1.36">22.1.36</a></li></ul></li><li><a href="/blazor/release-notes/22.2.5">22.2.5 Service Pack Release</a></li><li><a href="/blazor/release-notes/22.1.34">22.1.34 Main Release</a></li></ul></li><li>2023 Volume 1 - 21.*<ul><li> Weekly Nuget Release <ul><li><a href="/blazor/release-notes/21.2.10">21.2.10</a></li><li><a href="/blazor/release-notes/21.2.9">21.2.9</a></li><li><a href="/blazor/release-notes/21.2.8">21.2.8</a></li><li><a href="/blazor/release-notes/21.2.6">21.2.6</a></li><li><a href="/blazor/release-notes/21.2.5">21.2.5</a></li><li><a href="/blazor/release-notes/21.2.4">21.2.4</a></li><li><a href="/blazor/release-notes/21.1.41">21.1.41</a></li><li><a href="/blazor/release-notes/21.1.39">21.1.39</a></li><li><a href="/blazor/release-notes/21.1.38">21.1.38</a></li><li><a href="/blazor/release-notes/21.1.37">21.1.37</a></li></ul></li><li><a href="/blazor/release-notes/21.2.3">21.2.3 Service Pack Release</a></li><li><a href="/blazor/release-notes/21.1.35">21.1.35 Main Release</a></li></ul></li>
 				<li>2022 Volume 4 - 20.4.*<ul><li> Weekly Nuget Release <ul><li><a href="/blazor/release-notes/20.4.53">20.4.53</a></li><li><a href="/blazor/release-notes/20.4.52">20.4.52</a></li><li><a href="/blazor/release-notes/20.4.51">20.4.51</a></li><li><a href="/blazor/release-notes/20.4.50">20.4.50</a></li><li><a href="/blazor/release-notes/20.4.49">20.4.49</a></li><li><a href="/blazor/release-notes/20.4.44">20.4.44</a></li><li><a href="/blazor/release-notes/20.4.43">20.4.43</a></li><li><a href="/blazor/release-notes/20.4.42">20.4.42</a></li><li><a href="/blazor/release-notes/20.4.41">20.4.41</a></li><li><a href="/blazor/release-notes/20.4.40">20.4.40</a></li></ul></li><li><a href="/blazor/release-notes/20.4.48">20.4.48 Service Pack Release</a></li><li><a href="/blazor/release-notes/20.4.38">20.4.38 Main Release</a></li></ul></li><li>2022 Volume 3 - 20.3.*<ul><li> Weekly Nuget Release <ul><li><a href="/blazor/release-notes/20.3.61">20.3.61</a></li><li><a href="/blazor/release-notes/20.3.60">20.3.60</a></li><li><a href="/blazor/release-notes/20.3.59">20.3.59</a></li><li><a href="/blazor/release-notes/20.3.58">20.3.58</a></li><li><a href="/blazor/release-notes/20.3.57">20.3.57</a></li><li><a href="/blazor/release-notes/20.3.52">20.3.52</a></li><li><a href="/blazor/release-notes/20.3.50">20.3.50</a></li><li><a href="/blazor/release-notes/20.3.49">20.3.49</a></li><li><a href="/blazor/release-notes/20.3.48">20.3.48</a></li></ul></li><li><a href="/blazor/release-notes/20.3.56">20.3.56 Service Pack Release</a></li><li><a href="/blazor/release-notes/20.3.47">20.3.47 Main Release</a></li></ul></li><li>2022 volume 2 - 20.2.*<ul><li> Weekly Nuget Release <ul><li><a href="/blazor/release-notes/20.2.50">20.2.50</a></li><li><a href="/blazor/release-notes/20.2.49">20.2.49</a></li><li><a href="/blazor/release-notes/20.2.48">20.2.48</a></li><li><a href="/blazor/release-notes/20.2.46">20.2.46</a></li><li><a href="/blazor/release-notes/20.2.45">20.2.45</a></li><li><a href="/blazor/release-notes/20.2.44">20.2.44</a></li><li><a href="/blazor/release-notes/20.2.40">20.2.40</a></li><li><a href="/blazor/release-notes/20.2.39">20.2.39</a></li><li><a href="/blazor/release-notes/20.2.38">20.2.38</a></li></ul></li><li><a href="/blazor/release-notes/20.2.43">20.2.43 Service Pack Release</a></li><li><a href="/blazor/release-notes/20.2.36">20.2.36 Main Release </a></li></ul></li><li>2022 volume 1 - 20.1.*<ul><li> Weekly Nuget Release <ul><li><a href="/blazor/release-notes/20.1.61">20.1.61</a></li><li><a href="/blazor/release-notes/20.1.60">20.1.60</a></li><li><a href="/blazor/release-notes/20.1.59">20.1.59</a></li><li><a href="/blazor/release-notes/20.1.58">20.1.58</a></li><li><a href="/blazor/release-notes/20.1.57">20.1.57</a></li><li><a href="/blazor/release-notes/20.1.56">20.1.56</a></li><li><a href="/blazor/release-notes/20.1.52">20.1.52</a></li><li><a href="/blazor/release-notes/20.1.51">20.1.51</a></li><li><a href="/blazor/release-notes/20.1.50">20.1.50</a></li><li><a href="/blazor/release-notes/20.1.48">20.1.48</a></li></ul></li><li><a href="/blazor/release-notes/20.1.55">20.1.55 Service Pack Release</a></li><li><a href="/blazor/release-notes/20.1.47">20.1.47 Main Release</a></li></ul></li><li>2021 Volume 4 - 19.4.*<ul><li> Weekly Nuget Release <ul><li><a href="/blazor/release-notes/19.4.56">19.4.56</a></li><li><a href="/blazor/release-notes/19.4.55">19.4.55</a></li><li><a href="/blazor/release-notes/19.4.54">19.4.54</a></li><li><a href="/blazor/release-notes/19.4.53">19.4.53</a></li><li><a href="/blazor/release-notes/19.4.52">19.4.52</a></li><li><a href="/blazor/release-notes/19.4.50">19.4.50</a></li><li><a href="/blazor/release-notes/19.4.47">19.4.47</a></li><li><a href="/blazor/release-notes/19.4.43">19.4.43</a></li><li><a href="/blazor/release-notes/19.4.42">19.4.42</a></li><li><a href="/blazor/release-notes/19.4.41">19.4.41</a></li><li><a href="/blazor/release-notes/19.4.40">19.4.40</a></li></ul></li><li><a href="/blazor/release-notes/19.4.48">19.4.48 Service Pack Release</a></li><li><a href="/blazor/release-notes/19.4.38">19.4.38 Main Release</a></li></ul></li><li>2021 volume 3 - 19.3.*<ul><li> Weekly Nuget Release <ul><li><a href="/blazor/release-notes/19.3.59">19.3.59</a></li><li><a href="/blazor/release-notes/19.3.57">19.3.57</a></li><li><a href="/blazor/release-notes/19.3.56">19.3.56</a></li><li><a href="/blazor/release-notes/19.3.55">19.3.55</a></li><li><a href="/blazor/release-notes/19.3.54">19.3.54</a></li><li><a href="/blazor/release-notes/19.3.48">19.3.48</a></li><li><a href="/blazor/release-notes/19.3.47">19.3.47</a></li><li><a href="/blazor/release-notes/19.3.46">19.3.46</a></li><li><a href="/blazor/release-notes/19.3.45">19.3.45</a></li><li><a href="/blazor/release-notes/19.3.44">19.3.44</a></li></ul></li><li><a href="/blazor/release-notes/19.3.53">19.3.53 Service Pack Release</a></li><li><a href="/blazor/release-notes/19.3.43">19.3.43 Main Release</a></li></ul></li><li>2021 Volume 2 - 19.2.*<ul><li> Weekly Nuget Release <ul><li><a href="/blazor/release-notes/19.2.62">19.2.62</a></li><li><a href="/blazor/release-notes/19.2.60">19.2.60</a></li><li><a href="/blazor/release-notes/19.2.59">19.2.59</a></li><li><a href="/blazor/release-notes/19.2.57">19.2.57</a></li><li><a href="/blazor/release-notes/19.2.56">19.2.56</a></li><li><a href="/blazor/release-notes/19.2.51">19.2.51</a></li><li><a href="/blazor/release-notes/19.2.49">19.2.49</a></li><li><a href="/blazor/release-notes/19.2.48">19.2.48</a></li><li><a href="/blazor/release-notes/19.2.47">19.2.47</a></li><li><a href="/blazor/release-notes/19.2.46">19.2.46</a></li></ul></li><li><a href="/blazor/release-notes/19.2.55">19.2.55 Service Pack Release</a></li><li><a href="/blazor/release-notes/19.2.44">19.2.44 Main Release</a></li></ul></li><li>2021 volume 1 - 19.1.*<ul><li> Weekly Nuget Release <ul><li><a href="/blazor/release-notes/19.1.69">19.1.69</a></li><li><a href="/blazor/release-notes/19.1.67">19.1.67</a></li><li><a href="/blazor/release-notes/19.1.66">19.1.66</a></li><li><a href="/blazor/release-notes/19.1.65">19.1.65</a></li><li><a href="/blazor/release-notes/19.1.64">19.1.64</a></li><li><a href="/blazor/release-notes/19.1.59">19.1.59</a></li><li><a href="/blazor/release-notes/19.1.58">19.1.58</a></li><li><a href="/blazor/release-notes/19.1.57">19.1.57</a></li><li><a href="/blazor/release-notes/19.1.56">19.1.56</a></li><li><a href="/blazor/release-notes/19.1.55">19.1.55</a></li></ul></li><li><a href="/blazor/release-notes/19.1.63">19.1.63 Service Pack Release</a></li><li><a href="/blazor/release-notes/19.1.54">19.1.54 Main release</a></li></ul></li>
 				    <li>2020 volume 4 - 18.4.*<ul><li> Weekly Nuget Release <ul><li><a href="/blazor/release-notes/18.4.49">18.4.49</a></li><li><a href="/blazor/release-notes/18.4.48">18.4.48</a></li><li><a href="/blazor/release-notes/18.4.47">18.4.47</a></li><li><a href="/blazor/release-notes/18.4.46">18.4.46</a></li><li><a href="/blazor/release-notes/18.4.44">18.4.44</a></li><li><a href="/blazor/release-notes/18.4.43">18.4.43</a></li><li><a href="/blazor/release-notes/18.4.42">18.4.42</a></li><li><a href="/blazor/release-notes/18.4.41">18.4.41</a></li><li><a href="/blazor/release-notes/18.4.35">18.4.35</a></li><li><a href="/blazor/release-notes/18.4.34">18.4.34</a></li><li><a href="/blazor/release-notes/18.4.33">18.4.33</a></li><li><a href="/blazor/release-notes/18.4.32">18.4.32</a></li><li><a href="/blazor/release-notes/18.4.31">18.4.31</a></li></ul></li><li><a href="/blazor/release-notes/18.4.39">18.4.39 Service Pack Release</a></li><li><a href="/blazor/release-notes/18.4.30">18.4.30 Main Release</a></li></ul></li>
 					<li>2020 volume 3 - 18.3.*<ul><li> Weekly Nuget Release <ul><li><a href="/blazor/release-notes/18.3.53">18.3.53</a></li><li><a href="/blazor/release-notes/18.3.52">18.3.52</a></li><li><a href="/blazor/release-notes/18.3.51">18.3.51</a></li><li><a href="/blazor/release-notes/18.3.50">18.3.50</a></li><li><a href="/blazor/release-notes/18.3.48">18.3.48</a></li><li><a href="/blazor/release-notes/18.3.44">18.3.44</a></li><li><a href="/blazor/release-notes/18.3.42">18.3.42</a></li><li><a href="/blazor/release-notes/18.3.41">18.3.41</a></li><li><a href="/blazor/release-notes/18.3.40">18.3.40</a></li><li><a href="/blazor/release-notes/18.3.38">18.3.38</a></li></ul></li><li><a href="/blazor/release-notes/18.3.47">18.3.47 Service Pack Release</a></li><li><a href="/blazor/release-notes/18.3.35">18.3.35 Main release</a></li></ul></li>
diff --git a/blazor/Release-Notes/30.1.39.md b/blazor/Release-Notes/30.1.39.md
new file mode 100644
index 0000000000..f73ab01ada
--- /dev/null
+++ b/blazor/Release-Notes/30.1.39.md
@@ -0,0 +1,102 @@
+---
+title: Essential Studio for Blazor Weekly Release Release Notes  
+description: Essential Studio for Blazor Weekly Release Release Notes  
+platform: blazor
+documentation: ug
+---
+
+# Essential Studio for Blazor  Release Notes  
+
+{% include release-info.html date="July 08, 2025"  version="v30.1.39" passed="179634" failed="0" %}
+
+{% directory path: _includes/release-notes/v30.1.39 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
+
+## Test Results
+
+| Component Name | Test Cases | Passed | Failed | Remarks |
+|---------------|------------|--------|--------|---------|
+| 3DChart | 202 | 202 | 0 | All Passed |
+| Accordion | 232 | 232 | 0 | All Passed |
+| AiAssistView | 290 | 290 | 0 | All Passed |
+| Appbar | 102 | 102 | 0 | All Passed |
+| Autocomplete | 444 | 444 | 0 | All Passed |
+| Bulletchart | 237 | 237 | 0 | All Passed |
+| Button | 255 | 255 | 0 | All Passed |
+| Calendar | 146 | 146 | 0 | All Passed |
+| Carousel | 174 | 174 | 0 | All Passed |
+| Charts | 3730 | 3730 | 0 | All Passed |
+| ChatUI | 102 | 102 | 0 | All Passed |
+| Chips | 196 | 196 | 0 | All Passed |
+| CircularGauge | 927 | 927 | 0 | All Passed |
+| ColorPicker | 113 | 113 | 0 | All Passed |
+| ComboBox | 568 | 568 | 0 | All Passed |
+| DashboardLayout | 242 | 242 | 0 | All Passed |
+| DataForm | 537 | 537 | 0 | All Passed |
+| DataGrid | 4750 | 4750 | 0 | All Passed |
+| DatePicker | 570 | 570 | 0 | All Passed |
+| DateRangePicker | 364 | 364 | 0 | All Passed |
+| DateTimePicker | 473 | 473 | 0 | All Passed |
+| Diagram | 10094 | 10094 | 0 | All Passed |
+| Dialog | 388 | 388 | 0 | All Passed |
+| DocumentEditor | 3234 | 3234 | 0 | All Passed |
+| DropdownList | 848 | 848 | 0 | All Passed |
+| Dropdowntree | 131 | 131 | 0 | All Passed |
+| FileManager | 3059 | 3059 | 0 | All Passed |
+| FileUpload | 328 | 328 | 0 | All Passed |
+| FloatingActionButton | 128 | 128 | 0 | All Passed |
+| Gantt | 4377 | 4377 | 0 | All Passed |
+| HeatMap | 339 | 339 | 0 | All Passed |
+| ImageEditor | 3561 | 3561 | 0 | All Passed |
+| InPlaceEditor | 763 | 763 | 0 | All Passed |
+| InputMask | 168 | 168 | 0 | All Passed |
+| LinearGauge | 799 | 799 | 0 | All Passed |
+| ListBox | 138 | 138 | 0 | All Passed |
+| ListView | 439 | 439 | 0 | All Passed |
+| Maps | 1578 | 1578 | 0 | All Passed |
+| Mention | 146 | 146 | 0 | All Passed |
+| Message | 242 | 242 | 0 | All Passed |
+| MultiselectDropdown | 361 | 361 | 0 | All Passed |
+| NumericTextbox | 440 | 440 | 0 | All Passed |
+| OtpInput | 123 | 123 | 0 | All Passed |
+| PivotTable | 1361 | 1361 | 0 | All Passed |
+| ProgressBar | 199 | 199 | 0 | All Passed |
+| progressbutton | 101 | 101 | 0 | All Passed |
+| QueryBuilder | 584 | 584 | 0 | All Passed |
+| RangeNavigator | 196 | 196 | 0 | All Passed |
+| Rating | 106 | 106 | 0 | All Passed |
+| Ribbon | 440 | 440 | 0 | All Passed |
+| RichTextEditor | 1828 | 1828 | 0 | All Passed |
+| Scheduler | 5175 | 5175 | 0 | All Passed |
+| SfPdfViewer2 | 11584 | 11584 | 0 | All Passed |
+| Sidebar | 101 | 101 | 0 | All Passed |
+| Signature | 106 | 106 | 0 | All Passed |
+| Skeleton | 247 | 247 | 0 | All Passed |
+| Slider | 200 | 200 | 0 | All Passed |
+| SmithChart | 212 | 212 | 0 | All Passed |
+| SpeechToText | 112 | 112 | 0 | All Passed |
+| SpeedDial | 278 | 278 | 0 | All Passed |
+| Spinner | 184 | 184 | 0 | All Passed |
+| Splitter | 106 | 106 | 0 | All Passed |
+| Stepper | 284 | 284 | 0 | All Passed |
+| StockChart | 211 | 211 | 0 | All Passed |
+| Switch | 724 | 724 | 0 | All Passed |
+| Tabs | 278 | 278 | 0 | All Passed |
+| TextArea | 165 | 165 | 0 | All Passed |
+| Textbox | 698 | 698 | 0 | All Passed |
+| Timeline | 236 | 236 | 0 | All Passed |
+| TimePicker | 343 | 343 | 0 | All Passed |
+| Toast | 262 | 262 | 0 | All Passed |
+| Toolbar | 160 | 160 | 0 | All Passed |
+| Tooltip | 477 | 477 | 0 | All Passed |
+| TreeGrid | 3840 | 3840 | 0 | All Passed |
+| TreeMap | 177 | 177 | 0 | All Passed |
+| TreeView | 574 | 574 | 0 | All Passed |
+| DocIO | 16284 | 16284 | 0 | All Passed |
+| Metafilerenderer | 853 | 853 | 0 | All Passed |
+| PDF | 13114 | 13114 | 0 | All Passed |
+| Presentation | 54261 | 54261 | 0 | All Passed |
+| XlsIO | 17235 | 17235 | 0 | All Passed |
\ No newline at end of file
diff --git a/blazor/Release-Notes/30.1.40.md b/blazor/Release-Notes/30.1.40.md
new file mode 100644
index 0000000000..2571a615a2
--- /dev/null
+++ b/blazor/Release-Notes/30.1.40.md
@@ -0,0 +1,101 @@
+---
+title: Essential Studio for Blazor Weekly Release Release Notes  
+description: Essential Studio for Blazor Weekly Release Release Notes  
+platform: blazor
+documentation: ug
+---
+
+# Essential Studio for Blazor  Release Notes  
+
+{% include release-info.html date="July 15, 2025"  version="v30.1.40" passed="179540" failed="0" %}
+
+{% directory path: _includes/release-notes/v30.1.40 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
+
+## Test Results
+
+| Component Name | Test Cases | Passed | Failed | Remarks |
+|---------------|------------|--------|--------|---------|
+| 3DChart | 202 | 202 | 0 | All Passed |
+| Accordion | 232 | 232 | 0 | All Passed |
+| AiAssistView | 290 | 290 | 0 | All Passed |
+| Appbar | 102 | 102 | 0 | All Passed |
+| Autocomplete | 444 | 444 | 0 | All Passed |
+| Bulletchart | 237 | 237 | 0 | All Passed |
+| Button | 255 | 255 | 0 | All Passed |
+| Calendar | 113 | 113 | 0 | All Passed |
+| Carousel | 174 | 174 | 0 | All Passed |
+| Charts | 3730 | 3730 | 0 | All Passed |
+| ChatUI | 102 | 102 | 0 | All Passed |
+| Chips | 194 | 194 | 0 | All Passed |
+| CircularGauge | 927 | 927 | 0 | All Passed |
+| ColorPicker | 113 | 113 | 0 | All Passed |
+| ComboBox | 271 | 271 | 0 | All Passed |
+| DashboardLayout | 246 | 246 | 0 | All Passed |
+| DataForm | 544 | 544 | 0 | All Passed |
+| DataGrid | 4827 | 4827 | 0 | All Passed |
+| DatePicker | 572 | 572 | 0 | All Passed |
+| DateRangePicker | 365 | 365 | 0 | All Passed |
+| DateTimePicker | 473 | 473 | 0 | All Passed |
+| Diagram | 10094 | 10094 | 0 | All Passed |
+| DocumentEditor | 3234 | 3234 | 0 | All Passed |
+| DropdownList | 852 | 852 | 0 | All Passed |
+| Dropdowntree | 131 | 131 | 0 | All Passed |
+| FileManager | 2730 | 2730 | 0 | All Passed |
+| FileUpload | 328 | 328 | 0 | All Passed |
+| FloatingActionButton | 128 | 128 | 0 | All Passed |
+| Gantt | 4056 | 4056 | 0 | All Passed |
+| HeatMap | 339 | 339 | 0 | All Passed |
+| ImageEditor | 3561 | 3561 | 0 | All Passed |
+| InPlaceEditor | 763 | 763 | 0 | All Passed |
+| InputMask | 168 | 168 | 0 | All Passed |
+| Kanban | 330 | 330 | 0 | All Passed |
+| LinearGauge | 799 | 799 | 0 | All Passed |
+| ListBox | 138 | 138 | 0 | All Passed |
+| ListView | 439 | 439 | 0 | All Passed |
+| Maps | 1578 | 1578 | 0 | All Passed |
+| Mention | 146 | 146 | 0 | All Passed |
+| Message | 242 | 242 | 0 | All Passed |
+| MultiselectDropdown | 376 | 376 | 0 | All Passed |
+| OtpInput | 123 | 123 | 0 | All Passed |
+| PivotTable | 1361 | 1361 | 0 | All Passed |
+| ProgressBar | 198 | 198 | 0 | All Passed |
+| progressbutton | 101 | 101 | 0 | All Passed |
+| QueryBuilder | 584 | 584 | 0 | All Passed |
+| RangeNavigator | 196 | 196 | 0 | All Passed |
+| Rating | 106 | 106 | 0 | All Passed |
+| Ribbon | 440 | 440 | 0 | All Passed |
+| RichTextEditor | 1848 | 1848 | 0 | All Passed |
+| Scheduler | 5178 | 5178 | 0 | All Passed |
+| SfPdfViewer2 | 11688 | 11688 | 0 | All Passed |
+| Sidebar | 102 | 102 | 0 | All Passed |
+| Signature | 106 | 106 | 0 | All Passed |
+| Skeleton | 247 | 247 | 0 | All Passed |
+| Slider | 200 | 200 | 0 | All Passed |
+| SmithChart | 212 | 212 | 0 | All Passed |
+| SpeechToText | 112 | 112 | 0 | All Passed |
+| SpeedDial | 278 | 278 | 0 | All Passed |
+| Spinner | 184 | 184 | 0 | All Passed |
+| Splitter | 106 | 106 | 0 | All Passed |
+| Stepper | 285 | 285 | 0 | All Passed |
+| StockChart | 211 | 211 | 0 | All Passed |
+| Switch | 724 | 724 | 0 | All Passed |
+| Tabs | 282 | 282 | 0 | All Passed |
+| TextArea | 107 | 107 | 0 | All Passed |
+| Textbox | 698 | 698 | 0 | All Passed |
+| Timeline | 236 | 236 | 0 | All Passed |
+| TimePicker | 343 | 343 | 0 | All Passed |
+| Toast | 262 | 262 | 0 | All Passed |
+| Toolbar | 160 | 160 | 0 | All Passed |
+| Tooltip | 478 | 478 | 0 | All Passed |
+| TreeGrid | 3987 | 3987 | 0 | All Passed |
+| TreeMap | 177 | 177 | 0 | All Passed |
+| TreeView | 1566 | 1566 | 0 | All Passed |
+| DocIO | 16336 | 16336 | 0 | All Passed |
+| Metafilerenderer | 853 | 853 | 0 | All Passed |
+| PDF | 13121 | 13121 | 0 | All Passed |
+| Presentation | 54264 | 54264 | 0 | All Passed |
+| XlsIO | 17235 | 17235 | 0 | All Passed |
\ No newline at end of file
diff --git a/blazor/Release-Notes/30.1.41.md b/blazor/Release-Notes/30.1.41.md
new file mode 100644
index 0000000000..3455d52132
--- /dev/null
+++ b/blazor/Release-Notes/30.1.41.md
@@ -0,0 +1,100 @@
+---
+title: Essential Studio for Blazor Weekly Release Release Notes  
+description: Essential Studio for Blazor Weekly Release Release Notes  
+platform: blazor
+documentation: ug
+---
+
+# Essential Studio for Blazor  Release Notes  
+
+{% include release-info.html date="July 22, 2025"  version="v30.1.41" passed="176345" failed="0" %}
+
+{% directory path: _includes/release-notes/v30.1.41 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
+
+## Test Results
+
+| Component Name | Test Cases | Passed | Failed | Remarks |
+|---------------|------------|--------|--------|---------|
+| 3DChart | 202 | 202 | 0 | All Passed |
+| Accordion | 232 | 232 | 0 | All Passed |
+| AiAssistView | 290 | 290 | 0 | All Passed |
+| Appbar | 102 | 102 | 0 | All Passed |
+| Autocomplete | 444 | 444 | 0 | All Passed |
+| Bulletchart | 237 | 237 | 0 | All Passed |
+| Button | 255 | 255 | 0 | All Passed |
+| Calendar | 113 | 113 | 0 | All Passed |
+| Carousel | 174 | 174 | 0 | All Passed |
+| Charts | 3845 | 3845 | 0 | All Passed |
+| ChatUI | 102 | 102 | 0 | All Passed |
+| Chips | 194 | 194 | 0 | All Passed |
+| CircularGauge | 927 | 927 | 0 | All Passed |
+| ColorPicker | 113 | 113 | 0 | All Passed |
+| ComboBox | 271 | 271 | 0 | All Passed |
+| DashboardLayout | 229 | 229 | 0 | All Passed |
+| DataForm | 544 | 544 | 0 | All Passed |
+| DataGrid | 4888 | 4888 | 0 | All Passed |
+| DatePicker | 572 | 572 | 0 | All Passed |
+| DateRangePicker | 365 | 365 | 0 | All Passed |
+| DateTimePicker | 473 | 473 | 0 | All Passed |
+| Diagram | 10102 | 10102 | 0 | All Passed |
+| Dialog | 388 | 388 | 0 | All Passed |
+| DocumentEditor | 3234 | 3234 | 0 | All Passed |
+| DropdownList | 852 | 852 | 0 | All Passed |
+| Dropdowntree | 131 | 131 | 0 | All Passed |
+| FileManager | 3031 | 3031 | 0 | All Passed |
+| FileUpload | 328 | 328 | 0 | All Passed |
+| Gantt | 1462 | 1462 | 0 | All Passed |
+| HeatMap | 339 | 339 | 0 | All Passed |
+| ImageEditor | 3561 | 3561 | 0 | All Passed |
+| InPlaceEditor | 763 | 763 | 0 | All Passed |
+| InputMask | 168 | 168 | 0 | All Passed |
+| Kanban | 330 | 330 | 0 | All Passed |
+| LinearGauge | 799 | 799 | 0 | All Passed |
+| ListBox | 138 | 138 | 0 | All Passed |
+| ListView | 439 | 439 | 0 | All Passed |
+| Maps | 1578 | 1578 | 0 | All Passed |
+| Mention | 146 | 146 | 0 | All Passed |
+| Message | 242 | 242 | 0 | All Passed |
+| MultiselectDropdown | 376 | 376 | 0 | All Passed |
+| NumericTextbox | 440 | 440 | 0 | All Passed |
+| OtpInput | 123 | 123 | 0 | All Passed |
+| PivotTable | 1361 | 1361 | 0 | All Passed |
+| ProgressBar | 198 | 198 | 0 | All Passed |
+| progressbutton | 101 | 101 | 0 | All Passed |
+| QueryBuilder | 109 | 109 | 0 | All Passed |
+| RangeNavigator | 196 | 196 | 0 | All Passed |
+| Rating | 106 | 106 | 0 | All Passed |
+| Ribbon | 440 | 440 | 0 | All Passed |
+| RichTextEditor | 1873 | 1873 | 0 | All Passed |
+| Scheduler | 4876 | 4876 | 0 | All Passed |
+| SfPdfViewer2 | 11688 | 11688 | 0 | All Passed |
+| Sidebar | 102 | 102 | 0 | All Passed |
+| Signature | 106 | 106 | 0 | All Passed |
+| Skeleton | 247 | 247 | 0 | All Passed |
+| Slider | 156 | 156 | 0 | All Passed |
+| SmithChart | 212 | 212 | 0 | All Passed |
+| SpeechToText | 112 | 112 | 0 | All Passed |
+| Spinner | 184 | 184 | 0 | All Passed |
+| Splitter | 105 | 105 | 0 | All Passed |
+| Stepper | 285 | 285 | 0 | All Passed |
+| StockChart | 211 | 211 | 0 | All Passed |
+| Switch | 724 | 724 | 0 | All Passed |
+| Tabs | 282 | 282 | 0 | All Passed |
+| TextArea | 165 | 165 | 0 | All Passed |
+| Textbox | 698 | 698 | 0 | All Passed |
+| TimePicker | 343 | 343 | 0 | All Passed |
+| Toast | 262 | 262 | 0 | All Passed |
+| Toolbar | 160 | 160 | 0 | All Passed |
+| Tooltip | 463 | 463 | 0 | All Passed |
+| TreeGrid | 3888 | 3888 | 0 | All Passed |
+| TreeMap | 177 | 177 | 0 | All Passed |
+| TreeView | 1563 | 1563 | 0 | All Passed |
+| DocIO | 16348 | 16348 | 0 | All Passed |
+| Metafilerenderer | 853 | 853 | 0 | All Passed |
+| PDF | 12710 | 12710 | 0 | All Passed |
+| Presentation | 54264 | 54264 | 0 | All Passed |
+| XlsIO | 17235 | 17235 | 0 | All Passed |
\ No newline at end of file
diff --git a/blazor/Release-Notes/30.1.42.md b/blazor/Release-Notes/30.1.42.md
new file mode 100644
index 0000000000..d6150993a7
--- /dev/null
+++ b/blazor/Release-Notes/30.1.42.md
@@ -0,0 +1,101 @@
+---
+title: Essential Studio for Blazor Weekly Release Release Notes  
+description: Essential Studio for Blazor Weekly Release Release Notes  
+platform: blazor
+documentation: ug
+---
+
+# Essential Studio for Blazor  Release Notes  
+
+{% include release-info.html date="July 29, 2025"  version="v30.1.42" passed="179669" failed="0" %}
+
+{% directory path: _includes/release-notes/v30.1.42 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
+
+## Test Results
+
+| Component Name | Test Cases | Passed | Failed | Remarks |
+|---------------|------------|--------|--------|---------|
+| 3DChart | 202 | 202 | 0 | All Passed |
+| Accordion | 232 | 232 | 0 | All Passed |
+| AiAssistView | 303 | 303 | 0 | All Passed |
+| Appbar | 102 | 102 | 0 | All Passed |
+| Autocomplete | 444 | 444 | 0 | All Passed |
+| Bulletchart | 237 | 237 | 0 | All Passed |
+| Button | 255 | 255 | 0 | All Passed |
+| Calendar | 146 | 146 | 0 | All Passed |
+| Carousel | 174 | 174 | 0 | All Passed |
+| Charts | 3845 | 3845 | 0 | All Passed |
+| ChatUI | 102 | 102 | 0 | All Passed |
+| Chips | 196 | 196 | 0 | All Passed |
+| CircularGauge | 927 | 927 | 0 | All Passed |
+| ColorPicker | 113 | 113 | 0 | All Passed |
+| ComboBox | 541 | 541 | 0 | All Passed |
+| DashboardLayout | 229 | 229 | 0 | All Passed |
+| DataForm | 547 | 547 | 0 | All Passed |
+| DataGrid | 4896 | 4896 | 0 | All Passed |
+| DatePicker | 572 | 572 | 0 | All Passed |
+| DateRangePicker | 365 | 365 | 0 | All Passed |
+| DateTimePicker | 474 | 474 | 0 | All Passed |
+| Diagram | 10103 | 10103 | 0 | All Passed |
+| Dialog | 388 | 388 | 0 | All Passed |
+| DocumentEditor | 1929 | 1929 | 0 | All Passed |
+| DropdownList | 852 | 852 | 0 | All Passed |
+| Dropdowntree | 131 | 131 | 0 | All Passed |
+| FileManager | 3034 | 3034 | 0 | All Passed |
+| FileUpload | 328 | 328 | 0 | All Passed |
+| Gantt | 4471 | 4471 | 0 | All Passed |
+| HeatMap | 337 | 337 | 0 | All Passed |
+| ImageEditor | 3561 | 3561 | 0 | All Passed |
+| InPlaceEditor | 763 | 763 | 0 | All Passed |
+| InputMask | 168 | 168 | 0 | All Passed |
+| Kanban | 330 | 330 | 0 | All Passed |
+| LinearGauge | 799 | 799 | 0 | All Passed |
+| ListBox | 138 | 138 | 0 | All Passed |
+| ListView | 439 | 439 | 0 | All Passed |
+| Maps | 1570 | 1570 | 0 | All Passed |
+| Mention | 146 | 146 | 0 | All Passed |
+| Message | 242 | 242 | 0 | All Passed |
+| MultiselectDropdown | 289 | 289 | 0 | All Passed |
+| NumericTextbox | 440 | 440 | 0 | All Passed |
+| OtpInput | 123 | 123 | 0 | All Passed |
+| PivotTable | 1361 | 1361 | 0 | All Passed |
+| ProgressBar | 198 | 198 | 0 | All Passed |
+| progressbutton | 101 | 101 | 0 | All Passed |
+| QueryBuilder | 584 | 584 | 0 | All Passed |
+| RangeNavigator | 196 | 196 | 0 | All Passed |
+| Rating | 106 | 106 | 0 | All Passed |
+| Ribbon | 440 | 440 | 0 | All Passed |
+| RichTextEditor | 2141 | 2141 | 0 | All Passed |
+| Scheduler | 5178 | 5178 | 0 | All Passed |
+| SfPdfViewer2 | 11688 | 11688 | 0 | All Passed |
+| Sidebar | 105 | 105 | 0 | All Passed |
+| Signature | 106 | 106 | 0 | All Passed |
+| Skeleton | 247 | 247 | 0 | All Passed |
+| Slider | 200 | 200 | 0 | All Passed |
+| SmithChart | 212 | 212 | 0 | All Passed |
+| SpeechToText | 112 | 112 | 0 | All Passed |
+| Spinner | 184 | 184 | 0 | All Passed |
+| Splitter | 103 | 103 | 0 | All Passed |
+| Stepper | 285 | 285 | 0 | All Passed |
+| StockChart | 211 | 211 | 0 | All Passed |
+| Switch | 724 | 724 | 0 | All Passed |
+| Tabs | 282 | 282 | 0 | All Passed |
+| TextArea | 165 | 165 | 0 | All Passed |
+| Textbox | 698 | 698 | 0 | All Passed |
+| Timeline | 236 | 236 | 0 | All Passed |
+| TimePicker | 344 | 344 | 0 | All Passed |
+| Toast | 262 | 262 | 0 | All Passed |
+| Toolbar | 160 | 160 | 0 | All Passed |
+| Tooltip | 478 | 478 | 0 | All Passed |
+| TreeGrid | 3852 | 3852 | 0 | All Passed |
+| TreeMap | 177 | 177 | 0 | All Passed |
+| TreeView | 1563 | 1563 | 0 | All Passed |
+| DocIO | 16352 | 16352 | 0 | All Passed |
+| Metafilerenderer | 863 | 863 | 0 | All Passed |
+| PDF | 12737 | 12737 | 0 | All Passed |
+| Presentation | 54266 | 54266 | 0 | All Passed |
+| XlsIO | 17269 | 17269 | 0 | All Passed |
\ No newline at end of file
diff --git a/blazor/Release-Notes/30.2.4.md b/blazor/Release-Notes/30.2.4.md
new file mode 100644
index 0000000000..0e35efae72
--- /dev/null
+++ b/blazor/Release-Notes/30.2.4.md
@@ -0,0 +1,16 @@
+---
+title: Essential Studio for Blazor Weekly Release Release Notes  
+description: Essential Studio for Blazor Weekly Release Release Notes  
+platform: blazor
+documentation: ug
+---
+
+# Essential Studio for Blazor  Release Notes  
+
+{% include release-info.html date="August 07, 2025"  version="v30.2.4" %}
+
+{% directory path: _includes/release-notes/v30.2.4 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
\ No newline at end of file
diff --git a/blazor/Release-Notes/30.2.5.md b/blazor/Release-Notes/30.2.5.md
new file mode 100644
index 0000000000..3a60a33dd3
--- /dev/null
+++ b/blazor/Release-Notes/30.2.5.md
@@ -0,0 +1,16 @@
+---
+title: Essential Studio for Blazor Weekly Release Release Notes  
+description: Essential Studio for Blazor Weekly Release Release Notes  
+platform: blazor
+documentation: ug
+---
+
+# Essential Studio for Blazor  Release Notes  
+
+{% include release-info.html date="August 12, 2025"  version="v30.2.5" %}
+
+{% directory path: _includes/release-notes/v30.2.5 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
\ No newline at end of file
diff --git a/blazor/accumulation-chart/center-label.md b/blazor/accumulation-chart/center-label.md
index e35b8a4c00..4fd6f7ff7c 100644
--- a/blazor/accumulation-chart/center-label.md
+++ b/blazor/accumulation-chart/center-label.md
@@ -9,9 +9,9 @@ documentation: ug
 
 # Center Label in Blazor Pie and Donut Chart Component
 
-The center label feature allows you to place custom text in the middle of pie and donut charts using the `AccumulationChartCenterLabel`. This is especially useful for displaying the chart's title, percentage distribution, or other key metrics pertinent to the visualized data.
+The center label feature allows you to place custom text in the middle of pie and donut charts using the [AccumulationChartCenterLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartCenterLabel.html). This is especially useful for displaying the chart's title, percentage distribution, or other key metrics pertinent to the visualized data.
 
-You can configure the text that appears in the center using the `Text` property within the `AccumulationChartCenterLabel`.
+You can configure the text that appears in the center using the [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartCenterLabel.html#Syncfusion_Blazor_Charts_AccumulationChartCenterLabel_Text) property within the `AccumulationChartCenterLabel`.
 
 ```cshtml
 @using Syncfusion.Blazor.Charts
@@ -45,10 +45,11 @@ You can configure the text that appears in the center using the `Text` property
 }
 ```
 ![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" %}
 
 ## Hover Text
 
-The center label text can be dynamically updated when hovering over pie or donut chart slices using the `HoverTextFormat` property. This interactive feature enhances user engagement by offering relevant information about specific segments during the exploration of the visualization.
+The center label text can be dynamically updated when hovering over pie or donut chart slices using the [HoverTextFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartCenterLabel.html#Syncfusion_Blazor_Charts_AccumulationChartCenterLabel_HoverTextFormat) property. This interactive feature enhances user engagement by offering relevant information about specific segments during the exploration of the visualization.
 
 N> Line breaks can be provided to texts in the `HoverTextFormat` property using the `<br>` tag.
 
@@ -84,12 +85,13 @@ N> Line breaks can be provided to texts in the `HoverTextFormat` property using
 }
 ```
 ![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" %}
 
 ## Customization
 
-The appearance of the center label can be customized by using the `AccumulationChartCenterLabelFont`, which allows you to modify font properties such as size, font-family, font-style, font-weight, and color to enhance the visual presentation of the text displayed in the center of the chart.
+The appearance of the center label can be customized by using the [AccumulationChartCenterLabelFont](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartCenterLabelFont.html), which allows you to modify font properties such as size, font-family, font-style, font-weight, and color to enhance the visual presentation of the text displayed in the center of the chart.
 
-The position of the center label can be adjusted using the `XOffset` and `YOffset` properties in the `AccumulationChartCenterLabel`.
+The position of the center label can be adjusted using the [XOffset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartCenterLabel.html#Syncfusion_Blazor_Charts_AccumulationChartCenterLabel_XOffset) and [YOffset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartCenterLabel.html#Syncfusion_Blazor_Charts_AccumulationChartCenterLabel_YOffset) properties in the `AccumulationChartCenterLabel`.
 
 ```cshtml
 @using Syncfusion.Blazor.Charts
@@ -124,6 +126,7 @@ The position of the center label can be adjusted using the `XOffset` and `YOffse
 }
 ```
 ![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" %}
 
 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-types/funnel.md b/blazor/accumulation-chart/chart-types/funnel.md
index fae0ce13e0..cdb5b2934b 100644
--- a/blazor/accumulation-chart/chart-types/funnel.md
+++ b/blazor/accumulation-chart/chart-types/funnel.md
@@ -269,7 +269,7 @@ Labels will be arranged automatically on the left side of the funnel and pyramid
 
 ## Border radius
 
-The corners of the first data point and last data point in the funnel chart series can be rounded using the `BorderRadius` property within the [AccumulationChartSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html).
+The corners of the first data point and last data point in the funnel chart series can be rounded using the [BorderRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_BorderRadius) property within the [AccumulationChartSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html).
 
 ```cshtml
 @using Syncfusion.Blazor.Charts
@@ -306,6 +306,7 @@ The corners of the first data point and last data point in the funnel chart seri
 }
 ```
 ![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" %}
 
 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 22785f52d0..403b034c9c 100644
--- a/blazor/accumulation-chart/chart-types/pie-doughnut.md
+++ b/blazor/accumulation-chart/chart-types/pie-doughnut.md
@@ -306,7 +306,7 @@ The [StartAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.
 
 ## Border radius
 
-The corners of all the slices in the pie/donut chart series can be rounded using the `BorderRadius` property within the [AccumulationChartSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html).
+The corners of all the slices in the pie/donut chart series can be rounded using the [BorderRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_BorderRadius) property within the [AccumulationChartSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html).
 
 ```cshtml
 @using Syncfusion.Blazor.Charts
@@ -337,6 +337,7 @@ The corners of all the slices in the pie/donut chart series can be rounded using
 }
 ```
 ![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" %}
 
 ## Hide pie or doughnut border
 
diff --git a/blazor/accumulation-chart/chart-types/pyramid.md b/blazor/accumulation-chart/chart-types/pyramid.md
index d5bdd8f381..57f85bdded 100644
--- a/blazor/accumulation-chart/chart-types/pyramid.md
+++ b/blazor/accumulation-chart/chart-types/pyramid.md
@@ -215,7 +215,7 @@ By setting the [Explode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor
 
 ## Border radius
 
-The corners of the first data point and last data point in the pyramid chart series can be rounded using the `BorderRadius` property within the [AccumulationChartSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html).
+The corners of the first data point and last data point in the pyramid chart series can be rounded using the [BorderRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_BorderRadius) property within the [AccumulationChartSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html).
 
 ```cshtml
 @using Syncfusion.Blazor.Charts
@@ -250,6 +250,7 @@ The corners of the first data point and last data point in the pyramid chart ser
 }
 ```
 ![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" %}
 
 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/ai/azure-openai.md b/blazor/ai/azure-openai.md
index 4c2c72e7a9..d83fadaca6 100644
--- a/blazor/ai/azure-openai.md
+++ b/blazor/ai/azure-openai.md
@@ -7,25 +7,39 @@ control: AI Integration
 documentation: ug
 ---
 
-# Using Azure OpenAI with Syncfusion Blazor AI package
+# Azure OpenAI Integration with Syncfusion Blazor AI
 
-This section helps to configuring and using the **Syncfusion.Blazor.AI** package with **Azure OpenAI** to enable AI functionalities in your Blazor applications. The package provides seamless integration with Azure OpenAI's API, allowing you to enhance any Syncfusion Blazor component with intelligent features.
+This section explains how to configure and use the [Syncfusion.Blazor.AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) package with [Azure OpenAI](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource) to enable AI functionalities in your Blazor applications. The package provides seamless integration with Azure OpenAI's API, allowing you to enhance any Syncfusion Blazor component with intelligent features.
 
 ## Prerequisites
-- Install the following NuGet packages:
-  - `Syncfusion.Blazor.AI`
-  - `Azure.AI.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 `apiKey`, `deploymentName` and `endpoint` will all be provided to you.
-- Ensure your Blazor application meets the [System Requirements](https://blazor.syncfusion.com/documentation/system-requirements).
 
-## Configuration
-To use Azure OpenAI, configure the AI service in your `Program.cs` file by registering the `AIServiceCredentials` and `IChatInferenceService`.
+Before you begin integrating Azure OpenAI with your Blazor application, ensure you have:
+
+* Installed the [Syncfusion.Blazor.AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) package via NuGet
+{% tabs %}
+{% highlight C# tabtitle="Package Manager" %}
 
-### Steps
-1. Open your Blazor application's `Program.cs`.
-2. Add the following code to configure Azure OpenAI credentials:
+Install-Package Syncfusion.Blazor.AI -Version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+* To use Azure OpenAI, please install the [Azure.AI.OpenAI](https://www.nuget.org/packages/Azure.AI.OpenAI/2.2.0-beta.5) package separately in your Blazor application.
+* [Deployed an Azure OpenAI Service resource and model](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource) to obtain values for `apiKey`, `deploymentName` and `endpoint`
+* Met the [System Requirements](https://blazor.syncfusion.com/documentation/system-requirements) for Syncfusion Blazor components
+
+## Configuration Steps
+
+Follow these steps to configure Azure OpenAI as your AI provider:
+
+### Register AI Services in Program.cs
+
+Open your Blazor application's `Program.cs` file and add the following configuration:
 
 ```csharp
+// Add required namespaces
+using Syncfusion.Blazor.AI;
+
+// Register Azure OpenAI credentials
 builder.Services.AddSingleton(new AIServiceCredentials
 {
     ApiKey = "your-azure-openai-key", // Replace with your Azure OpenAI API key
@@ -33,26 +47,27 @@ builder.Services.AddSingleton(new AIServiceCredentials
     Endpoint = new Uri("https://your-openai.azure.com/") // Replace with your Azure OpenAI endpoint
 });
 
-// Register the inference backend
+// Register the inference service
 builder.Services.AddSingleton<IChatInferenceService, SyncfusionAIService>();
 ```
 
-3. Ensure the required Syncfusion Blazor namespaces are included in your `Program.cs`:
-```csharp
-using Syncfusion.Blazor.AI;
-```
-
-## Example: Syncfusion Query Builder with Azure OpenAI in a Blazor Application
+## Natural Language Querying with Azure OpenAI
 
 This example demonstrates using the **Syncfusion.Blazor.AI** package with **Azure OpenAI** to enable natural language querying in a Blazor application. The application features a Syncfusion Tab component with a textarea for entering natural language queries, a QueryBuilder component to visualize the generated query rules, and a Grid component to display filtered results based on the query processed by Azure OpenAI.
 
 ### Prerequisites
 - Install the following NuGet packages:
-  - `Syncfusion.Blazor.Grid`
-  - `Syncfusion.Blazor.Themes`
-  - `Syncfusion.Blazor.AI`
-  - `Syncfusion.Blazor.QueryBuilder`
-  - `Azure.AI.OpenAI`
+{% tabs %}
+{% highlight C# tabtitle="Package Manager" %}
+
+Install-Package Syncfusion.Blazor.Grid -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.AI -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.QueryBuilder -Version {{ site.releaseversion }}
+Install-Package Azure.AI.OpenAI
+
+{% endhighlight %}
+{% endtabs %}
 - Ensure your Blazor application meets the [System Requirements](https://blazor.syncfusion.com/documentation/system-requirements).
 - Add the following to `App.razor` for Syncfusion themes and scripts:
   
@@ -68,23 +83,60 @@ This example demonstrates using the **Syncfusion.Blazor.AI** package with **Azur
 </body>
 ```
 
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App.
+### Register Syncfusion Blazor Service
+
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
+
+If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in both **~/Program.cs** files of your Blazor Web App.
 
 {% tabs %}
-{% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
+{% highlight c# tabtitle="Server(~/_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");
+var builder = WebApplication.CreateBuilder(args);
 
-builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
+// Add services to the container.
+builder.Services.AddRazorComponents()
+    .AddInteractiveServerComponents()
+    .AddInteractiveWebAssemblyComponents();
+builder.Services.AddSyncfusionBlazor();
+
+var app = builder.Build();
+....
+
+{% endhighlight %}
+{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %}
+
+...
+using Syncfusion.Blazor;
 
+var builder = WebAssemblyHostBuilder.CreateDefault(args);
 builder.Services.AddSyncfusionBlazor();
+
 await builder.Build().RunAsync();
+
+{% endhighlight %}
+{% endtabs %}
+
+If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service only in that **~/Program.cs** file.
+
+{% tabs %}
+{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %}
+
+...
+using Syncfusion.Blazor;
+
+var builder = WebApplication.CreateBuilder(args);
+
+// Add services to the container.
+builder.Services.AddRazorComponents()
+    .AddInteractiveServerComponents();
+builder.Services.AddSyncfusionBlazor();
+
+var app = builder.Build();
 ....
 
 {% endhighlight %}
@@ -289,9 +341,18 @@ namespace AzureOpenAIExample.Components.Pages
 
 ![Natural Query Language - Output](images/natural-languagequery.gif)
 
-### Explanation
-- **IChatInferenceService**: Injected to interact with the OpenAI service.
-- **ChatParameters**: Configures the AI request, including system and user messages, temperature, and token limits.
-- **GenerateResponseAsync**: Sends the request to OpenAI and retrieves the response asynchronously.
-- **Response**: Displays the AI-generated text.
+## How It Works
+
+The example above demonstrates how to use Azure OpenAI with Syncfusion Blazor components for natural language query processing:
+
+1. **Setup**: Configuring the Azure OpenAI service in `Program.cs` with appropriate credentials.
+2. **Component Integration**: Using the `IChatInferenceService` to process natural language queries.
+3. **Prompt Engineering**: Creating appropriate prompts for the AI model to convert natural language to SQL.
+4. **Response Processing**: Parsing the SQL response and applying it to the QueryBuilder component.
+
+### Key Components
 
+- **IChatInferenceService**: Injected to interact with the Azure OpenAI models.
+- **ChatParameters**: Configures the AI request, including system prompt and user messages.
+- **GenerateResponseAsync**: Sends the request to Azure OpenAI and retrieves the response asynchronously.
+- **UI Components**: Syncfusion Tab, QueryBuilder, and Grid components work together with the AI service.
diff --git a/blazor/ai/custom-ai-service.md b/blazor/ai/custom-ai-service.md
index 7be1184a51..7b0993f03e 100644
--- a/blazor/ai/custom-ai-service.md
+++ b/blazor/ai/custom-ai-service.md
@@ -7,20 +7,29 @@ control: AI Integration
 documentation: ug
 ---
 
-# Using Custom AI Services with Syncfusion Blazor AI package (DeepSeek Example)
+# Custom AI Service Integration with Syncfusion Blazor AI
 
-This section helps to configuring and using the **Syncfusion.Blazor.AI** package with a **custom AI service** by implementing the `IChatInferenceService` interface, using DeepSeek as an example. This extensibility allows you to integrate DeepSeek or any custom AI provider into your Blazor applications, enhancing Syncfusion Blazor components with tailored AI functionalities.
+This section explains how to configure and use the [Syncfusion.Blazor.AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) package with a **custom AI service** by implementing the `IChatInferenceService` interface, using DeepSeek as an example. This extensibility allows you to integrate DeepSeek or any custom AI provider into your Blazor applications, enhancing Syncfusion Blazor components with tailored AI functionalities.
 
 ## Prerequisites
-- Install the **Syncfusion.Blazor.AI** NuGet package.
-- Obtain a DeepSeek API key from the [DeepSeek platform](https://platform.deepseek.com).
-- Ensure your Blazor application meets the [System Requirements](https://blazor.syncfusion.com/documentation/system-requirements).
 
-## Configuration
+Before you begin integrating a custom AI service with your Blazor application, ensure you have:
+
+* Installed the [Syncfusion.Blazor.AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) package via NuGet
+{% tabs %}
+{% highlight C# tabtitle="Package Manager" %}
+
+Install-Package Syncfusion.Blazor.AI -Version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+* Obtained a DeepSeek API key from the [DeepSeek platform](https://platform.deepseek.com) (or your preferred AI provider)
+* Met the [System Requirements](https://blazor.syncfusion.com/documentation/system-requirements) for Syncfusion Blazor components
+
+## Configuration Steps
 To use DeepSeek as a custom AI service, implement the `IChatInferenceService` interface and configure it in your `Program.cs` file using `AIServiceCredentials` to provide the API key, deployment name, and endpoint.
 
-### Steps
-1. **Implement the Custom AI Service**:
+### Implement the Custom AI Service
    Create a class that implements the `IChatInferenceService` interface for DeepSeek. The implementation below uses the provided DeepSeek code, modified to utilize `AIServiceCredentials` from `Program.cs`.
 
 ```csharp
@@ -68,10 +77,13 @@ public class DeepSeekAIService : IChatInferenceService
 }
 ```
 
-2. **Register the Custom AI Service**:
+### Register the Custom AI Service
+
    Open your Blazor application's `Program.cs` and configure the DeepSeek AI service with `AIServiceCredentials`.
 
 ```csharp
+using Syncfusion.Blazor.AI;
+
 builder.Services.AddSingleton(new AIServiceCredentials
 {
     ApiKey = "your-deepseek-api-key", // Replace with your DeepSeek API key
@@ -82,12 +94,5 @@ builder.Services.AddSingleton(new AIServiceCredentials
 builder.Services.AddSingleton<IChatInferenceService, DeepSeekAIService>();
 ```
 
-3. **Include Required Namespaces**:
-   Ensure the required Syncfusion Blazor namespaces are included in your `Program.cs`:
-
-```csharp
-using Syncfusion.Blazor.AI;
-```
-
-
 
+The `GenerateResponseAsync` method in the DeepSeekAIService class is the core method that makes an AI call to the DeepSeek API endpoint.
diff --git a/blazor/ai/ollama.md b/blazor/ai/ollama.md
index 875697ee1e..822cda6393 100644
--- a/blazor/ai/ollama.md
+++ b/blazor/ai/ollama.md
@@ -7,29 +7,41 @@ control: AI Integration
 documentation: ug
 ---
 
-# Using Ollama with Syncfusion Blazor AI package
+# Ollama Integration with Syncfusion Blazor AI
 
-This section helps to configuring and using the **Syncfusion.Blazor.AI** package with **Ollama** to enable AI functionalities in your Blazor applications. The package provides seamless integration with Ollama's locally hosted AI models, allowing you to enhance any Syncfusion Blazor component with intelligent features.
+This section explains how to configure and use the [Syncfusion.Blazor.AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) package with [Ollama](https://ollama.com/) to enable AI functionalities in your Blazor applications. The package provides seamless integration with Ollama's locally hosted AI models, allowing you to enhance any Syncfusion Blazor component with intelligent features.
 
 ## Prerequisites
-- Install the following NuGet package:
-  - `Syncfusion.Blazor.AI`
-- Install **Ollama** on your local system (no virtual machines) following the instructions at [Ollama's official site](https://ollama.com/).
-- Download an Ollama model (e.g., `llama2`) using the command:
+
+Before you begin integrating Ollama with your Blazor application, ensure you have:
+
+* Installed the [Syncfusion.Blazor.AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) package via NuGet
+{% tabs %}
+{% highlight C# tabtitle="Package Manager" %}
+
+Install-Package Syncfusion.Blazor.AI -Version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+* Installed **Ollama** on your local system (no virtual machines) following the instructions at [Ollama's official site](https://ollama.com/)
+* Downloaded an Ollama model (e.g., `llama2`) using the command:
   ```bash
   ollama run llama2
   ```
+* Met the [System Requirements](https://blazor.syncfusion.com/documentation/system-requirements) for Syncfusion Blazor components.
 
-- Ensure your Blazor application meets the [System Requirements](https://blazor.syncfusion.com/documentation/system-requirements).
+## Configuration Steps
+
+Follow these steps to configure Azure OpenAI as your AI provider:
 
-## Configuration
-To use Ollama, configure the AI service in your `Program.cs` file by registering the `AIServiceCredentials` and `IChatInferenceService`.
+### Register AI Services in Program.cs
 
-### Steps
-1. Open your Blazor application's `Program.cs`.
-2. Add the following code to configure Ollama credentials:
+Open your Blazor application's `Program.cs` file and add the following configuration:
 
 ```csharp
+// Add required namespaces
+using Syncfusion.Blazor.AI;
+
 builder.Services.AddSingleton(new AIServiceCredentials
 {
     DeploymentName = "llama2", // Specify the Ollama model (e.g., "llama2", "mistral", "codellama")
@@ -41,22 +53,23 @@ builder.Services.AddSingleton(new AIServiceCredentials
 builder.Services.AddSingleton<IChatInferenceService, SyncfusionAIService>();
 ```
 
-3. Ensure the required Syncfusion Blazor namespaces are included in your `Program.cs`:
-```csharp
-using Syncfusion.Blazor.AI;
-```
-
-## Example: Syncfusion Tree Grid with Azure OpenAI in a Blazor Application
+##  Smart Data Restructuring with Ollama and TreeGrid
 
 This example demonstrates using the **Syncfusion.Blazor.AI** package with **Ollama** to perform smart data restructuring in a Syncfusion Blazor TreeGrid component. The application organizes hierarchical data by leveraging Ollama to assign appropriate `ParentId` values based on `CategoryName` relationships, updating the TreeGrid to reflect the corrected structure.
 
 ### Prerequisites
 - Install the following NuGet packages:
-  - `Syncfusion.Blazor.Grid`
-  - `Syncfusion.Blazor.Themes`
-  - `Syncfusion.Blazor.AI`
-  - `Syncfusion.Blazor.QueryBuilder`
-  - `Azure.AI.OpenAI`
+
+{% tabs %}
+{% highlight C# tabtitle="Package Manager" %}
+
+Install-Package Syncfusion.Blazor.TreeGrid -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.AI -Version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+
 - Ensure your Blazor application meets the [System Requirements](https://blazor.syncfusion.com/documentation/system-requirements).
 - Add the following to `App.razor` for Syncfusion themes and scripts:
   
@@ -72,23 +85,60 @@ This example demonstrates using the **Syncfusion.Blazor.AI** package with **Olla
 </body>
 ```
 
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App.
+### Register Syncfusion Blazor Service
+
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
+
+If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in both **~/Program.cs** files of your Blazor Web App.
 
 {% tabs %}
-{% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
+{% highlight c# tabtitle="Server(~/_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");
+var builder = WebApplication.CreateBuilder(args);
 
-builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
+// Add services to the container.
+builder.Services.AddRazorComponents()
+    .AddInteractiveServerComponents()
+    .AddInteractiveWebAssemblyComponents();
+builder.Services.AddSyncfusionBlazor();
 
+var app = builder.Build();
+....
+
+{% endhighlight %}
+{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %}
+
+...
+using Syncfusion.Blazor;
+
+var builder = WebAssemblyHostBuilder.CreateDefault(args);
 builder.Services.AddSyncfusionBlazor();
+
 await builder.Build().RunAsync();
+
+{% endhighlight %}
+{% endtabs %}
+
+If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service only in that **~/Program.cs** file.
+
+{% tabs %}
+{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %}
+
+...
+using Syncfusion.Blazor;
+
+var builder = WebApplication.CreateBuilder(args);
+
+// Add services to the container.
+builder.Services.AddRazorComponents()
+    .AddInteractiveServerComponents();
+builder.Services.AddSyncfusionBlazor();
+
+var app = builder.Build();
 ....
 
 {% endhighlight %}
@@ -227,8 +277,19 @@ namespace OllamaExample.Components.Pages
 
 ![Smart Structuring - Output](images/adaptive-datastructuring.gif)
 
-### Explanation
-- **IChatInferenceService**: Injected to interact with the OpenAI service.
-- **ChatParameters**: Configures the AI request, including system and user messages, temperature, and token limits.
-- **GenerateResponseAsync**: Sends the request to OpenAI and retrieves the response asynchronously.
-- **Response**: Displays the AI-generated text.
+## How It Works
+
+The example above demonstrates how to use Ollama with Syncfusion Blazor components for intelligent data organization:
+
+1. **Setup**: Configuring the Ollama service in `Program.cs` with appropriate credentials and endpoint.
+2. **Component Integration**: Using the `IChatInferenceService` to process TreeGrid data.
+3. **Prompt Engineering**: Creating detailed prompts for the AI model to understand hierarchical relationships.
+4. **Response Processing**: Parsing the JSON response and applying it to update the TreeGrid structure.
+
+### Key Components
+
+- **IChatInferenceService**: Injected to interact with the Ollama models.
+- **ChatParameters**: Configures the AI request, including system prompt and user messages.
+- **GenerateResponseAsync**: Sends the request to Ollama and retrieves the response asynchronously.
+- **UI Components**: Syncfusion TreeGrid and Button components work together with the AI service.
+
diff --git a/blazor/ai/openAI.md b/blazor/ai/openAI.md
index fdd4807153..7eac88b6f9 100644
--- a/blazor/ai/openAI.md
+++ b/blazor/ai/openAI.md
@@ -7,49 +7,66 @@ control: AI Integration
 documentation: ug
 ---
 
-# Using OpenAI with Syncfusion Blazor AI package
+# OpenAI Integration with Syncfusion Blazor AI
 
-This section helps to configuring and using the **Syncfusion.Blazor.AI** package with **OpenAI** to enable AI functionalities in your Blazor applications. The package allows seamless integration with OpenAI's API, empowering any Syncfusion Blazor component with intelligent features.
+## Introduction
+
+This section helps to configuring and using the [Syncfusion.Blazor.AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) package with [OpenAI](https://help.openai.com/en/articles/4936850-where-do-i-find-my-openai-api-key) to enable AI functionalities in your Blazor applications. The package allows seamless integration with OpenAI’s API, empowering any Syncfusion Blazor component with intelligent features.
 
 ## Prerequisites
-- Install the **Syncfusion.Blazor.AI** package via NuGet.
-- Obtain an OpenAI API key from the OpenAI platform.
-- Ensure your Blazor application meets the [System Requirements](https://blazor.syncfusion.com/documentation/system-requirements).
 
-## Configuration
-To use OpenAI, configure the AI service in your `Program.cs` file by registering the `AIServiceCredentials` and `IChatInferenceService`.
+Before you begin integrating OpenAI with your Blazor application, ensure you have:
+
+* Installed the [Syncfusion.Blazor.AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) package via NuGet
+{% tabs %}
+{% highlight C# tabtitle="Package Manager" %}
+
+Install-Package Syncfusion.Blazor.AI -Version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
+* Obtained an [OpenAI API key](https://help.openai.com/en/articles/4936850-where-do-i-find-my-openai-api-key) from the OpenAI platform
+* Met the [System Requirements](https://blazor.syncfusion.com/documentation/system-requirements) for Syncfusion Blazor components
 
-### Steps
-1. Open your Blazor application's `Program.cs`.
-2. Add the following code to configure OpenAI credentials:
+## Configuration Steps
+
+Follow these steps to configure OpenAI as your AI provider:
+
+### Register AI Services in Program.cs
+
+Open your Blazor application's `Program.cs` file and add the following configuration:
 
 ```csharp
+// Add required namespaces
+using Syncfusion.Blazor.AI;
+
+// Register OpenAI credentials
 builder.Services.AddSingleton(new AIServiceCredentials
 {
-    ApiKey = "your-openai-key", // Replace with your OpenAI API key
+    ApiKey = "your-openai-key", // Replace with your actual OpenAI API key
     DeploymentName = "gpt-4",   // Specify the model (e.g., "gpt-4", "gpt-3.5-turbo")
-    Endpoint = null             // Must be null for OpenAI
+    Endpoint = null             // Must be null for OpenAI (as opposed to Azure OpenAI)
 });
 
-// Register the inference backend
+// Register the inference service
 builder.Services.AddSingleton<IChatInferenceService, SyncfusionAIService>();
 ```
 
-3. Ensure the required Syncfusion Blazor namespaces are included in your `Program.cs`:
-```csharp
-using Syncfusion.Blazor.AI;
-```
-
-## Example: Syncfusion Grid with Azure OpenAI in a Blazor Application
+## Anomaly Detection with OpenAI and Syncfusion Blazor Grid
 
 This example demonstrates using the **Syncfusion.Blazor.AI** package with OpenAI to perform anomaly detection in a Syncfusion Blazor Grid component. The grid displays machine data (e.g., MachineID, Temperature, Pressure, Voltage, MotorSpeed, ProductionRate), and OpenAI identifies rows with irrelevant production rates relative to other factors, updating the grid with anomaly descriptions and visual styling.
 
 ### Prerequisites
 - Install the following NuGet packages:
-  - `Syncfusion.Blazor.Grid`
-  - `Syncfusion.Blazor.Themes`
-  - `Syncfusion.Blazor.AI`
-- Ensure your Blazor application meets the [System Requirements](https://blazor.syncfusion.com/documentation/system-requirements?utm_source=nuget&utm_medium=listing&utm_campaign=blazor-smart-nuget).
+{% tabs %}
+{% highlight C# tabtitle="Package Manager" %}
+
+Install-Package Syncfusion.Blazor.Grid -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
+Install-Package Syncfusion.Blazor.AI -Version {{ site.releaseversion }}
+
+{% endhighlight %}
+{% endtabs %}
 - Add the following to `App.razor` for Syncfusion themes and scripts:
   
 ```html
@@ -64,23 +81,60 @@ This example demonstrates using the **Syncfusion.Blazor.AI** package with OpenAI
 </body>
 ```
 
-Now, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App.
+## Register Syncfusion Blazor Service
+
+Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
+
+If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in both **~/Program.cs** files of your Blazor Web App.
 
 {% tabs %}
-{% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
+{% highlight c# tabtitle="Server(~/_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");
+var builder = WebApplication.CreateBuilder(args);
+
+// Add services to the container.
+builder.Services.AddRazorComponents()
+    .AddInteractiveServerComponents()
+    .AddInteractiveWebAssemblyComponents();
+builder.Services.AddSyncfusionBlazor();
+
+var app = builder.Build();
+....
 
-builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
+{% endhighlight %}
+{% highlight c# tabtitle="Client(~/_Program.cs)" hl_lines="2 5" %}
 
+...
+using Syncfusion.Blazor;
+
+var builder = WebAssemblyHostBuilder.CreateDefault(args);
 builder.Services.AddSyncfusionBlazor();
+
 await builder.Build().RunAsync();
+
+{% endhighlight %}
+{% endtabs %}
+
+If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service only in that **~/Program.cs** file.
+
+{% tabs %}
+{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %}
+
+...
+using Syncfusion.Blazor;
+
+var builder = WebApplication.CreateBuilder(args);
+
+// Add services to the container.
+builder.Services.AddRazorComponents()
+    .AddInteractiveServerComponents();
+builder.Services.AddSyncfusionBlazor();
+
+var app = builder.Build();
 ....
 
 {% endhighlight %}
@@ -293,10 +347,19 @@ namespace OpenAIExample.Components.Pages
 
 ![Anomaly Detection - Output](images/anomaly-detection.gif)
 
-### Explanation
-- **IChatInferenceService**: Injected to interact with the OpenAI service.
-- **ChatParameters**: Configures the AI request, including system and user messages, temperature, and token limits.
-- **GenerateResponseAsync**: Sends the request to OpenAI and retrieves the response asynchronously.
-- **Response**: Displays the AI-generated text.
+## How It Works
+
+The example above demonstrates how to use OpenAI with Syncfusion Blazor components for intelligent data analysis:
 
+1. **Setup**: Configuring the OpenAI service in `Program.cs` with appropriate credentials.
+2. **Component Integration**: Using the `IChatInferenceService` to process data from Syncfusion Blazor Grid.
+3. **Prompt Engineering**: Creating appropriate prompts for the AI model to analyze data patterns.
+4. **Response Processing**: Parsing and processing the AI response to update the UI components.
+
+### Key Components
+
+- **IChatInferenceService**: Injected to interact with the OpenAI models.
+- **ChatParameters**: Configures the AI request, including system prompt and user messages.
+- **GenerateResponseAsync**: Sends the request to OpenAI and retrieves the response asynchronously.
+- **UI Components**: Syncfusion Grid and Button components work together with the AI service.
 
diff --git a/blazor/ai/overview.md b/blazor/ai/overview.md
index 8e6d1ecbf9..45b8fa6436 100644
--- a/blazor/ai/overview.md
+++ b/blazor/ai/overview.md
@@ -8,12 +8,12 @@ documentation: ug
 ---
 
 # Overview
-The **Syncfusion.Blazor.AI** package provides seamless AI integration for Blazor applications, supporting services like OpenAI, Azure OpenAI, Ollama, and custom AI providers. It serves as the foundation for Syncfusion's AI-powered components, such as the [Smart TextArea](https://blazor.syncfusion.com/documentation/smart-textarea/getting-started) and [Smart Paste Button](https://blazor.syncfusion.com/documentation/smart-paste/getting-started), enabling developers to build intelligent, responsive applications. This package currently supports **text completion** as its primary AI feature.
+The [**Syncfusion.Blazor.AI**](https://www.nuget.org/packages/Syncfusion.Blazor.AI) package provides seamless AI integration for Blazor applications, supporting services like [OpenAI](https://help.openai.com/en/articles/4936850-where-do-i-find-my-openai-api-key), [Azure OpenAI](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource), [Ollama](https://ollama.com), and custom AI providers. It serves as the foundation for Syncfusion's AI-powered components, such as the [Smart TextArea](https://blazor.syncfusion.com/documentation/smart-textarea/getting-started) and [Smart Paste Button](https://blazor.syncfusion.com/documentation/smart-paste/getting-started), enabling developers to build intelligent, responsive applications. This package currently supports **text completion** as its primary AI feature.
 
 ## Key Features
-- **Multi-Provider Support**: Integrate with OpenAI, Azure OpenAI, and Ollama local models.
+- **Multi-Provider Support**: Integrate with [OpenAI](https://help.openai.com/en/articles/4936850-where-do-i-find-my-openai-api-key), [Azure OpenAI](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource) and [Ollama](https://ollama.com) local models.
 - **Custom AI Service Extensibility**: Easily extend functionality to include custom AI providers.
-- **Foundation for Smart UI Components**: Enhances any Syncfusion Blazor component with AI capabilities.
+- **Foundation for Smart UI Components**: Enhances any [Syncfusion Blazor component](https://blazor.syncfusion.com/demos/) with AI capabilities.
 
 ## See Also
 - [Smart TextArea](https://blazor.syncfusion.com/documentation/smart-textarea/getting-started)
diff --git a/blazor/appearance/themes.md b/blazor/appearance/themes.md
index 394388b806..9d759f76b9 100644
--- a/blazor/appearance/themes.md
+++ b/blazor/appearance/themes.md
@@ -1,6 +1,6 @@
 ---
 layout: post
-title: How to Use Blazor Material Themes? | Syncfusion
+title: Use Blazor Themes - Bootstrap, Fluent, Tailwind, Material | Syncfusion
 description: Check out the documentation for built-in-themes in Blazor and learn here about how to use it in Blazor
 platform: Blazor
 component: Appearance
@@ -1366,7 +1366,7 @@ The following example demonstrates how to change a theme dynamically in Blazor W
 
 Material and Tailwind Themes uses online roboto font. If your app is designed to work in a local network without internet connection, follow the below steps to use offline fonts to work in offline scenarios.
 
-1. Download the minified styles for the required components from [CRG](https://blazor.syncfusion.com/crg/) site. Learn more about CRG in [help documentation](https://blazor.syncfusion.com/documentation/common/custom-resource-generator).
+1. Download the minified styles for the required components from [CRG](https://blazor.syncfusion.com/crg) site. Learn more about CRG in [help documentation](https://blazor.syncfusion.com/documentation/common/custom-resource-generator).
 2. Unzip the file and it contains the styles of the selected components and an `import.json` file, which stores the current settings.
    ![Select styles folder](images/crg-styles.png)
 3. The styles folder of material and tailwind theme contains css files and a **customized** folder. The CSS files under **customized** folder doesn't contain the online google font dependencies.
diff --git a/blazor/chart/chart-types/bar.md b/blazor/chart/chart-types/bar.md
index f73820c018..49ad50481e 100644
--- a/blazor/chart/chart-types/bar.md
+++ b/blazor/chart/chart-types/bar.md
@@ -470,7 +470,7 @@ The [ColumnSpacing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Char
 
 ### Column width in pixels
 
-The `ColumnWidthInPixel` property in [ChartSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html) is used to set the width of the bar and rectangle-based series types in pixels. This property ensures that each bar maintains the specified width, providing a uniform appearance throughout the chart.
+The [ColumnWidthInPixel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_ColumnWidthInPixel) property in [ChartSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html) is used to set the width of the bar and rectangle-based series types in pixels. This property ensures that each bar maintains the specified width, providing a uniform appearance throughout the chart.
 
 ```cshtml
 @using Syncfusion.Blazor.Charts
@@ -509,6 +509,7 @@ The `ColumnWidthInPixel` property in [ChartSeries](https://help.syncfusion.com/c
 }
 ```
 ![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" %}
 
 ## Grouped bar
 
diff --git a/blazor/chart/chart-types/column.md b/blazor/chart/chart-types/column.md
index f5f93cc191..7b9348e83c 100644
--- a/blazor/chart/chart-types/column.md
+++ b/blazor/chart/chart-types/column.md
@@ -518,7 +518,7 @@ The [ColumnSpacing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Char
 
 ### Column width in pixel
 
-The `ColumnWidthInPixel` property in [ChartSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html) is used to set the width of the column and rectangle-based series types in pixels. This property ensures that each column maintains the specified width, providing a uniform appearance throughout the chart.
+The [ColumnWidthInPixel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_ColumnWidthInPixel) property in [ChartSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html) is used to set the width of the column and rectangle-based series types in pixels. This property ensures that each column maintains the specified width, providing a uniform appearance throughout the chart.
 
 ```cshtml
 @using Syncfusion.Blazor.Charts
@@ -557,6 +557,7 @@ The `ColumnWidthInPixel` property in [ChartSeries](https://help.syncfusion.com/c
 }
 ```
 ![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" %}
 
 ## Grouped column
 
diff --git a/blazor/chart/chart-types/stack-area.md b/blazor/chart/chart-types/stack-area.md
index 187edba536..11a0d84274 100644
--- a/blazor/chart/chart-types/stack-area.md
+++ b/blazor/chart/chart-types/stack-area.md
@@ -559,7 +559,7 @@ Use the [`Border`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart
 
 The stack labels display cumulative total values for stack segments directly using data labels. If all the values in a stack segment are negative, the stack label is displayed below the point.
 
-The `Visible` property of the `ChartStackLabelSettings` is used to enable stack labels. Setting it to **true** will display the stack labels.
+The [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html#Syncfusion_Blazor_Charts_ChartStackLabelSettings_Visible) property of the [ChartStackLabelSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html) is used to enable stack labels. Setting it to **true** will display the stack labels.
 
 ```cshtml
 @using Syncfusion.Blazor.Charts
@@ -569,15 +569,15 @@ The `Visible` property of the `ChartStackLabelSettings` is used to enable stack
     <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
 
     <ChartSeriesCollection>
-        <ChartSeries DataSource="@ChartDataList" XName="X" YName="Y" Type="ChartSeriesType.StackingArea100">
+        <ChartSeries DataSource="@ChartDataList" XName="X" YName="Y" Type="Syncfusion.Blazor.Charts.ChartSeriesType.StackingArea100">
             <ChartSeriesAnimation Enable="false" />
             <ChartMarker Visible="true"><ChartDataLabel Visible="true" /></ChartMarker>
         </ChartSeries>
-        <ChartSeries DataSource="@ChartDataList" XName="X" YName="Y1" Type="ChartSeriesType.StackingArea100">
+        <ChartSeries DataSource="@ChartDataList" XName="X" YName="Y1" Type="Syncfusion.Blazor.Charts.ChartSeriesType.StackingArea100">
             <ChartSeriesAnimation Enable="false" />
             <ChartMarker Visible="true"><ChartDataLabel Visible="true" /></ChartMarker>
         </ChartSeries>
-        <ChartSeries DataSource="@ChartDataList" XName="X" YName="Y2" Type="ChartSeriesType.StackingArea100">
+        <ChartSeries DataSource="@ChartDataList" XName="X" YName="Y2" Type="Syncfusion.Blazor.Charts.ChartSeriesType.StackingArea100">
             <ChartSeriesAnimation Enable="false" />
             <ChartMarker Visible="true"><ChartDataLabel Visible="true" /></ChartMarker>
         </ChartSeries>
@@ -611,38 +611,38 @@ The `Visible` property of the `ChartStackLabelSettings` is used to enable stack
 }
 ```
 
-![Blazor Stacked Area 100 Chart with stack labels](../images/chart-types-images/blazor-stacked-area-100-stack-labels.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXByDxrngYpMFkxd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ### Customization
 
 The stack labels can be customized using the `ChartStackLabelSettings` properties as given below.
 
-* `Fill` - Specifies the background color of the stack labels when border is set. The default value is **transparent**.
-* `Format` - Specifies the format of the stack labels. It supports a placeholder `{value}` which will be replaced by the stack label value.
-* `Rx` - Specifies the rounded corner radius along the X-axis (horizontal direction) for the stack label background. The default value is **5**.
-* `Ry` - Specifies the rounded corner radius along the Y-axis (vertical direction) for the stack label background. The default value is **5**.
-* `Angle` - Specifies the rotation angle for stack labels in degrees. The default value is **0**.
+* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html#Syncfusion_Blazor_Charts_ChartStackLabelSettings_Fill) - Specifies the background color of the stack labels when border is set. The default value is **transparent**.
+* [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html#Syncfusion_Blazor_Charts_ChartStackLabelSettings_Format) - Specifies the format of the stack labels. It supports a placeholder `{value}` which will be replaced by the stack label value.
+* [Rx](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html#Syncfusion_Blazor_Charts_ChartStackLabelSettings_Rx) - Specifies the rounded corner radius along the X-axis (horizontal direction) for the stack label background. The default value is **5**.
+* [Ry](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html#Syncfusion_Blazor_Charts_ChartStackLabelSettings_Ry) - Specifies the rounded corner radius along the Y-axis (vertical direction) for the stack label background. The default value is **5**.
+* [Angle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html#Syncfusion_Blazor_Charts_ChartStackLabelSettings_Angle) - Specifies the rotation angle for stack labels in degrees. The default value is **0**.
 
-We can customize the font of the stack labels using the `ChartStackLabelFont` properties as given below:
+We can customize the font of the stack labels using the [ChartStackLabelFont](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html) properties as given below:
 
-* `TextAlignment` - Customizes the alignment of the text within the stack label.
-* `FontFamily` - Customizes the font family for the stack label text.
-* `Size` - Customizes the font size of the stack label text.
-* `FontStyle` - Customizes the font style of the stack label text.
-* `FontWeight` - Customizes the font weight of the stack label text.
-* `Color` - Customizes the color of the stack label text.
+* [TextAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html#Syncfusion_Blazor_Charts_ChartStackLabelFont_TextAlignment) - Customizes the alignment of the text within the stack label.
+* [FontFamily](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html#Syncfusion_Blazor_Charts_ChartStackLabelFont_FontFamily) - Customizes the font family for the stack label text.
+* [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html#Syncfusion_Blazor_Charts_ChartStackLabelFont_Size) - Customizes the font size of the stack label text.
+* [FontStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDefaultFont.html#Syncfusion_Blazor_Charts_ChartDefaultFont_FontStyle) - Customizes the font style of the stack label text.
+* [FontWeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html#Syncfusion_Blazor_Charts_ChartStackLabelFont_FontWeight) - Customizes the font weight of the stack label text.
+* [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html#Syncfusion_Blazor_Charts_ChartStackLabelFont_Color) - Customizes the color of the stack label text.
 
-We can customize the border of the stack labels using the `ChartStackLabelBorder` properties as given below:
+We can customize the border of the stack labels using the [ChartStackLabelBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelBorder.html) properties as given below:
 
-* `Width` - Specifies the width of the border around the stack label.
-* `Color` - Specifies the color of the border around the stack label.
+* [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelBorder.html#Syncfusion_Blazor_Charts_ChartStackLabelBorder_Width) - Specifies the width of the border around the stack label.
+* [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDefaultBorder.html#Syncfusion_Blazor_Charts_ChartDefaultBorder_Color) - Specifies the color of the border around the stack label.
 
- To customize the margin, we can use the `ChartStackLabelMargin` properties as given below:
+ To customize the margin, we can use the [ChartStackLabelMargin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelMargin.html) properties as given below:
 
-* `Bottom` - Specifies the bottom margin of the stack label.
-* `Top` - Specifies the top margin of the stack label.
-* `Right` - Specifies the right margin of the stack label.
-* `Left` - Specifies the left margin of the stack label.
+* [Bottom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelMargin.html#Syncfusion_Blazor_Charts_ChartStackLabelMargin_Bottom) - Specifies the bottom margin of the stack label.
+* [Top](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelMargin.html#Syncfusion_Blazor_Charts_ChartStackLabelMargin_Top) - Specifies the top margin of the stack label.
+* [Right](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelMargin.html#Syncfusion_Blazor_Charts_ChartStackLabelMargin_Right) - Specifies the right margin of the stack label.
+* [Left](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelMargin.html#Syncfusion_Blazor_Charts_ChartStackLabelMargin_Left) - Specifies the left margin of the stack label.
 
 ```cshtml
 @using Syncfusion.Blazor.Charts
@@ -652,22 +652,22 @@ We can customize the border of the stack labels using the `ChartStackLabelBorder
     <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
 
     <ChartSeriesCollection>
-        <ChartSeries DataSource="@ChartDataList" XName="X" YName="Y" Type="ChartSeriesType.StackingArea100">
+        <ChartSeries DataSource="@ChartDataList" XName="X" YName="Y" Type="Syncfusion.Blazor.Charts.ChartSeriesType.StackingArea100">
             <ChartSeriesAnimation Enable="false" />
             <ChartMarker Visible="true"><ChartDataLabel Visible="true" /></ChartMarker>
         </ChartSeries>
-        <ChartSeries DataSource="@ChartDataList" XName="X" YName="Y1" Type="ChartSeriesType.StackingArea100">
+        <ChartSeries DataSource="@ChartDataList" XName="X" YName="Y1" Type="Syncfusion.Blazor.Charts.ChartSeriesType.StackingArea100">
             <ChartSeriesAnimation Enable="false" />
             <ChartMarker Visible="true"><ChartDataLabel Visible="true" /></ChartMarker>
         </ChartSeries>
-        <ChartSeries DataSource="@ChartDataList" XName="X" YName="Y2" Type="ChartSeriesType.StackingArea100">
+        <ChartSeries DataSource="@ChartDataList" XName="X" YName="Y2" Type="Syncfusion.Blazor.Charts.ChartSeriesType.StackingArea100">
             <ChartSeriesAnimation Enable="false" />
             <ChartMarker Visible="true"><ChartDataLabel Visible="true" /></ChartMarker>
         </ChartSeries>
     </ChartSeriesCollection>
 
     <ChartStackLabelSettings Visible="true" Format="{value}" Fill="#ADD8E6" Rx="10" Ry="10" Angle="35">
-        <ChartStackLabelFont TextAlignment="Alignment.Center" FontFamily="Roboto" Size="12px" FontStyle="bold" FontWeight="600" Color="blue" />
+        <ChartStackLabelFont TextAlignment="Syncfusion.Blazor.Charts.Alignment.Center" FontFamily="Roboto" Size="12px" FontStyle="bold" FontWeight="600" Color="blue" />
         <ChartStackLabelBorder Width="2" Color="#000000" />
         <ChartStackLabelMargin Bottom="10" Top="10" Right="10" Left="10" />
     </ChartStackLabelSettings>
@@ -697,7 +697,7 @@ We can customize the border of the stack labels using the `ChartStackLabelBorder
     };
 }
 ```
-![Blazor Stacked Area Chart with stack label customization](../images/chart-types-images/blazor-stacked-area-100-stack-labels-customization.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNBSZxVnqOcrRgBw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Events
 
diff --git a/blazor/chart/chart-types/stack-bar.md b/blazor/chart/chart-types/stack-bar.md
index 848ebd9e2c..5a55359407 100644
--- a/blazor/chart/chart-types/stack-bar.md
+++ b/blazor/chart/chart-types/stack-bar.md
@@ -677,7 +677,7 @@ Use the [`Border`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart
 
 The stack labels display cumulative total values for stack segments directly using data labels. If all the values in a stack segment are negative, the stack label is displayed below the point. 
 
-The `Visible` property of the `ChartStackLabelSettings` is used to enable stack labels. Setting it to **true** will display the stack labels.
+The [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html#Syncfusion_Blazor_Charts_ChartStackLabelSettings_Visible) property of the [ChartStackLabelSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html) is used to enable stack labels. Setting it to **true** will display the stack labels.
 
 ```cshtml
 @using Syncfusion.Blazor.Charts
@@ -743,38 +743,38 @@ The `Visible` property of the `ChartStackLabelSettings` is used to enable stack
 
 ```
 
-![Blazor Stacked Bar 100 Chart with stack labels](../images/chart-types-images/blazor-stacked-bar-100-chart-stack-labels.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhojdrHpjhTEnIB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ### Customization
 
 The stack labels can be customized using the `ChartStackLabelSettings` properties as given below.
 
-* `Fill` - Specifies the background color of the stack labels when border is set. The default value is **transparent**.
-* `Format` - Specifies the format of the stack labels. It supports a placeholder `{value}` which will be replaced by the stack label value.
-* `Rx` - Specifies the rounded corner radius along the X-axis (horizontal direction) for the stack label background. The default value is **5**.
-* `Ry` - Specifies the rounded corner radius along the Y-axis (vertical direction) for the stack label background. The default value is **5**.
-* `Angle` - Specifies the rotation angle for stack labels in degrees. The default value is **0**.
+* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html#Syncfusion_Blazor_Charts_ChartStackLabelSettings_Fill) - Specifies the background color of the stack labels when border is set. The default value is **transparent**.
+* [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html#Syncfusion_Blazor_Charts_ChartStackLabelSettings_Format) - Specifies the format of the stack labels. It supports a placeholder `{value}` which will be replaced by the stack label value.
+* [Rx](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html#Syncfusion_Blazor_Charts_ChartStackLabelSettings_Rx) - Specifies the rounded corner radius along the X-axis (horizontal direction) for the stack label background. The default value is **5**.
+* [Ry](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html#Syncfusion_Blazor_Charts_ChartStackLabelSettings_Ry) - Specifies the rounded corner radius along the Y-axis (vertical direction) for the stack label background. The default value is **5**.
+* [Angle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html#Syncfusion_Blazor_Charts_ChartStackLabelSettings_Angle) - Specifies the rotation angle for stack labels in degrees. The default value is **0**.
 
-We can customize the font of the stack labels using the `ChartStackLabelFont` properties as given below:
+We can customize the font of the stack labels using the [ChartStackLabelFont](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html) properties as given below:
 
-* `TextAlignment` - Customizes the alignment of the text within the stack label.
-* `FontFamily` - Customizes the font family for the stack label text.
-* `Size` - Customizes the font size of the stack label text.
-* `FontStyle` - Customizes the font style of the stack label text.
-* `FontWeight` - Customizes the font weight of the stack label text.
-* `Color` - Customizes the color of the stack label text.
+* [TextAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html#Syncfusion_Blazor_Charts_ChartStackLabelFont_TextAlignment) - Customizes the alignment of the text within the stack label.
+* [FontFamily](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html#Syncfusion_Blazor_Charts_ChartStackLabelFont_FontFamily) - Customizes the font family for the stack label text.
+* [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html#Syncfusion_Blazor_Charts_ChartStackLabelFont_Size) - Customizes the font size of the stack label text.
+* [FontStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDefaultFont.html#Syncfusion_Blazor_Charts_ChartDefaultFont_FontStyle) - Customizes the font style of the stack label text.
+* [FontWeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html#Syncfusion_Blazor_Charts_ChartStackLabelFont_FontWeight) - Customizes the font weight of the stack label text.
+* [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html#Syncfusion_Blazor_Charts_ChartStackLabelFont_Color) - Customizes the color of the stack label text.
 
-We can customize the border of the stack labels using the `ChartStackLabelBorder` properties as given below:
+We can customize the border of the stack labels using the [ChartStackLabelBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelBorder.html) properties as given below:
 
-* `Width` - Specifies the width of the border around the stack label.
-* `Color` - Specifies the color of the border around the stack label.
+* [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelBorder.html#Syncfusion_Blazor_Charts_ChartStackLabelBorder_Width) - Specifies the width of the border around the stack label.
+* [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDefaultBorder.html#Syncfusion_Blazor_Charts_ChartDefaultBorder_Color) - Specifies the color of the border around the stack label.
 
- To customize the margin, we can use the `ChartStackLabelMargin` properties as given below:
+ To customize the margin, we can use the [ChartStackLabelMargin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelMargin.html) properties as given below:
 
-* `Bottom` - Specifies the bottom margin of the stack label.
-* `Top` - Specifies the top margin of the stack label.
-* `Right` - Specifies the right margin of the stack label.
-* `Left` - Specifies the left margin of the stack label.
+* [Bottom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelMargin.html#Syncfusion_Blazor_Charts_ChartStackLabelMargin_Bottom) - Specifies the bottom margin of the stack label.
+* [Top](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelMargin.html#Syncfusion_Blazor_Charts_ChartStackLabelMargin_Top) - Specifies the top margin of the stack label.
+* [Right](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelMargin.html#Syncfusion_Blazor_Charts_ChartStackLabelMargin_Right) - Specifies the right margin of the stack label.
+* [Left](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelMargin.html#Syncfusion_Blazor_Charts_ChartStackLabelMargin_Left) - Specifies the left margin of the stack label.
 
 ```cshtml
 @using Syncfusion.Blazor.Charts
@@ -812,7 +812,7 @@ We can customize the border of the stack labels using the `ChartStackLabelBorder
     </ChartSeriesCollection>
 
     <ChartStackLabelSettings Visible="true" Format="{value}" Fill="#ADD8E6" Rx="10" Ry="10" Angle="35">
-        <ChartStackLabelFont TextAlignment="Alignment.Center" FontFamily="Roboto" Size="12px" FontStyle="bold" FontWeight="600" Color="blue" />
+        <ChartStackLabelFont TextAlignment="Syncfusion.Blazor.Charts.Alignment.Center" FontFamily="Roboto" Size="12px" FontStyle="bold" FontWeight="600" Color="blue" />
         <ChartStackLabelBorder Width="2" Color="#000000" />
         <ChartStackLabelMargin Bottom="10" Top="10" Right="10" Left="10" />
     </ChartStackLabelSettings>
@@ -842,7 +842,7 @@ We can customize the border of the stack labels using the `ChartStackLabelBorder
 }
 ```
 
-![Blazor Stacked Bar 100 Chart with stack label customization](../images/chart-types-images/blazor-stacked-bar-100-chart-stack-labels-customization.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXVIXnLHpDphNnvF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Events
 
diff --git a/blazor/chart/chart-types/stack-column.md b/blazor/chart/chart-types/stack-column.md
index 7d1834fa96..885f178462 100644
--- a/blazor/chart/chart-types/stack-column.md
+++ b/blazor/chart/chart-types/stack-column.md
@@ -677,7 +677,7 @@ Use the [`Border`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart
 
 The stack labels display cumulative total values for stack segments directly using data labels. If all the values in a stack segment are negative, the stack label is displayed below the point.
 
-The `Visible` property of the `ChartStackLabelSettings` is used to enable stack labels. Setting it to **true** will display the stack labels.
+The [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html#Syncfusion_Blazor_Charts_ChartStackLabelSettings_Visible) property of the [ChartStackLabelSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html) is used to enable stack labels. Setting it to **true** will display the stack labels.
 
 ```cshtml
 @using Syncfusion.Blazor.Charts
@@ -741,38 +741,38 @@ The `Visible` property of the `ChartStackLabelSettings` is used to enable stack
 }
 ```
 
-![Blazor Stacked Column 100 Chart with stack labels](../images/chart-types-images//blazor-stacked-column-100-chart-stack-labels.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VNrSNdhdTtoODqWV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ### Customization
 
 The stack labels can be customized using the `ChartStackLabelSettings` properties as given below.
 
-* `Fill` - Specifies the background color of the stack labels when border is set. The default value is **transparent**.
-* `Format` - Specifies the format of the stack labels. It supports a placeholder `{value}` which will be replaced by the stack label value.
-* `Rx` - Specifies the rounded corner radius along the X-axis (horizontal direction) for the stack label background. The default value is **5**.
-* `Ry` - Specifies the rounded corner radius along the Y-axis (vertical direction) for the stack label background. The default value is **5**.
-* `Angle` - Specifies the rotation angle for stack labels in degrees. The default value is **0**.
+* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html#Syncfusion_Blazor_Charts_ChartStackLabelSettings_Fill) - Specifies the background color of the stack labels when border is set. The default value is **transparent**.
+* [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html#Syncfusion_Blazor_Charts_ChartStackLabelSettings_Format) - Specifies the format of the stack labels. It supports a placeholder `{value}` which will be replaced by the stack label value.
+* [Rx](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html#Syncfusion_Blazor_Charts_ChartStackLabelSettings_Rx) - Specifies the rounded corner radius along the X-axis (horizontal direction) for the stack label background. The default value is **5**.
+* [Ry](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html#Syncfusion_Blazor_Charts_ChartStackLabelSettings_Ry) - Specifies the rounded corner radius along the Y-axis (vertical direction) for the stack label background. The default value is **5**.
+* [Angle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html#Syncfusion_Blazor_Charts_ChartStackLabelSettings_Angle) - Specifies the rotation angle for stack labels in degrees. The default value is **0**.
 
-We can customize the font of the stack labels using the `ChartStackLabelFont` properties as given below:
+We can customize the font of the stack labels using the [ChartStackLabelFont](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html) properties as given below:
 
-* `TextAlignment` - Customizes the alignment of the text within the stack label.
-* `FontFamily` - Customizes the font family for the stack label text.
-* `Size` - Customizes the font size of the stack label text.
-* `FontStyle` - Customizes the font style of the stack label text.
-* `FontWeight` - Customizes the font weight of the stack label text.
-* `Color` - Customizes the color of the stack label text.
+* [TextAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html#Syncfusion_Blazor_Charts_ChartStackLabelFont_TextAlignment) - Customizes the alignment of the text within the stack label.
+* [FontFamily](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html#Syncfusion_Blazor_Charts_ChartStackLabelFont_FontFamily) - Customizes the font family for the stack label text.
+* [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html#Syncfusion_Blazor_Charts_ChartStackLabelFont_Size) - Customizes the font size of the stack label text.
+* [FontStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDefaultFont.html#Syncfusion_Blazor_Charts_ChartDefaultFont_FontStyle) - Customizes the font style of the stack label text.
+* [FontWeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html#Syncfusion_Blazor_Charts_ChartStackLabelFont_FontWeight) - Customizes the font weight of the stack label text.
+* [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html#Syncfusion_Blazor_Charts_ChartStackLabelFont_Color) - Customizes the color of the stack label text.
 
-We can customize the border of the stack labels using the `ChartStackLabelBorder` properties as given below:
+We can customize the border of the stack labels using the [ChartStackLabelBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelBorder.html) properties as given below:
 
-* `Width` - Specifies the width of the border around the stack label.
-* `Color` - Specifies the color of the border around the stack label.
+* [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelBorder.html#Syncfusion_Blazor_Charts_ChartStackLabelBorder_Width) - Specifies the width of the border around the stack label.
+* [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDefaultBorder.html#Syncfusion_Blazor_Charts_ChartDefaultBorder_Color) - Specifies the color of the border around the stack label.
 
- To customize the margin, we can use the `ChartStackLabelMargin` properties as given below:
+ To customize the margin, we can use the [ChartStackLabelMargin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelMargin.html) properties as given below:
 
-* `Bottom` - Specifies the bottom margin of the stack label.
-* `Top` - Specifies the top margin of the stack label.
-* `Right` - Specifies the right margin of the stack label.
-* `Left` - Specifies the left margin of the stack label.
+* [Bottom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelMargin.html#Syncfusion_Blazor_Charts_ChartStackLabelMargin_Bottom) - Specifies the bottom margin of the stack label.
+* [Top](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelMargin.html#Syncfusion_Blazor_Charts_ChartStackLabelMargin_Top) - Specifies the top margin of the stack label.
+* [Right](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelMargin.html#Syncfusion_Blazor_Charts_ChartStackLabelMargin_Right) - Specifies the right margin of the stack label.
+* [Left](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelMargin.html#Syncfusion_Blazor_Charts_ChartStackLabelMargin_Left) - Specifies the left margin of the stack label.
 
 ```cshtml
 @using Syncfusion.Blazor.Charts
@@ -809,7 +809,7 @@ We can customize the border of the stack labels using the `ChartStackLabelBorder
     </ChartSeriesCollection>
 
     <ChartStackLabelSettings Visible="true" Format="{value}" Fill="#ADD8E6" Rx="10" Ry="10" Angle="35">
-        <ChartStackLabelFont TextAlignment="Alignment.Center" FontFamily="Roboto" Size="12px" FontStyle="bold" FontWeight="600" Color="blue" />
+        <ChartStackLabelFont TextAlignment="Syncfusion.Blazor.Charts.Alignment.Center" FontFamily="Roboto" Size="12px" FontStyle="bold" FontWeight="600" Color="blue" />
         <ChartStackLabelBorder Width="2" Color="#000000" />
         <ChartStackLabelMargin Bottom="8" Top="8" Right="8" Left="8" />
     </ChartStackLabelSettings>
@@ -838,7 +838,7 @@ We can customize the border of the stack labels using the `ChartStackLabelBorder
     };
 }
 ```
-![Blazor Stacked Column 100 Chart with stack label customization](../images/chart-types-images/blazor-stacked-column-100-chart-stack-labels-customization.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjByDnrnpjdwQmCP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Events
 
diff --git a/blazor/chart/chart-types/stack-line.md b/blazor/chart/chart-types/stack-line.md
index 5a49e30701..67ae970f7e 100644
--- a/blazor/chart/chart-types/stack-line.md
+++ b/blazor/chart/chart-types/stack-line.md
@@ -687,7 +687,7 @@ Use the [`Border`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart
 
 The stack labels display cumulative total values for stack segments directly using data labels. If all the values in a stack segment are negative, the stack label is displayed below the point.
 
-The `Visible` property of the `ChartStackLabelSettings` is used to enable stack labels. Setting it to **true** will display the stack labels.
+The [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html#Syncfusion_Blazor_Charts_ChartStackLabelSettings_Visible) property of the [ChartStackLabelSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html) is used to enable stack labels. Setting it to **true** will display the stack labels.
 
 ```cshtml
 @using Syncfusion.Blazor.Charts
@@ -754,38 +754,38 @@ The `Visible` property of the `ChartStackLabelSettings` is used to enable stack
     };
 }
 ```
-![Blazor Stacked Line 100 Chart with stack labels](../images/chart-types-images/blazor-stacked-line-100-chart-stack-labels.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLeNxrxptwavgKW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ### Customization
 
 The stack labels can be customized using the `ChartStackLabelSettings` properties as given below.
 
-* `Fill` - Specifies the background color of the stack labels when border is set. The default value is **transparent**.
-* `Format` - Specifies the format of the stack labels. It supports a placeholder `{value}` which will be replaced by the stack label value.
-* `Rx` - Specifies the rounded corner radius along the X-axis (horizontal direction) for the stack label background. The default value is **5**.
-* `Ry` - Specifies the rounded corner radius along the Y-axis (vertical direction) for the stack label background. The default value is **5**.
-* `Angle` - Specifies the rotation angle for stack labels in degrees. The default value is **0**.
+* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html#Syncfusion_Blazor_Charts_ChartStackLabelSettings_Fill) - Specifies the background color of the stack labels when border is set. The default value is **transparent**.
+* [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html#Syncfusion_Blazor_Charts_ChartStackLabelSettings_Format) - Specifies the format of the stack labels. It supports a placeholder `{value}` which will be replaced by the stack label value.
+* [Rx](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html#Syncfusion_Blazor_Charts_ChartStackLabelSettings_Rx) - Specifies the rounded corner radius along the X-axis (horizontal direction) for the stack label background. The default value is **5**.
+* [Ry](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html#Syncfusion_Blazor_Charts_ChartStackLabelSettings_Ry) - Specifies the rounded corner radius along the Y-axis (vertical direction) for the stack label background. The default value is **5**.
+* [Angle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html#Syncfusion_Blazor_Charts_ChartStackLabelSettings_Angle) - Specifies the rotation angle for stack labels in degrees. The default value is **0**.
 
-We can customize the font of the stack labels using the `ChartStackLabelFont` properties as given below:
+We can customize the font of the stack labels using the [ChartStackLabelFont](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html) properties as given below:
 
-* `TextAlignment` - Customizes the alignment of the text within the stack label.
-* `FontFamily` - Customizes the font family for the stack label text.
-* `Size` - Customizes the font size of the stack label text.
-* `FontStyle` - Customizes the font style of the stack label text.
-* `FontWeight` - Customizes the font weight of the stack label text.
-* `Color` - Customizes the color of the stack label text.
+* [TextAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html#Syncfusion_Blazor_Charts_ChartStackLabelFont_TextAlignment) - Customizes the alignment of the text within the stack label.
+* [FontFamily](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html#Syncfusion_Blazor_Charts_ChartStackLabelFont_FontFamily) - Customizes the font family for the stack label text.
+* [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html#Syncfusion_Blazor_Charts_ChartStackLabelFont_Size) - Customizes the font size of the stack label text.
+* [FontStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDefaultFont.html#Syncfusion_Blazor_Charts_ChartDefaultFont_FontStyle) - Customizes the font style of the stack label text.
+* [FontWeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html#Syncfusion_Blazor_Charts_ChartStackLabelFont_FontWeight) - Customizes the font weight of the stack label text.
+* [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html#Syncfusion_Blazor_Charts_ChartStackLabelFont_Color) - Customizes the color of the stack label text.
 
-We can customize the border of the stack labels using the `ChartStackLabelBorder` properties as given below:
+We can customize the border of the stack labels using the [ChartStackLabelBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelBorder.html) properties as given below:
 
-* `Width` - Specifies the width of the border around the stack label.
-* `Color` - Specifies the color of the border around the stack label.
+* [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelBorder.html#Syncfusion_Blazor_Charts_ChartStackLabelBorder_Width) - Specifies the width of the border around the stack label.
+* [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDefaultBorder.html#Syncfusion_Blazor_Charts_ChartDefaultBorder_Color) - Specifies the color of the border around the stack label.
 
- To customize the margin, we can use the `ChartStackLabelMargin` properties as given below:
+ To customize the margin, we can use the [ChartStackLabelMargin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelMargin.html) properties as given below:
 
-* `Bottom` - Specifies the bottom margin of the stack label.
-* `Top` - Specifies the top margin of the stack label.
-* `Right` - Specifies the right margin of the stack label.
-* `Left` - Specifies the left margin of the stack label.
+* [Bottom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelMargin.html#Syncfusion_Blazor_Charts_ChartStackLabelMargin_Bottom) - Specifies the bottom margin of the stack label.
+* [Top](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelMargin.html#Syncfusion_Blazor_Charts_ChartStackLabelMargin_Top) - Specifies the top margin of the stack label.
+* [Right](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelMargin.html#Syncfusion_Blazor_Charts_ChartStackLabelMargin_Right) - Specifies the right margin of the stack label.
+* [Left](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelMargin.html#Syncfusion_Blazor_Charts_ChartStackLabelMargin_Left) - Specifies the left margin of the stack label.
 
 ```cshtml
 @using Syncfusion.Blazor.Charts
@@ -855,7 +855,8 @@ We can customize the border of the stack labels using the `ChartStackLabelBorder
     };
 }
 ```
-![Blazor Stacked Line 100 Chart with stack label customization](../images/chart-types-images/blazor-stacked-line-100-chart-stack-labels-customization.png)
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDByZdBHfjFPhexI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Events
 
diff --git a/blazor/chart/chart-types/stacked-area.md b/blazor/chart/chart-types/stacked-area.md
index e1db9cecdd..5345b6d270 100644
--- a/blazor/chart/chart-types/stacked-area.md
+++ b/blazor/chart/chart-types/stacked-area.md
@@ -560,7 +560,7 @@ Use the [`Border`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart
 
 The stack labels display cumulative total values for stack segments directly using data labels. If all the values in a stack segment are negative, the stack label is displayed below the point.
 
-The `Visible` property of the `ChartStackLabelSettings` is used to enable stack labels. Setting it to **true** will display the stack labels.
+The [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html#Syncfusion_Blazor_Charts_ChartStackLabelSettings_Visible) property of the [ChartStackLabelSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html) is used to enable stack labels. Setting it to **true** will display the stack labels.
 
 ```cshtml
 @using Syncfusion.Blazor.Charts
@@ -570,19 +570,19 @@ The `Visible` property of the `ChartStackLabelSettings` is used to enable stack
     <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
 
     <ChartSeriesCollection>
-        <ChartSeries DataSource="@ChartDatas" XName="X" YName="Y" Type="ChartSeriesType.StackingArea">
+        <ChartSeries DataSource="@ChartDatas" XName="X" YName="Y" Type="Syncfusion.Blazor.Charts.ChartSeriesType.StackingArea">
             <ChartSeriesAnimation Enable="false" />
             <ChartMarker>
                 <ChartDataLabel Visible="true" />
             </ChartMarker>
         </ChartSeries>
-        <ChartSeries DataSource="@ChartDatas" XName="X" YName="Y1" Type="ChartSeriesType.StackingArea">
+        <ChartSeries DataSource="@ChartDatas" XName="X" YName="Y1" Type="Syncfusion.Blazor.Charts.ChartSeriesType.StackingArea">
             <ChartSeriesAnimation Enable="false" />
             <ChartMarker>
                 <ChartDataLabel Visible="true" />
             </ChartMarker>
         </ChartSeries>
-        <ChartSeries DataSource="@ChartDatas" XName="X" YName="Y2" Type="ChartSeriesType.StackingArea">
+        <ChartSeries DataSource="@ChartDatas" XName="X" YName="Y2" Type="Syncfusion.Blazor.Charts.ChartSeriesType.StackingArea">
             <ChartSeriesAnimation Enable="false" />
             <ChartMarker>
                 <ChartDataLabel Visible="true" />
@@ -618,38 +618,38 @@ The `Visible` property of the `ChartStackLabelSettings` is used to enable stack
     };
 }
 ```
-![Blazor Stacked Area Chart with stack labels](../images/chart-types-images/blazor-stacked-area-stack-labels.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNryjdBnTsAhjnHH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ### Customization
 
 The stack labels can be customized using the `ChartStackLabelSettings` properties as given below.
 
-* `Fill` - Specifies the background color of the stack labels when border is set. The default value is **transparent**.
-* `Format` - Specifies the format of the stack labels. It supports a placeholder `{value}` which will be replaced by the stack label value.
-* `Rx` - Specifies the rounded corner radius along the X-axis (horizontal direction) for the stack label background. The default value is **5**.
-* `Ry` - Specifies the rounded corner radius along the Y-axis (vertical direction) for the stack label background. The default value is **5**.
-* `Angle` - Specifies the rotation angle for stack labels in degrees. The default value is **0**.
+* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html#Syncfusion_Blazor_Charts_ChartStackLabelSettings_Fill) - Specifies the background color of the stack labels when border is set. The default value is **transparent**.
+* [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html#Syncfusion_Blazor_Charts_ChartStackLabelSettings_Format) - Specifies the format of the stack labels. It supports a placeholder `{value}` which will be replaced by the stack label value.
+* [Rx](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html#Syncfusion_Blazor_Charts_ChartStackLabelSettings_Rx) - Specifies the rounded corner radius along the X-axis (horizontal direction) for the stack label background. The default value is **5**.
+* [Ry](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html#Syncfusion_Blazor_Charts_ChartStackLabelSettings_Ry) - Specifies the rounded corner radius along the Y-axis (vertical direction) for the stack label background. The default value is **5**.
+* [Angle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html#Syncfusion_Blazor_Charts_ChartStackLabelSettings_Angle) - Specifies the rotation angle for stack labels in degrees. The default value is **0**.
 
-We can customize the font of the stack labels using the `ChartStackLabelFont` properties as given below:
+We can customize the font of the stack labels using the [ChartStackLabelFont](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html) properties as given below:
 
-* `TextAlignment` - Customizes the alignment of the text within the stack label.
-* `FontFamily` - Customizes the font family for the stack label text.
-* `Size` - Customizes the font size of the stack label text.
-* `FontStyle` - Customizes the font style of the stack label text.
-* `FontWeight` - Customizes the font weight of the stack label text.
-* `Color` - Customizes the color of the stack label text.
+* [TextAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html#Syncfusion_Blazor_Charts_ChartStackLabelFont_TextAlignment) - Customizes the alignment of the text within the stack label.
+* [FontFamily](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html#Syncfusion_Blazor_Charts_ChartStackLabelFont_FontFamily) - Customizes the font family for the stack label text.
+* [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html#Syncfusion_Blazor_Charts_ChartStackLabelFont_Size) - Customizes the font size of the stack label text.
+* [FontStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDefaultFont.html#Syncfusion_Blazor_Charts_ChartDefaultFont_FontStyle) - Customizes the font style of the stack label text.
+* [FontWeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html#Syncfusion_Blazor_Charts_ChartStackLabelFont_FontWeight) - Customizes the font weight of the stack label text.
+* [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html#Syncfusion_Blazor_Charts_ChartStackLabelFont_Color) - Customizes the color of the stack label text.
 
-We can customize the border of the stack labels using the `ChartStackLabelBorder` properties as given below:
+We can customize the border of the stack labels using the [ChartStackLabelBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelBorder.html) properties as given below:
 
-* `Width` - Specifies the width of the border around the stack label.
-* `Color` - Specifies the color of the border around the stack label.
+* [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelBorder.html#Syncfusion_Blazor_Charts_ChartStackLabelBorder_Width) - Specifies the width of the border around the stack label.
+* [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDefaultBorder.html#Syncfusion_Blazor_Charts_ChartDefaultBorder_Color) - Specifies the color of the border around the stack label.
 
- To customize the margin, we can use the `ChartStackLabelMargin` properties as given below:
+ To customize the margin, we can use the [ChartStackLabelMargin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelMargin.html) properties as given below:
 
-* `Bottom` - Specifies the bottom margin of the stack label.
-* `Top` - Specifies the top margin of the stack label.
-* `Right` - Specifies the right margin of the stack label.
-* `Left` - Specifies the left margin of the stack label.
+* [Bottom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelMargin.html#Syncfusion_Blazor_Charts_ChartStackLabelMargin_Bottom) - Specifies the bottom margin of the stack label.
+* [Top](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelMargin.html#Syncfusion_Blazor_Charts_ChartStackLabelMargin_Top) - Specifies the top margin of the stack label.
+* [Right](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelMargin.html#Syncfusion_Blazor_Charts_ChartStackLabelMargin_Right) - Specifies the right margin of the stack label.
+* [Left](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelMargin.html#Syncfusion_Blazor_Charts_ChartStackLabelMargin_Left) - Specifies the left margin of the stack label.
 
 ```cshtml
 @using Syncfusion.Blazor.Charts
@@ -659,19 +659,19 @@ We can customize the border of the stack labels using the `ChartStackLabelBorder
     <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
 
     <ChartSeriesCollection>
-        <ChartSeries DataSource="@ChartDatas" XName="X" YName="Y" Type="ChartSeriesType.StackingArea">
+        <ChartSeries DataSource="@ChartDatas" XName="X" YName="Y" Type="Syncfusion.Blazor.Charts.ChartSeriesType.StackingArea">
             <ChartSeriesAnimation Enable="false" />
             <ChartMarker>
                 <ChartDataLabel Visible="true" />
             </ChartMarker>
         </ChartSeries>
-        <ChartSeries DataSource="@ChartDatas" XName="X" YName="Y1" Type="ChartSeriesType.StackingArea">
+        <ChartSeries DataSource="@ChartDatas" XName="X" YName="Y1" Type="Syncfusion.Blazor.Charts.ChartSeriesType.StackingArea">
             <ChartSeriesAnimation Enable="false" />
             <ChartMarker>
                 <ChartDataLabel Visible="true" />
             </ChartMarker>
         </ChartSeries>
-        <ChartSeries DataSource="@ChartDatas" XName="X" YName="Y2" Type="ChartSeriesType.StackingArea">
+        <ChartSeries DataSource="@ChartDatas" XName="X" YName="Y2" Type="Syncfusion.Blazor.Charts.ChartSeriesType.StackingArea">
             <ChartSeriesAnimation Enable="false" />
             <ChartMarker>
                 <ChartDataLabel Visible="true" />
@@ -680,7 +680,7 @@ We can customize the border of the stack labels using the `ChartStackLabelBorder
     </ChartSeriesCollection>
 
     <ChartStackLabelSettings Visible="true" Format="{value}" Fill="#ADD8E6" Rx="10" Ry="10" Angle="35">
-        <ChartStackLabelFont TextAlignment="Alignment.Center" FontFamily="Roboto" Size="12px" FontStyle="bold" FontWeight="600" Color="blue" />
+        <ChartStackLabelFont TextAlignment="Syncfusion.Blazor.Charts.Alignment.Center" FontFamily="Roboto" Size="12px" FontStyle="bold" FontWeight="600" Color="blue" />
         <ChartStackLabelBorder Width="2" Color="#000000" />
         <ChartStackLabelMargin Bottom="10" Top="10" Right="10" Left="10" />
     </ChartStackLabelSettings>
@@ -710,7 +710,7 @@ We can customize the border of the stack labels using the `ChartStackLabelBorder
     };
 }
 ```
-![Blazor Stacked Area Chart with stack label customization](../images/chart-types-images/blazor-stacked-area-stack-labels-customization.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLoDxLdfizfRptS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Events
 
diff --git a/blazor/chart/chart-types/stacked-bar.md b/blazor/chart/chart-types/stacked-bar.md
index 35f81b3d33..3a025f806b 100644
--- a/blazor/chart/chart-types/stacked-bar.md
+++ b/blazor/chart/chart-types/stacked-bar.md
@@ -722,7 +722,7 @@ Use the [`Border`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart
 
 The stack labels display cumulative total values for stack segments directly using data labels. If all the values in a stack segment are negative, the stack label is displayed below the point.
 
-The `Visible` property of the `ChartStackLabelSettings` is used to enable stack labels. Setting it to **true** will display the stack labels.
+The [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html#Syncfusion_Blazor_Charts_ChartStackLabelSettings_Visible) property of the [ChartStackLabelSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html) is used to enable stack labels. Setting it to **true** will display the stack labels.
 
 ```cshtml
 @using Syncfusion.Blazor.Charts
@@ -785,38 +785,38 @@ The `Visible` property of the `ChartStackLabelSettings` is used to enable stack
     };
 }
 ```
-![Blazor Stacked Bar Chart with stack labels](../images/chart-types-images/blazor-stacked-bar-chart-stack-labels.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hZrSNxhHTLzDPlkS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ### Customization
 
 The stack labels can be customized using the `ChartStackLabelSettings` properties as given below.
 
-* `Fill` - Specifies the background color of the stack labels when border is set. The default value is **transparent**.
-* `Format` - Specifies the format of the stack labels. It supports a placeholder `{value}` which will be replaced by the stack label value.
-* `Rx` - Specifies the rounded corner radius along the X-axis (horizontal direction) for the stack label background. The default value is **5**.
-* `Ry` - Specifies the rounded corner radius along the Y-axis (vertical direction) for the stack label background. The default value is **5**.
-* `Angle` - Specifies the rotation angle for stack labels in degrees. The default value is **0**.
+* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html#Syncfusion_Blazor_Charts_ChartStackLabelSettings_Fill) - Specifies the background color of the stack labels when border is set. The default value is **transparent**.
+* [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html#Syncfusion_Blazor_Charts_ChartStackLabelSettings_Format) - Specifies the format of the stack labels. It supports a placeholder `{value}` which will be replaced by the stack label value.
+* [Rx](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html#Syncfusion_Blazor_Charts_ChartStackLabelSettings_Rx) - Specifies the rounded corner radius along the X-axis (horizontal direction) for the stack label background. The default value is **5**.
+* [Ry](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html#Syncfusion_Blazor_Charts_ChartStackLabelSettings_Ry) - Specifies the rounded corner radius along the Y-axis (vertical direction) for the stack label background. The default value is **5**.
+* [Angle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html#Syncfusion_Blazor_Charts_ChartStackLabelSettings_Angle) - Specifies the rotation angle for stack labels in degrees. The default value is **0**.
 
-We can customize the font of the stack labels using the `ChartStackLabelFont` properties as given below:
+We can customize the font of the stack labels using the [ChartStackLabelFont](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html) properties as given below:
 
-* `TextAlignment` - Customizes the alignment of the text within the stack label.
-* `FontFamily` - Customizes the font family for the stack label text.
-* `Size` - Customizes the font size of the stack label text.
-* `FontStyle` - Customizes the font style of the stack label text.
-* `FontWeight` - Customizes the font weight of the stack label text.
-* `Color` - Customizes the color of the stack label text.
+* [TextAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html#Syncfusion_Blazor_Charts_ChartStackLabelFont_TextAlignment) - Customizes the alignment of the text within the stack label.
+* [FontFamily](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html#Syncfusion_Blazor_Charts_ChartStackLabelFont_FontFamily) - Customizes the font family for the stack label text.
+* [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html#Syncfusion_Blazor_Charts_ChartStackLabelFont_Size) - Customizes the font size of the stack label text.
+* [FontStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDefaultFont.html#Syncfusion_Blazor_Charts_ChartDefaultFont_FontStyle) - Customizes the font style of the stack label text.
+* [FontWeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html#Syncfusion_Blazor_Charts_ChartStackLabelFont_FontWeight) - Customizes the font weight of the stack label text.
+* [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html#Syncfusion_Blazor_Charts_ChartStackLabelFont_Color) - Customizes the color of the stack label text.
 
-We can customize the border of the stack labels using the `ChartStackLabelBorder` properties as given below:
+We can customize the border of the stack labels using the [ChartStackLabelBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelBorder.html) properties as given below:
 
-* `Width` - Specifies the width of the border around the stack label.
-* `Color` - Specifies the color of the border around the stack label.
+* [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelBorder.html#Syncfusion_Blazor_Charts_ChartStackLabelBorder_Width) - Specifies the width of the border around the stack label.
+* [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDefaultBorder.html#Syncfusion_Blazor_Charts_ChartDefaultBorder_Color) - Specifies the color of the border around the stack label.
 
- To customize the margin, we can use the `ChartStackLabelMargin` properties as given below:
+ To customize the margin, we can use the [ChartStackLabelMargin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelMargin.html) properties as given below:
 
-* `Bottom` - Specifies the bottom margin of the stack label.
-* `Top` - Specifies the top margin of the stack label.
-* `Right` - Specifies the right margin of the stack label.
-* `Left` - Specifies the left margin of the stack label.
+* [Bottom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelMargin.html#Syncfusion_Blazor_Charts_ChartStackLabelMargin_Bottom) - Specifies the bottom margin of the stack label.
+* [Top](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelMargin.html#Syncfusion_Blazor_Charts_ChartStackLabelMargin_Top) - Specifies the top margin of the stack label.
+* [Right](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelMargin.html#Syncfusion_Blazor_Charts_ChartStackLabelMargin_Right) - Specifies the right margin of the stack label.
+* [Left](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelMargin.html#Syncfusion_Blazor_Charts_ChartStackLabelMargin_Left) - Specifies the left margin of the stack label.
 
 ```cshtml
 @using Syncfusion.Blazor.Charts
@@ -882,7 +882,7 @@ We can customize the border of the stack labels using the `ChartStackLabelBorder
     };
 }
 ```
-![Blazor Stacked Bar Chart with stack label customization](../images/chart-types-images/blazor-stacked-bar-chart-stack-labels-customization.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLeXRBdJVyXgzXA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Events
 
diff --git a/blazor/chart/chart-types/stacked-column.md b/blazor/chart/chart-types/stacked-column.md
index 97f3294846..565a62b9dd 100644
--- a/blazor/chart/chart-types/stacked-column.md
+++ b/blazor/chart/chart-types/stacked-column.md
@@ -728,7 +728,7 @@ Use the [`Border`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart
 
 The stack labels display cumulative total values for stack segments directly using data labels. If all the values in a stack segment are negative, the stack label is displayed below the point.
 
-The `Visible` property of the `ChartStackLabelSettings` is used to enable stack labels. Setting it to **true** will display the stack labels.
+The [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html#Syncfusion_Blazor_Charts_ChartStackLabelSettings_Visible) property of the [ChartStackLabelSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html) is used to enable stack labels. Setting it to **true** will display the stack labels.
 
 ```cshtml
 @using Syncfusion.Blazor.Charts
@@ -791,39 +791,38 @@ The `Visible` property of the `ChartStackLabelSettings` is used to enable stack
     };
 }
 ```
-
-![Blazor Stacked Column Chart with stack labels](../images/chart-types-images/blazor-stacked-column-chart-stack-label.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZBSjRhHzLworgii?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ### Customization
 
 The stack labels can be customized using the `ChartStackLabelSettings` properties as given below.
 
-* `Fill` - Specifies the background color of the stack labels when border is set. The default value is **transparent**.
-* `Format` - Specifies the format of the stack labels. It supports a placeholder `{value}` which will be replaced by the stack label value.
-* `Rx` - Specifies the rounded corner radius along the X-axis (horizontal direction) for the stack label background. The default value is **5**.
-* `Ry` - Specifies the rounded corner radius along the Y-axis (vertical direction) for the stack label background. The default value is **5**.
-* `Angle` - Specifies the rotation angle for stack labels in degrees. The default value is **0**.
+* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html#Syncfusion_Blazor_Charts_ChartStackLabelSettings_Fill) - Specifies the background color of the stack labels when border is set. The default value is **transparent**.
+* [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html#Syncfusion_Blazor_Charts_ChartStackLabelSettings_Format) - Specifies the format of the stack labels. It supports a placeholder `{value}` which will be replaced by the stack label value.
+* [Rx](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html#Syncfusion_Blazor_Charts_ChartStackLabelSettings_Rx) - Specifies the rounded corner radius along the X-axis (horizontal direction) for the stack label background. The default value is **5**.
+* [Ry](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html#Syncfusion_Blazor_Charts_ChartStackLabelSettings_Ry) - Specifies the rounded corner radius along the Y-axis (vertical direction) for the stack label background. The default value is **5**.
+* [Angle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html#Syncfusion_Blazor_Charts_ChartStackLabelSettings_Angle) - Specifies the rotation angle for stack labels in degrees. The default value is **0**.
 
-We can customize the font of the stack labels using the `ChartStackLabelFont` properties as given below:
+We can customize the font of the stack labels using the [ChartStackLabelFont](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html) properties as given below:
 
-* `TextAlignment` - Customizes the alignment of the text within the stack label.
-* `FontFamily` - Customizes the font family for the stack label text.
-* `Size` - Customizes the font size of the stack label text.
-* `FontStyle` - Customizes the font style of the stack label text.
-* `FontWeight` - Customizes the font weight of the stack label text.
-* `Color` - Customizes the color of the stack label text.
+* [TextAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html#Syncfusion_Blazor_Charts_ChartStackLabelFont_TextAlignment) - Customizes the alignment of the text within the stack label.
+* [FontFamily](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html#Syncfusion_Blazor_Charts_ChartStackLabelFont_FontFamily) - Customizes the font family for the stack label text.
+* [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html#Syncfusion_Blazor_Charts_ChartStackLabelFont_Size) - Customizes the font size of the stack label text.
+* [FontStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDefaultFont.html#Syncfusion_Blazor_Charts_ChartDefaultFont_FontStyle) - Customizes the font style of the stack label text.
+* [FontWeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html#Syncfusion_Blazor_Charts_ChartStackLabelFont_FontWeight) - Customizes the font weight of the stack label text.
+* [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html#Syncfusion_Blazor_Charts_ChartStackLabelFont_Color) - Customizes the color of the stack label text.
 
-We can customize the border of the stack labels using the `ChartStackLabelBorder` properties as given below:
+We can customize the border of the stack labels using the [ChartStackLabelBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelBorder.html) properties as given below:
 
-* `Width` - Specifies the width of the border around the stack label.
-* `Color` - Specifies the color of the border around the stack label.
+* [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelBorder.html#Syncfusion_Blazor_Charts_ChartStackLabelBorder_Width) - Specifies the width of the border around the stack label.
+* [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDefaultBorder.html#Syncfusion_Blazor_Charts_ChartDefaultBorder_Color) - Specifies the color of the border around the stack label.
 
- To customize the margin, we can use the `ChartStackLabelMargin` properties as given below:
+ To customize the margin, we can use the [ChartStackLabelMargin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelMargin.html) properties as given below:
 
-* `Bottom` - Specifies the bottom margin of the stack label.
-* `Top` - Specifies the top margin of the stack label.
-* `Right` - Specifies the right margin of the stack label.
-* `Left` - Specifies the left margin of the stack label.
+* [Bottom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelMargin.html#Syncfusion_Blazor_Charts_ChartStackLabelMargin_Bottom) - Specifies the bottom margin of the stack label.
+* [Top](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelMargin.html#Syncfusion_Blazor_Charts_ChartStackLabelMargin_Top) - Specifies the top margin of the stack label.
+* [Right](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelMargin.html#Syncfusion_Blazor_Charts_ChartStackLabelMargin_Right) - Specifies the right margin of the stack label.
+* [Left](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelMargin.html#Syncfusion_Blazor_Charts_ChartStackLabelMargin_Left) - Specifies the left margin of the stack label.
 
 ```cshtml
 @using Syncfusion.Blazor.Charts
@@ -860,7 +859,7 @@ We can customize the border of the stack labels using the `ChartStackLabelBorder
     </ChartSeriesCollection>
 
     <ChartStackLabelSettings Visible="true" Format="{value}" Fill="#ADD8E6" Rx="10" Ry="10" Angle="35">
-        <ChartStackLabelFont TextAlignment="Alignment.Center" FontFamily="Roboto" Size="12px" FontStyle="bold" FontWeight="600" Color="blue" />
+        <ChartStackLabelFont TextAlignment="Syncfusion.Blazor.Charts.Alignment.Center" FontFamily="Roboto" Size="12px" FontStyle="bold" FontWeight="600" Color="blue" />
         <ChartStackLabelBorder Width="2" Color="#000000" />
         <ChartStackLabelMargin Bottom="10" Top="10" Right="10" Left="10" />
     </ChartStackLabelSettings>
@@ -889,7 +888,7 @@ We can customize the border of the stack labels using the `ChartStackLabelBorder
     };
 }
 ```
-![Blazor Stacked Column Chart with stack label customization](../images/chart-types-images/blazor-stacked-column-chart-stack-label-customization.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hZLStxVnzLkSWnhh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Events
 
diff --git a/blazor/chart/chart-types/stacked-line.md b/blazor/chart/chart-types/stacked-line.md
index 6ae4df1120..032a8a9bfd 100644
--- a/blazor/chart/chart-types/stacked-line.md
+++ b/blazor/chart/chart-types/stacked-line.md
@@ -725,7 +725,7 @@ Use the [`Border`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart
 
 The stack labels display cumulative total values for stack segments directly using data labels. If all the values in a stack segment are negative, the stack label is displayed below the point.
 
-The `Visible` property of the `ChartStackLabelSettings` is used to enable stack labels. Setting it to **true** will display the stack labels.
+The [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html#Syncfusion_Blazor_Charts_ChartStackLabelSettings_Visible) property of the [ChartStackLabelSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html) is used to enable stack labels. Setting it to **true** will display the stack labels.
 
 ```cshtml
 @using Syncfusion.Blazor.Charts
@@ -792,38 +792,38 @@ The `Visible` property of the `ChartStackLabelSettings` is used to enable stack
 }
 ```
 
-![Blazor Stacked Line Chart with stack labels](../images/chart-types-images/blazor-stacked-line-chart-stack-labels.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVStnhHpUjFzPHz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ### Customization
 
 The stack labels can be customized using the `ChartStackLabelSettings` properties as given below.
 
-* `Fill` - Specifies the background color of the stack labels when border is set. The default value is **transparent**.
-* `Format` - Specifies the format of the stack labels. It supports a placeholder `{value}` which will be replaced by the stack label value.
-* `Rx` - Specifies the rounded corner radius along the X-axis (horizontal direction) for the stack label background. The default value is **5**.
-* `Ry` - Specifies the rounded corner radius along the Y-axis (vertical direction) for the stack label background. The default value is **5**.
-* `Angle` - Specifies the rotation angle for stack labels in degrees. The default value is **0**.
+* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html#Syncfusion_Blazor_Charts_ChartStackLabelSettings_Fill) - Specifies the background color of the stack labels when border is set. The default value is **transparent**.
+* [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html#Syncfusion_Blazor_Charts_ChartStackLabelSettings_Format) - Specifies the format of the stack labels. It supports a placeholder `{value}` which will be replaced by the stack label value.
+* [Rx](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html#Syncfusion_Blazor_Charts_ChartStackLabelSettings_Rx) - Specifies the rounded corner radius along the X-axis (horizontal direction) for the stack label background. The default value is **5**.
+* [Ry](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html#Syncfusion_Blazor_Charts_ChartStackLabelSettings_Ry) - Specifies the rounded corner radius along the Y-axis (vertical direction) for the stack label background. The default value is **5**.
+* [Angle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html#Syncfusion_Blazor_Charts_ChartStackLabelSettings_Angle) - Specifies the rotation angle for stack labels in degrees. The default value is **0**.
 
-We can customize the font of the stack labels using the `ChartStackLabelFont` properties as given below:
+We can customize the font of the stack labels using the [ChartStackLabelFont](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html) properties as given below:
 
-* `TextAlignment` - Customizes the alignment of the text within the stack label.
-* `FontFamily` - Customizes the font family for the stack label text.
-* `Size` - Customizes the font size of the stack label text.
-* `FontStyle` - Customizes the font style of the stack label text.
-* `FontWeight` - Customizes the font weight of the stack label text.
-* `Color` - Customizes the color of the stack label text.
+* [TextAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html#Syncfusion_Blazor_Charts_ChartStackLabelFont_TextAlignment) - Customizes the alignment of the text within the stack label.
+* [FontFamily](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html#Syncfusion_Blazor_Charts_ChartStackLabelFont_FontFamily) - Customizes the font family for the stack label text.
+* [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html#Syncfusion_Blazor_Charts_ChartStackLabelFont_Size) - Customizes the font size of the stack label text.
+* [FontStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDefaultFont.html#Syncfusion_Blazor_Charts_ChartDefaultFont_FontStyle) - Customizes the font style of the stack label text.
+* [FontWeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html#Syncfusion_Blazor_Charts_ChartStackLabelFont_FontWeight) - Customizes the font weight of the stack label text.
+* [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html#Syncfusion_Blazor_Charts_ChartStackLabelFont_Color) - Customizes the color of the stack label text.
 
-We can customize the border of the stack labels using the `ChartStackLabelBorder` properties as given below:
+We can customize the border of the stack labels using the [ChartStackLabelBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelBorder.html) properties as given below:
 
-* `Width` - Specifies the width of the border around the stack label.
-* `Color` - Specifies the color of the border around the stack label.
+* [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelBorder.html#Syncfusion_Blazor_Charts_ChartStackLabelBorder_Width) - Specifies the width of the border around the stack label.
+* [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDefaultBorder.html#Syncfusion_Blazor_Charts_ChartDefaultBorder_Color) - Specifies the color of the border around the stack label.
 
- To customize the margin, we can use the `ChartStackLabelMargin` properties as given below:
+ To customize the margin, we can use the [ChartStackLabelMargin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelMargin.html) properties as given below:
 
-* `Bottom` - Specifies the bottom margin of the stack label.
-* `Top` - Specifies the top margin of the stack label.
-* `Right` - Specifies the right margin of the stack label.
-* `Left` - Specifies the left margin of the stack label.
+* [Bottom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelMargin.html#Syncfusion_Blazor_Charts_ChartStackLabelMargin_Bottom) - Specifies the bottom margin of the stack label.
+* [Top](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelMargin.html#Syncfusion_Blazor_Charts_ChartStackLabelMargin_Top) - Specifies the top margin of the stack label.
+* [Right](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelMargin.html#Syncfusion_Blazor_Charts_ChartStackLabelMargin_Right) - Specifies the right margin of the stack label.
+* [Left](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelMargin.html#Syncfusion_Blazor_Charts_ChartStackLabelMargin_Left) - Specifies the left margin of the stack label.
 
 ```cshtml
 @using Syncfusion.Blazor.Charts
@@ -865,7 +865,7 @@ We can customize the border of the stack labels using the `ChartStackLabelBorder
     </ChartSeriesCollection>
 
     <ChartStackLabelSettings Visible="true" Format="{value}" Fill="#ADD8E6" Rx="10" Ry="10" Angle="35">
-        <ChartStackLabelFont TextAlignment="Alignment.Center" FontFamily="Roboto" Size="12px" FontStyle="bold" FontWeight="600" Color="blue" />
+        <ChartStackLabelFont TextAlignment="Syncfusion.Blazor.Charts.Alignment.Center" FontFamily="Roboto" Size="12px" FontStyle="bold" FontWeight="600" Color="blue" />
         <ChartStackLabelBorder Width="2" Color="#000000" />
         <ChartStackLabelMargin Bottom="10" Top="10" Right="10" Left="10" />
     </ChartStackLabelSettings>
@@ -892,7 +892,7 @@ We can customize the border of the stack labels using the `ChartStackLabelBorder
     };
 }
 ```
-![Blazor Stacked Line Chart with stack label customization](../images/chart-types-images/blazor-stacked-line-chart-stack-labels-customization.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VthyDnhRpUCdUdvZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Events
 
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-area-100-stack-labels-customization.png b/blazor/chart/images/chart-types-images/blazor-stacked-area-100-stack-labels-customization.png
deleted file mode 100644
index 328eed5a4e..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-stacked-area-100-stack-labels-customization.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-area-100-stack-labels.png b/blazor/chart/images/chart-types-images/blazor-stacked-area-100-stack-labels.png
deleted file mode 100644
index ccc0286376..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-stacked-area-100-stack-labels.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-area-stack-labels-customization.png b/blazor/chart/images/chart-types-images/blazor-stacked-area-stack-labels-customization.png
deleted file mode 100644
index a42d39a432..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-stacked-area-stack-labels-customization.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-area-stack-labels.png b/blazor/chart/images/chart-types-images/blazor-stacked-area-stack-labels.png
deleted file mode 100644
index b3683d73d3..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-stacked-area-stack-labels.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-bar-100-chart-stack-labels-customization.png b/blazor/chart/images/chart-types-images/blazor-stacked-bar-100-chart-stack-labels-customization.png
deleted file mode 100644
index fd3ea325ce..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-stacked-bar-100-chart-stack-labels-customization.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-bar-100-chart-stack-labels.png b/blazor/chart/images/chart-types-images/blazor-stacked-bar-100-chart-stack-labels.png
deleted file mode 100644
index 69b2e15691..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-stacked-bar-100-chart-stack-labels.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-bar-chart-stack-labels-customization.png b/blazor/chart/images/chart-types-images/blazor-stacked-bar-chart-stack-labels-customization.png
deleted file mode 100644
index 3b51f6f30b..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-stacked-bar-chart-stack-labels-customization.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-bar-chart-stack-labels.png b/blazor/chart/images/chart-types-images/blazor-stacked-bar-chart-stack-labels.png
deleted file mode 100644
index 7c22806819..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-stacked-bar-chart-stack-labels.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-column-100-chart-stack-labels-customization.png b/blazor/chart/images/chart-types-images/blazor-stacked-column-100-chart-stack-labels-customization.png
deleted file mode 100644
index 715423b743..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-stacked-column-100-chart-stack-labels-customization.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-column-100-chart-stack-labels.png b/blazor/chart/images/chart-types-images/blazor-stacked-column-100-chart-stack-labels.png
deleted file mode 100644
index a3a5c8a762..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-stacked-column-100-chart-stack-labels.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-column-chart-stack-label-customization.png b/blazor/chart/images/chart-types-images/blazor-stacked-column-chart-stack-label-customization.png
deleted file mode 100644
index d5ae48d6c8..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-stacked-column-chart-stack-label-customization.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-column-chart-stack-label.png b/blazor/chart/images/chart-types-images/blazor-stacked-column-chart-stack-label.png
deleted file mode 100644
index 1f635a6b0b..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-stacked-column-chart-stack-label.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-line-100-chart-stack-labels-customization.png b/blazor/chart/images/chart-types-images/blazor-stacked-line-100-chart-stack-labels-customization.png
deleted file mode 100644
index 90494078ad..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-stacked-line-100-chart-stack-labels-customization.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-line-100-chart-stack-labels.png b/blazor/chart/images/chart-types-images/blazor-stacked-line-100-chart-stack-labels.png
deleted file mode 100644
index 8d3b3156b1..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-stacked-line-100-chart-stack-labels.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-line-chart-stack-labels-customization.png b/blazor/chart/images/chart-types-images/blazor-stacked-line-chart-stack-labels-customization.png
deleted file mode 100644
index a959a4583d..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-stacked-line-chart-stack-labels-customization.png and /dev/null differ
diff --git a/blazor/chart/images/chart-types-images/blazor-stacked-line-chart-stack-labels.png b/blazor/chart/images/chart-types-images/blazor-stacked-line-chart-stack-labels.png
deleted file mode 100644
index 1c93d06019..0000000000
Binary files a/blazor/chart/images/chart-types-images/blazor-stacked-line-chart-stack-labels.png and /dev/null differ
diff --git a/blazor/chart/zooming.md b/blazor/chart/zooming.md
index ddaf6ef027..27613be1d4 100644
--- a/blazor/chart/zooming.md
+++ b/blazor/chart/zooming.md
@@ -203,7 +203,7 @@ By default, the zooming toolbar appears only when the chart is zoomed. However,
 
 ### Toolbar positioning
 
-The zoom toolbar in the chart can be repositioned using the `ChartZoomToolbarPosition`, allowing for flexible alignment and placement. It supports horizontal alignments (Near, Center, and Far) using the `HorizontalAlign` property, and vertical alignments (Top, Middle, and Bottom) using the `VerticalAlign` property. By default, `HorizontalAlign` and `VerticalAlign` are set to **Far** and **Top** respectively. Additionally, for more precise positioning, you can specify custom coordinates using the `X` and `Y` properties.
+The zoom toolbar in the chart can be repositioned using the [ChartZoomToolbarPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartZoomToolbarPosition.html), allowing for flexible alignment and placement. It supports horizontal alignments (Near, Center, and Far) using the [HorizontalAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartZoomToolbarPosition.html#Syncfusion_Blazor_Charts_ChartZoomToolbarPosition_HorizontalAlign) property, and vertical alignments (Top, Middle, and Bottom) using the [VerticalAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartZoomToolbarPosition.html#Syncfusion_Blazor_Charts_ChartZoomToolbarPosition_VerticalAlign) property. By default, `HorizontalAlign` and `VerticalAlign` are set to **Far** and **Top** respectively. Additionally, for more precise positioning, you can specify custom coordinates using the [X](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartZoomToolbarPosition.html#Syncfusion_Blazor_Charts_ChartZoomToolbarPosition_X) and [Y](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartZoomToolbarPosition.html#Syncfusion_Blazor_Charts_ChartZoomToolbarPosition_Y) properties.
 
 ```cshtml
 @using Syncfusion.Blazor.Charts
@@ -243,6 +243,7 @@ The zoom toolbar in the chart can be repositioned using the `ChartZoomToolbarPos
 }
 ```
 ![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" %}
 
 ## Enable pan
 
@@ -357,7 +358,7 @@ The [EnableScrollbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch
 
 ### Scrollbar positioning
 
-The `Position` property in [ChartAxisScrollbarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAxisScrollbarSettings.html) allows users to specify their preferred scrollbar location. By default, both vertical and horizontal scrollbars are rendered near their respective axes, with the `Position` property value set to `PlaceNextToAxisLine`. Users can set `Left` or `Right` to position the vertical scrollbar and `Top` or `Bottom` to position the horizontal scrollbar.
+The [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonScrollbarSettings.html#Syncfusion_Blazor_Charts_ChartCommonScrollbarSettings_Position) property in [ChartAxisScrollbarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAxisScrollbarSettings.html) allows users to specify their preferred scrollbar location. By default, both vertical and horizontal scrollbars are rendered near their respective axes, with the `Position` property value set to [PlaceNextToAxisLine](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ScrollbarPosition.html#Syncfusion_Blazor_Charts_ScrollbarPosition_PlaceNextToAxisLine). Users can set [Left](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ScrollbarPosition.html#Syncfusion_Blazor_Charts_ScrollbarPosition_Left) or [Right](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ScrollbarPosition.html#Syncfusion_Blazor_Charts_ScrollbarPosition_Right) to position the vertical scrollbar and [Top](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ScrollbarPosition.html#Syncfusion_Blazor_Charts_ScrollbarPosition_Top) or [Bottom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ScrollbarPosition.html#Syncfusion_Blazor_Charts_ScrollbarPosition_Bottom) to position the horizontal scrollbar.
 
 ```cshtml
 @using Syncfusion.Blazor.Charts
@@ -377,7 +378,7 @@ The `Position` property in [ChartAxisScrollbarSettings](https://help.syncfusion.
 
     <ChartSeriesCollection>
         <ChartSeries DataSource="@SalesReports" Name="Warmest" XName="XValue" Width="2" Opacity="1"
-                     YName="YValue" Type="ChartSeriesType.Area">
+                     YName="YValue" Type="Syncfusion.Blazor.Charts.ChartSeriesType.Area">
         </ChartSeries>
     </ChartSeriesCollection>
 
@@ -417,10 +418,11 @@ The `Position` property in [ChartAxisScrollbarSettings](https://help.syncfusion.
 }
 ```
 ![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" %}
 
 ## Auto interval on zooming
 
-The axis interval will be calculated automatically with respect to the zoomed range, if the [EnableAutoIntervalOnZooming](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonAxis.html#Syncfusion_Blazor_Charts_ChartCommonAxis_EnableAutoIntervalOnZooming) property is set to **true**.
+The axis interval will be calculated automatically with respect to the zoomed range, if the [EnableAutoIntervalOnZooming](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAxis.html#Syncfusion_Blazor_Charts_ChartAxis_EnableAutoIntervalOnZooming) property is set to **true**.
 
 ```cshtml
 
diff --git a/blazor/chat-ui/images/markdown.png b/blazor/chat-ui/images/markdown.png
new file mode 100644
index 0000000000..b1dd6f5044
Binary files /dev/null and b/blazor/chat-ui/images/markdown.png differ
diff --git a/blazor/chat-ui/messages.md b/blazor/chat-ui/messages.md
index cd3eb213f9..c7a300f7df 100644
--- a/blazor/chat-ui/messages.md
+++ b/blazor/chat-ui/messages.md
@@ -675,3 +675,151 @@ You can use the `itemClicked` event when the toolbar item is clicked in the `Mes
 }
 
 ```
+
+## Displaying the markdown content
+
+The Syncfusion ChatUI supports `Markdown` formatting for messages, enabling rich text capabilities such as bold, italic, links, and more.
+
+### Prerequisites
+
+- `Markdig` for parsing Markdown (installed via NuGet):
+
+  ```bash
+  
+  dotnet add package Markdig
+
+  ```
+
+### Supported markdown formats
+
+The ChatUI leverages the `Markdig` library to support the following Markdown formats:
+
+- **Bold**: ** text ** or __ text __ 
+- *Italic*: * text * or _ text _ 
+- [Links](url): [Link text] (url)
+- Lists: - Item or 1. item
+- Code: 'code' or code 
+
+For full list refer to the  [Markdig documentation](https://www.nuget.org/packages/Markdig).
+
+### Configuring Markdown
+
+By integrating the [Markdig](https://www.nuget.org/packages/Markdig) library, you can parse Markdown text to enhance the chat experience. The [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.ChatMessage.html#Syncfusion_Blazor_InteractiveChat_ChatMessage_Text) property of each message can accept HTML generated from Markdown, allowing for formatted text display.
+
+```cshtml
+
+@using Syncfusion.Blazor.InteractiveChat
+@using Markdig
+
+<div class="control-section chat-ui">
+    <div class="markdown-chatui">
+        <SfChatUI @ref="ChatUI"
+                  User="@currentUserModel"
+                  Messages="@chatMessages"
+                  HeaderText="@headerText"
+                  Suggestions="@(suggestions.Select(s => s.DisplayText).ToList())"
+                  MessageSend="HandleMessageSend"
+                  ShowTimeBreak="true">
+        </SfChatUI>
+    </div>
+</div>
+
+<style>
+    .markdown-chatui {
+        height: 380px;
+        width: 450px;
+        margin: 0 auto;
+    }
+     .markdown-chatui p {
+        margin: 0;
+        display: inline-block;
+    }
+    @@media only screen and (max-width: 850px) {
+        .markdown-chatui {
+            width: 80%;
+        }
+    }
+</style>
+
+@code {
+    private SfChatUI ChatUI { get; set; }
+    private string headerText = "Chat UI with Markdown";
+    private UserModel currentUserModel =  GetMarkdownUser("user1", "Albert");
+    private UserModel michaleUserModel =  GetMarkdownUser("user2", "Michale Suyama");
+    private List<ChatMessage> chatMessages = new List<ChatMessage>();
+    private List<Suggestion> suggestions = new List<Suggestion>
+    {
+        new Suggestion
+        {
+            DisplayText = "Share quick link",
+            MarkdownText = "Check out our [project dashboard](https://help.syncfusion.com) for updates!"
+        },
+        new Suggestion
+        {
+            DisplayText = "Emphasize priority",
+            MarkdownText = "This is **high priority** and needs _immediate attention_."
+        }
+    };
+
+    protected override void OnInitialized()
+    {
+        chatMessages.Add(new ChatMessage
+            {
+                Author = currentUserModel,
+                Text = RenderMarkdown("Hey Michale, did you review the _new API documentation_?"),
+                Timestamp = DateTime.UtcNow.AddMinutes(-5)
+            });
+        chatMessages.Add(new ChatMessage
+            {
+                Author = michaleUserModel,
+                Text = RenderMarkdown("Yes! The **endpoint specifications** look great. Check the [integration guide](https://blazor.syncfusion.com/documentation/introduction) when you get a chance."),
+                Timestamp = DateTime.UtcNow.AddMinutes(-5)
+            });
+    }
+
+    private async Task HandleMessageSend(ChatMessageSendEventArgs args)
+    {
+        if (string.IsNullOrEmpty(args.Message.Text))
+        {
+            return;
+        }
+        args.Cancel = true; 
+        var suggestion = suggestions.FirstOrDefault(s => s.DisplayText == args.Message.Text);
+        var messageText = suggestion != null ? suggestion.MarkdownText : args.Message.Text;
+
+        var newMessage = new ChatMessage
+            {
+                Text = RenderMarkdown(messageText),
+                Author = currentUserModel,
+                Timestamp = DateTime.Now
+            };
+
+        chatMessages.Add(newMessage);
+        await InvokeAsync(StateHasChanged); 
+    }
+
+    private string RenderMarkdown(string markdownText)
+    {
+        var pipeline = new MarkdownPipelineBuilder().UseAdvancedExtensions().Build();
+        return Markdig.Markdown.ToHtml(markdownText, pipeline);
+    }
+
+    public static UserModel GetMarkdownUser(string Id, string Username)
+    {
+        return new UserModel()
+            {
+                ID = Id,
+                User = Username
+            };
+    }
+
+    private class Suggestion
+    {
+        public string DisplayText { get; set; } = string.Empty;
+        public string MarkdownText { get; set; } = string.Empty;
+    }
+}
+
+```
+
+![Blazor Chat UI Markdown](./images/markdown.png)
diff --git a/blazor/datagrid/accessibility.md b/blazor/datagrid/accessibility.md
index 456daccd61..f080eea9a8 100644
--- a/blazor/datagrid/accessibility.md
+++ b/blazor/datagrid/accessibility.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Accessibility in Blazor DataGrid | Syncfusion
-description: Checkout and learn here all about accessibility in Syncfusion Blazor DataGrid and much more.
+description: Checkout and learn here all about accessibility features in Syncfusion Blazor DataGrid, including keyboard navigation, screen reader support, and more.
 platform: Blazor
 control: DataGrid
 documentation: ug
@@ -169,7 +169,7 @@ The Syncfusion Blazor DataGrid followed the [keyboard interaction](https://www.w
 |-----|----- | -----|
 | <kbd>F2</kbd> | <kbd>F2</kbd> | Starts editing of selected row if Mode is Normal/Dialog or Starts editing of selected cell if Mode is Batch. |
 | <kbd>Enter</kbd> | <kbd>Enter</kbd> | Saves the current form it the Mode is Normal or Dialog / Saves the current cell and starts editing the next row cell if Mode is Batch. |
-| <kbd>Insert</kbd> | <kbd>⌘</kbd> + <kbd>Enter</kbd> | Creates a new add form depending on the NewRowPosition. |
+| <kbd>Insert</kbd> | <kbd>⌥</kbd> + <kbd>Enter</kbd> | Creates a new add form depending on the NewRowPosition. |
 | <kbd>Delete</kbd> | <kbd>Delete</kbd> | Deletes the current selected record. |
 | <kbd>Tab</kbd> | <kbd>Tab</kbd> | Navigates to the next editable cell if the Mode is Normal or Dialog / Saves the current cell and starts editing the next cell is Mode is Batch. |
 | <kbd>Shift</kbd> + <kbd>Tab</kbd> | <kbd>⇧</kbd> + <kbd>Tab</kbd> | Navigates to the previous editable cell if the Mode is Normal or Dialog / Saves the current cell and starts editing the previous cell is Mode is Batch. |
diff --git a/blazor/datagrid/cell.md b/blazor/datagrid/cell.md
index 0231ba2e7d..68276468bb 100644
--- a/blazor/datagrid/cell.md
+++ b/blazor/datagrid/cell.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Cell in Blazor DataGrid | Syncfusion
-description: Checkout and learn here all about the Cell in the Syncfusion Blazor DataGrid and much more.
+description: Check out this page to learn how to set gridlines, tooltips, styles, and more in cells in the Syncfusion Blazor DataGrid component.
 platform: Blazor
 control: DataGrid
 documentation: ug
diff --git a/blazor/datagrid/column-resizing.md b/blazor/datagrid/column-resizing.md
index 4cabe6784d..4628e0a856 100644
--- a/blazor/datagrid/column-resizing.md
+++ b/blazor/datagrid/column-resizing.md
@@ -88,7 +88,8 @@ public class OrderDetails
 
 > * You can disable resizing for a particular column by setting the [AllowResizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowResizing) property of **GridColumn** to false.
 > * In RTL mode, you can click and drag the left edge of the header cell to resize the column.
-> * The width property of the column can be set initially to define the default width of the column. However, when column resizing is enabled, you can override the default width by manually resizing the columns.
+> * The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Width) property of the GridColumn can be set initially to define the default width of the column. However, when column resizing is enabled, you can override the default width by manually resizing the columns.
+> * When the `Width` property of a GridColumn is explicitly set to **0** and column resizing is enabled, the DataGrid will automatically assign a default width of **200px** to that column.
 
 ## Restrict the resizing based on minimum and maximum width
 
@@ -562,4 +563,4 @@ public class OrderDetails
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBTWViiLnOofXge?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBTWViiLnOofXge?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
diff --git a/blazor/datagrid/context-menu.md b/blazor/datagrid/context-menu.md
index e998687f34..a98d0e8d44 100644
--- a/blazor/datagrid/context-menu.md
+++ b/blazor/datagrid/context-menu.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Context Menu in Blazor DataGrid | Syncfusion
-description: Checkout and learn here all about Context Menu in Syncfusion Blazor DataGrid and much more.
+description: Explore and understand the Context Menu in Syncfusion Blazor DataGrid. Learn about its features, usage, customization, and more.
 platform: Blazor
 control: DataGrid
 documentation: ug
@@ -779,5 +779,113 @@ public class OrderData
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/VNLIZfXYKSwAiUpU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
+### Access specific row details on context menu click
 
-N> You can refer to [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to understand how to present and manipulate data.
\ No newline at end of file
+The Syncfusion Blazor DataGrid allows you to interact with specific row data when a context menu item is clicked. This feature is useful when you want to perform actions like viewing, editing, or processing data from the selected row.
+
+You can achieve this by handling the [ContextMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuClickEventArgs-1.html) event. This event provides access to the clicked menu item and the associated row data, enabling you to fetch and display specific details dynamically.
+
+Steps to access row data on context menu click:
+
+1. Define a custom context menu item using the [ContextMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuItemModel.html) property.
+2. Handle the `ContextMenuItemClicked` event to capture the selected row's data.
+3. Use the `RowInfo.RowData` property from the event arguments to access the full row details.
+
+The following example demonstrates how to fetch specific row details when a context menu item is clicked in the Grid using the `ContextMenuItemClicked` event. The fetch data item retrieves the row information and displays it below the Grid:
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Grids
+
+<SfGrid @ref="Grid" DataSource="@Orders" AllowPaging="true" ContextMenuItems="@(new List<ContextMenuItemModel>() { new ContextMenuItemModel { Text = "fetch data", Id = "fetch data" } })">
+    <GridEvents ContextMenuItemClicked="OnContextMenuClick" TValue="OrderData"></GridEvents>
+    <GridPageSettings PageSize="8"></GridPageSettings>
+    <GridColumns>
+       <GridColumn Field="OrderID" HeaderText="Order ID" Width="90" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" />
+       <GridColumn Field="CustomerID" HeaderText="Customer ID" Width="100" />
+       <GridColumn Field="ShipCity" HeaderText="ShipCity" Width="100" />
+       <GridColumn Field="ShipName" HeaderText="ShipName" Width="100" />
+    </GridColumns>
+</SfGrid>
+ 
+@if (rowData != null)
+{
+    <div class="mt-3 p-3 border rounded bg-light">
+        <h5>Selected Row Details:</h5>
+        <p><strong>Order ID:</strong> @rowData.OrderID</p>
+        <p><strong>Customer ID:</strong> @rowData.CustomerID</p>
+        <p><strong>ShipCity:</strong> @rowData.ShipCity</p>
+        <p><strong>ShipName:</strong> @rowData.ShipName</p>
+    </div>
+}
+
+@code {
+    private SfGrid<OrderData> Grid;
+    public List<OrderData> Orders { get; set; }
+ 
+    private OrderData rowData { get; set; }
+
+    protected override void OnInitialized()
+    {
+        Orders = OrderData.GetAllRecords();
+    }
+
+    public void OnContextMenuClick(ContextMenuClickEventArgs<OrderData> args)
+    {
+        if (args.Item.Id == "fetch data")
+        {
+            rowData = args.RowInfo.RowData;
+        }
+    }
+
+}
+
+{% endhighlight %}
+
+{% highlight c# tabtitle="OrderData.cs" %}
+
+public class OrderData
+{
+    public static List<OrderData> order = new List<OrderData>();
+    public OrderData(int OrderID, string CustomerId, string ShipCity, string ShipName)
+    {
+        this.OrderID = OrderID;
+        this.CustomerID = CustomerId;
+        this.ShipCity = ShipCity;
+        this.ShipName = ShipName;
+    }
+    public static List<OrderData> GetAllRecords()
+    {
+        if (order.Count == 0)
+        {
+            order.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier"));
+            order.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
+            order.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
+            order.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
+            order.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
+            order.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
+            order.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese"));
+            order.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt"));
+            order.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Importadora"));
+            order.Add(new OrderData(10257, "HILAA", "San Cristóbal", "HILARION-Abastos"));
+            order.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel"));
+            order.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial Moctezuma"));
+            order.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen"));
+            order.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que Delícia"));
+            order.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery"));
+        }
+        return order;
+    }
+    public int OrderID { get; set; }
+    public string CustomerID { get; set; }
+    public string ShipCity { get; set; }
+    public string ShipName { get; set; }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLetwrTrwitHdvW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+N> You can refer to [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to understand how to present and manipulate data.
diff --git a/blazor/datagrid/edit-types.md b/blazor/datagrid/edit-types.md
index 81ea70011b..ec4726f9a3 100644
--- a/blazor/datagrid/edit-types.md
+++ b/blazor/datagrid/edit-types.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Edit Types in Blazor DataGrid | Syncfusion
-description: Checkout and learn here all about Edit Types in Syncfusion Blazor DataGrid and much more details.
+description: Learn about the different edit types available in the Syncfusion Blazor DataGrid, how to customize them in the Grid, and much more.
 platform: Blazor
 control: DataGrid
 documentation: ug
@@ -748,7 +748,7 @@ public class OrderData
 
 ## Customize DatePicker of DatePickerEdit Type
 
-You can customize the [SfDatePicker](https://blazor.syncfusion.com/documentation/datepicker/getting-started-with-web-app) in the Grid edit form for date data type columns using the [EditorSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_EditorSettings) property. This customization allows you to adjust the properties and behavior of the `SfDatePicker` to meet your specific requirements. The [DateEditCellParams](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.DatePickerEditCellParams.html) class helps you achieve this customization by configuring the `EditorSettings` of the respective column in the Grid.
+You can customize the [SfDatePicker](https://blazor.syncfusion.com/documentation/datepicker/getting-started-with-web-app) in the Grid edit form for date data type columns using the [EditorSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_EditorSettings) property. This customization allows you to adjust the properties and behavior of the `SfDatePicker` to meet your specific requirements. The [DateEditCellParams](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.DateEditCellParams.html) class helps you achieve this customization by configuring the `EditorSettings` of the respective column in the Grid.
 
 The table below highlights the key aspects of customizing a `SfDatePicker` using the `EditorSettings` property of a [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html):
 
@@ -855,13 +855,13 @@ public class OrderData
 
 ## Customize TimePicker of TimePickerEdit Type
 
-You can customize the [SfTimePicker](https://blazor.syncfusion.com/documentation/timepicker/getting-started-with-web-app) in the Grid edit form for time data type columns using the [EditorSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_EditorSettings) property. This customization allows you to adjust the properties and behavior of the `SfTimePicker` to meet your specific requirements. The [TimeEditCellParams](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.TimeEditCellParams.html) class helps you achieve this customization by configuring the `EditorSettings` of the respective column in the Grid.
+You can customize the [SfTimePicker](https://blazor.syncfusion.com/documentation/timepicker/getting-started-webapp) in the Grid edit form for time data type columns using the [EditorSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_EditorSettings) property. This customization allows you to adjust the properties and behavior of the `SfTimePicker` to meet your specific requirements. The [TimeEditCellParams](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.TimeEditCellParams.html) class helps you achieve this customization by configuring the `EditorSettings` of the respective column in the Grid.
 
 The table below highlights the key aspects of customizing a `SfTimePicker` using the `EditorSettings` property of a [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html):
 
 | Component  | Edit Type    | Description                                                                                              | Example Customized Edit Params |
 |------------|--------------|----------------------------------------------------------------------------------------------------------|---------------------------------|
-| [SfTimePicker](https://blazor.syncfusion.com/documentation/timepicker/getting-started-with-web-app) | TimePickerEdit  | The `TimePickerEdit` type renders a `SfTimePicker` for time data type columns. To customize the `SfTimePicker`, refer to the [SfTimePicker API documentation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfTimePicker-1.html) for detailed information on available properties. | Params: { Value: new Date() }    |
+| [SfTimePicker](https://blazor.syncfusion.com/documentation/timepicker/getting-started-webapp) | TimePickerEdit  | The `TimePickerEdit` type renders a `SfTimePicker` for time data type columns. To customize the `SfTimePicker`, refer to the [SfTimePicker API documentation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfTimePicker-1.html) for detailed information on available properties. | Params: { Value: new Date() }    |
 
 Below is an example demonstrating how to customize the `SfTimePicker` for the **OrderTime** column in the Grid:
 
@@ -1739,6 +1739,8 @@ public class EmployeeData
 
 ![Render images in the DropDownList editor using the ItemTemplate](./images/blazor-datagrid-render-image-using-item-template.gif)
 
+> You can find the sample in the following [Github](https://github.com/SyncfusionExamples/databinding-in-blazor-datagrid/tree/master/Render-image-in-dropdownlist) repository.
+
 ### Render multiple columns in DropDownList
 
 The Syncfusion Blazor DataGrid allows you to render a [SfDropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) within the Grid's edit form for a specific column. This feature is particularly useful when you want to display more detailed information for each item in the `SfDropDownList` while editing a column.
diff --git a/blazor/datagrid/editing.md b/blazor/datagrid/editing.md
index 7f0e4f3df7..91183218b0 100644
--- a/blazor/datagrid/editing.md
+++ b/blazor/datagrid/editing.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Editing in Blazor DataGrid | Syncfusion
-description: Checkout and learn here all about Editing in Syncfusion Blazor DataGrid and much more details.
+description: Discover comprehensive details about editing features in the Syncfusion Blazor DataGrid, including how to enable and customize them.
 platform: Blazor
 control: DataGrid
 documentation: ug
@@ -1621,6 +1621,198 @@ public class OrderData
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/BDBTWrDHUvvLUGmg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
+## Perform CRUD operation using Blazor DataGrid events
+
+The Syncfusion 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
+
+Define the `Book` model class along with the `ILibraryService` interface. The Book model will represent the data structure for the books, and the `ILibraryService` interface will define the CRUD methods to interact with the database.
+
+**Book Model**
+
+The Book model represents the structure of a book in a library system. It includes essential properties such as Id, Name, Author, Quantity, Price, and Available.
+
+```cs
+public class Book
+{
+    public long Id { get; set; }
+    public string Name { get; set; } = null!;
+    public string Author { get; set; } = null!;
+    public int? Quantity { get; set; }
+    public int Price { get; set; }
+    public bool? Available { get; set; }
+}
+```
+
+**ILibraryService Interface**
+
+The `ILibraryService` interface declares the CRUD operations that interact with the database for managing `Book` data.
+
+```csharp
+using System.Collections.Generic;
+using System.Linq;
+
+namespace LibraryManagement.Models
+{
+    interface ILibraryService
+    {
+        IQueryable<Book> GetBooks();
+        void InsertBook(Book employee);
+        void UpdateBook(long id, Book employee);
+        Book SingleBook(long id);
+        void DeleteBook(long id);
+    }
+}
+```
+
+### Create an intermediate service using the interface
+
+Now, implement the `ILibraryService` interface in a service class. This service interacts with the database using Entity Framework and performs CRUD operations.
+
+```csharp
+using Microsoft.EntityFrameworkCore;
+using System.Linq;
+
+namespace LibraryManagement.Models
+{
+    public class LibraryService : ILibraryService
+    {
+        private LibraryContext _context;
+        public LibraryService(LibraryContext context)
+        {
+            _context = context;
+        }
+
+        public void DeleteBook(long id)
+        {
+            try
+            {
+                Book ord = _context.Books.Find(id);
+                _context.Books.Remove(ord);
+                _context.SaveChanges();
+            }
+            catch
+            {
+                throw;
+            }
+        }
+
+        public IQueryable<Book> GetBooks()
+        {
+            try
+            {
+                return _context.Books.AsQueryable();
+            }
+            catch
+            {
+                throw;
+            }
+        }
+
+        public void InsertBook(Book book)
+        {
+            try
+            {
+                _context.Books.Add(book);
+                _context.SaveChanges();
+            }
+            catch
+            {
+                throw;
+            }
+        }
+        public void UpdateBook(long id, Book book)
+        {
+            try
+            {
+                var local = _context.Set<Book>().Local.FirstOrDefault(entry => entry.Id.Equals(book.Id));
+                // check if local is not null
+                if (local != null)
+                {
+                    // detach
+                    _context.Entry(local).State = EntityState.Detached;
+                }
+                _context.Entry(book).State = EntityState.Modified;
+                _context.SaveChanges();
+            }
+            catch
+            {
+                throw;
+            }
+        }
+    }
+}
+```
+
+### Configure the DataGrid to perform CRUD actions using Blazor DataGrid events
+
+To perform CRUD (Create, Read, Update, and Delete) operations with the Syncfusion Blazor DataGrid and keep your database in sync, handle the relevant Grid events. Since data is bound to the Grid using the `DataSource` property, you must explicitly update your backend in response to user actions.
+
+**RowUpdated:** Triggered when a record is added or edited. Use this event to insert or update the record in your database.
+
+**RowDeleting:** Triggered when a record is deleted. Use this event to remove the record from your database.
+
+Below is an example showing how to wire up these events to perform CRUD operations using a service:
+
+```cs
+@page "/counter"
+@rendermode InteractiveAuto
+
+@using Syncfusion.Blazor.Data
+@using BlazorWebApp.Shared.Models
+@using BlazorWebApp.Shared.Services
+
+@inject ClientServices clientlibrary
+
+<SfGrid DataSource="@LibraryBooks"
+    Toolbar="@(new List<string> { "Add", "Edit", "Delete", "Cancel", "Update" })"
+    TValue="Book">
+    <GridEditSettings AllowAdding="true"
+              AllowDeleting="true"
+              AllowEditing="true"
+              Mode="EditMode.Normal"></GridEditSettings>
+    <GridEvents RowDeleting="RowDeleting"
+        RowUpdated="RowUpdated"
+        TValue="Book"></GridEvents>
+    <GridColumns>
+    <GridColumn Field="@nameof(Book.Id)" IsPrimaryKey="true" IsIdentity="true" Visible="false"></GridColumn>
+    <GridColumn Field="@nameof(Book.Name)" Width="150"></GridColumn>
+    <GridColumn Field="@nameof(Book.Author)" Width="150"></GridColumn>
+    <GridColumn Field="@nameof(Book.Quantity)" Width="90" TextAlign="TextAlign.Right"></GridColumn>
+    <GridColumn Field="@nameof(Book.Price)" Width="90" Format="C2" TextAlign="TextAlign.Right"></GridColumn>
+    <GridColumn Field="@nameof(Book.Available)" DisplayAsCheckBox="true" Width="70"></GridColumn>
+    </GridColumns>
+</SfGrid>
+
+@code {
+    public List<Book> LibraryBooks { get; set; } = new();
+
+    protected override async Task OnInitializedAsync()
+    {
+    LibraryBooks = await clientlibrary.GetBooks();
+    }
+    public async Task RowDeleting(RowDeletingEventArgs<Book> args)
+    {
+    await clientlibrary.RemoveBook(args.Datas[0].Id);
+    }
+    public async Task RowUpdated(RowUpdatedEventArgs<Book> args)
+    {
+    if (args.Action == SaveActionType.Added)
+    {
+        await clientlibrary.InsertBook(args.Data); // Handle insert.
+    }
+    else if (args.Action == SaveActionType.Edited)
+    {
+        await clientlibrary.UpdateBook(args.Data.Id, args.Data); // Handle update.
+    }
+    }
+}
+```
+
+This approach ensures that all CRUD actions performed in the Grid are synchronized with your backend data source.
+
+> You can find the sample in the following [Github](https://github.com/SyncfusionExamples/blazor-server-datagrid-efcore-crud/) repository.
 
 ## See also
 
diff --git a/blazor/datagrid/filter-menu.md b/blazor/datagrid/filter-menu.md
index 541c0e20c8..0fdcbe4b3c 100644
--- a/blazor/datagrid/filter-menu.md
+++ b/blazor/datagrid/filter-menu.md
@@ -739,6 +739,100 @@ You can prevent autofill feature by setting the [Autofill](https://help.syncfusi
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/BtBpXMrazUJxtJCP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
+### Hide the filter operator dropdownlist in the filter menu dialog
+
+To hide the operator dropdown in the menu filter dialog of the Syncfusion Blazor DataGrid, the following CSS can be used to override the styling of the **.e-flm_optrdiv** class. Using this customization logic, the interface becomes more focused, allowing a default filter behavior to be applied automatically.
+
+```css
+    .e-flm_optrdiv {
+        display: none;
+    }
+```
+
+The following example demonstrates how to enable menu filtering and hide the operator dropdown in the filter popup:
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Grids
+
+<SfGrid DataSource="@Orders" AllowFiltering="true" Height="315">
+    <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Menu"></GridFilterSettings>
+    <GridColumns>
+        <GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="90"></GridColumn>
+        <GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer ID" Width="150"></GridColumn>
+        <GridColumn Field=@nameof(OrderData.Freight) HeaderText="Freight" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Format="C2" Width="130"></GridColumn>
+        <GridColumn Field=@nameof(OrderData.OrderDate) HeaderText="Order Date" Format="d" Type="Syncfusion.Blazor.Grids.ColumnType.Date" Width="130"></GridColumn>
+    </GridColumns>
+</SfGrid>
+
+<style>
+    .e-flm_optrdiv {
+        display: none;
+    }
+</style>
+
+
+@code {
+    public List<OrderData> Orders { get; set; }
+   
+    protected override void OnInitialized()
+    {
+        Orders = OrderData.GetAllRecords();
+    }    
+}
+
+{% endhighlight %}
+
+{% highlight c# tabtitle="OrderData.cs" %}
+
+public class OrderData
+{
+    public static List<OrderData> Orders = new List<OrderData>();
+    public OrderData()
+    {
+
+    }
+    public OrderData(int? OrderID, string CustomerID, double Freight,DateTime? OrderDate)
+    {
+        this.OrderID = OrderID;
+        this.CustomerID = CustomerID;   
+        this.Freight = Freight;  
+        this.OrderDate = OrderDate;           
+    }
+
+    public static List<OrderData> GetAllRecords()
+    {
+        if (Orders.Count() == 0)
+        {
+            int code = 10;
+            for (int i = 1; i < 2; i++)
+            {
+                Orders.Add(new OrderData(10248, "VINET", 32.38,new DateTime(1996,7,4)));
+                Orders.Add(new OrderData(10249, "TOMSP", 11.61, new DateTime(1996, 7, 5)));
+                Orders.Add(new OrderData(10250, "HANAR", 65.83, new DateTime(1996, 7, 6)));
+                Orders.Add(new OrderData(10251, "VINET", 41.34, new DateTime(1996, 7, 7)));
+                Orders.Add(new OrderData(10252, "SUPRD", 51.30, new DateTime(1996, 7, 8)));
+                Orders.Add(new OrderData(10253, "HANAR", 58.17, new DateTime(1996, 7, 9)));
+                Orders.Add(new OrderData(10254, "CHOPS", 22.98, new DateTime(1996, 7, 10)));
+                Orders.Add(new OrderData(10255, "VINET", 148.33, new DateTime(1996, 7, 11)));
+                Orders.Add(new OrderData(10256, "HANAR", 13.97, new DateTime(1996, 7, 12)));
+                code += 5;
+            }
+        }
+        return Orders;
+    }
+    public int? OrderID { get; set; }
+    public string CustomerID { get; set; }
+    public double? Freight { get; set; }
+    public DateTime? OrderDate { get; set; }       
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVeXQrIANVmdQhp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
 ## Filter by multiple keywords using filter menu
 
 The Syncfusion Blazor DataGrid allows you to perform filtering actions based on multiple keywords, rather than a single keyword, using the filter menu dialog. To enable this feature, you can set the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Type) of [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) as **Menu** and render the `MultiSelect` as a custom component in the filter menu dialog.
diff --git a/blazor/datagrid/filtering.md b/blazor/datagrid/filtering.md
index 8db3bf63a8..6bc5a8d9bc 100644
--- a/blazor/datagrid/filtering.md
+++ b/blazor/datagrid/filtering.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Filtering in Blazor DataGrid | Syncfusion
-description: Checkout and learn here all about Filtering in Syncfusion Blazor DataGrid and much more details.
+description: Check out this page to learn all about how to configure initial filtering and filter operators in the Syncfusion Blazor DataGrid component.
 platform: Blazor
 control: DataGrid
 documentation: ug
diff --git a/blazor/datagrid/images/style-and-appearance/grid-line.png b/blazor/datagrid/images/style-and-appearance/grid-line.png
new file mode 100644
index 0000000000..74aac993b9
Binary files /dev/null and b/blazor/datagrid/images/style-and-appearance/grid-line.png differ
diff --git a/blazor/datagrid/images/style-and-appearance/header-background.png b/blazor/datagrid/images/style-and-appearance/header-background.png
index 70af8a079e..a724b23a66 100644
Binary files a/blazor/datagrid/images/style-and-appearance/header-background.png and b/blazor/datagrid/images/style-and-appearance/header-background.png differ
diff --git a/blazor/datagrid/images/style-and-appearance/style-font-family.png b/blazor/datagrid/images/style-and-appearance/style-font-family.png
index 2661f08510..082d4287f8 100644
Binary files a/blazor/datagrid/images/style-and-appearance/style-font-family.png and b/blazor/datagrid/images/style-and-appearance/style-font-family.png differ
diff --git a/blazor/datagrid/row.md b/blazor/datagrid/row.md
index 33846c881c..c156994c15 100644
--- a/blazor/datagrid/row.md
+++ b/blazor/datagrid/row.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Row in Blazor DataGrid | Syncfusion
-description: Checkout and learn here all about Row in Syncfusion Blazor DataGrid and much more details.
+description: Check out this page to learn all about setting row styles, heights, hovering, pinning, and more in the Syncfusion Blazor DataGrid component.
 platform: Blazor
 control: DataGrid
 documentation: ug
diff --git a/blazor/datagrid/state-management.md b/blazor/datagrid/state-management.md
index abd4c89971..6dfa495def 100644
--- a/blazor/datagrid/state-management.md
+++ b/blazor/datagrid/state-management.md
@@ -1,117 +1,645 @@
 ---
 layout: post
-title: State Management in Blazor DataGrid Component | Syncfusion
-description: Checkout and learn here all about State Management in Syncfusion Blazor DataGrid component and more.
+title: State Management in Blazor DataGrid | Syncfusion
+description: Checkout and learn here all about state management in Syncfusion Blazor DataGrid and much more details.
 platform: Blazor
 control: DataGrid
 documentation: ug
 ---
 
-# State Management in Blazor DataGrid Component
+# State Management in Blazor DataGrid 
 
-State management allows users to save and load grid state. The grid will use user-provided state to render instead of its properties provided declaratively.
+State management in the Syncfusion Blazor DataGrid allows you to maintain the Grid's state even after a browser refresh or when navigating to a different page within the same browser session. This feature is particularly useful for retaining the Grid's configuration and data even after a page reload.
 
-Below properties can be saved and loaded into grid later.
+To enable state persistence in the Grid, you can utilize the [EnablePersistence](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnablePersistence) property. When this property is set to **true**, the Grid will automatically save its state in the browser's [LocalStorage](https://www.w3schools.com/html/html5_webstorage.asp#), ensuring that the state is preserved across page reloads.
 
-Property|
------|
-Columns |
-GridFilterSettings |
-GridSortSettings |
-GridGroupSettings |
-GridPageSettings |
+```cs
+<SfGrid DataSource="@Orders" EnablePersistence="true">
+```
+
+> The Grid will store the state using the combination of the component name and component ID in the storage. For example, if the component name is **Grid** and the ID is **OrderDetails**, the state will be stored as **gridOrderDetails**.
+
+When enabling state persistence, the following Grid settings will persist in the local storage.
 
-## Enabling persistence in Grid
+| Grid Settings    | Properties persist                                                                                                                                                                                                                                                                                                                | Ignored properties                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| PageSettings     | CurrentPage<br> PageCount<br> PageSize<br> PageSizes                                                                                                                                                                                                                                                       | Template<br> EnableQueryString                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| GroupSettings    | AllowReordering<br> Columns<br> DisablePageWiseAggregates<br> EnableLazyLoading<br> ShowDropArea<br> ShowGroupedColumn<br> ShowToggleButton<br> ShowUngroupButton                                                                                                                                                                 | CaptionTemplate                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| Columns          | AllowEditing<br> AllowFiltering<br> AllowGrouping<br> AllowReordering<br> AllowResizing<br> AllowSearching<br> AllowSorting<br> AutoFit<br> DisableHtmlEncode<br> EnableGroupByFormat<br> Field<br> ForeignKeyField<br> Index<br> ShowColumnMenu<br> ShowInColumnChooser<br> Type<br> Uid<br> Visible<br> Width | ClipMode<br> Commands<br> CustomAttributes<br> DataSource<br> DefaultValue<br> DisplayAsCheckBox<br> Edit<br> EditTemplate<br> EditType<br> Filter<br> filterItemTemplate<br> FilterTemplate<br> ForeignKeyValue<br> Format<br> Freeze<br> HeaderTemplate<br> HeaderText<br> HeaderTextAlign<br> HeaderValueAccessor<br> HideAtMedia<br> IsFrozen<br> IsIdentity<br> IsPrimaryKey<br> MaxWidth<br> MinWidth<br> SortComparer<br> Template<br> TextAlign<br> ValidationRules |
+| SortSettings     | -                                                                                                                                                                                                                                                                                                                                 | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| FilterSettings   | -                                                                                                                                                                                                                                                                                                                                 | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| SearchSettings   | -                                                                                                                                                                                                                                                                                                                                 | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| SelectedRowIndex | -                                                                                                                                                                                                                                                                                                                                 | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
 
-State persistence allows the Grid to retain the current grid state in the browser local storage for state maintenance. This action is handled through the `EnablePersistence` property which is set to false by default. When it is set to true, some properties of the Grid will be retained even after refreshing the page.
+
+The Grid will persist only the last selected row index.
 
 N> The state will be persisted based on **ID** property. So, it is recommended to explicitly set the **ID** property for Grid.
 
-```cshtml
+The following example demonstrates how to enabling persistence in Grid:
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
 @using Syncfusion.Blazor.Grids
 
 <SfGrid ID="Grid" DataSource="@Orders" Height="315" EnablePersistence="true" AllowPaging="true" AllowFiltering="true" AllowGrouping="true" AllowSorting="true">
     <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>
+        <GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
+        <GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
+        <GridColumn Field=@nameof(OrderData.OrderDate) HeaderText="Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
+        <GridColumn Field=@nameof(OrderData.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
     </GridColumns>
 </SfGrid>
 
 @code {
-    public List<Order> Orders { get; set; }
+    private SfGrid<OrderData> Grid;
+    public List<OrderData> Orders { 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();
+        Orders = OrderData.GetAllRecords();
+    }
+}
+
+{% endhighlight %}
+
+{% highlight c# tabtitle="OrderData.cs" %}
+
+public class OrderData
+{
+    public static List<OrderData> Orders = new List<OrderData>();
+
+    public OrderData() { }
+
+    public OrderData(int OrderID, string CustomerID, string ShipName, double Freight, DateTime? OrderDate, DateTime? ShippedDate, bool? IsVerified, string ShipCity, string ShipCountry, int employeeID)
+    {
+        this.OrderID = OrderID;
+        this.CustomerID = CustomerID;
+        this.ShipName = ShipName;
+        this.Freight = Freight;
+        this.OrderDate = OrderDate;
+        this.ShippedDate = ShippedDate;
+        this.IsVerified = IsVerified;
+        this.ShipCity = ShipCity;
+        this.ShipCountry = ShipCountry;
+        this.EmployeeID = employeeID;
     }
 
-    public class Order
+    public static List<OrderData> GetAllRecords()
     {
-        public int? OrderID { get; set; }
-        public string CustomerID { get; set; }
-        public DateTime? OrderDate { get; set; }
-        public double? Freight { get; set; }
+        if (Orders.Count == 0)
+        {
+            Orders.Add(new OrderData(10248, "VINET", "Vins et alcools Chevalier", 32.38, new DateTime(1996, 7, 4), new DateTime(1996, 08, 07), true, "Reims", "France", 1));
+            Orders.Add(new OrderData(10249, "TOMSP", "Toms Spezialitäten", 11.61, new DateTime(1996, 7, 5), new DateTime(1996, 08, 07), false, "Münster", "Germany", 2));
+            Orders.Add(new OrderData(10250, "HANAR", "Hanari Carnes", 65.83, new DateTime(1996, 7, 6), new DateTime(1996, 08, 07), true, "Rio de Janeiro", "Brazil", 3));
+            Orders.Add(new OrderData(10251, "VINET", "Vins et alcools Chevalier", 41.34, new DateTime(1996, 7, 7), new DateTime(1996, 08, 07), false, "Lyon", "France", 1));
+            Orders.Add(new OrderData(10252, "SUPRD", "Suprêmes délices", 151.30, new DateTime(1996, 7, 8), new DateTime(1996, 08, 07), true, "Charleroi", "Belgium", 2));
+            Orders.Add(new OrderData(10253, "HANAR", "Hanari Carnes", 58.17, new DateTime(1996, 7, 9), new DateTime(1996, 08, 07), false, "Bern", "Switzerland", 3));
+            Orders.Add(new OrderData(10254, "CHOPS", "Chop-suey Chinese", 22.98, new DateTime(1996, 7, 10), new DateTime(1996, 08, 07), true, "Genève", "Switzerland", 2));
+            Orders.Add(new OrderData(10255, "VINET", "Vins et alcools Chevalier", 148.33, new DateTime(1996, 7, 11), new DateTime(1996, 08, 07), false, "Resende", "Brazil", 1));
+            Orders.Add(new OrderData(10256, "HANAR", "Hanari Carnes", 13.97, new DateTime(1996, 7, 12), new DateTime(1996, 08, 07), true, "Paris", "France", 3));
+        }
+        return Orders;
     }
+
+    public int OrderID { get; set; }
+    public string CustomerID { get; set; }
+    public string ShipName { get; set; }
+    public double? Freight { get; set; }
+    public DateTime? OrderDate { get; set; }
+    public DateTime? ShippedDate { get; set; }
+    public bool? IsVerified { get; set; }
+    public string ShipCity { get; set; }
+    public string ShipCountry { get; set; }
+    public int EmployeeID { get; set; }
 }
-```
 
-You can use [ResetPersistData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ResetPersistData) method to reset grid state to its original state. This will clear persisted data in window local storage and renders grid with its original property values.
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VNByDfrqqfeXQzlJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+## Restore initial Blazor DataGrid state
+
+In the Syncfusion Blazor DataGrid, you have the capability to restore the Grid to its initial state, reverting all changes and configurations made during the interaction. This feature can be particularly useful when you want to reset the Grid to its original settings, eliminating any applied filters, sorting, or column reordering.
+
+### Using method
 
-## Handling grid state manually
+Here are the steps to reset the Syncfusion Blazor DataGrid to its initial state, even when the [EnablePersistence](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnablePersistence) property is enabled:
 
-You can handle the grid's state manually by using in-built state persistence methods. You can use [GetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetPersistDataAsync), [SetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SetPersistDataAsync_System_String_), [ResetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ResetPersistDataAsync) methods of grid to save, load and reset the Grid's persisted state manually. [GetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetPersistDataAsync) method will return grid current state as a string value, which is suitable for sending them over network and storing in data bases.
+You can use [ResetPersistData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ResetPersistData) method to reset Grid state to its original state. This will clear persisted data in window local storage and renders Grid with its original property values.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
 
-```cshtml
 @using Syncfusion.Blazor.Grids
 @using Syncfusion.Blazor.Buttons
 
-<SfButton OnClick="@(async () => _state = await Grid.GetPersistDataAsync())">Save State</SfButton>
-<SfButton OnClick="@(async() => await Grid.SetPersistDataAsync(_state))">Set State</SfButton>
-<SfButton OnClick="@(async() =>await Grid.ResetPersistDataAsync())">Reset State</SfButton>
+<SfButton CssClass="e-primary" OnClick="@(async() =>await Grid.ResetPersistDataAsync())">Restore Grid State</SfButton>
 
-<SfGrid @ref="Grid" ID="GridOneTwo" DataSource="@Orders" Height="315" AllowPaging="true" AllowFiltering="true" AllowGrouping="true" AllowSorting="true">
+<SfGrid @ref="Grid" ID="OrderDetails" DataSource="@Orders" Height="315" AllowPaging="true" AllowFiltering="true" AllowGrouping="true" AllowSorting="true">
     <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>
+        <GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120" IsPrimaryKey="true" />
+        <GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer Name" Width="150" />
+        <GridColumn Field=@nameof(OrderData.Freight) HeaderText="Freight" Format="C2" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="120" />
+        <GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" Width="150" />
     </GridColumns>
 </SfGrid>
 
 @code {
-    SfGrid<Order> Grid;
-
-    public List<Order> Orders { get; set; }
+    private SfGrid<OrderData> Grid;
+    public List<OrderData> Orders { get; set; }
 
     public string _state;
+    protected override void OnInitialized()
+    {
+        Orders = OrderData.GetAllRecords();
+    }
+}
+
+{% endhighlight %}
+
+{% highlight c# tabtitle="OrderData.cs" %}
+
+public class OrderData
+{
+    public static List<OrderData> Orders = new List<OrderData>();
+
+    public OrderData(int orderID, string customerID, double freight, string shipCity)
+    {
+        this.OrderID = orderID;
+        this.CustomerID = customerID;
+        this.Freight = freight;
+        this.ShipCity = shipCity;
+    }
+
+    public static List<OrderData> GetAllRecords()
+    {
+        if (Orders.Count == 0)
+        {
+            Orders.Add(new OrderData(10248, "VINET", 32.38, "Reims"));
+            Orders.Add(new OrderData(10249, "TOMSP", 11.61, "Münster"));
+            Orders.Add(new OrderData(10250, "HANAR", 65.83, "Rio de Janeiro"));
+            Orders.Add(new OrderData(10251, "VICTE", 41.34, "Lyon"));
+            Orders.Add(new OrderData(10252, "SUPRD", 51.3, "Charleroi"));
+            Orders.Add(new OrderData(10253, "HANAR", 58.17, "Rio de Janeiro"));
+            Orders.Add(new OrderData(10254, "CHOPS", 22.98, "Bern"));
+            Orders.Add(new OrderData(10255, "RICSU", 148.33, "Genève"));
+            Orders.Add(new OrderData(10256, "WELLI", 13.97, "Resende"));
+            Orders.Add(new OrderData(10257, "HILAA", 81.91, "San Cristóbal"));
+            Orders.Add(new OrderData(10258, "ERNSH", 140.51, "Graz"));
+            Orders.Add(new OrderData(10259, "CENTC", 3.25, "México D.F."));
+            Orders.Add(new OrderData(10260, "OTTIK", 55.09, "Köln"));
+            Orders.Add(new OrderData(10261, "QUEDE", 3.05, "Rio de Janeiro"));
+            Orders.Add(new OrderData(10262, "RATTC", 48.29, "Albuquerque"));
+        }
+
+        return Orders;
+    }
+
+    public int OrderID { get; set; }
+    public string CustomerID { get; set; }
+    public double Freight { get; set; }
+    public string ShipCity { get; set; }
+}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDVetwXgrJTvTIlu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+### Clearing local storage
+
+Another method to reset the Syncfusion Blazor DataGrid is by clearing the local storage associated with the Grid. This action removes any stored state information, allowing the Grid to return to its original configuration.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Grids
+@using Syncfusion.Blazor.Buttons
+@inject IJSRuntime JS
+
+<SfButton CssClass="e-primary" OnClick="RestoreGridState">Restore Grid State</SfButton>
+<SfGrid ID="OrderDetails" @ref="Grid" DataSource="@Orders" EnablePersistence="true" AllowPaging="true" AllowFiltering="true" Height="230">
+    <GridColumns>
+        <GridColumn Field=@nameof(OrderDetails.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120" />
+        <GridColumn Field=@nameof(OrderDetails.CustomerID) HeaderText="Customer ID" Width="150" />
+        <GridColumn Field=@nameof(OrderDetails.ShipCity) HeaderText="Ship City" Width="150" />
+        <GridColumn Field=@nameof(OrderDetails.ShipName) HeaderText="Ship Name" Width="150" />
+    </GridColumns>
+</SfGrid>
+@code {
+    private SfGrid<OrderDetails> Grid;
+
+    public List<OrderDetails> Orders { get; set; }
+
+    protected override void OnInitialized()
+    {
+        Orders = OrderDetails.GetAllRecords();
+    }
+
+    private async Task RestoreGridState()
+    {
+        await Grid.ResetPersistDataAsync();
+        await JS.InvokeVoidAsync("localStorage.setItem", "Grid", "");
+        await JS.InvokeVoidAsync("location.reload");
+    }
+}
+
+{% endhighlight %}
+
+{% highlight c# tabtitle="OrderDetails.cs" %}
+
+public class OrderDetails
+{
+    public static List<OrderDetails> order = new List<OrderDetails>();
+    public OrderDetails(int OrderID, string CustomerId, string ShipCity, string ShipName)
+    {
+        this.OrderID = OrderID;
+        this.CustomerID = CustomerId;
+        this.ShipCity = ShipCity;
+        this.ShipName = ShipName;
+    }
+    public static List<OrderDetails> GetAllRecords()
+    {
+        if (order.Count == 0)
+        {
+            order.Add(new OrderDetails(10248, "VINET", "Reims", "Vins et alcools Chevalier"));
+            order.Add(new OrderDetails(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
+            order.Add(new OrderDetails(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
+            order.Add(new OrderDetails(10251, "VICTE", "Lyon", "Victuailles en stock"));
+            order.Add(new OrderDetails(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
+            order.Add(new OrderDetails(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
+            order.Add(new OrderDetails(10254, "CHOPS", "Bern", "Chop-suey Chinese"));
+            order.Add(new OrderDetails(10255, "RICSU", "Genève", "Richter Supermarkt"));
+            order.Add(new OrderDetails(10256, "WELLI", "Resende", "Wellington Importadora"));
+            order.Add(new OrderDetails(10257, "HILAA", "San Cristóbal", "HILARION-Abastos"));
+            order.Add(new OrderDetails(10258, "ERNSH", "Graz", "Ernst Handel"));
+            order.Add(new OrderDetails(10259, "CENTC", "México D.F.", "Centro comercial Moctezuma"));
+            order.Add(new OrderDetails(10260, "OTTIK", "Köln", "Ottilies Käseladen"));
+            order.Add(new OrderDetails(10261, "QUEDE", "Rio de Janeiro", "Que Delícia"));
+            order.Add(new OrderDetails(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery"));
+        }
+        return order;
+    }
+    public int OrderID { get; set; }
+    public string CustomerID { get; set; }
+    public string ShipCity { get; set; }
+    public string ShipName { get; set; }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVItfhCIjLifBTr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+## Restore to specific state version
+
+The Syncfusion Blazor DataGrid supports state persistence, allowing to save and restore Grid configurations such as column settings, filters, sorting, grouping, paging, and more. This example demonstrates how to implement version-based state persistence using localStorage.
+
+In this sample, each version represents a unique saved Grid configuration (or state). When a version button is clicked:
+
+1. The current Grid state is saved to localStorage using the existing version key.
+
+2. The Grid switches to the selected version.
+
+3. If persisted data exists for the selected version, it is applied to the Grid.
+
+4. If no data is found, a new state will be stored the next time the Grid is modified.
+
+To implement version-based persistence in Grid, set **PersistenceKey** dynamically based on the selected version (e.g., gridOrderDetails_v.1), ensuring each version maintains a unique state in localStorage. The core logic for switching versions is handled in the `ChangeVersion` method.
+
+* This method saves the current Grid state using [GetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetPersistDataAsync) before switching versions. The `GetPersistDataAsync` method returns the Grid’s current state as a string, which is suitable for sending over a network or storing in databases.
+
+* It then attempts to load the state associated with the selected version using [SetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SetPersistDataAsync_System_String_). If a persisted state is available, it is applied to the Grid. Otherwise, a message is displayed indicating that no saved state exists and a new state will be stored going forward.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Grids
+@using Syncfusion.Blazor.Buttons
+@inject IJSRuntime JS
+
+<div class="mb-3">
+    <SfButton CssClass="e-primary m-1" OnClick="@(() => ChangeVersion("v.1"))">Version 1</SfButton>
+    <SfButton CssClass="e-primary m-1" OnClick="@(() => ChangeVersion("v.2"))">Version 2</SfButton>
+    <SfButton CssClass="e-primary m-1" OnClick="@(() => ChangeVersion("v.3"))">Version 3</SfButton>
+</div>
+<div style="text-align: center; color: red">
+    <span>@Message</span>
+</div>
+@if (!string.IsNullOrEmpty(CurrentVersion))
+{
+    <SfGrid ID="OrderDetails" @ref="Grid" DataSource="@Orders" EnablePersistence="true" PersistenceKey="@($"gridOrderDetails_{CurrentVersion}")"  AllowPaging="true" AllowFiltering="true" AllowSorting="true" AllowGrouping="true" AllowReordering="true" Height="315">
+    <GridColumns>
+        <GridColumn Field=@nameof(OrderDetails.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120" />
+        <GridColumn Field=@nameof(OrderDetails.CustomerID) HeaderText="Customer ID" Width="150" />
+        <GridColumn Field=@nameof(OrderDetails.ShipCity) HeaderText="Ship City" Width="150" />
+        <GridColumn Field=@nameof(OrderDetails.ShipName) HeaderText="Ship Name" Width="150" />
+    </GridColumns>
+</SfGrid>}
+@code {
+private SfGrid<OrderDetails> Grid;
+public List<OrderDetails> Orders { get; set; }
+public string CurrentVersion { get; set; } = "v.0";
+public string Message { get; set; }
+protected override void OnInitialized()
+{
+    Orders = OrderDetails.GetAllRecords();
+}
+
+ private async Task ChangeVersion(string version)
+ {
+     // Save current state to localStorage before switching.
+     if (Grid != null)
+     {
+         var currentData = await Grid.GetPersistDataAsync();
+         await JS.InvokeVoidAsync("localStorage.setItem", $"gridOrderDetails_{CurrentVersion}", currentData);
+     }
+
+     // Switch to new version.
+     CurrentVersion = version;
+
+     // Load new version's data if available.
+     var saved = await JS.InvokeAsync<string>("localStorage.getItem", $"gridOrderDetails_{version}");
+     if (!string.IsNullOrEmpty(saved))
+     {
+         await Grid.SetPersistDataAsync(saved);
+         Message = $"Grid state restored to {version}";
+     }
+     else
+     {
+         Message = $"No saved state found for {version}. New state will be stored.";
+     }
+
+     StateHasChanged();
+ }
+
+}
+
+{% endhighlight %}
+
+{% highlight c# tabtitle="OrderDetails.cs" %}
+
+public class OrderDetails
+{
+    public static List<OrderDetails> order = new List<OrderDetails>();
+    public OrderDetails(int OrderID, string CustomerId, string ShipCity, string ShipName)
+    {
+        this.OrderID = OrderID;
+        this.CustomerID = CustomerId;
+        this.ShipCity = ShipCity;
+        this.ShipName = ShipName;
+    }
+    public static List<OrderDetails> GetAllRecords()
+    {
+        if (order.Count == 0)
+        {
+            order.Add(new OrderDetails(10248, "VINET", "Reims", "Vins et alcools Chevalier"));
+            order.Add(new OrderDetails(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
+            order.Add(new OrderDetails(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
+            order.Add(new OrderDetails(10251, "VICTE", "Lyon", "Victuailles en stock"));
+            order.Add(new OrderDetails(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
+            order.Add(new OrderDetails(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
+            order.Add(new OrderDetails(10254, "CHOPS", "Bern", "Chop-suey Chinese"));
+            order.Add(new OrderDetails(10255, "RICSU", "Genève", "Richter Supermarkt"));
+            order.Add(new OrderDetails(10256, "WELLI", "Resende", "Wellington Importadora"));
+            order.Add(new OrderDetails(10257, "HILAA", "San Cristóbal", "HILARION-Abastos"));
+            order.Add(new OrderDetails(10258, "ERNSH", "Graz", "Ernst Handel"));
+            order.Add(new OrderDetails(10259, "CENTC", "México D.F.", "Centro comercial Moctezuma"));
+            order.Add(new OrderDetails(10260, "OTTIK", "Köln", "Ottilies Käseladen"));
+            order.Add(new OrderDetails(10261, "QUEDE", "Rio de Janeiro", "Que Delícia"));
+            order.Add(new OrderDetails(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery"));
+        }
+        return order;
+    }
+    public int OrderID { get; set; }
+    public string CustomerID { get; set; }
+    public string ShipCity { get; set; }
+    public string ShipName { get; set; }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hZLIXJhrJGykpckS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+## Restore to previous state
+
+The Syncfusion Blazor DataGrid allows you to save and restore its state using local storage. This feature is helpful when you want to preserve the current state of the Grid, such as column order, sorting, and filtering, so that you can return to your previous work or configurations.
+
+To implement this functionality, use the `getItem` and `setItem` methods for local storage, along with the Grid's [GetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetPersistDataAsync) and [SetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SetPersistDataAsync_System_String_) methods. The `GetPersistDataAsync` method retrieves the current Grid state as a string, which can be saved in local storage. The `SetPersistDataAsync` method restores the saved Grid state from local storage.
+
+The provided code demonstrates how to save and restore the previous state of a Grid using local storage.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Grids
+@using Syncfusion.Blazor.Buttons
+@inject IJSRuntime JS
+
+<div class="mb-3">
+    <SfButton CssClass="e-success m-1" OnClick="SaveGridState">Save</SfButton>
+    <SfButton CssClass="e-danger m-1" OnClick="RestoreGridState">Restore</SfButton>
+</div>
+
+<div style="text-align: center; color: red">
+    <span>@Message</span>
+</div>
+
+<SfGrid @ref="Grid" DataSource="@Orders" Height="300" AllowPaging="true" AllowSorting="true" AllowFiltering="true" AllowGrouping="true" EnablePersistence="true" Toolbar="@(new List<string> { "Edit", "Update", "Cancel" })">
+ <GridFilterSettings Type="FilterType.Menu"></GridFilterSettings>
+    <GridEditSettings AllowEditing="true"></GridEditSettings>
+    <GridEvents OnActionBegin="OnActionBegin" TValue="OrderDetails"></GridEvents>
+    <GridColumns>
+        <GridColumn Field=@nameof(OrderDetails.OrderID) HeaderText="Order ID" TextAlign=".TextAlign.Right" Width="140" IsPrimaryKey="true" ValidationRules="@(new ValidationRules{ Required=true, Number=true})" />
+        <GridColumn Field=@nameof(OrderDetails.CustomerID) HeaderText="Customer ID" Width="140" ValidationRules="@(new ValidationRules{ Required=true})"/>
+        <GridColumn Field=@nameof(OrderDetails.Freight) HeaderText="Freight" Width="140" Format="C2" TextAlign="TextAlign.Right" ValidationRules="@(new ValidationRules{ Required=true })"/>
+        <GridColumn Field=@nameof(OrderDetails.OrderDate) HeaderText="Order Date" Width="150" AllowGrouping="false" Format="M/d/y hh:mm a" Type="ColumnType.DateTime" EditType="EditType.DateTimePickerEdit" TextAlign="TextAlign.Right" />
+        <GridColumn Field=@nameof(OrderDetails.ShipCountry) HeaderText="Ship Country" Width="150" EditType="EditType.DropDownEdit"/>
+    </GridColumns>
+</SfGrid>
+
+@code {
+    private SfGrid<OrderDetails> Grid { get; set; }
+    private string Message = string.Empty;
+    public List<OrderDetails> Orders { get; set; }
 
     protected override void OnInitialized()
     {
-        Orders = Enumerable.Range(1, 75).Select(x => new Order()
+    Orders = OrderDetails.GetAllRecords();
+    }
+
+    private async Task SaveGridState()
+    {
+        var state = await Grid.GetPersistDataAsync();
+        await JS.InvokeVoidAsync("localStorage.setItem", "gridOrders", state);
+        Message = "Grid state saved.";
+    }
+
+    private async Task RestoreGridState()
+    {
+        var state = await JS.InvokeAsync<string>("localStorage.getItem", "gridOrders");
+        if (!string.IsNullOrEmpty(state))
+        {
+            await Grid.SetPersistDataAsync(state);
+            Message = "Previous Grid state restored.";
+        }
+        else
+        {
+            Message = "No saved state found.";
+        }
+    }
+
+    private void OnActionBegin(ActionEventArgs<OrderDetails> args)
+    {
+        Message = string.Empty;
+    }
+}
+
+{% endhighlight %}
+
+{% highlight c# tabtitle="OrderDetails.cs" %}
+
+public class OrderDetails
+{
+    public static List<OrderDetails> order = new List<OrderDetails>();
+
+    public OrderDetails(int orderId, string customerId, string shipCity, string shipName,
+                        double freight, DateTime orderDate, string shipCountry)
+    {
+        this.OrderID = orderId;
+        this.CustomerID = customerId;
+        this.ShipCity = shipCity;
+        this.ShipName = shipName;
+        this.Freight = freight;
+        this.OrderDate = orderDate;
+        this.ShipCountry = shipCountry;
+    }
+
+    public static List<OrderDetails> GetAllRecords()
+    {
+        if (order.Count == 0)
         {
-            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();
+            order.Add(new OrderDetails(10248, "VINET", "Reims", "Vins et alcools Chevalier", 32.38, new DateTime(2024, 1, 5), "France"));
+            order.Add(new OrderDetails(10249, "TOMSP", "Münster", "Toms Spezialitäten", 11.61, new DateTime(2024, 1, 7), "Germany"));
+            order.Add(new OrderDetails(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes", 65.83, new DateTime(2024, 1, 10), "Brazil"));
+            order.Add(new OrderDetails(10251, "VICTE", "Lyon", "Victuailles en stock", 41.34, new DateTime(2024, 1, 12), "France"));
+            order.Add(new OrderDetails(10252, "SUPRD", "Charleroi", "Suprêmes délices", 51.30, new DateTime(2024, 1, 14), "Belgium"));
+            order.Add(new OrderDetails(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes", 58.17, new DateTime(2024, 1, 16), "Brazil"));
+            order.Add(new OrderDetails(10254, "CHOPS", "Bern", "Chop-suey Chinese", 22.98, new DateTime(2024, 1, 18), "Switzerland"));
+            order.Add(new OrderDetails(10255, "RICSU", "Genève", "Richter Supermarkt", 148.33, new DateTime(2024, 1, 20), "Switzerland"));
+            order.Add(new OrderDetails(10256, "WELLI", "Resende", "Wellington Importadora", 13.97, new DateTime(2024, 1, 22), "Brazil"));
+            order.Add(new OrderDetails(10257, "HILAA", "San Cristóbal", "HILARION-Abastos", 81.91, new DateTime(2024, 1, 24), "Venezuela"));
+        }
+        return order;
+    }
+
+    public int OrderID { get; set; }
+    public string CustomerID { get; set; }
+    public string ShipCity { get; set; }
+    public string ShipName { get; set; }
+    public double Freight { get; set; }
+    public DateTime OrderDate { get; set; }
+    public string ShipCountry { get; set; }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZhSjfrUBZTkusas?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+## Maintaining custom query in a persistent state
+
+When [EnablePersistence](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnablePersistence)  is enabled, the Syncfusion Blazor DataGrid does not automatically maintain custom query parameters after a page load. This is because the Grid refreshes its query params for every page load. You can maintain the custom query params by resetting the `AddParams` method in the [OnActionBegin](https://blazor.syncfusion.com/documentation/datagrid/events#onactionbegin) event.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Grids
+
+<SfGrid ID="OrderDetails" @ref="Grid" DataSource="@Orders" AllowFiltering="true" AllowPaging="true" EnablePersistence="true" Height="230">
+    <GridEvents OnActionBegin="OnActionBegin" TValue="OrderDetails"></GridEvents>
+        <GridColumns>
+        <GridColumn Field=@nameof(OrderDetails.OrderID) HeaderText="Order ID" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="120" />
+        <GridColumn Field=@nameof(OrderDetails.CustomerID) HeaderText="Customer ID" Width="150" />
+        <GridColumn Field=@nameof(OrderDetails.ShipCity) HeaderText="Ship City" Width="150" />
+        <GridColumn Field=@nameof(OrderDetails.ShipName) HeaderText="Ship Name" Width="150" />
+    </GridColumns>
+</SfGrid>
+@code {
+    private SfGrid<OrderDetails> Grid;
+    public List<OrderDetails> Orders { get; set; }
+            protected override void OnInitialized()
+    {
+         Orders = OrderDetails.GetAllRecords();
+    }
+    private void OnActionBegin(Syncfusion.Blazor.Grids.ActionEventArgs<OrderDetails> args)
+    {
+        Grid?.Query?.AddParams("dataSource", "data");
     }
+}
+
+{% endhighlight %}
 
-    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, string ShipCity, string ShipName)
+    {
+        this.OrderID = OrderID;
+        this.CustomerID = CustomerId;
+        this.ShipCity = ShipCity;
+        this.ShipName = ShipName;
+    }
+    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; }
+        if (order.Count == 0)
+        {
+            order.Add(new OrderDetails(10248, "VINET", "Reims", "Vins et alcools Chevalier"));
+            order.Add(new OrderDetails(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
+            order.Add(new OrderDetails(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
+            order.Add(new OrderDetails(10251, "VICTE", "Lyon", "Victuailles en stock"));
+            order.Add(new OrderDetails(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
+            order.Add(new OrderDetails(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
+            order.Add(new OrderDetails(10254, "CHOPS", "Bern", "Chop-suey Chinese"));
+            order.Add(new OrderDetails(10255, "RICSU", "Genève", "Richter Supermarkt"));
+            order.Add(new OrderDetails(10256, "WELLI", "Resende", "Wellington Importadora"));
+            order.Add(new OrderDetails(10257, "HILAA", "San Cristóbal", "HILARION-Abastos"));
+            order.Add(new OrderDetails(10258, "ERNSH", "Graz", "Ernst Handel"));
+            order.Add(new OrderDetails(10259, "CENTC", "México D.F.", "Centro comercial Moctezuma"));
+            order.Add(new OrderDetails(10260, "OTTIK", "Köln", "Ottilies Käseladen"));
+            order.Add(new OrderDetails(10261, "QUEDE", "Rio de Janeiro", "Que Delícia"));
+            order.Add(new OrderDetails(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery"));
+        }
+        return order;
     }
+    public int OrderID { get; set; }
+    public string CustomerID { get; set; }
+    public string ShipCity { get; set; }
+    public string ShipName { get; set; }
 }
+
+{% endhighlight %}
+{% endtabs %}
+
+## Get or set local storage value
+
+If the [EnablePersistence](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnablePersistence) property is set to **true**, the Syncfusion Blazor DataGrid property value is saved in the **window.localStorage** for reference. You can get or set the localStorage value by using the **getItem** and **setItem** methods in **window.localStorage**.
+
+To retrieve the Grid model from Local Storage, follow these steps:
+
+```cs
+string localStorageKey = "gridOrders"; //"gridOrders" is component name + component id.
+string modelJson = await JS.InvokeAsync<string>("localStorage.getItem", localStorageKey);
+var modelObject = JsonSerializer.Deserialize<object>(modelJson);
+```
+
+```cs
+await JS.InvokeVoidAsync("localStorage.setItem", localStorageKey, modelJson);
 ```
 
 N> You can refer to our [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to understand how to present and manipulate data.
\ No newline at end of file
diff --git a/blazor/datagrid/style-and-appearance/style-and-appearance.md b/blazor/datagrid/style-and-appearance/style-and-appearance.md
index 44c389854c..af9f46ebca 100644
--- a/blazor/datagrid/style-and-appearance/style-and-appearance.md
+++ b/blazor/datagrid/style-and-appearance/style-and-appearance.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Style and appearance in Blazor DataGrid | Syncfusion
-description: Checkout and learn here all about style and appearance in Syncfusion Blazor DataGrid and more.
+description: Checkout and learn here all about style and appearance in Syncfusion Blazor DataGrid and more details.
 platform: Blazor
 control: DataGrid
 documentation: ug
@@ -257,4 +257,108 @@ public class OrderData
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLSNetLzivgmRSN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLSNetLzivgmRSN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+## Customize the color of Grid lines
+
+The Syncfusion Blazor DataGrid allows you to personalize the appearance of Grid lines to match your application's design.
+
+To customize the color of Grid lines, you can apply CSS styles directly to the Grid’s structural elements such as header cells and row cells. This approach gives you full control over the color, thickness, and style of the borders between cells.
+
+```css
+    /* Customize the color of Grid lines */
+    .e-grid .e-gridheader, .e-grid .e-headercell, .e-grid .e-rowcell, .e-grid {
+        border-color: yellow;
+        border-style: solid;
+        border-width: 2px;
+    }
+
+```
+
+![Grid Line](../images/style-and-appearance/grid-line.png)
+
+The following example demonstrates how to customize the color of Grid lines while using [GridLines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GridLines) property in Grid:
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Grids
+
+<SfGrid DataSource="@Orders" Height="315" GridLines="Syncfusion.Blazor.Grids.GridLine.Both">
+    <GridColumns>
+        <GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="90"></GridColumn>
+        <GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer ID" Width="150"></GridColumn>
+        <GridColumn Field=@nameof(OrderData.Freight) HeaderText="Freight" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Format="C2" Width="130"></GridColumn>
+        <GridColumn Field=@nameof(OrderData.OrderDate) HeaderText="Order Date" Format="d" Type="Syncfusion.Blazor.Grids.ColumnType.Date" Width="130"></GridColumn>
+    </GridColumns>
+</SfGrid>
+
+<style>
+    /* Customize the color of Grid lines */
+    .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 List<OrderData> Orders { get; set; }
+   
+    protected override void OnInitialized()
+    {
+        Orders = OrderData.GetAllRecords();
+    }    
+}
+
+{% endhighlight %}
+
+{% highlight c# tabtitle="OrderData.cs" %}
+
+public class OrderData
+{
+    public static List<OrderData> Orders = new List<OrderData>();
+    public OrderData()
+    {
+
+    }
+    public OrderData(int? OrderID, string CustomerID, double Freight,DateTime? OrderDate)
+    {
+        this.OrderID = OrderID;
+        this.CustomerID = CustomerID;   
+        this.Freight = Freight;  
+        this.OrderDate = OrderDate;           
+    }
+
+    public static List<OrderData> GetAllRecords()
+    {
+        if (Orders.Count() == 0)
+        {
+            int code = 10;
+            for (int i = 1; i < 2; i++)
+            {
+                Orders.Add(new OrderData(10248, "VINET", 32.38,new DateTime(1996,7,4)));
+                Orders.Add(new OrderData(10249, "TOMSP", 11.61, new DateTime(1996, 7, 5)));
+                Orders.Add(new OrderData(10250, "HANAR", 65.83, new DateTime(1996, 7, 6)));
+                Orders.Add(new OrderData(10251, "VINET", 41.34, new DateTime(1996, 7, 7)));
+                Orders.Add(new OrderData(10252, "SUPRD", 51.30, new DateTime(1996, 7, 8)));
+                Orders.Add(new OrderData(10253, "HANAR", 58.17, new DateTime(1996, 7, 9)));
+                Orders.Add(new OrderData(10254, "CHOPS", 22.98, new DateTime(1996, 7, 10)));
+                Orders.Add(new OrderData(10255, "VINET", 148.33, new DateTime(1996, 7, 11)));
+                Orders.Add(new OrderData(10256, "HANAR", 13.97, new DateTime(1996, 7, 12)));
+                code += 5;
+            }
+        }
+        return Orders;
+    }
+    public int? OrderID { get; set; }
+    public string CustomerID { get; set; }
+    public double? Freight { get; set; }
+    public DateTime? OrderDate { get; set; }       
+}
+ 
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVeXGhOqfxsRDrR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
\ No newline at end of file
diff --git a/blazor/datagrid/tool-bar.md b/blazor/datagrid/tool-bar.md
index c0fd842b30..827cd14743 100644
--- a/blazor/datagrid/tool-bar.md
+++ b/blazor/datagrid/tool-bar.md
@@ -203,6 +203,111 @@ In the following example, the [Blazor Toggle Switch](https://help.syncfusion.com
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/LtrAXEVuUjkraxax?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
+## Enable or disable toolbar items based on selected row data
+
+You can enable or disable toolbar items based on the selected row data in a Syncfusion Blazor DataGrid. This allows you to dynamically control which toolbar actions are available, ensuring they are only active when relevant to the selected row. 
+
+This can be achieved by using the [RowSelecting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowSelecting) event along with 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 method allows you to programmatically enable or disable specific toolbar items based on the selected row's data.
+
+The following code example demonstrates how to enable or disable the toolbar items based on the selected row data:
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Grids
+
+<SfGrid ID="Grid" @ref="grid" DataSource="@GridData" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })" Width="700" Height="315">
+    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" AllowEditOnDblClick="false" Mode="Syncfusion.Blazor.Grids.EditMode.Normal"></GridEditSettings>
+    <GridEvents RowSelecting="RowSelectingHandler" TValue="OrderData"></GridEvents>
+    <GridColumns>
+        <GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" IsPrimaryKey="true" Width="120"></GridColumn>
+        <GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
+        <GridColumn Field=@nameof(OrderData.Freight) HeaderText="Freight" Format="C2" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="120"></GridColumn>
+        <GridColumn Field=@nameof(OrderData.ShippedDate) HeaderText="Shipped Date" Format="d" Type="Syncfusion.Blazor.Grids.ColumnType.Date" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="150"></GridColumn>
+        <GridColumn Field=@nameof(OrderData.ShipCountry) HeaderText="Ship Country" Visible="false" Width="150"></GridColumn>
+        <GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" Visible="false" Width="150"></GridColumn>
+    </GridColumns>
+</SfGrid>
+@code {
+    public List<OrderData> GridData { get; set; }
+    SfGrid<OrderData> grid { get; set; }
+
+    protected override void OnInitialized()
+    {
+        GridData = OrderData.GetAllRecords();
+    }   
+
+    public async Task RowSelectingHandler(RowSelectingEventArgs<OrderData> args)
+    {
+        if (args.Data.OrderID == 10249 || args.Data.OrderID == 10252 || args.Data.OrderID == 10256)
+        {
+            await this.grid.EnableToolbarItemsAsync(new List<string>() { "Grid_Add", "Grid_Edit", "Grid_Delete" }, false);
+        }
+        else
+        {
+            await this.grid.EnableToolbarItemsAsync(new List<string>() { "Grid_Add", "Grid_Edit", "Grid_Delete" }, true);
+        }
+    }
+}
+
+{% endhighlight %}
+
+{% highlight c# tabtitle="OrderData.cs" %}
+
+public class OrderData
+{
+    public static List<OrderData> Orders = new List<OrderData>();
+
+    public OrderData() { }
+
+     public OrderData(int OrderID, string CustomerID, string ShipName, double Freight, DateTime? OrderDate, DateTime? ShippedDate, bool? IsVerified, string ShipCity, string ShipCountry, int employeeID)
+    {
+        this.OrderID = OrderID;
+        this.CustomerID = CustomerID;
+        this.ShipName = ShipName;
+        this.Freight = Freight;
+        this.OrderDate = OrderDate;
+        this.ShippedDate = ShippedDate;
+        this.IsVerified = IsVerified;
+        this.ShipCity = ShipCity;
+        this.ShipCountry = ShipCountry;
+        this.EmployeeID = employeeID; 
+    }
+
+    public static List<OrderData> GetAllRecords()
+    {
+        if (Orders.Count == 0)
+        {
+            Orders.Add(new OrderData(10248, "VINET", "Vins et alcools Chevalier", 32.38, new DateTime(1996, 7, 4), new DateTime(1996, 08, 07), true, "Reims", "France", 1));
+            Orders.Add(new OrderData(10249, "TOMSP", "Toms Spezialitäten", 11.61, new DateTime(1996, 7, 5), new DateTime(1996, 08, 07), false, "Münster", "Germany", 2));
+            Orders.Add(new OrderData(10250, "HANAR", "Hanari Carnes", 65.83, new DateTime(1996, 7, 6), new DateTime(1996, 08, 07), true, "Rio de Janeiro", "Brazil", 3));
+            Orders.Add(new OrderData(10251, "VINET", "Vins et alcools Chevalier", 41.34, new DateTime(1996, 7, 7), new DateTime(1996, 08, 07), false, "Lyon", "France", 1));
+            Orders.Add(new OrderData(10252, "SUPRD", "Suprêmes délices", 151.30, new DateTime(1996, 7, 8), new DateTime(1996, 08, 07), true, "Charleroi", "Belgium", 2));
+            Orders.Add(new OrderData(10253, "HANAR", "Hanari Carnes", 58.17, new DateTime(1996, 7, 9), new DateTime(1996, 08, 07), false, "Bern", "Switzerland", 3));
+            Orders.Add(new OrderData(10254, "CHOPS", "Chop-suey Chinese", 22.98, new DateTime(1996, 7, 10), new DateTime(1996, 08, 07), true, "Genève", "Switzerland", 2));
+            Orders.Add(new OrderData(10255, "VINET", "Vins et alcools Chevalier", 148.33, new DateTime(1996, 7, 11), new DateTime(1996, 08, 07), false, "Resende", "Brazil", 1));
+            Orders.Add(new OrderData(10256, "HANAR", "Hanari Carnes", 13.97, new DateTime(1996, 7, 12), new DateTime(1996, 08, 07), true, "Paris", "France", 3));
+        }
+        return Orders;
+    }
+
+    public int OrderID { get; set; }
+    public string CustomerID { get; set; }
+    public string ShipName { get; set; }
+    public double? Freight { get; set; }
+    public DateTime? OrderDate { get; set; }
+    public DateTime? ShippedDate { get; set; }
+    public bool? IsVerified { get; set; }
+    public string ShipCity { get; set; }
+    public string ShipCountry { get; set; }
+    public int EmployeeID { get; set; } 
+}
+
+{% endhighlight %}
+{% endtabs %}      
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/htBIXGVkiYUtauxh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
 ## Customize Toolbar buttons using CSS
 
 Customizing Toolbar buttons in Syncfusion Blazor DataGrid using CSS involves modifying the appearance of built-in toolbar buttons by applying CSS styles. This provides a flexible and customizable way to enhance the visual presentation of the toolbar and create a cohesive interface.
diff --git a/blazor/diagram/annotations/appearance.md b/blazor/diagram/annotations/appearance.md
index d5db0eecb3..5927de5974 100644
--- a/blazor/diagram/annotations/appearance.md
+++ b/blazor/diagram/annotations/appearance.md
@@ -638,6 +638,56 @@ The following code illustrates how to define a template for a node's annotation.
 You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/TemplateSupportforAnnotation)
 ![Blazor Diagram with Template Annotations](../images/TemplateSupportforAnnotation.png)
 
+## How to Add Additional Information for an Annotation
+
+The [AdditionalInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_AdditionalInfo) property of an annotation allows you to store extra information associated with the annotation in a flexible way. This can be useful for maintaining metadata or additional details that you may need to access programmatically.
+
+The following code shows how to set the AdditionalInfo value.
+
+```cshtml
+@using Syncfusion.Blazor.Diagram
+<SfDiagramComponent Height="600px" Nodes="@nodes" />
+@code
+{
+    DiagramObjectCollection<Node> nodes;
+    protected override void OnInitialized()
+    {
+        nodes = new DiagramObjectCollection<Node>();
+        // Create a dictionary to store additional information for the annotation.
+        Dictionary<string, object> AnnotationInfo = new Dictionary<string, object>();
+        AnnotationInfo.Add("author", "John Doe");
+        AnnotationInfo.Add("modifiedDate", DateTime.Now);
+        // A node with an annotation containing additional information.
+        Node node = new Node()
+        {
+            OffsetX = 250,
+            OffsetY = 250,
+            Width = 100,
+            Height = 100,
+            Style = new ShapeStyle()
+            {
+                Fill = "#6BA5D7",
+                StrokeColor = "white"
+            },
+            Annotations = new DiagramObjectCollection<ShapeAnnotation>()
+            {
+                new ShapeAnnotation
+                {
+                    Content = "Annotated Node",
+                    AdditionalInfo = AnnotationInfo
+                }
+            }
+        };
+        // Add the node to the collection.
+        nodes.Add(node);
+    }
+}
+```
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/AdditionalInfoProperty)
+
+**Note:** You can set any type of value for the AdditionalInfo property.
+
+
 ## See also
 
 * [How to add or remove annotation constraints](../constraints#annotation-constraints)
diff --git a/blazor/diagram/annotations/interactions.md b/blazor/diagram/annotations/interactions.md
index 5b6c0780af..2beddf9b66 100644
--- a/blazor/diagram/annotations/interactions.md
+++ b/blazor/diagram/annotations/interactions.md
@@ -77,6 +77,45 @@ The [RotationReference](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.
 
 You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/Interactions/RotationReference)
 
+## How to rotate a Annotation using the RotationAngle property
+
+The [RotationAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_RotationAngle)  property for an annotation gets or sets the rotation angle in degrees. This determines how much the annotation text is tilted from its normal position. The default value is 0.
+
+The following code examples illustrate how to configure RotationAngle for an annotation.
+
+```cshtml
+@using Syncfusion.Blazor.Diagram
+<SfDiagramComponent Height="600px" Nodes="@nodes" />
+@code
+{
+    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
+    protected override void OnInitialized()
+    {
+        Node node = new Node()
+        {
+            ID = "node1",
+            Height = 100,
+            Width = 100,
+            OffsetX = 100,
+            OffsetY = 100,
+            Annotations = new DiagramObjectCollection<ShapeAnnotation>() 
+    { 
+        new ShapeAnnotation 
+        { 
+            Content = "Node",
+            ID = "Annotation",
+            RotationAngle = 30,    
+        }
+    },
+        };
+        nodes.Add(node);
+    }
+}
+```
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/RotationAngleProperty)
+
+![Annotation Rotation in Blazor Diagram](../images/RotationAngleAnnotation.png)
+
 ## See also
 
 * [How to add or remove annotation constraints](../constraints#annotation-constraints)
diff --git a/blazor/diagram/bpmn-shapes/bpmn-event.md b/blazor/diagram/bpmn-shapes/bpmn-event.md
index f0ecc1cce8..5d5212d551 100644
--- a/blazor/diagram/bpmn-shapes/bpmn-event.md
+++ b/blazor/diagram/bpmn-shapes/bpmn-event.md
@@ -121,7 +121,7 @@ The following table illustrates the type of event triggers.
 
 | Escalation | ![Escalation Trigger Start Event BPMN Shape](../images/Bpmn-Event-Escalation-Start.png) | ![Escalation Trigger  Non-Interrupting Event BPMN Shape](../images//Bpmn-Event-Escalation-NonInterruptingStart.png) | ![Escalation Trigger Intermediate Event BPMN Shape](../images/Bpmn-Event-Escalation-Intermediate.png) | ![Escalation Trigger Non-Interrupting Event BPMN Shape](../images/Bpmn-Event-Escalation-NonInterruptingIntermediate.png)| ![Escalation Trigger Throwing Intermediate Event BPMN Shape](../images/Bpmn-Event-Escalation-ThrowingIntermediate.png) | ![Escalation Trigger End Event BPMN Shape](../images/Bpmn-Event-Escalation-End.png)|
 
-| Termination |![Termination Trigger Start Event BPMN Shape](../images/Bpmn-Event-Terminate-Start.png) | ![Termination Trigger  Non-Interrupting  Event BPMN Shape](../images//Bpmn-Event-Terminate-NonInterruptingStart.png)|![Termination Trigger Intermediate Event BPMN Shape](../images/Bpmn-Event-Terminate-Intermediate.png) | ![Termination Trigger Non-Interrupting Event BPMN Shape](../images/Bpmn-Event-Terminate-NonInterruptingIntermediate.png) |![Termination Trigger Throwing Intermediate Event BPMN Shape](../images/Bpmn-Event-Terminate-ThrowingIntermediate.png) | ![Termination Trigger End Event BPMN Shape](../images/Bpmn-Event-Terminate-End.png)|
+| Terminate  |![Termination Trigger Start Event BPMN Shape](../images/Bpmn-Event-Terminate-Start.png) | ![Termination Trigger  Non-Interrupting  Event BPMN Shape](../images//Bpmn-Event-Terminate-NonInterruptingStart.png)|![Termination Trigger Intermediate Event BPMN Shape](../images/Bpmn-Event-Terminate-Intermediate.png) | ![Termination Trigger Non-Interrupting Event BPMN Shape](../images/Bpmn-Event-Terminate-NonInterruptingIntermediate.png) |![Termination Trigger Throwing Intermediate Event BPMN Shape](../images/Bpmn-Event-Terminate-ThrowingIntermediate.png) | ![Termination Trigger End Event BPMN Shape](../images/Bpmn-Event-Terminate-End.png)|
 
 | Compensation |![Compensation Trigger Start Event BPMN Shape](../images/Bpmn-Event-Compensation-Start.png)|![Compensation Trigger  Non-Interrupting Event BPMN Shape](../images//Bpmn-Event-Compensation-NonInterruptingStart.png) | ![Compensation Trigger Intermediate  Event BPMN Shape](../images/Bpmn-Event-Compensation-Intermediate.png) |![Compensation Trigger Non-Interrupting Event BPMN Shape](../images/Bpmn-Event-Compensation-NonInterruptingIntermediate.png) | ![Compensation Trigger Throwing Intermediate Event BPMN Shape](../images/Bpmn-Event-Compensation-ThrowingIntermediate.png) |![Compensation Trigger End BPMN Event Shape](../images/Bpmn-Event-Compensation-End.png) |
 
diff --git a/blazor/diagram/connectors/events.md b/blazor/diagram/connectors/events.md
index 70a318f793..6bbbe16b35 100644
--- a/blazor/diagram/connectors/events.md
+++ b/blazor/diagram/connectors/events.md
@@ -451,6 +451,205 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
 ```
 You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Events/SegmentCollectionChangeEvent)
 
+## How to Handle Collection Change Events
+
+* The diagram provides specific events that are triggered when connectors are added to or removed from the diagram. These events offer opportunities for customization and are invoked whenever the connector collection undergoes changes.
+
+|Event Name|Arguments|Description|
+|------------|-----------|------------------------|
+|[CollectionChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_CollectionChanging)|[CollectionChangingEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.CollectionChangingEventArgs.html)|Triggers before the node or connector is added or removed from the diagram.|
+|[CollectionChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_CollectionChanged)|[CollectionChangedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.CollectionChangedEventArgs.html)|Triggers after the node or connector is added or removed from the diagram|
+
+
+```cshtml
+@using Syncfusion.Blazor.Diagram
+@using System.Collections.ObjectModel
+<SfDiagramComponent @ref="@Diagram"
+                    Width="100%"
+                    Height="700px"
+                    Connectors="@connectors"
+                    CollectionChanged="OnCollectionChanged">
+</SfDiagramComponent>
+@code{
+    SfDiagramComponent Diagram;
+    //Defines diagram's connector collection.
+    DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
+    protected override void OnInitialized()
+    {
+          Connector Connector = new Connector()
+        {
+            ID = "connector1",
+            // Set the source and target point of the connector.
+            SourcePoint = new DiagramPoint() { X = 100, Y = 100 },
+            TargetPoint = new DiagramPoint() { X = 200, Y = 200 },
+            // Type of the connector segments.
+            Type = ConnectorSegmentType.Straight
+        };
+        connectors.Add(Connector);
+    }
+     //  Notify the Collection Changed event while changing the collection of the connector at run time.
+    private void OnCollectionChanged(CollectionChangedEventArgs args)
+    {
+        //Action to be performed.
+    }
+}
+```
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Events/CollectionChangeEvent)
+
+## How to Handle the Mouse Enter Event
+
+The [MouseEnter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_MouseEnter) event is triggered when the mouse pointer enters the boundary of a connector in the diagram. This event provides valuable information about the element being interacted with. For a comprehensive understanding of the event arguments and their properties, refer to the [DiagramElementMouseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramElementMouseEventArgs.html).
+
+
+```cshtml
+@using Syncfusion.Blazor.Diagram
+<SfDiagramComponent @ref="@Diagram"
+                    Width="100%"
+                    Height="700px"
+                    Connectors="@connectors"
+                    MouseEnter="OnMouseEnter">
+</SfDiagramComponent>
+@code{
+    SfDiagramComponent Diagram;
+    //Defines diagram's connector collection.
+    DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
+    protected override void OnInitialized()
+    {
+          Connector Connector = new Connector()
+        {
+            ID = "connector1",
+            // Set the source and target point of the connector.
+            SourcePoint = new DiagramPoint() { X = 100, Y = 100 },
+            TargetPoint = new DiagramPoint() { X = 200, Y = 200 },
+            // Type of the connector segments.
+            Type = ConnectorSegmentType.Straight
+        };
+        connectors.Add(Connector);
+    }
+    private void OnMouseEnter(DiagramElementMouseEventArgs args)
+    {
+    }
+}
+```
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Events/MouseEnterEvent)
+
+## How to Handle the Mouse Leave Event
+
+The [MouseLeave](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Events/MouseLeaveEvent) event is triggered when the mouse pointer exits the boundaries of a  connector in the diagram. This event provides valuable information about the element being left. For a comprehensive understanding of the event arguments and their properties, refer to the [DiagramElementMouseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramElementMouseEventArgs.html). 
+
+
+```cshtml
+@using Syncfusion.Blazor.Diagram
+<SfDiagramComponent @ref="@Diagram"
+                    Width="100%"
+                    Height="700px"
+                    Connectors="@connectors"
+                    MouseLeave="OnMouseLeave">
+</SfDiagramComponent>
+@code{
+    SfDiagramComponent Diagram;
+    //Defines diagram's connector collection.
+    DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
+    protected override void OnInitialized()
+    {
+          Connector Connector = new Connector()
+        {
+            ID = "connector1",
+            // Set the source and target point of the connector.
+            SourcePoint = new DiagramPoint() { X = 100, Y = 100 },
+            TargetPoint = new DiagramPoint() { X = 200, Y = 200 },
+            // Type of the connector segments.
+            Type = ConnectorSegmentType.Straight
+        };
+        connectors.Add(Connector);
+    }
+    private void OnMouseLeave(DiagramElementMouseEventArgs args)
+    {
+    }
+}
+```
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Events/MouseLeaveEvent)
+
+## How to Handle the Mouse Hover Event
+
+The [MouseHover](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Events/MouseHoverEvent) event is triggered when the mouse pointer hovers over a connector in the diagram. This event provides valuable information about the element being hovered. For detailed information about the event arguments, refer to the [DiagramElementMouseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramElementMouseEventArgs.html).
+
+
+```cshtml
+@using Syncfusion.Blazor.Diagram
+<SfDiagramComponent @ref="@Diagram"
+                    Width="100%"
+                    Height="700px"
+                    Connectors="@connectors"
+                    MouseHover="OnMouseHover">
+</SfDiagramComponent>
+@code{
+    SfDiagramComponent Diagram;
+    //Defines diagram's connector collection.
+    DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
+    protected override void OnInitialized()
+    {
+         Connector Connector = new Connector()
+        {
+            ID = "connector1",
+            // Set the source and target point of the connector.
+            SourcePoint = new DiagramPoint() { X = 100, Y = 100 },
+            TargetPoint = new DiagramPoint() { X = 200, Y = 200 },
+            // Type of the connector segments.
+            Type = ConnectorSegmentType.Straight
+        };
+        connectors.Add(Connector);
+    }
+    private void OnMouseHover(DiagramElementMouseEventArgs args)
+    {
+    }
+}
+```
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Events/MouseHoverEvent)
+
+## How to Handle Property Changed Event
+
+The [Property Changed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_PropertyChanged) event is triggered when connector's property of the diagram component is modified at runtime. This event provides valuable information about the changes occurring in the diagram. For a detailed understanding of the event arguments, refer to the [PropertyChangedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PropertyChangedEventArgs.html).
+
+```cshtml
+@using Syncfusion.Blazor.Diagram
+<SfDiagramComponent @ref="@diagram" 
+                    Width="100%" 
+                    Height="700px" 
+                    Connectors="@connectors"
+                    PropertyChanged="OnNodePropertyChanged">
+</SfDiagramComponent>
+@code {
+    SfDiagramComponent diagram;
+    //Defines diagram's connector collection.
+    DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
+    protected override void OnInitialized()
+    {
+          Connector Connector = new Connector()
+        {
+            ID = "connector1",
+            // Set the source and target point of the connector.
+            SourcePoint = new DiagramPoint() { X = 100, Y = 100 },
+            TargetPoint = new DiagramPoint() { X = 200, Y = 200 },
+            // Type of the connector segments.
+            Type = ConnectorSegmentType.Straight
+        };
+        connectors.Add(Connector);
+    }
+    // Method to handle Property Changed event
+    private void OnNodePropertyChanged(PropertyChangedEventArgs args)
+    {
+        if (args.Element is Connector changedNode)
+        {
+            // Logic to handle the property change for the specific connector
+            Console.WriteLine($"Node ID: {changedNode.ID} property changed.");
+            // Additional logic to handle updates
+        }
+    }
+}
+```
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Events/PropertyChangedEvent)
+
 
 ## See also
 
diff --git a/blazor/diagram/constraints.md b/blazor/diagram/constraints.md
index 4d6b4da934..9e5c245fdf 100644
--- a/blazor/diagram/constraints.md
+++ b/blazor/diagram/constraints.md
@@ -28,7 +28,7 @@ To know more about Bitwise operators, refer to the [Bitwise Operations](constrai
 | -------- | -------- |
 |[None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramConstraints.html#Syncfusion_Blazor_Diagram_DiagramConstraints_None)|Disable all diagram functionalities.|
 |[Bridging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramConstraints.html#Syncfusion_Blazor_Diagram_DiagramConstraints_Bridging)|Enables or disables Bridging support for connector in diagram.|
-|[Undo/redo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramConstraints.html#Syncfusion_Blazor_Diagram_DiagramConstraints_UndoRedo)|Enables or disables the Undo/Redo support for the diagram.|
+|[UndoRedo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramConstraints.html#Syncfusion_Blazor_Diagram_DiagramConstraints_UndoRedo)|Enables or disables the Undo/Redo support for the diagram.|
 |[UserInteraction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramConstraints.html#Syncfusion_Blazor_Diagram_DiagramConstraints_UserInteraction)|Enables or disables user interaction support for the diagram.|
 |[ApiUpdate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramConstraints.html#Syncfusion_Blazor_Diagram_DiagramConstraints_ApiUpdate)|Enables or disables update API support for the diagram.|
 |[PageEditable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramConstraints.html#Syncfusion_Blazor_Diagram_DiagramConstraints_PageEditable)|Enables or disables Page Editable support for the diagram.|
@@ -138,6 +138,7 @@ The [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagra
 |[InheritTooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeConstraints.html#Syncfusion_Blazor_Diagram_NodeConstraints_InheritTooltip)|Enables or disables inherit tooltip option from the parent object.|
 |[Resize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeConstraints.html#Syncfusion_Blazor_Diagram_NodeConstraints_Resize)|Enables or Disables the expansion or compression of a node.|
 |[Inherit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeConstraints.html#Syncfusion_Blazor_Diagram_NodeConstraints_Inherit)|Enables the node to inherit the interaction option from the parent object.|
+|[RoutingObstacle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeConstraints.html#Syncfusion_Blazor_Diagram_NodeConstraints_RoutingObstacle)|Enables or disables the node to be treated as obstacle while in routing.|
 |[Default](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeConstraints.html#Syncfusion_Blazor_Diagram_NodeConstraints_Default)|Enables all default constraints for the node.|
 
 The following example shows how to disable rotate constraint from the default node constraints.
diff --git a/blazor/diagram/events.md b/blazor/diagram/events.md
index 1e83e37f98..1aaa432f56 100644
--- a/blazor/diagram/events.md
+++ b/blazor/diagram/events.md
@@ -84,200 +84,6 @@ The [Click](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDi
 ```
 You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/ClickEvent)
 
-## How to Handle Property Changed Event
-The [Property Changed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_PropertyChanged) event is triggered when any property of the diagram component is modified at runtime. This event provides valuable information about the changes occurring in the diagram. For a detailed understanding of the event arguments, refer to the [PropertyChangedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PropertyChangedEventArgs.html).
-
-```cshtml
-@using Syncfusion.Blazor.Diagram
-@using System.Collections.ObjectModel
-
-<SfDiagramComponent @ref="@Diagram"
-                    Width="100%"
-                    Height="700px"
-                    Nodes="nodes"
-                    PropertyChanged="OnPropertyChanged">
-</SfDiagramComponent>
-
-@code{
-    SfDiagramComponent Diagram;
-    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
-    protected override void OnInitialized()
-    {
-        Node node = new Node()
-        {
-            OffsetX = 250,
-            OffsetY = 250,
-            Width = 100,
-            Height = 100
-        };
-        nodes.Add(node);
-    }
-     // Notify the property changed event while the change property is at run time.
-    private void OnPropertyChanged(PropertyChangedEventArgs args)
-    {
-        //Action to be performed.
-    }
-}
-```
-You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/PropertyChangedEvent)
-
-## How to Handle Collection Change Events
-* The diagram provides specific events that are triggered when nodes or connectors are added to or removed from the diagram. These events offer opportunities for customization and are invoked whenever the node or connector collection undergoes changes.
-
-|Event Name|Arguments|Description|
-|------------|-----------|------------------------|
-|[CollectionChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_CollectionChanging)|[CollectionChangingEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.CollectionChangingEventArgs.html)|Triggers before the node or connector is added or removed from the diagram.|
-|[CollectionChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_CollectionChanged)|[CollectionChangedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.CollectionChangedEventArgs.html)|Triggers after the node or connector is added or removed from the diagram|
-
-
-```cshtml
-@using Syncfusion.Blazor.Diagram
-@using System.Collections.ObjectModel
-
-<SfDiagramComponent @ref="@Diagram"
-                    Width="100%"
-                    Height="700px"
-                    Nodes="nodes"
-                    CollectionChanged="OnCollectionChanged">
-</SfDiagramComponent>
-
-@code{
-    SfDiagramComponent Diagram;
-    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
-    protected override void OnInitialized()
-    {
-        Node node = new Node()
-        {
-            OffsetX = 250,
-            OffsetY = 250,
-            Width = 100,
-            Height = 100
-        };
-        nodes.Add(node);
-    }
-     //  Notify the Collection Changed event while changing the collection of the node or connector at run time.
-    private void OnCollectionChanged(CollectionChangedEventArgs args)
-    {
-        //Action to be performed.
-    }
-}
-```
-You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/CollectionChangeEvent)
-
-## How to Handle the Mouse Enter Event
-
-The [MouseEnter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_MouseEnter) event is triggered when the mouse pointer enters the boundary of a node or connector in the diagram. This event provides valuable information about the element being interacted with. For a comprehensive understanding of the event arguments and their properties, refer to the [DiagramElementMouseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramElementMouseEventArgs.html).
-
-
-```cshtml
-@using Syncfusion.Blazor.Diagram
-@using System.Collections.ObjectModel
-
-<SfDiagramComponent @ref="@Diagram"
-                    Width="100%"
-                    Height="700px"
-                    Nodes="nodes"
-                    MouseEnter="OnMouseEnter">
-</SfDiagramComponent>
-
-@code{
-    SfDiagramComponent Diagram;
-    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
-    protected override void OnInitialized()
-    {
-        Node node = new Node()
-        {
-            OffsetX = 250,
-            OffsetY = 250,
-            Width = 100,
-            Height = 100
-        };
-        nodes.Add(node);
-    }
-    private void OnMouseEnter(DiagramElementMouseEventArgs args)
-    {
-
-    }
-}
-```
-You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/MouseEnterEvent)
-
-## How to Handle the Mouse Leave Event
-
-The [MouseLeave](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_MouseLeave) event is triggered when the mouse pointer exits the boundaries of a node or connector in the diagram. This event provides valuable information about the element being left. For a comprehensive understanding of the event arguments and their properties, refer to the [DiagramElementMouseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramElementMouseEventArgs.html). 
-
-
-```cshtml
-@using Syncfusion.Blazor.Diagram
-@using System.Collections.ObjectModel
-
-<SfDiagramComponent @ref="@Diagram"
-                    Width="100%"
-                    Height="700px"
-                    Nodes="nodes"
-                    MouseLeave="OnMouseLeave">
-</SfDiagramComponent>
-
-@code{
-    SfDiagramComponent Diagram;
-    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
-    protected override void OnInitialized()
-    {
-        Node node = new Node()
-        {
-            OffsetX = 250,
-            OffsetY = 250,
-            Width = 100,
-            Height = 100
-        };
-        nodes.Add(node);
-    }
-    private void OnMouseLeave(DiagramElementMouseEventArgs args)
-    {
-
-    }
-}
-```
-You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/MouseLeaveEvent)
-
-## How to Handle the Mouse Hover Event
-
-The [MouseHover](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_MouseHover) event is triggered when the mouse pointer hovers over a node or connector in the diagram. This event provides valuable information about the element being hovered. For detailed information about the event arguments, refer to the [DiagramElementMouseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramElementMouseEventArgs.html).
-
-
-```cshtml
-@using Syncfusion.Blazor.Diagram
-@using System.Collections.ObjectModel
-
-<SfDiagramComponent @ref="@Diagram"
-                    Width="100%"
-                    Height="700px"
-                    Nodes="nodes"
-                    MouseHover="OnMouseHover">
-</SfDiagramComponent>
-
-@code{
-    SfDiagramComponent Diagram;
-    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
-    protected override void OnInitialized()
-    {
-        Node node = new Node()
-        {
-            OffsetX = 250,
-            OffsetY = 250,
-            Width = 100,
-            Height = 100
-        };
-        nodes.Add(node);
-    }
-    private void OnMouseHover(DiagramElementMouseEventArgs args)
-    {
-
-    }
-}
-```
-You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/MouseHoverEvent)
-
 ## How to Handle the Key Down Event
 
 The [KeyDown](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_KeyDown) event is triggered when a user presses any key on the keyboard while the diagram component has focus. This event provides a powerful way to capture and respond to keyboard interactions. For detailed information about the event arguments and properties available, please refer to the [KeyEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.KeyEventArgs.html).
diff --git a/blazor/diagram/how-to.md b/blazor/diagram/how-to.md
index ab8d1aa122..354bb01f12 100644
--- a/blazor/diagram/how-to.md
+++ b/blazor/diagram/how-to.md
@@ -1,6 +1,6 @@
 ---
 layout: post
-title: How to Use Diagram Methods and Properties for Common Scenarios | Syncfusion
+title: How to Use Diagram Methods and Properties | Syncfusion
 description: Checkout and learn here all about how to achieve common use cases in Syncfusion Blazor Diagram component, it's elements and more.
 platform: Blazor
 control: DiagramComponent
@@ -1378,7 +1378,7 @@ The [GetCustomTool](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diag
             {
                 Name = "changeCursor",
                 Offset = 0.5,
-                Source = "https://www.w3schools.com/images/w3schools_green.jpg",
+                ImageUrl = "https://www.w3schools.com/images/w3schools_green.jpg",
                 Visible = true,
                 Side = Direction.Bottom,
                 Margin = new DiagramThickness { Top = 0, Bottom = 0, Left = 0, Right = 0 },
diff --git a/blazor/diagram/images/BPMNShape.png b/blazor/diagram/images/BPMNShape.png
new file mode 100644
index 0000000000..b31d2db0d2
Binary files /dev/null and b/blazor/diagram/images/BPMNShape.png differ
diff --git a/blazor/diagram/images/BorderColor.png b/blazor/diagram/images/BorderColor.png
new file mode 100644
index 0000000000..c57173a351
Binary files /dev/null and b/blazor/diagram/images/BorderColor.png differ
diff --git a/blazor/diagram/images/LaneOrientation.png b/blazor/diagram/images/LaneOrientation.png
new file mode 100644
index 0000000000..2570f10a7d
Binary files /dev/null and b/blazor/diagram/images/LaneOrientation.png differ
diff --git a/blazor/diagram/images/NodeRotation.png b/blazor/diagram/images/NodeRotation.png
new file mode 100644
index 0000000000..a5ffda0135
Binary files /dev/null and b/blazor/diagram/images/NodeRotation.png differ
diff --git a/blazor/diagram/images/RotationAngleAnnotation.png b/blazor/diagram/images/RotationAngleAnnotation.png
new file mode 100644
index 0000000000..3651b8c456
Binary files /dev/null and b/blazor/diagram/images/RotationAngleAnnotation.png differ
diff --git a/blazor/diagram/nodes/customization.md b/blazor/diagram/nodes/customization.md
index acaeb82540..15805d2b3f 100644
--- a/blazor/diagram/nodes/customization.md
+++ b/blazor/diagram/nodes/customization.md
@@ -307,6 +307,78 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
 
 ![Blazor Diagram with SetNodeTemplate](../images/blazor-diagram-set-node-template.png)
 
+## How to change the border color of a node
+
+The diagram provides support to customize the border color of a node using the [BorderColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_BorderColor) property. By default, the border color of a node is black.
+
+```cshtml
+@using Syncfusion.Blazor.Diagram
+<SfDiagramComponent Height="600px" Nodes="@nodes" />
+@code
+{
+    // Define diagram's nodes collection
+    DiagramObjectCollection<Node> nodes;
+    protected override void OnInitialized()
+    {
+        nodes = new DiagramObjectCollection<Node>();
+        // A node is created and stored in nodes array.
+        Node node = new Node()
+        {
+            ID = "node1",
+            // Position of the node
+            OffsetX = 100,
+            OffsetY = 100,
+            // Size of the node
+            Width = 100,
+            Height = 100,
+            // Sets the border color of the node
+            BorderColor = "Orange",
+            // Sets the border width for better visibility
+            BorderWidth = 20
+        };
+        nodes.Add(node);
+    }
+}
+```
+You can download a complete working sample from [GitHub](hhttps://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Appearance/BorderColor)
+
+![Border Color for Node](../images/BorderColor.png)
+
+## How to change the border width of a node
+
+The diagram allows you to customize the border width of a node using the [BorderWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_BorderWidth) property. By default, the border width is set to 1px. You can modify this value to increase or decrease the thickness of the node's border as needed.
+
+```cshtml
+@using Syncfusion.Blazor.Diagram
+<SfDiagramComponent Height="600px" Nodes="@nodes" />
+@code
+{
+    // Define diagram's nodes collection
+    DiagramObjectCollection<Node> nodes;
+    protected override void OnInitialized()
+    {
+        nodes = new DiagramObjectCollection<Node>();
+        // A node is created and stored in nodes array.
+        Node node = new Node()
+        {
+            ID = "node1",
+            // Position of the node
+            OffsetX = 100,
+            OffsetY = 100,
+            // Size of the node
+            Width = 100,
+            Height = 100,
+            // Sets the border color of the node
+            BorderColor = "red",
+            // Sets the border width for better visibility
+            BorderWidth = 20
+        };
+        nodes.Add(node);
+    }
+}
+```
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Appearance/BorderWidth)
+
 ## How to Update Node Shadow
 
 Diagram provides support to add [Shadow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shadow.html) effect to a node that is disabled, by default. It can be enabled with the constraints property of the node. The following code shows how to draw shadow.
diff --git a/blazor/diagram/nodes/events.md b/blazor/diagram/nodes/events.md
index dfae9b439a..6295c56295 100644
--- a/blazor/diagram/nodes/events.md
+++ b/blazor/diagram/nodes/events.md
@@ -311,6 +311,196 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
 
 You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Events/NodeCreatingEvent)
 
+## How to Handle Property Changed Event
+
+The [Property Changed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_PropertyChanged) event is triggered when node's property of the diagram component is modified at runtime. This event provides valuable information about the changes occurring in the diagram. For a detailed understanding of the event arguments, refer to the [PropertyChangedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PropertyChangedEventArgs.html).
+
+```cshtml
+@using Syncfusion.Blazor.Diagram
+<SfDiagramComponent @ref="@diagram" 
+                    Width="100%" 
+                    Height="700px" 
+                    Nodes="nodes" 
+                    NodePropertyChanged="OnNodePropertyChanged">
+</SfDiagramComponent>
+@code {
+    SfDiagramComponent diagram;
+    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
+    protected override void OnInitialized()
+    {
+        Node node = new Node()
+        {
+            // Initial position and size of the node
+            OffsetX = 250,
+            OffsetY = 250,
+            Width = 100,
+            Height = 100,
+            Style = new ShapeStyle { Fill = "#6495ED", StrokeColor = "white" }
+        };
+        nodes.Add(node);
+    }
+    // Method to handle Node Property Changed event
+    private void OnNodePropertyChanged(PropertyChangedEventArgs args)
+    {
+        if (args.Element is Node changedNode)
+        {
+            // Logic to handle the property change for the specific node
+            Console.WriteLine($"Node ID: {changedNode.ID} property changed.");
+            // Additional logic to handle updates
+        }
+    }
+}
+```
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Events/PropertyChangedEvent)
+
+## How to Handle Collection Change Events
+
+* The diagram provides specific events that are triggered when nodes are added to or removed from the diagram. These events offer opportunities for customization and are invoked whenever the node collection undergoes changes.
+
+|Event Name|Arguments|Description|
+|------------|-----------|------------------------|
+|[CollectionChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_CollectionChanging)|[CollectionChangingEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.CollectionChangingEventArgs.html)|Triggers before the node or connector is added or removed from the diagram.|
+|[CollectionChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_CollectionChanged)|[CollectionChangedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.CollectionChangedEventArgs.html)|Triggers after the node or connector is added or removed from the diagram|
+
+
+```cshtml
+@using Syncfusion.Blazor.Diagram
+@using System.Collections.ObjectModel
+<SfDiagramComponent @ref="@Diagram"
+                    Width="100%"
+                    Height="700px"
+                    Nodes="nodes"
+                    CollectionChanged="OnCollectionChanged">
+</SfDiagramComponent>
+@code{
+    SfDiagramComponent Diagram;
+    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
+    protected override void OnInitialized()
+    {
+        Node node = new Node()
+        {
+            OffsetX = 250,
+            OffsetY = 250,
+            Width = 100,
+            Height = 100
+        };
+        nodes.Add(node);
+    }
+     //  Notify the Collection Changed event while changing the collection of the node at run time.
+    private void OnCollectionChanged(CollectionChangedEventArgs args)
+    {
+        //Action to be performed.
+    }
+}
+```
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Events/CollectionChangeEvent)
+
+## How to Handle the Mouse Enter Event
+
+The [MouseEnter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_MouseEnter) event is triggered when the mouse pointer enters the boundary of a node in the diagram. This event provides valuable information about the element being interacted with. For a comprehensive understanding of the event arguments and their properties, refer to the [DiagramElementMouseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramElementMouseEventArgs.html).
+
+
+```cshtml
+@using Syncfusion.Blazor.Diagram
+@using System.Collections.ObjectModel
+<SfDiagramComponent @ref="@Diagram"
+                    Width="100%"
+                    Height="700px"
+                    Nodes="nodes"
+                    MouseEnter="OnMouseEnter">
+</SfDiagramComponent>
+@code{
+    SfDiagramComponent Diagram;
+    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
+    protected override void OnInitialized()
+    {
+        Node node = new Node()
+        {
+            OffsetX = 250,
+            OffsetY = 250,
+            Width = 100,
+            Height = 100
+        };
+        nodes.Add(node);
+    }
+    private void OnMouseEnter(DiagramElementMouseEventArgs args)
+    {
+    }
+}
+```
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Events/MouseEnterEvent)
+
+## How to Handle the Mouse Leave Event
+
+The [MouseLeave](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_MouseLeave) event is triggered when the mouse pointer exits the boundaries of a node in the diagram. This event provides valuable information about the element being left. For a comprehensive understanding of the event arguments and their properties, refer to the [DiagramElementMouseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramElementMouseEventArgs.html). 
+
+
+```cshtml
+@using Syncfusion.Blazor.Diagram
+@using System.Collections.ObjectModel
+<SfDiagramComponent @ref="@Diagram"
+                    Width="100%"
+                    Height="700px"
+                    Nodes="nodes"
+                    MouseLeave="OnMouseLeave">
+</SfDiagramComponent>
+@code{
+    SfDiagramComponent Diagram;
+    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
+    protected override void OnInitialized()
+    {
+        Node node = new Node()
+        {
+            OffsetX = 250,
+            OffsetY = 250,
+            Width = 100,
+            Height = 100
+        };
+        nodes.Add(node);
+    }
+    private void OnMouseLeave(DiagramElementMouseEventArgs args)
+    {
+    }
+}
+```
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Events/MouseLeaveEvent)
+
+## How to Handle the Mouse Hover Event
+
+The [MouseHover](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_MouseHover) event is triggered when the mouse pointer hovers over a node in the diagram. This event provides valuable information about the element being hovered. For detailed information about the event arguments, refer to the [DiagramElementMouseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramElementMouseEventArgs.html).
+
+
+```cshtml
+@using Syncfusion.Blazor.Diagram
+@using System.Collections.ObjectModel
+<SfDiagramComponent @ref="@Diagram"
+                    Width="100%"
+                    Height="700px"
+                    Nodes="nodes"
+                    MouseHover="OnMouseHover">
+</SfDiagramComponent>
+@code{
+    SfDiagramComponent Diagram;
+    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
+    protected override void OnInitialized()
+    {
+        Node node = new Node()
+        {
+            OffsetX = 250,
+            OffsetY = 250,
+            Width = 100,
+            Height = 100
+        };
+        nodes.Add(node);
+    }
+    private void OnMouseHover(DiagramElementMouseEventArgs args)
+    {
+    }
+}
+```
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Events/MouseHoverEvent)
+
+
 ## How to Enable or Disable Node Behaviors Using Constraints
 
 The Constraints property of node allows you to enable or disable certain features. For more information about node constraints, refer to the [Node Constraints](https://blazor.syncfusion.com/documentation/diagram/constraints#node-constraints).
diff --git a/blazor/diagram/nodes/expand-and-collapse.md b/blazor/diagram/nodes/expand-and-collapse.md
index 1cfdab524a..757be888be 100644
--- a/blazor/diagram/nodes/expand-and-collapse.md
+++ b/blazor/diagram/nodes/expand-and-collapse.md
@@ -792,6 +792,240 @@ To implement a custom template for expand and collapse icons, please refer to th
 
 You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/ExpandAndCollapse/ExpandCollapseIconTemplate)
 
+### How to Set Padding for the Expand/Collapse Icon
+
+The Blazor Diagram component features a [Padding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramIcon.html#Syncfusion_Blazor_Diagram_DiagramIcon_Padding) property specifically designed for the expand and collapse icons of the nodes. This property allows you to customize the spacing around these icons, providing greater control over their positioning. By adjusting the Padding, you can define the space that the icon should maintain from its border.
+The following code shows how to set the Padding property of expand/collapse icon.
+
+
+```csharp
+@using Syncfusion.Blazor.Diagram
+
+<SfDiagramComponent Height="600px" Nodes="@nodes" Connectors="@connectors" />
+
+@code
+{
+    //Initialize the diagram's nodes collection
+    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
+    //Initialize the diagram's connectors collection
+    DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
+    protected override void OnInitialized()
+    {
+        Node node1 = new Node()
+        {
+            ID = "node1",
+            Width = 100,
+            Height = 100,
+            OffsetX = 300,
+            OffsetY = 300,
+            IsExpanded = false,
+            Style = new ShapeStyle()
+            {
+                Fill = "#6BA5D7",
+                StrokeColor = "white"
+            },
+            Annotations = new DiagramObjectCollection<ShapeAnnotation>()
+            {
+                new ShapeAnnotation()
+                {
+                    Content="Node1"
+                }
+            },
+            ExpandIcon = new DiagramExpandIcon()
+            {
+                Shape = DiagramExpandIcons.Minus,
+                Height = 20,
+                Width = 20,
+                Fill = "Gray",
+                   Padding = new DiagramThickness(){
+                Top = 1,
+                Bottom = 1,
+                Left = 1,
+                Right = 1,
+                },  
+                BorderColor = "Blue",
+                BorderWidth = 3,
+            },
+            CollapseIcon = new DiagramCollapseIcon()
+            {
+                Shape = DiagramCollapseIcons.Plus,
+                Height = 20,
+                Width = 20,
+                Fill = "Gray",
+                BorderColor = "Blue",
+                   Padding = new DiagramThickness(){
+                Top = 1,
+                Bottom = 1,
+                Left = 1,
+                Right = 1,
+                },   
+                BorderWidth = 3,
+            },
+        };
+        nodes.Add(node1);
+        Node node2 = new Node()
+        {
+            ID = "node2",
+            Width = 100,
+            Height = 100,
+            OffsetX = 300,
+            OffsetY = 500,
+            Style = new ShapeStyle()
+            {
+                Fill = "#6BA5D7",
+                StrokeColor = "white"
+            },
+            Annotations = new DiagramObjectCollection<ShapeAnnotation>()
+            {
+                new ShapeAnnotation()
+                {
+                    Content="Node2"
+                }
+            },
+            ExpandIcon = new DiagramExpandIcon()
+            {
+                Shape = DiagramExpandIcons.Minus,
+                Height = 20,
+                Width = 20,
+            },
+            CollapseIcon = new DiagramCollapseIcon()
+            {
+                Shape = DiagramCollapseIcons.Plus,
+                Height = 20,
+                Width = 20,
+            },
+        };
+        nodes.Add(node2);
+        Connector connector1 = new Connector()
+            {
+                ID = "connector1",
+                SourceID = "node1",
+                TargetID = "node2",
+            };
+        connectors.Add(connector1);
+    }
+}
+```
+
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/ExpandAndCollapse/ExpanCollapsePadding)
+
+### How to Set Margin for the Expand/Collapse Icon
+
+The Blazor Diagram component includes a [Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramIcon.html#Syncfusion_Blazor_Diagram_DiagramIcon_Margin) property for the expand and collapse icons of the nodes. This property defines the space from the actual offset values of the icon, allowing you to precisely adjust how the icons are positioned relative to their surrounding elements.
+
+```csharp
+@using Syncfusion.Blazor.Diagram
+
+<SfDiagramComponent Height="600px" Nodes="@nodes" Connectors="@connectors" />
+
+@code
+{
+    //Initialize the diagram's nodes collection
+    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
+    //Initialize the diagram's connectors collection
+    DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
+    protected override void OnInitialized()
+    {
+        Node node1 = new Node()
+        {
+            ID = "node1",
+            Width = 100,
+            Height = 100,
+            OffsetX = 300,
+            OffsetY = 300,
+            IsExpanded = false,
+            Style = new ShapeStyle()
+            {
+                Fill = "#6BA5D7",
+                StrokeColor = "white"
+            },
+            Annotations = new DiagramObjectCollection<ShapeAnnotation>()
+            {
+                new ShapeAnnotation()
+                {
+                    Content="Node1"
+                }
+            },
+            ExpandIcon = new DiagramExpandIcon()
+            {
+                Shape = DiagramExpandIcons.Minus,
+                Height = 20,
+                Width = 20,
+                Fill = "Gray",
+               Margin = new DiagramThickness()
+                {
+                    Top = 5,
+                    Bottom = 5,
+                    Left = 5,
+                    Right = 5,
+                }, 
+                BorderColor = "Blue",
+                BorderWidth = 3,
+            },
+            CollapseIcon = new DiagramCollapseIcon()
+            {
+                Shape = DiagramCollapseIcons.Plus,
+                Height = 20,
+                Width = 20,
+                Fill = "Gray",
+                BorderColor = "Blue",
+               Margin = new DiagramThickness()
+                {
+                    Top = 5,
+                    Bottom = 5,
+                    Left = 5,
+                    Right = 5,
+                },    
+                BorderWidth = 3,
+            },
+        };
+        nodes.Add(node1);
+        Node node2 = new Node()
+        {
+            ID = "node2",
+            Width = 100,
+            Height = 100,
+            OffsetX = 300,
+            OffsetY = 500,
+            Style = new ShapeStyle()
+            {
+                Fill = "#6BA5D7",
+                StrokeColor = "white"
+            },
+            Annotations = new DiagramObjectCollection<ShapeAnnotation>()
+            {
+                new ShapeAnnotation()
+                {
+                    Content="Node2"
+                }
+            },
+            ExpandIcon = new DiagramExpandIcon()
+            {
+                Shape = DiagramExpandIcons.Minus,
+                Height = 20,
+                Width = 20,
+            },
+            CollapseIcon = new DiagramCollapseIcon()
+            {
+                Shape = DiagramCollapseIcons.Plus,
+                Height = 20,
+                Width = 20,
+            },
+        };
+        nodes.Add(node2);
+        Connector connector1 = new Connector()
+            {
+                ID = "connector1",
+                SourceID = "node1",
+                TargetID = "node2",
+            }; 
+        connectors.Add(connector1);
+    }
+}
+```
+
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/ExpandAndCollapse/ExpanCollapseMargin)
+
 ## See also
 
 * [How to Find the Expand and Collapse State of a Node During Initial Load and Runtime in a Diagram](https://support.syncfusion.com/kb/article/18728/how-to-find-the-expand-and-collapse-state-of-a-node-during-initial-load-and-runtime-in-a-diagram)
\ No newline at end of file
diff --git a/blazor/diagram/nodes/interaction.md b/blazor/diagram/nodes/interaction.md
index 8260c3edda..0644536ec1 100644
--- a/blazor/diagram/nodes/interaction.md
+++ b/blazor/diagram/nodes/interaction.md
@@ -234,6 +234,37 @@ Also, rotate the node during the interaction.
 
 ![Displaying Node Rotation in Blazor Diagram](../images/blazor-diagram-node-rotation.gif)
 
+## How to rotate a node using the RotationAngle property
+
+The [RotationAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_RotationAngle)  property gets or sets the rotation angle of a node in degrees. This defines the fixed angle at which the node is displayed. The default value is 0.
+
+Use this property when you want to specify the node’s rotation at the time of creation or update it programmatically.
+
+```cshtml
+@using Syncfusion.Blazor.Diagram
+<SfDiagramComponent Height="600px" Nodes="@nodes" />
+@code
+{
+    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
+    protected override void OnInitialized()
+    {
+        Node node = new Node()
+        {
+            ID = "node1",
+            Height = 100,
+            Width = 100,
+            OffsetX = 100,
+            OffsetY = 100,
+            RotationAngle = 50, // Rotates node by 50 degrees
+        };
+        nodes.Add(node);
+    }
+}
+```
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Interaction/RotateAngleProperty)
+
+![Node Resizing in Blazor Diagram](../images/NodeRotation.png)
+
 ## How to Flip a Node
 
 The [Flip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeBase.html#Syncfusion_Blazor_Diagram_NodeBase_Flip) is performed to give the mirrored image of the original element.
diff --git a/blazor/diagram/ports/appearance.md b/blazor/diagram/ports/appearance.md
index 44122b1bcb..668eded6d4 100644
--- a/blazor/diagram/ports/appearance.md
+++ b/blazor/diagram/ports/appearance.md
@@ -163,6 +163,51 @@ The PortConstraints may have multiple behaviors like listed below:
 
 The [AdditionalInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Port.html#Syncfusion_Blazor_Diagram_Port_AdditionalInfo) property of the port allows you to maintain additional information for the port.
 
+The following code shows how to set the AdditionalInfo value for a port.
+
+```cshtml
+@using Syncfusion.Blazor.Diagram
+<SfDiagramComponent Height="600px" Nodes="@nodes" />
+@code
+{
+    DiagramObjectCollection<Node> nodes;
+    protected override void OnInitialized()
+    {
+        nodes = new DiagramObjectCollection<Node>();
+        // Create a dictionary to hold additional information for the port.
+        Dictionary<string, object> PortInfo = new Dictionary<string, object>();
+        PortInfo.Add("portInfo", "Port A");
+        // Create a port with additional info.
+        PointPort port = new PointPort()
+            {
+                Offset = new DiagramPoint { X = 0.5, Y = 0.5 },
+                Visibility=PortVisibility.Visible,
+                AdditionalInfo = PortInfo
+            };
+        // A node is created and stored in nodes collection.
+        Node node = new Node()
+            {
+                OffsetX = 250,
+                OffsetY = 250,
+                Width = 100,
+                Height = 100,
+                Style = new ShapeStyle()
+                {
+                    Fill = "#6BA5D7",
+                    StrokeColor = "white"
+                },
+                Ports = new DiagramObjectCollection<PointPort>  { port }
+            };
+        // Add node.
+        nodes.Add(node);
+    }
+}
+```
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ports/Appearance)
+
+
+**Note:** Like AdditionalInfo for nodes, you can set any type of value for the AdditionalInfo property of a port.
+
 ## See also
 
 * [How to create a node](../nodes/nodes)
diff --git a/blazor/diagram/ports/ports.md b/blazor/diagram/ports/ports.md
index 32d86e0187..b224e40e4e 100644
--- a/blazor/diagram/ports/ports.md
+++ b/blazor/diagram/ports/ports.md
@@ -75,6 +75,87 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
 
 ![Creating Port in Blazor Diagram](../images/blazor-diagram-create-port.png)
 
+### How to Connect a Connector to a Node Port
+
+Node ports are used to establish connections between node ports, connector ports and nodes. To create such a connection, set the [SourceID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_SourceID) or [TargetID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_TargetID) property to the ID of the node and the [SourcePortID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_SourcePortID) or [TargetPortID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_TargetPortID) property to the ID of the corresponding port on the node.
+
+The following code example demonstrates how to connect connectors to ports on nodes.
+
+```cshtml
+@using Syncfusion.Blazor.Diagram
+
+<SfDiagramComponent Height="600px" Nodes="@nodes" Connectors="@connectors">
+</SfDiagramComponent>
+
+@code
+{
+    // Initialize node and connector collections
+    DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
+    DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
+
+    protected override void OnInitialized()
+    {
+        Node node1 = new Node()
+            {
+                ID = "node1",
+                OffsetX = 200,
+                OffsetY = 200,
+                Width = 100,
+                Height = 100,
+                Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" },
+                Ports = new DiagramObjectCollection<PointPort>()
+            {
+                new PointPort()
+                {
+                    ID = "port1",
+                    Offset = new DiagramPoint() { X = 1, Y = 0.5 },
+                    Visibility = PortVisibility.Visible,
+                    Shape = PortShapes.Circle,
+                }
+            }
+            };
+
+        Node node2 = new Node()
+            {
+                ID = "node2",
+                OffsetX = 400,
+                OffsetY = 200,
+                Width = 100,
+                Height = 100,
+                Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" },
+                Ports = new DiagramObjectCollection<PointPort>()
+            {
+                new PointPort()
+                {
+                    ID = "port1",
+                    Offset = new DiagramPoint() { X = 0, Y = 0.5 },
+                    Visibility = PortVisibility.Visible,
+                    Shape = PortShapes.Circle,
+                }
+            }
+            };
+
+        // Connector connecting node1's port1 to node2's port1
+        Connector connector1 = new Connector()
+            {
+                ID = "connector1",
+                SourceID = "node1",
+                SourcePortID = "port1",
+                TargetID = "node2",
+                TargetPortID = "port1",
+                Type = ConnectorSegmentType.Straight,
+                Style = new ShapeStyle() { StrokeColor = "#6495ED", StrokeWidth = 2 }
+            };
+
+        nodes.Add(node1);
+        nodes.Add(node2);
+        connectors.Add(connector1);
+    }
+}
+```
+
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ports/NodePortConnection).
+
 ## How to Create a Connector Port
 
 Creating connector ports is similar to creating node ports. To define connector ports, you need to create a collection of `ConnectorPort` and assign it to the connector’s `Ports` property.
@@ -122,7 +203,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
 
 >**Note:** Port's Id should not start with numbers or special characters and should not contain special characters such as underscores(_) or spaces.
 
-### How to Connect a Connector to a Port
+### How to Connect a Connector to a Connector Port
 
 Connector ports are used to establish connections between node ports, connector ports and nodes. To create such a connection, set the `SourcePortID` or `TargetPortID` property to the ID of the corresponding port on the connector.
 
diff --git a/blazor/diagram/shapes.md b/blazor/diagram/shapes.md
index b05abb206b..1f6c4aa85d 100644
--- a/blazor/diagram/shapes.md
+++ b/blazor/diagram/shapes.md
@@ -18,6 +18,7 @@ Diagram provides support to add different kind of nodes. They are as follows:
 * Flow shape
 * SVG shape
 * HTML template 
+* BPMN shape
 
 ## How to Create and Customize a Text Node
 
@@ -497,6 +498,53 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
 
 N> Like the HTML node, the SVG node cannot be exported to image format. The fill color of the SVG node can be overridden by the inline style or fill of the SVG element specified in the template.
 
+## Node with BPMN shapes
+
+The [BPMN](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeShapes.html#Syncfusion_Blazor_Diagram_NodeShapes_Bpmn) shapes are used to visually represent Business Process Model and Notation elements such as events, tasks, gateways, and more. To create BPMN shapes, the Type of the shape should be set as Bpmn.
+
+Its Shape property can then be configured with any one of the available built-in BPMN subtypes, such as events, activities, or gateways. You can also further customize each BPMN shape by specifying its category and characteristics (like Event, Trigger, Loop, etc.).
+
+
+The following code example illustrates how to create a BPMN shape.
+
+```cshtml
+@using Syncfusion.Blazor.Diagram
+@* Initialize Diagram *@
+<SfDiagramComponent Height="600px" Nodes="@nodes" />
+@code
+{
+    // Initialize node collection with Node.
+    DiagramObjectCollection<Node> nodes;
+    protected override void OnInitialized()
+    {
+        nodes = new DiagramObjectCollection<Node>();
+        Node node = new Node()
+        {
+            // Position of the node.
+            OffsetX = 100,
+            OffsetY = 100,
+            // Size of the node.
+            Width = 100,
+            Height = 100,
+            // Unique Id of the node.
+            ID = "node1",
+            // Sets the shape to activity.
+            Shape = new BpmnActivity() 
+            { 
+                ActivityType = BpmnActivityType.Task 
+            },
+        };
+        nodes.Add(node);
+    }
+}
+```
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Shapes)
+
+For more information about node constraints, refer to the [BPMN Shapes](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Shapes/BPMNShape).
+
+
+![BPMN Node in Blazor Diagram](images/BPMNShape.png)
+
 ## See also
 
 * [How to Create Polygon and Circle Shapes in Blazor Diagram](https://support.syncfusion.com/kb/article/18054/how-to-create-polygon-and-circle-shapes-in-blazor-diagram)  
diff --git a/blazor/diagram/swimlane/Swimlane-images/LaneOrientation.png b/blazor/diagram/swimlane/Swimlane-images/LaneOrientation.png
new file mode 100644
index 0000000000..2570f10a7d
Binary files /dev/null and b/blazor/diagram/swimlane/Swimlane-images/LaneOrientation.png differ
diff --git a/blazor/diagram/swimlane/Swimlane-images/PhaseOrientation.png b/blazor/diagram/swimlane/Swimlane-images/PhaseOrientation.png
new file mode 100644
index 0000000000..ef9985624a
Binary files /dev/null and b/blazor/diagram/swimlane/Swimlane-images/PhaseOrientation.png differ
diff --git a/blazor/diagram/swimlane/lane/lane.md b/blazor/diagram/swimlane/lane/lane.md
index ba42156191..c850062455 100644
--- a/blazor/diagram/swimlane/lane/lane.md
+++ b/blazor/diagram/swimlane/lane/lane.md
@@ -406,6 +406,95 @@ The following code example explains how to add nodes to lane.
 
 You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/Lane/LaneChildren).
 
+## How to Set the Orientation of a Lane
+
+  The [Orientation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Lane.html#Syncfusion_Blazor_Diagram_Lane_Orientation) property in the Symbol Palette allows you to define whether a lane is displayed horizontally or vertically. This property is particularly relevant when the lane is part of a SymbolPalette.
+
+   * Horizontal Orientation: The lane will be aligned horizontally.
+   * Vertical Orientation: The lane will be aligned vertically.
+
+   Below is an example demonstrating how to set the orientation for Lanes in a SfSymbolPaletteComponent:
+
+```cshtml
+   @using Syncfusion.Blazor.Diagram
+   @using Syncfusion.Blazor.Diagram.SymbolPalette
+<div class="control-section">
+    <div style="width:20%;">
+        <div id="palette-space" class="sb-mobile-palette" style="border: 2px solid #b200ff">
+            <SfSymbolPaletteComponent @ref="@symbolpalette" Height="300px" Width="200px"
+                                      Palettes="@Palettes" SymbolHeight="60" SymbolWidth="60" SymbolMargin="@SymbolMargin">
+            </SfSymbolPaletteComponent>
+        </div>
+    </div>
+</div>
+@code
+{
+    //Reference the symbolpreview.
+    DiagramSize SymbolPreview;
+    //Define symbol margin.
+    SymbolMargin SymbolMargin = new SymbolMargin { Left = 15, Right = 15, Top = 15, Bottom = 15 };
+    SfSymbolPaletteComponent symbolpalette;
+    //Define palattes collection.
+    DiagramObjectCollection<Palette> Palettes = new DiagramObjectCollection<Palette>();
+    // Defines palette's swimlane-shape collection.
+    DiagramObjectCollection<NodeBase> SwimlaneNodes = new DiagramObjectCollection<NodeBase>();
+    protected override void OnInitialized()
+    {
+        InitPaletteModel();
+    }
+    private void InitPaletteModel()
+    {
+        Palettes = new DiagramObjectCollection<Palette>();
+        SwimlaneNodes = new DiagramObjectCollection<NodeBase>();
+        //create a horizontal lane.
+        Lane horizontalLane = new Lane()
+            {
+                ID = "HorizontalSwimlane",
+                Orientation = Orientation.Horizontal,
+                Height = 100,
+                Width = 150,
+                // Style = new TextStyle() { Fill = "orange", StrokeColor = "black" },
+                Header = new SwimlaneHeader()
+                {
+                    Annotation = new ShapeAnnotation() { Content = "Lane Title" },
+                    Style = new TextStyle() { Fill = "lightblue", StrokeColor = "black" },
+                    Width = 25,
+                    Height = 100
+                },
+            };
+        //create a vertical lane.
+        Lane verticalLane = new Lane()
+            {
+                ID = "VerticalSwimlane",
+                Orientation = Orientation.Vertical,
+                Height = 150,
+                Width = 100,
+                // Style = new TextStyle() { Fill = "orange", StrokeColor = "black" },
+                Header = new SwimlaneHeader()
+                {
+                    Annotation = new ShapeAnnotation() { Content = "Lane Title" },
+                    Style = new TextStyle() { Fill = "lightblue", StrokeColor = "black" },
+                    Width = 100,
+                    Height = 25
+                },
+            };
+        SwimlaneNodes = new DiagramObjectCollection<NodeBase>()
+        {
+            horizontalLane,
+            verticalLane,
+        };
+        Palettes = new DiagramObjectCollection<Palette>()
+        {
+            new Palette(){Symbols =SwimlaneNodes,Title="Swimlane Shapes",ID="SwimlaneShapes" },
+        };
+      }
+    }
+```
+   ![Lane](../Swimlane-images/LaneOrientation.PNG).
+
+   You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/Lane/LaneOrientation).
+
+
 ## Header Selection and Resize
 
  * You can select the individual lane header by clicking on the header twice. On the first click, the respective lane can be selected.
diff --git a/blazor/diagram/swimlane/phase.md b/blazor/diagram/swimlane/phase.md
index 3254495f50..b04a75572d 100644
--- a/blazor/diagram/swimlane/phase.md
+++ b/blazor/diagram/swimlane/phase.md
@@ -342,6 +342,66 @@ The following code example explains how to define a Phase header annotation temp
 
 You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/Phase/PhaseHeaderTemplate).
 
+## How to Set the Orientation of a Phase
+
+The [Orientation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Phase.html#Syncfusion_Blazor_Diagram_Phase_Orientation) property in the Symbol Palette allows you to define whether a phase is displayed horizontally or vertically. This property is particularly relevant when the phase is part of a SymbolPalette.
+
+ * Horizontal Orientation: The phase will be aligned horizontally.
+ * Vertical Orientation: The phase will be aligned vertically.
+
+Below is an example demonstrating how to set the orientation for phases in a SfSymbolPaletteComponent:
+
+```cshtml
+@using Syncfusion.Blazor.Diagram
+@using Syncfusion.Blazor.Diagram.SymbolPalette
+<div class="control-section">
+    <div style="width:20%;">
+        <div id="palette-space" class="sb-mobile-palette" style="border: 2px solid #b200ff">
+            <SfSymbolPaletteComponent @ref="@symbolpalette" Height="300px" Width="200px"
+                                      Palettes="@Palettes" SymbolHeight="60" SymbolWidth="60" SymbolMargin="@SymbolMargin">
+            </SfSymbolPaletteComponent>
+        </div>
+    </div>
+</div>
+@code
+{
+    //Reference the symbolpreview.
+    DiagramSize SymbolPreview;
+    //Define symbol margin.
+    SymbolMargin SymbolMargin = new SymbolMargin { Left = 15, Right = 15, Top = 15, Bottom = 15 };
+    SfSymbolPaletteComponent symbolpalette;
+    //Define palattes collection.
+    DiagramObjectCollection<Palette> Palettes = new DiagramObjectCollection<Palette>();
+    // Defines palette's swimlane-shape collection.
+    DiagramObjectCollection<NodeBase> SwimlaneNodes = new DiagramObjectCollection<NodeBase>();
+    protected override void OnInitialized()
+    {
+        InitPaletteModel();
+    }
+    private void InitPaletteModel()
+    {
+        Palettes = new DiagramObjectCollection<Palette>();
+        SwimlaneNodes = new DiagramObjectCollection<NodeBase>();
+        //create a horizontal phase.
+        Phase horizontalPhase = new Phase() { ID = "HorizontalPhase", Orientation = Orientation.Horizontal, Width = 80, Height = 1, Style = new ShapeStyle() { Fill = "#5b9bd5", StrokeColor = "#5b9bd5" } };
+        //create a vertical phase.
+        Phase verticalPhase = new Phase() { ID = "VerticalPhase", Orientation = Orientation.Vertical, Width = 1, Height = 80, Style = new ShapeStyle() { Fill = "#5b9bd5", StrokeColor = "#5b9bd5" } };
+        SwimlaneNodes = new DiagramObjectCollection<NodeBase>()
+        {
+            horizontalPhase,
+            verticalPhase
+        };
+        Palettes = new DiagramObjectCollection<Palette>()
+        {
+            new Palette(){Symbols =SwimlaneNodes,Title="Swimlane Shapes",ID="SwimlaneShapes" },
+        };
+      }
+}
+```
+![Phse](Swimlane-images/PhaseOrientation.PNG).
+
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/Phase/PhaseOrientation).
+
 ## How to Select and Resize Phase Header
 
  * You can select the individual phase header by clicking on the header twice. On the first click, you can select the respective phase. 
diff --git a/blazor/diagram/swimlane/swimlane.md b/blazor/diagram/swimlane/swimlane.md
index eac9019fe6..863870da9d 100644
--- a/blazor/diagram/swimlane/swimlane.md
+++ b/blazor/diagram/swimlane/swimlane.md
@@ -312,6 +312,116 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
 | Horizontal | ![Horizontal](Swimlane-images/Swimlane_Horizontal.PNG) |
 | Vertical | ![Vertical](Swimlane-images/Swimlane_Vertical.PNG) |
 
+
+## How to set spacing between lane or phase header and its children
+
+The diagram allows you to define custom spacing between a lane or phase header and its child elements (such as nodes, connectors, or groups) using the [ChildrenSpacing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Swimlane.html#Syncfusion_Blazor_Diagram_Swimlane_ChildrenSpacing) property. This property takes a DiagramThickness object to define spacing on all four sides: Top, Bottom, Left, and Right.
+
+By default, the ChildrenSpacing value is 20 pixels on all sides. You can modify this value to control the padding between the header and its children within the swimlane layout.
+
+The following example shows how to apply custom spacing using the ChildrenSpacing property.
+
+```cshtml
+@using Syncfusion.Blazor.Diagram
+<!-- Diagram component rendering a swimlane layout -->
+<SfDiagramComponent Height="600px" Width="90%" Swimlanes="@swimlaneCollections">
+</SfDiagramComponent>
+@code {
+    /// <summary>
+    /// Collection of swimlanes used in the SfDiagramComponent.
+    /// </summary>
+    DiagramObjectCollection<Swimlane> swimlaneCollections = new DiagramObjectCollection<Swimlane>();
+    /// <summary>
+    /// Initializes the swimlane, phases, lanes, and child nodes for the diagram.
+    /// </summary>
+    protected override void OnInitialized()
+    {
+        // Define the first node
+        Node node1 = new Node()
+            {
+                ID = "node1",
+                Height = 100,
+                Width = 100,
+                OffsetX = 100,
+                OffsetY = 100,
+            };
+        // Define the second node
+        Node node2 = new Node()
+            {
+                ID = "node2",
+                Height = 100,
+                Width = 100,
+                OffsetX = 300,
+                OffsetY = 100,
+            };
+        // Create swimlane structure
+        swimlaneCollections = new DiagramObjectCollection<Swimlane>()
+        {
+            new Swimlane()
+            {
+                ID = "swimlane1",
+                Height = 200,
+                Width = 450,
+                Header = new SwimlaneHeader()
+                {
+                    Annotation = new ShapeAnnotation()
+                    {
+                        Content = "Header of swimlane"
+                    },
+                    Height = 30
+                },
+                Phases = new DiagramObjectCollection<Phase>()
+                {
+                    new Phase()
+                    {
+                        
+                        Header = new SwimlaneHeader()
+                        {
+                            Annotation = new ShapeAnnotation()
+                            {
+                                Content = "Header of phase"
+                            }
+                        },
+                        Width = 450
+                    }
+                },
+                Lanes = new DiagramObjectCollection<Lane>()
+                {
+                    
+                    new Lane()
+                    {
+                        Header = new SwimlaneHeader()
+                        {
+                            Style = new TextStyle() { Fill = "#5b9bd5", StrokeColor = "#5b9bd5" },
+                            Annotation = new ShapeAnnotation()
+                            {
+                                Content = "Header of lane"
+                            }
+                        },
+                        Height = 100,
+                        Children = new DiagramObjectCollection<Node>()
+                        {
+                            node1,
+                            node2
+                        }
+                    }
+                },
+                ChildrenSpacing = new DiagramThickness()
+                {
+                    Bottom = 10,
+                    Left = 10,
+                    Right = 10,
+                    Top = 10
+                }
+            }
+        };
+    }
+}
+```
+
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/ChildrenSpacingProperty)
+
+
 ## Interaction
 
 ### How to Select the Swimlane
diff --git a/blazor/dialog/code-snippet/prerender-blazor-dialog.razor b/blazor/dialog/code-snippet/prerender-blazor-dialog.razor
index 6ff9bc7618..132aea33f3 100644
--- a/blazor/dialog/code-snippet/prerender-blazor-dialog.razor
+++ b/blazor/dialog/code-snippet/prerender-blazor-dialog.razor
@@ -1,13 +1,11 @@
 @using Syncfusion.Blazor.Popups
+@using Syncfusion.Blazor.Buttons
+
 <div id="target">
     <div>
         <button class="e-btn" @onclick="@OnBtnClick">Open</button>
     </div>
-    <SfDialog Target="#target" Width="300px" ShowCloseIcon="true" @bind-Visible="Visibility" AllowPrerender="true" IsModal="true">
-        <DialogTemplates>
-            <Header> Dialog </Header>
-            <Content> This is a dialog with header </Content>
-        </DialogTemplates>
+    <SfDialog Target="#target" Width="300px" ShowCloseIcon="true" @bind-Visible="Visibility" AllowPrerender="false" Header="AllowPrerender Dialog" Content="This is a dialog with content">
     </SfDialog>
 </div>
 <style>
@@ -16,7 +14,7 @@
     }
 </style>
 @code {
-    private bool Visibility { get; set; } = true;
+    private bool Visibility { get; set; } = false;
     private void OnBtnClick()
     {
         this.Visibility = true;
diff --git a/blazor/dialog/dialogbuttons.md b/blazor/dialog/dialogbuttons.md
new file mode 100644
index 0000000000..cfeff0e846
--- /dev/null
+++ b/blazor/dialog/dialogbuttons.md
@@ -0,0 +1,205 @@
+---
+layout: post
+title: Dialog Buttons in Blazor Dialog Component | Syncfusion
+description: Checkout and learn here all about how to add Dialog buttons and add icons to Dialog buttons in Syncfusion Blazor Dialog component and more.
+platform: Blazor
+control: Dialog
+documentation: ug
+---
+
+# Dialog Buttons in Blazor Dialog Component
+
+The Syncfusion Blazor Dialog component supports rendering one or more action buttons in its footer using the [DialogButtons Tag](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogButtons.html) element. Inside this element, each button is defined using the [DialogButton Tag](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogButton.html). These buttons can be fully customized with various properties, including:
+
+DialogButtonOptions     | Description
+------------ | -------------
+  [ChildContent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogButton.html#Syncfusion_Blazor_Popups_DialogButton_ChildContent)       | Allows you to define custom content (e.g., HTML or string) inside the button.
+  [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogButton.html#Syncfusion_Blazor_Popups_DialogButton_Content)     | Sets the text displayed on the button.
+  [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogButton.html#Syncfusion_Blazor_Popups_DialogButton_CssClass)      | Applies one or more custom CSS classes to style the button.
+  [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogButton.html#Syncfusion_Blazor_Popups_DialogButton_Disabled)       | Disables the button, preventing user interaction.
+  [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogButton.html#Syncfusion_Blazor_Popups_DialogButton_EnableRtl)       | Enables right-to-left (RTL) rendering for languages like Arabic or Hebrew.
+  [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogButton.html#Syncfusion_Blazor_Popups_DialogButton_IconCss)         | Specifies the CSS class for an icon to be displayed inside the button.
+  [IconPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogButton.html#Syncfusion_Blazor_Popups_DialogButton_IconPosition)     | Determines the position of the icon (e.g., Left, Right, Top, Bottom).
+  [IsFlat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogButton.html#Syncfusion_Blazor_Popups_DialogButton_IsFlat)           | Renders the button with a flat style (no background or border).
+  [IsPrimary](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogButton.html#Syncfusion_Blazor_Popups_DialogButton_IsPrimary)         | Highlights the button as the primary action in the dialog.
+  [IsToggle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogButton.html#Syncfusion_Blazor_Popups_DialogButton_IsToggle)           | Enables toggle behavior, allowing the button to switch between active/inactive states.
+  [OnClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogButton.html#Syncfusion_Blazor_Popups_DialogButton_OnClick)             | Assigns a callback method to be executed when the button is clicked.
+  [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogButton.html#Syncfusion_Blazor_Popups_DialogButton_Type)               | Specifies the button type (e.g., Button, Submit, Reset).
+
+The following example demonstrates how to define basic action buttons in the Blazor Dialog.
+
+```cshtml
+@using Syncfusion.Blazor.Popups
+@using Syncfusion.Blazor.Buttons
+
+<div id="target">
+    <SfButton @onclick="@OpenDialog">Open Dialog</SfButton>
+
+    <SfDialog Target="#target" Width="250px" ShowCloseIcon="true" @bind-Visible="@IsVisible">
+        <DialogTemplates>
+            <Header> Dialog </Header>
+             <Content>This is a standard dialog with footer buttons</Content>
+        </DialogTemplates>
+        <DialogButtons>
+            <DialogButton Content="OK" IsPrimary="true" OnClick="@OnOkClick" />
+            <DialogButton Content="Cancel" OnClick="@OnCancelClick" />
+        </DialogButtons>
+    </SfDialog>
+</div>
+
+<style>
+    #target {
+        min-height: 400px;
+        height: 100%;
+        position: relative;
+    }
+</style>
+
+@code {
+    private bool IsVisible { get; set; } = true;
+
+    private void OpenDialog()
+    {
+        this.IsVisible = true;
+    }
+
+    private void OnOkClick()
+    {
+        // Place your OK logic here
+        this.IsVisible = false;
+    }
+
+    private void OnCancelClick()
+    {
+        // Place your Cancel logic here
+        this.IsVisible = false;
+    }
+}
+```
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLoXlMPsGLAcGWZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+![Blazor Dialog buttons](./images/blazor-dialog-buttons.gif)
+
+## Add Icons to Dialog Buttons in Blazor Dialog Component
+
+You can enhance the appearance of dialog footer buttons by adding icons using either the [DialogButton](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogButton.html) element or the [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialog.html#Syncfusion_Blazor_Popups_SfDialog_FooterTemplate) property.
+
+## Using DialogButton Element
+
+The DialogButton element allows you to define action buttons in the dialog footer with built-in support for icons. You can use the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogButton.html#Syncfusion_Blazor_Popups_DialogButton_IconCss) property to assign icon classes and customize their appearance.
+
+```cshtml
+
+@using Syncfusion.Blazor.Popups
+@using Syncfusion.Blazor.Buttons
+
+<SfButton @onclick="@OpenDialog">Open Dialog</SfButton>
+
+<SfDialog Width="300px" ShowCloseIcon="true" CloseOnEscape="true" @bind-Visible="@IsVisible">
+    <DialogTemplates>
+        <Header>
+            <div>Delete Multiple Items</div>
+        </Header>
+        <Content>
+            <div>Are you sure you want to permanently delete all of these items?</div>
+        </Content>
+    </DialogTemplates>
+    <DialogButtons>
+        <DialogButton Content="Yes" IsPrimary="true" IconCss="e-icons e-ok-icon" OnClick="@CloseDialog" />
+        <DialogButton Content="No" IconCss="e-icons e-close-icon" OnClick="@CloseDialog" />
+    </DialogButtons>
+</SfDialog>
+
+<style>
+    a, a:hover, .highcontrast #dialog a, .highcontrast #dialog a:hover {
+        color: inherit;
+        text-decoration: none;
+    }
+
+    .e-btn-icon.e-icons.e-ok-icon.e-icon-left:before {
+        content: '\e7ff';
+    }
+
+    .e-btn-icon.e-icons.e-close-icon.e-icon-left:before {
+        content: '\e825';
+    }
+</style>
+
+@code {
+    private bool IsVisible { get; set; } = true;
+
+    private void OpenDialog()
+    {
+        this.IsVisible = true;
+    }
+
+    private void CloseDialog()
+    {
+        this.IsVisible = false;
+    }
+}
+
+```
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/htBINlibCGKtcBPW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+![Blazor Dialog buttons with icon](./images/blazor-dialog-button-with-icon.gif)
+
+## Using FooterTemplate Property
+
+Alternatively, you can use the [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialog.html#Syncfusion_Blazor_Popups_SfDialog_FooterTemplate) property to fully customize the footer layout and include buttons with icons manually using Syncfusion Button.
+
+```cshtml
+
+@using Syncfusion.Blazor.Popups
+@using Syncfusion.Blazor.Buttons
+
+<SfButton @onclick="@OpenDialog">Open Dialog</SfButton>
+
+<SfDialog Width="300px" ShowCloseIcon="true" CloseOnEscape="true" @bind-Visible="@IsVisible">
+    <DialogTemplates>
+        <Header> Delete Multiple Items </Header>
+        <Content> Are you sure you want to permanently delete all of these items? </Content>
+        <FooterTemplate>
+            <SfButton CssClass="e-primary e-flat" @onclick="@CloseDialog">
+                <span class='e-btn-icon e-icons e-ok-icon e-icon-left'></span>Yes
+            </SfButton>
+            <SfButton CssClass="e-flat" @onclick="@CloseDialog">
+                <span class='e-btn-icon e-icons e-close-icon e-icon-left'></span>No
+            </SfButton>
+        </FooterTemplate>
+    </DialogTemplates>
+</SfDialog>
+
+<style>
+    a, a:hover, .highcontrast #dialog a, .highcontrast #dialog a:hover {
+        color: inherit;
+        text-decoration: none;
+    }
+
+    .e-btn-icon.e-icons.e-ok-icon.e-icon-left:before {
+        content: '\e7ff';
+    }
+
+    .e-btn-icon.e-icons.e-close-icon.e-icon-left:before {
+        content: '\e825';
+    }
+</style>
+
+@code {
+    private bool IsVisible { get; set; } = true;
+
+    private void OpenDialog()
+    {
+        this.IsVisible = true;
+    }
+
+    private void CloseDialog()
+    {
+        this.IsVisible = false;
+    }
+}
+
+```
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hZLoZPilWGKFKFYH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+![Preview showing icons in Blazor Dialog footer buttons using FooterTemplate](./images/blazor-dialog-button-with-icon.gif)
\ No newline at end of file
diff --git a/blazor/dialog/draggable.md b/blazor/dialog/draggable.md
index 07d86229a4..8acd4512ee 100644
--- a/blazor/dialog/draggable.md
+++ b/blazor/dialog/draggable.md
@@ -9,7 +9,13 @@ documentation: ug
 
 # Draggable in Blazor Dialog Component
 
-The [Blazor Dialog](https://www.syncfusion.com/blazor-components/blazor-modal-dialog) supports to `drag` within its target container by grabbing the Dialog header, which allows the user to reposition the Dialog dynamically.
+The [Blazor Dialog](https://www.syncfusion.com/blazor-components/blazor-modal-dialog) component supports draggable functionality, allowing users to reposition dialogs within their target container by clicking and dragging the dialog header. This feature enhances user experience by providing flexible dialog placement, particularly useful in applications with multiple dialogs or when users need to access content beneath the dialog while keeping it visible.
+
+The dragging operation is constrained to the boundaries of the target container, ensuring the dialog remains within the designated area and maintains proper visual hierarchy.
+
+## Enable Draggable Functionality
+
+To enable dragging capabilities, set the [`AllowDragging`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialog.html#Syncfusion_Blazor_Popups_SfDialog_AllowDragging) property to `true` on the Dialog component. When enabled, users can drag the dialog by clicking and holding the dialog header area.
 
 To get started quickly with draggable in Blazor Dialog Component, you can check the video below.
 
@@ -23,7 +29,7 @@ To get started quickly with draggable in Blazor Dialog Component, you can check
 <div id="target">
     <SfButton @onclick="@OpenDialog">Open Dialog</SfButton>
 
-    <SfDialog Target="#target" Width="250px" AllowDragging="true" IsModal="true" ShowCloseIcon="true" @bind-Visible="@IsVisible">
+    <SfDialog Target="#target" Width="250px" AllowDragging="true" ShowCloseIcon="true" @bind-Visible="@IsVisible">
         <DialogTemplates>
             <Header> Dialog </Header>
             <Content> This is a Dialog with drag enabled </Content>
@@ -58,3 +64,107 @@ To get started quickly with draggable in Blazor Dialog Component, you can check
 }
 
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBItlsFWwtJqMVI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+![Blazor Dialog component with draggable functionality enabled](./images/blazor-dialog-draggable.gif)
+
+>**Note:** Draggable functionality is supported in both standard dialog and modal dialog configurations. The drag operation is limited to the dialog header area only.
+
+## Draggable Events in Blazor Dialog Component
+
+The Dialog component provides three essential events to monitor and respond to drag interactions. These events enable developers to implement custom logic during different phases of the drag operation, such as validation, logging, or UI updates.
+
+### OnDragStart Event
+
+The [`OnDragStart`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DragStartEventArgs.html) event fires when the user initiates dragging by clicking and holding the dialog header. This event is ideal for performing initial setup, validation, or preparing the application state for the drag operation.
+
+### OnDrag Event
+
+The [`OnDrag`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DragEventArgs.html) event triggers continuously throughout the drag operation, providing real-time updates as the user moves the dialog. This event is useful for implementing dynamic feedback, position tracking, or live validation of the dialog's new position.
+
+### OnDragStop Event
+
+The [`OnDragStop`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DragStopEventArgs.html) event fires when the user releases the dialog and completes the drag operation. This event is perfect for finalizing position changes, saving state, or performing cleanup operations.
+
+```cshtml
+
+@using Syncfusion.Blazor.Buttons
+@using Syncfusion.Blazor.Popups
+
+<div id="target">
+    <SfButton @onclick="OpenDialog">Open Dialog</SfButton>
+
+    <SfDialog Target="#target"
+              Width="300px"
+              AllowDragging="true"
+              ShowCloseIcon="true"
+              @bind-Visible="IsVisible">
+        <DialogTemplates>
+            <Header>Draggable Dialog</Header>
+            <Content>
+                <p>This dialog can be dragged within its container.</p>
+                <p style="color: blue; font-weight: bold;">Status: @DragStatus</p>
+                <p style="color: green; font-weight: bold;">Activity: @Dragging</p>
+            </Content>
+        </DialogTemplates>
+
+        <DialogButtons>
+            <DialogButton Content="OK" IsPrimary="true" OnClick="CloseDialog" />
+            <DialogButton Content="Cancel" OnClick="CloseDialog" />
+        </DialogButtons>
+
+        <DialogEvents OnDragStart="DragStartHandler" OnDrag="DragHandler" OnDragStop="DragStopHandler" />
+    </SfDialog>
+</div>
+
+<style>
+    #target {
+        min-height: 400px;
+        height: 100%;
+        position: relative;
+        padding: 20px;
+        background-color: #f9f9f9;
+    }
+</style>
+
+@code {
+    private bool IsVisible { get; set; } = false;
+    private string DragStatus { get; set; } = string.Empty;
+    private string Dragging { get; set; } = string.Empty;
+
+    private void OpenDialog()
+    {
+        IsVisible = true;
+    }
+
+    private void CloseDialog()
+    {
+        IsVisible = false;
+    }
+
+    private void DragStartHandler(Syncfusion.Blazor.Popups.DragStartEventArgs args)
+    {
+        DragStatus = "Drag started";
+    }
+
+    private void DragHandler(Syncfusion.Blazor.Popups.DragEventArgs args)
+    {
+        Dragging = "Dragging...";
+    }
+
+    private void DragStopHandler(Syncfusion.Blazor.Popups.DragStopEventArgs args)
+    {
+        DragStatus = "Drag stopped";
+        Dragging = string.Empty;
+    }
+}
+
+```
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXByDlCvMmWVRpYO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+![Blazor Dialog component demonstrating drag events with real-time status updates](./images/blazor-draggable-events.gif)
+
+## Important Considerations
+
+**Container Constraints:** The dialog movement is restricted to the boundaries of its target container. Ensure the target container has sufficient dimensions to accommodate dialog repositioning.
+
+**Touch Support:** Draggable functionality is fully supported on touch devices, allowing users to drag dialogs using touch gestures.
\ No newline at end of file
diff --git a/blazor/dialog/getting-started-with-web-app.md b/blazor/dialog/getting-started-with-web-app.md
index 24a58c1812..6092c94b4f 100644
--- a/blazor/dialog/getting-started-with-web-app.md
+++ b/blazor/dialog/getting-started-with-web-app.md
@@ -244,154 +244,99 @@ html, body {
 {% endhighlight %}
 {% endtabs %}
 
-## Prerender the Blazor dialog
+## Created and Destroyed Events
 
-The dialog component is maintained in the DOM after hiding the dialog when the [AllowPrerender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialog.html#Syncfusion_Blazor_Popups_SfDialog_AllowPrerender) property is set to `true`.
+- The [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogEvents.html#Syncfusion_Blazor_Popups_DialogEvents_Created) event fires when the dialog is initialized and rendered in the DOM.
 
-* By default, the [AllowPrerender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialog.html#Syncfusion_Blazor_Popups_SfDialog_AllowPrerender) is set to `false` where the dialog DOM elements are destroyed while hiding the dialog and each time the dialog will be re-rendered when showing the dialog. The [@bind-Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialog.html#Syncfusion_Blazor_Popups_SfDialog_Visible) property of dialog also works based on the [AllowPrerender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialog.html#Syncfusion_Blazor_Popups_SfDialog_AllowPrerender) property.
-* If the [AllowPrerender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialog.html#Syncfusion_Blazor_Popups_SfDialog_AllowPrerender) property is set to `true`, the dialog elements are maintained in the DOM when hiding the dialog.
+- 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.
 
-{% tabs %}
-{% highlight cshtml %}
-
-@using Syncfusion.Blazor.Buttons
-
-{% include_relative code-snippet/prerender-blazor-dialog.razor %}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVfjCBaAUCATHQS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-![Prerender Blazor Dialog](./images/blazor-prerender-dialog.png)
+```cshtml
 
-## Modal Blazor dialog
-
-A `modal` shows an overlay behind the Dialog. So, the users must interact with the Dialog before interacting with the remaining content in an application.
-
-While the user clicks the overlay, the action can be handled through the [OnOverlayClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogEvents.html#Syncfusion_Blazor_Popups_DialogEvents_OnOverlayClick) event. In the following code, it explains the Dialog close action performed while clicking the overlay.
-
-{% tabs %}
-{% highlight cshtml %}
-
-@using Syncfusion.Blazor.Buttons
-
-<SfButton @onclick="@OpenDialog">Open Modal Dialog</SfButton>
+@using Syncfusion.Blazor.Popups
 
-<SfDialog Width="250px" IsModal="true" @bind-Visible="@IsVisible">
-    <DialogEvents OnOverlayModalClick="@OnOverlayclick">
-    </DialogEvents>
-    <DialogTemplates>
-        <Content> This is a modal dialog </Content>
-    </DialogTemplates>
+<SfDialog>
+    <DialogEvents Created="@CreatedHandler" Destroyed="@DestroyedHandler"></DialogEvents>
 </SfDialog>
-
 @code {
-    private bool IsVisible { get; set; } = true;
 
-    private void OpenDialog()
+    public void CreatedHandler(Object args)
     {
-        this.IsVisible = true;
+        // Here, you can customize your code.
     }
 
-    private void OnOverlayclick(OverlayModalClickEventArgs arg)
+    private void DestroyedHandler()
     {
-        this.IsVisible = false;
+        // Here, you can customize your code.
     }
 }
 
-{% endhighlight %}
-{% endtabs %}
-
-## Enable header
+```
 
-The Dialog header can be enabled by adding the header content as text or HTML content using the [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogTemplates.html#Syncfusion_Blazor_Popups_DialogTemplates_Header) template of the dialog.
+## Prerender the Dialog
 
-{% tabs %}
-{% highlight cshtml %}
+The [AllowPrerender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialog.html#Syncfusion_Blazor_Popups_SfDialog_AllowPrerender) property controls how the dialog DOM elements are handled when the dialog is hidden. Understanding this property is crucial for optimizing performance in your application.
 
-@using Syncfusion.Blazor.Buttons
+* 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.
 
-<SfButton @onclick="@OpenDialog">Open Dialog</SfButton>
+```cshtml
 
-<SfDialog Width="250px" ShowCloseIcon="true" IsModal="true" @bind-Visible="@IsVisible">
-    <DialogTemplates>
-        <Header> Dialog </Header>
-        <Content> This is a dialog with header </Content>
-    </DialogTemplates>
-</SfDialog>
+@using Syncfusion.Blazor.Popups
+@using Syncfusion.Blazor.Buttons
 
+<div id="target">
+    <div>
+        <button class="e-btn" @onclick="@OnBtnClick">Open</button>
+    </div>
+    <SfDialog Target="#target" Width="300px" ShowCloseIcon="true" @bind-Visible="Visibility" AllowPrerender="true" Header="AllowPrerender Dialog" Content="This is a dialog with content">
+    </SfDialog>
+</div>
+<style>
+    #target {
+        height: 500px;
+    }
+</style>
 @code {
-    private bool IsVisible { get; set; } = true;
-
-    private void OpenDialog()
+    private bool Visibility { get; set; } = false;
+    private void OnBtnClick()
     {
-        this.IsVisible = true;
+        this.Visibility = true;
     }
 }
 
-{% endhighlight %}
-{% endtabs %}
+```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrJZWrYAArBuqod?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5"  %}
-![Blazor Dialog with Header](./images/blazor-dialog-header.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXVyNPspKoXXlIYf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
-## Render Blazor Dialog with buttons
+## Set Header to Dialog
 
-By adding the [DialogButtons](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogButtons.html) can render a Dialog with buttons in Razor page.
+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.
 
-{% tabs %}
-{% highlight cshtml %}
+```cshtml
 
-@using Syncfusion.Blazor.Buttons
 @using Syncfusion.Blazor.Popups
 
-<SfButton @onclick="@OpenDialog">Open Dialog</SfButton>
+<SfDialog Width="250px" Header="Dialog Header"></SfDialog>
 
-<SfDialog Width="250px" ShowCloseIcon="true" IsModal="true" @bind-Visible="@IsVisible">
-    <DialogTemplates>
-        <Header> Dialog </Header>
-        <Content> This is a Dialog with button and primary button </Content>
-    </DialogTemplates>
-    <DialogButtons>
-        <DialogButton Content="OK" IsPrimary="true" OnClick="@OkClick" />
-        <DialogButton Content="Cancel" OnClick="@CancelClick" />
-    </DialogButtons>
-    <span id="message">@ClickStatus</span>
-</SfDialog>
+```
 
-@code {
-    private bool IsVisible { get; set; } = true;
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhIZPssAIpntkQY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+![Blazor Dialog with Header](./images/blazor-dialog-header.png)
 
-    private string ClickStatus { get; set; }
+## Set Content to Dialog 
 
-    private void OpenDialog()
-    {
-        this.IsVisible = true;
-        this.ClickStatus = "";
-    }
+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.
 
-    private void CancelClick()
-    {
-        this.ClickStatus = "you have clicked Cancel";
-        this.IsVisible = false;
-    }
-    private void OkClick()
-    {
-        this.ClickStatus = "you have clicked Ok";
-        this.IsVisible = true;
-    }
-}
-<style>
-    #message {
-        color: blue;
-    }
-</style>
+```cshtml
 
-{% endhighlight %}
-{% endtabs %}
+@using Syncfusion.Blazor.Popups
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVpjWVkggLndKKB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-![Blazor Dialog with Buttons](./images/blazor-dialog-buttons.png)
+<SfDialog Width="250px" Content="This is a dialog with Content property."></SfDialog>
+
+```
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhIZPssAIpntkQY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+![Blazor Dialog with Content](./images/blazor-dialog-content.png)
 
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Dialog).
 
@@ -399,5 +344,4 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-
 
 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)
-
+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)
\ No newline at end of file
diff --git a/blazor/dialog/getting-started.md b/blazor/dialog/getting-started.md
index c7feac5c50..2313002247 100644
--- a/blazor/dialog/getting-started.md
+++ b/blazor/dialog/getting-started.md
@@ -174,154 +174,99 @@ html, body {
 {% endhighlight %}
 {% endtabs %}
 
-## Prerender the Blazor dialog
+## Created and Destroyed Events
 
-The dialog component is maintained in the DOM after hiding the dialog when the [AllowPrerender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialog.html#Syncfusion_Blazor_Popups_SfDialog_AllowPrerender) property is set to `true`.
+- The [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogEvents.html#Syncfusion_Blazor_Popups_DialogEvents_Created) event fires when the dialog is initialized and rendered in the DOM.
 
-* By default, the [AllowPrerender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialog.html#Syncfusion_Blazor_Popups_SfDialog_AllowPrerender) is set to `false` where the dialog DOM elements are destroyed while hiding the dialog and each time the dialog will be re-rendered when showing the dialog. The [@bind-Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialog.html#Syncfusion_Blazor_Popups_SfDialog_Visible) property of dialog also works based on the [AllowPrerender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialog.html#Syncfusion_Blazor_Popups_SfDialog_AllowPrerender) property.
-* If the [AllowPrerender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialog.html#Syncfusion_Blazor_Popups_SfDialog_AllowPrerender) property is set to `true`, the dialog elements are maintained in the DOM when hiding the dialog.
+- 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.
 
-{% tabs %}
-{% highlight cshtml %}
-
-@using Syncfusion.Blazor.Buttons
-
-{% include_relative code-snippet/prerender-blazor-dialog.razor %}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVfjCBaAUCATHQS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-![Prerender Blazor Dialog](./images/blazor-prerender-dialog.png)
-
-## Modal Blazor dialog
-
-A `modal` shows an overlay behind the Dialog. So, the users must interact with the Dialog before interacting with the remaining content in an application.
-
-While the user clicks the overlay, the action can be handled through the [OnOverlayClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogEvents.html#Syncfusion_Blazor_Popups_DialogEvents_OnOverlayClick) event. In the following code, it explains the Dialog close action performed while clicking the overlay.
-
-{% tabs %}
-{% highlight cshtml %}
-
-@using Syncfusion.Blazor.Buttons
+```cshtml
 
-<SfButton @onclick="@OpenDialog">Open Modal Dialog</SfButton>
+@using Syncfusion.Blazor.Popups
 
-<SfDialog Width="250px" IsModal="true" @bind-Visible="@IsVisible">
-    <DialogEvents OnOverlayModalClick="@OnOverlayclick">
-    </DialogEvents>
-    <DialogTemplates>
-        <Content> This is a modal dialog </Content>
-    </DialogTemplates>
+<SfDialog>
+    <DialogEvents Created="@CreatedHandler" Destroyed="@DestroyedHandler"></DialogEvents>
 </SfDialog>
-
 @code {
-    private bool IsVisible { get; set; } = true;
 
-    private void OpenDialog()
+    public void CreatedHandler(Object args)
     {
-        this.IsVisible = true;
+        // Here, you can customize your code.
     }
 
-    private void OnOverlayclick(OverlayModalClickEventArgs arg)
+    private void DestroyedHandler()
     {
-        this.IsVisible = false;
+        // Here, you can customize your code.
     }
 }
 
-{% endhighlight %}
-{% endtabs %}
-
-## Enable header
+```
 
-The Dialog header can be enabled by adding the header content as text or HTML content using the [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogTemplates.html#Syncfusion_Blazor_Popups_DialogTemplates_Header) template of the dialog.
+## Prerender the Dialog
 
-{% tabs %}
-{% highlight cshtml %}
+The [AllowPrerender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialog.html#Syncfusion_Blazor_Popups_SfDialog_AllowPrerender) property controls how the dialog DOM elements are handled when the dialog is hidden. Understanding this property is crucial for optimizing performance in your application.
 
-@using Syncfusion.Blazor.Buttons
+* 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.
 
-<SfButton @onclick="@OpenDialog">Open Dialog</SfButton>
+```cshtml
 
-<SfDialog Width="250px" ShowCloseIcon="true" IsModal="true" @bind-Visible="@IsVisible">
-    <DialogTemplates>
-        <Header> Dialog </Header>
-        <Content> This is a dialog with header </Content>
-    </DialogTemplates>
-</SfDialog>
+@using Syncfusion.Blazor.Popups
+@using Syncfusion.Blazor.Buttons
 
+<div id="target">
+    <div>
+        <button class="e-btn" @onclick="@OnBtnClick">Open</button>
+    </div>
+    <SfDialog Target="#target" Width="300px" ShowCloseIcon="true" @bind-Visible="Visibility" AllowPrerender="true" Header="AllowPrerender Dialog" Content="This is a dialog with content">
+    </SfDialog>
+</div>
+<style>
+    #target {
+        height: 500px;
+    }
+</style>
 @code {
-    private bool IsVisible { get; set; } = true;
-
-    private void OpenDialog()
+    private bool Visibility { get; set; } = false;
+    private void OnBtnClick()
     {
-        this.IsVisible = true;
+        this.Visibility = true;
     }
 }
 
-{% endhighlight %}
-{% endtabs %}
+```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrJZWrYAArBuqod?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5"  %}
-![Blazor Dialog with Header](./images/blazor-dialog-header.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXVyNPspKoXXlIYf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
-## Render Blazor Dialog with buttons
+## Set Header to Dialog
 
-By adding the [DialogButtons](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogButtons.html) can render a Dialog with buttons in Razor page.
+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.
 
-{% tabs %}
-{% highlight cshtml %}
+```cshtml
 
-@using Syncfusion.Blazor.Buttons
 @using Syncfusion.Blazor.Popups
 
-<SfButton @onclick="@OpenDialog">Open Dialog</SfButton>
+<SfDialog Width="250px" Header="Dialog Header"></SfDialog>
 
-<SfDialog Width="250px" ShowCloseIcon="true" IsModal="true" @bind-Visible="@IsVisible">
-    <DialogTemplates>
-        <Header> Dialog </Header>
-        <Content> This is a Dialog with button and primary button </Content>
-    </DialogTemplates>
-    <DialogButtons>
-        <DialogButton Content="OK" IsPrimary="true" OnClick="@OkClick" />
-        <DialogButton Content="Cancel" OnClick="@CancelClick" />
-    </DialogButtons>
-    <span id="message">@ClickStatus</span>
-</SfDialog>
+```
 
-@code {
-    private bool IsVisible { get; set; } = true;
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhIZPssAIpntkQY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+![Blazor Dialog with Header](./images/blazor-dialog-header.png)
 
-    private string ClickStatus { get; set; }
+## Set Content to Dialog 
 
-    private void OpenDialog()
-    {
-        this.IsVisible = true;
-        this.ClickStatus = "";
-    }
+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.
 
-    private void CancelClick()
-    {
-        this.ClickStatus = "you have clicked Cancel";
-        this.IsVisible = false;
-    }
-    private void OkClick()
-    {
-        this.ClickStatus = "you have clicked Ok";
-        this.IsVisible = true;
-    }
-}
-<style>
-    #message {
-        color: blue;
-    }
-</style>
+```cshtml
 
-{% endhighlight %}
-{% endtabs %}
+@using Syncfusion.Blazor.Popups
+
+<SfDialog Width="250px" Content="This is a dialog with Content property."></SfDialog>
+
+```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVpjWVkggLndKKB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-![Blazor Dialog with Buttons](./images/blazor-dialog-buttons.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhIZPssAIpntkQY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+![Blazor Dialog with Content](./images/blazor-dialog-content.png)
 
 ## See also
 
diff --git a/blazor/dialog/images/Minimize-and-maximize.gif b/blazor/dialog/images/Minimize-and-maximize.gif
new file mode 100644
index 0000000000..0f5b1f9062
Binary files /dev/null and b/blazor/dialog/images/Minimize-and-maximize.gif differ
diff --git a/blazor/dialog/images/blazor-dialog-allowprerender.gif b/blazor/dialog/images/blazor-dialog-allowprerender.gif
new file mode 100644
index 0000000000..00b58bb906
Binary files /dev/null and b/blazor/dialog/images/blazor-dialog-allowprerender.gif differ
diff --git a/blazor/dialog/images/blazor-dialog-button-with-icon.gif b/blazor/dialog/images/blazor-dialog-button-with-icon.gif
new file mode 100644
index 0000000000..9ac4d9fef3
Binary files /dev/null and b/blazor/dialog/images/blazor-dialog-button-with-icon.gif differ
diff --git a/blazor/dialog/images/blazor-dialog-buttons.gif b/blazor/dialog/images/blazor-dialog-buttons.gif
new file mode 100644
index 0000000000..0dd9a32911
Binary files /dev/null and b/blazor/dialog/images/blazor-dialog-buttons.gif differ
diff --git a/blazor/dialog/images/blazor-dialog-content.png b/blazor/dialog/images/blazor-dialog-content.png
new file mode 100644
index 0000000000..1f6159878d
Binary files /dev/null and b/blazor/dialog/images/blazor-dialog-content.png differ
diff --git a/blazor/dialog/images/blazor-dialog-draggable.gif b/blazor/dialog/images/blazor-dialog-draggable.gif
new file mode 100644
index 0000000000..cdfe572023
Binary files /dev/null and b/blazor/dialog/images/blazor-dialog-draggable.gif differ
diff --git a/blazor/dialog/images/blazor-dialog-header.png b/blazor/dialog/images/blazor-dialog-header.png
index 5be9721744..cb5a42240b 100644
Binary files a/blazor/dialog/images/blazor-dialog-header.png and b/blazor/dialog/images/blazor-dialog-header.png differ
diff --git a/blazor/dialog/images/blazor-dialog-modal-closes.gif b/blazor/dialog/images/blazor-dialog-modal-closes.gif
new file mode 100644
index 0000000000..c8b2d37192
Binary files /dev/null and b/blazor/dialog/images/blazor-dialog-modal-closes.gif differ
diff --git a/blazor/dialog/images/blazor-dialog-state-persistent.gif b/blazor/dialog/images/blazor-dialog-state-persistent.gif
new file mode 100644
index 0000000000..132313732c
Binary files /dev/null and b/blazor/dialog/images/blazor-dialog-state-persistent.gif differ
diff --git a/blazor/dialog/images/blazor-draggable-events.gif b/blazor/dialog/images/blazor-draggable-events.gif
new file mode 100644
index 0000000000..d71437a8e5
Binary files /dev/null and b/blazor/dialog/images/blazor-draggable-events.gif differ
diff --git a/blazor/dialog/images/blazor-fullscreen-dialog.gif b/blazor/dialog/images/blazor-fullscreen-dialog.gif
new file mode 100644
index 0000000000..abdee87e77
Binary files /dev/null and b/blazor/dialog/images/blazor-fullscreen-dialog.gif differ
diff --git a/blazor/dialog/images/blazor-modal-dialog.png b/blazor/dialog/images/blazor-modal-dialog.png
index b8d32522af..eaf101da0a 100644
Binary files a/blazor/dialog/images/blazor-modal-dialog.png and b/blazor/dialog/images/blazor-modal-dialog.png differ
diff --git a/blazor/dialog/minimize-and-maximize.md b/blazor/dialog/minimize-and-maximize.md
new file mode 100644
index 0000000000..6c7e7e74ca
--- /dev/null
+++ b/blazor/dialog/minimize-and-maximize.md
@@ -0,0 +1,213 @@
+---
+layout: post
+title: Add custom minimize/maximize buttons to Syncfusion Blazor Dialog
+description: Learn how to implement minimize and maximize functionality with custom header buttons in Syncfusion Blazor Dialog component
+platform: Blazor
+control: Dialog
+documentation: ug
+---
+
+# Implement minimize and maximize functionality in Blazor Dialog 
+
+The Syncfusion Blazor Dialog component supports adding custom minimize and maximize operations via buttons in the dialog header. This implementation requires:
+
+1. Custom buttons in the dialog [`headerTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogTemplates.html#Syncfusion_Blazor_Popups_DialogTemplates_Header)
+2. JavaScript interop for UI manipulation
+3. State management for minimized/maximized modes
+
+## Header template with action buttons
+
+Index.razor
+
+```razor
+@using Syncfusion.Blazor.Popups
+@using Syncfusion.Blazor.Buttons
+@inject IJSRuntime JsRuntime
+@using System
+
+<SfButton @onclick="@OpenDialog">Open Dialog</SfButton>
+
+<SfDialog @ref="@DialogObj" Width="50%" ShowCloseIcon="true" IsModal="true" @bind-Visible="@IsVisible" CssClass="@dialogClass">
+    <DialogTemplates>
+        <Header>
+            Dialog
+            @if (!IsMaximized)
+            {
+                <span class="e-icons sf-icon-Maximize" title="Maximize" @onclick="@maximize"></span>
+            }
+            else
+            {
+                <span class="e-icons sf-icon-Restore" title="Restore" @onclick="@maximize"></span>
+            }
+            @if (!IsMinimized)
+            {
+                <span class="e-icons sf-icon-Minimize" title="Minimize" @onclick="@minimize"></span>
+            }
+            else
+            {
+                <span class="e-icons sf-icon-Restore" title="Restore" @onclick="@minimize"></span>
+            }
+        </Header>
+        <Content>
+            <p>This is a dialog with minimize and maximize buttons</p>
+        </Content>
+    </DialogTemplates>
+    <DialogButtons>
+        <DialogButton Content="Ok" IsPrimary="true" OnClick="@CloseDialog" />
+        <DialogButton Content="Cancel" OnClick="@CloseDialog" />
+    </DialogButtons>
+</SfDialog>
+
+<style>
+    .e-dialog .e-dlg-header {
+        width: auto;
+    }
+
+    .e-dialog .e-dlg-header .e-icons.sf-icon-Maximize::before,
+    .e-dialog .e-dlg-header .e-icons.sf-icon-Minimize::before,
+    .e-dialog .e-dlg-header .e-icons.sf-icon-Restore::before {
+        position: relative;
+    }
+
+    .e-dialog .e-dlg-header .e-icons.sf-icon-Minimize,
+    .e-dialog .e-dlg-header .e-icons.sf-icon-Maximize,
+    .e-dialog .e-dlg-header .e-icons.sf-icon-Restore {
+        font-size: 12px;
+        width: 30px;
+        height: 30px;
+        line-height: 16px;
+        float: right;
+        position: relative;
+        text-align: center;
+        cursor: pointer;
+        color: grey;
+    }
+
+    .e-dialog .e-dlg-header .e-icons.sf-icon-Minimize:hover, .e-dialog .e-dlg-header .e-icons.sf-icon-Maximize:hover,
+    .e-dialog .e-dlg-header .e-icons.sf-icon-Restore:hover {
+        /*    background-color: #e0e0e0;
+            border-color: transparent;
+            box-shadow: 0 0 0 transparent;
+            border-radius: 50%;*/
+        color: black;
+    }
+
+    .e-dialog .e-dlg-header .e-icons.sf-icon-Minimize,
+    .e-dialog .e-dlg-header .e-icons.sf-icon-Restore {
+        padding-left: 5px;
+        padding-right: 5px;
+    }
+
+    .e-dialog .e-dlg-header {
+        position: relative;
+        top: 1px;
+    }
+
+    .e-dialog .e-dlg-content.hide-content, .e-dialog .e-footer-content.hide-content {
+        display: none;
+    }
+
+    .e-dialog .e-dlg-header span.title {
+        width: 60px;
+        display: inline-block;
+    }
+
+
+
+    @@font-face {
+        font-family: 'Min-Max_FONT';
+        src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj1tSfUAAAEoAAAAVmNtYXDnE+dkAAABlAAAADxnbHlmQCkX6AAAAdwAAADkaGVhZBK7D5EAAADQAAAANmhoZWEIVQQGAAAArAAAACRobXR4FAAAAAAAAYAAAAAUbG9jYQBaAJwAAAHQAAAADG1heHABEgAgAAABCAAAACBuYW1l8Rnd5AAAAsAAAAJhcG9zdDbKxecAAAUkAAAATwABAAAEAAAAAFwEAAAAAAAD+AABAAAAAAAAAAAAAAAAAAAABQABAAAAAQAAK4KTXV8PPPUACwQAAAAAANfSZU4AAAAA19JlTgAAAAAD+AP4AAAACAACAAAAAAAAAAEAAAAFABQAAwAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnAwQAAAAAXAQAAAAAAAABAAAAAAAABAAAAAQAAAAEAAAABAAAAAQAAAAAAAACAAAAAwAAABQAAwABAAAAFAAEACgAAAAEAAQAAQAA5wP//wAA5wD//wAAAAEABAAAAAEAAgADAAQAAAAAAA4AKgBMAHIAAQAAAAADkwIyAAMAABMhNSFtAyb82gHOZAAAAAMAAAAAA/gD+AADAAcACwAAAREhESUVITUDIREhA5P82gMm/NplA/D8EALK/aMCXcllZfx1A/AAAQAAAAADkwOSAAsAABMJARcJATcJAScJAWwBTf6zRwFNAU1H/rMBTUf+s/6zA0v+tf61RwFL/rVHAUsBS0f+tQFLAAADAAAAAAP4A/gABQALABMAABMzIREhESURIxEhNQcjESE1MxEh0mQBlP2jAyZl/ghkygMmyvzaAsr9owJdyf2jAfhlZfzaygMmAAAAAAASAN4AAQAAAAAAAAABAAAAAQAAAAAAAQAMAAEAAQAAAAAAAgAHAA0AAQAAAAAAAwAMABQAAQAAAAAABAAMACAAAQAAAAAABQALACwAAQAAAAAABgAMADcAAQAAAAAACgAsAEMAAQAAAAAACwASAG8AAwABBAkAAAACAIEAAwABBAkAAQAYAIMAAwABBAkAAgAOAJsAAwABBAkAAwAYAKkAAwABBAkABAAYAMEAAwABBAkABQAWANkAAwABBAkABgAYAO8AAwABBAkACgBYAQcAAwABBAkACwAkAV8gTWluLU1heF9GT05UUmVndWxhck1pbi1NYXhfRk9OVE1pbi1NYXhfRk9OVFZlcnNpb24gMS4wTWluLU1heF9GT05URm9udCBnZW5lcmF0ZWQgdXNpbmcgU3luY2Z1c2lvbiBNZXRybyBTdHVkaW93d3cuc3luY2Z1c2lvbi5jb20AIABNAGkAbgAtAE0AYQB4AF8ARgBPAE4AVABSAGUAZwB1AGwAYQByAE0AaQBuAC0ATQBhAHgAXwBGAE8ATgBUAE0AaQBuAC0ATQBhAHgAXwBGAE8ATgBUAFYAZQByAHMAaQBvAG4AIAAxAC4AMABNAGkAbgAtAE0AYQB4AF8ARgBPAE4AVABGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHUAZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFAQIBAwEEAQUBBgAITWluaW1pemUITWF4aW1pemUFQ2xvc2UHUmVzdG9yZQAAAA==) format('truetype');
+        font-weight: normal;
+        font-style: normal;
+    }
+
+    [class^="sf-icon-"], [class*=" sf-icon-"] {
+        font-family: 'Min-Max_FONT' !important;
+        speak: none;
+        font-size: 55px;
+        font-style: normal;
+        font-weight: normal;
+        font-variant: normal;
+        text-transform: none;
+        line-height: 1;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+    }
+
+    .sf-icon-Minimize:before {
+        content: "\e700";
+    }
+
+    .sf-icon-Maximize:before {
+        content: "\e701";
+    }
+
+    .sf-icon-Close:before {
+        content: "\e702";
+    }
+
+    .sf-icon-Restore:before {
+        content: "\e703";
+    }
+
+
+    .e-dialog.hide-content .e-dlg-content, .e-dialog.hide-content .e-footer-content {
+        display: none;
+    }
+</style>
+
+@code {
+    public bool IsMaximized { get; set; } = false;
+    public bool IsMinimized { get; set; } = false;
+    private SfDialog DialogObj;
+    private bool IsVisible { get; set; } = false;
+    public string dialogClass = "";
+
+    private void OpenDialog() => IsVisible = true;
+    private void CloseDialog() => IsVisible = false;
+
+    private async Task maximize()
+    {
+        IsMaximized = !IsMaximized;
+        if (IsMaximized)
+        {
+            await JsRuntime.InvokeVoidAsync("Dialog.maximize");
+        }
+
+    }
+
+    private async Task minimize()
+    {
+        IsMinimized = !IsMinimized;
+        if (IsMinimized)
+        {
+            await JsRuntime.InvokeVoidAsync("Dialog.minimize");
+        }
+    }
+}
+```
+
+App.razor
+
+```
+ <script>
+     window.Dialog = {
+         minimize: function () {
+             var dialogElem = document.querySelector('.e-dialog');
+             if (dialogElem) {
+                 dialogElem.classList.remove('e-dlg-fullscreen');
+             }
+         },
+         maximize: function () {
+             var dialogElem = document.querySelector('.e-dialog');
+             if (dialogElem) {
+                 dialogElem.classList.add('e-dlg-fullscreen');
+             }
+         }
+     }
+ </script>
+```
+
+The output will be as follows.
+
+![Adding minimize and maximize buttons to Blazor Dialog header](./images/Minimize-and-maximize.gif)
\ No newline at end of file
diff --git a/blazor/dialog/modal-dialog.md b/blazor/dialog/modal-dialog.md
new file mode 100644
index 0000000000..ad91285e5f
--- /dev/null
+++ b/blazor/dialog/modal-dialog.md
@@ -0,0 +1,92 @@
+---
+layout: post
+title: Modal in Blazor Dialog Component | Syncfusion
+description: Checkout and learn here all about Modal in Syncfusion Blazor Dialog component and much more details.
+platform: Blazor
+control: Dialog
+documentation: ug
+---
+
+# Modal in Blazor Dialog Component
+
+A modal dialog prevents users from interacting with the rest of the application until the dialog is closed. The [IsModal](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialog.html#Syncfusion_Blazor_Popups_SfDialog_IsModal) property enables modal behavior by displaying an overlay behind the Dialog, ensuring users must complete their interaction with the Dialog before accessing other application content.
+
+```cshtml
+
+@using Syncfusion.Blazor.Popups
+@using Syncfusion.Blazor.Buttons
+
+<div id="target">
+    <div>
+        <SfButton @onclick="@OpenDialog">Open Modal Dialog</SfButton>
+    </div>
+    <SfDialog Target="#target" Width="250px" IsModal="true" @bind-Visible="@IsVisible" Header="Modal Dialog" Content="This is a modal dialog" ShowCloseIcon="true"></SfDialog>
+</div>
+
+<style>
+    #target {
+        height: 500px;
+    }
+</style>
+
+@code {
+    private bool IsVisible { get; set; } = false;
+
+    private void OpenDialog()
+    {
+        this.IsVisible = true;
+    }
+}
+
+```
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrotFCppdZxjRFA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+![Modal in Blazor Dialog](./images/blazor-modal-dialog.png)
+
+## Handling Overlay Click Events
+
+The [OnOverlayModalClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogEvents.html#Syncfusion_Blazor_Popups_DialogEvents_OnOverlayModalClick) event triggers when users click on the dialog's overlay area. This event provides access to the [OverlayModalClickEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.OverlayModalClickEventArgs.html) object, enabling custom functionality such as closing the dialog when users click outside the dialog content or implementing validation before allowing the dialog to close.
+
+### Close Dialog When Clicking Outside of Its Region
+
+The following example demonstrates how to close a modal dialog when the user clicks on the overlay area outside the dialog content. This provides an intuitive way for users to dismiss the dialog without requiring explicit close button interaction.
+
+```cshtml
+
+@using Syncfusion.Blazor.Popups
+@using Syncfusion.Blazor.Buttons
+
+<div id="target">
+    <div>
+        <SfButton @onclick="@OpenDialog">Open Modal Dialog</SfButton>
+    </div>
+    <SfDialog Target="#target" Width="250px" IsModal="true" @bind-Visible="@IsVisible" Header="Overlay Modal Dialog" Content="This is a modal dialog">
+        <DialogEvents OnOverlayModalClick="@OnOverlayClick"></DialogEvents>
+    </SfDialog>
+</div>
+
+@code {
+    private bool IsVisible { get; set; } = false;
+
+    private void OpenDialog()
+    {
+        this.IsVisible = true;
+    }
+
+    private void OnOverlayClick(OverlayModalClickEventArgs arg)
+    {
+        this.IsVisible = false;
+    }
+}
+
+
+<style>
+    #target {
+        height: 500px;
+    }
+</style>
+
+```
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLetFiJJHqtzBdm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5"  %}
+![Blazor Dialog with Modal Overlay](./images/blazor-dialog-modal-closes.gif)
\ No newline at end of file
diff --git a/blazor/dialog/how-to/show-dialog-with-fullscreen.md b/blazor/dialog/show-dialog-with-fullscreen.md
similarity index 65%
rename from blazor/dialog/how-to/show-dialog-with-fullscreen.md
rename to blazor/dialog/show-dialog-with-fullscreen.md
index 9588b087f5..69a40c44ca 100644
--- a/blazor/dialog/how-to/show-dialog-with-fullscreen.md
+++ b/blazor/dialog/show-dialog-with-fullscreen.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Show Dialog with full screen in Blazor Dialog Component
 
-You can show the dialog in full screen by passing `true` as argument to the dialog `Show` method. By using the `Visible` property, you can prevent the dialog from showing initially.
+You can show the dialog in full screen by passing `true` as argument to the dialog [`ShowAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialog.html#Syncfusion_Blazor_Popups_SfDialog_ShowAsync_System_Nullable_System_Boolean__) method. By using the [`Visible`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialog.html#Syncfusion_Blazor_Popups_SfDialog_Visible) property, you can prevent the dialog from showing initially.
 
 ```cshtml
 
@@ -44,3 +44,6 @@ You can show the dialog in full screen by passing `true` as argument to the dial
 }
 
 ```
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVejlWlClMfIggp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+![Blazor FullScreen Dialog](./images/blazor-fullscreen-dialog.gif)
\ No newline at end of file
diff --git a/blazor/dialog/state-persistent.md b/blazor/dialog/state-persistent.md
new file mode 100644
index 0000000000..81a23ce7f0
--- /dev/null
+++ b/blazor/dialog/state-persistent.md
@@ -0,0 +1,65 @@
+---
+layout: post
+title: State Persistence in Syncfusion Blazor Dialog Component
+description: Learn how to implement and manage state persistence in the Syncfusion Blazor Dialog component to maintain dialog state across interactions.
+platform: Blazor
+control: Dialog
+documentation: ug
+---
+
+# Enable State Persistence in Blazor Dialog Component
+
+To ensure the Blazor Dialog component retains its size and position across page reloads and reopen actions, set the [`EnablePersistence`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialog.html#Syncfusion_Blazor_Popups_SfDialog_EnablePersistence) property to `true`. Additionally, enable the [`AllowPrerender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialog.html#Syncfusion_Blazor_Popups_SfDialog_AllowPrerender) property to maintain the dialog's DOM elements even when it is hidden.
+
+By default, `AllowPrerender` is set to `false`, which means the dialog's DOM elements are removed when hidden and re-rendered upon showing. Setting it to `true` retains the dialog's elements in the DOM, preserving its state such as position and size between show/hide operations.
+
+## Example: Persistent Dialog
+
+The following code demonstrates how to configure a dialog with state persistence:
+
+
+```razor
+
+@using Syncfusion.Blazor.Popups
+@using Syncfusion.Blazor.Buttons
+
+<SfButton @onclick="@OpenDialog">Open Dialog</SfButton>
+
+<SfDialog @ref="DialogRef" Visible="false"
+    ID="myDialog"
+    EnableResize="true"
+    AllowDragging="true"
+    ShowCloseIcon="true"
+    EnablePersistence="true"
+    AllowPrerender="true"
+    >
+    <DialogTemplates>
+        <Header>Dialog header</Header>
+        <Content>
+            Dialog State Persistence
+        </Content>
+    </DialogTemplates>
+    <DialogButtons>
+        <DialogButton Content="OK" IsPrimary="true" OnClick="@CloseDialog" />
+        <DialogButton Content="Cancel" OnClick="@CloseDialog" />
+    </DialogButtons>
+</SfDialog>
+
+@code {
+    SfDialog DialogRef;
+
+    private async Task OpenDialog()
+    {
+        await this.DialogRef.ShowAsync();
+    }
+
+    private async Task CloseDialog()
+    {
+        await this.DialogRef.HideAsync();
+    }
+}
+
+```
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXrytlWbCFhMvNqK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+![Blazor Dialog State Persistence](./images/blazor-dialog-state-persistent.gif)
\ No newline at end of file
diff --git a/blazor/dialog/style.md b/blazor/dialog/style.md
index ea4d68f037..f6f3e1601d 100644
--- a/blazor/dialog/style.md
+++ b/blazor/dialog/style.md
@@ -7,9 +7,119 @@ control: Dialog
 documentation: ug
 ---
 
-# Style and Appearance in Blazor Dialog Component
+# Dialog Customization
 
-The following content provides the exact CSS structure that can be used to modify the control's appearance based on the user preference.
+The Syncfusion Blazor Dialog component allows extensive customization options to enhance its appearance and behavior. You can modify its dimensions, support RTL layouts, apply custom styles, and animate its display.
+
+### Width
+
+You can set the width of the dialog using the [`Width`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialog.html#Syncfusion_Blazor_Popups_SfDialog_Width) property.
+
+```razor
+<SfDialog Width="400px">
+    <!-- Dialog content -->
+</SfDialog>
+```
+
+### MinHeight
+
+Set the minimum height of the dialog using the [`MinHeight`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialog.html#Syncfusion_Blazor_Popups_SfDialog_MinHeight) property.
+
+```razor
+<SfDialog MinHeight="200px">
+    <!-- Dialog content -->
+</SfDialog>
+```
+
+### RTL Support
+
+Enable RTL (Right-to-Left) layout using the [`EnableRtl`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialog.html#Syncfusion_Blazor_Popups_SfDialog_EnableRtl) property.
+
+```razor
+<SfDialog EnableRtl="true">
+    <!-- Dialog content -->
+</SfDialog>
+```
+
+### CssClass
+
+Apply custom CSS classes using the [`CssClass`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialog.html#Syncfusion_Blazor_Popups_SfDialog_CssClass) property.
+
+```razor
+<SfDialog CssClass="custom-dialog">
+    <!-- Dialog content -->
+</SfDialog>
+```
+
+### Animation
+
+The [Blazor Dialog](https://www.syncfusion.com/blazor-components/blazor-modal-dialog) can be animated during the open and close actions. Also, users can customize animation's `Delay`, `Duration` and `Effect` by using the `DialogAnimationSettings` property.
+
+To get started quickly with animation in Blazor Dialog Component, you can check the video below.
+
+{% youtube "https://www.youtube.com/watch?v=qNW5d7C2L7g" %}
+
+<!-- markdownlint-disable MD033 -->
+<table>
+<tr>
+<td>
+delay</td><td>
+The Dialog animation will start with the mentioned delay</td></tr>
+<tr>
+<td>
+duration</td><td>
+Specifies the animation duration to complete with one animation cycle</td></tr>
+<tr>
+<td>
+effect</td><td>
+Specifies the animation effects of Dialog open and close actions effect.
+<br /><br />
+List of supported animation effects:
+<br />
+'Fade' | 'FadeZoom' | 'FlipLeftDown' | 'FlipLeftUp' | 'FlipRightDown' | 'FlipRightUp' | 'FlipXDown' |
+'FlipXUp' | 'FlipYLeft' | 'FlipYRight' | 'SlideBottom' | 'SlideLeft' | 'SlideRight' | 'SlideTop' |
+'Zoom'| 'None'
+<br /><br />
+If the user sets 'Fade' effect, then the Dialog will open with 'FadeIn' effect and close with 'FadeOut' effect
+</td></tr>
+</table>
+
+In the following sample, `Zoom` effect is enabled. So, The Dialog will open with `ZoomIn` and close with `ZoomOut` effects.
+
+```cshtml
+
+@using Syncfusion.Blazor.Popups
+@using Syncfusion.Blazor.Buttons
+
+<SfButton @onclick="@OpenDialog">Open Dialog</SfButton>
+
+<SfDialog Width="500px" ShowCloseIcon="true" @bind-Visible="@IsVisible">
+    <DialogTemplates>
+        <Header> Dialog </Header>
+        <Content> Dialog enabled with Zoom effect </Content>
+    </DialogTemplates>
+    <DialogAnimationSettings Effect="@AnimationEffect" Duration=400 />
+    <DialogButtons>
+        <DialogButton Content="Hide" IsPrimary="true" OnClick="@CloseDialog" />
+    </DialogButtons>
+</SfDialog>
+
+@code {
+    private bool IsVisible { get; set; } = true;
+    private DialogEffect AnimationEffect = DialogEffect.Zoom;
+
+    private void OpenDialog()
+    {
+        this.IsVisible = true;
+    }
+
+    private void CloseDialog()
+    {
+        this.IsVisible = false;
+    }
+}
+
+```
 
 ## Customizing the dialog header
 
diff --git a/blazor/document-editor/styles.md b/blazor/document-editor/styles.md
index 8850a5a281..4f9e60fadd 100644
--- a/blazor/document-editor/styles.md
+++ b/blazor/document-editor/styles.md
@@ -145,4 +145,15 @@ await container.DocumentEditor.Editor.ApplyStyleAsync("New Linked");
 await container.DocumentEditor.Editor.ApplyStyleAsync("New Linked", true);
 ```
 
+## Get Styles
+
+You can get the styles in the document using the below code snippet.
+
+```ts
+//Get paragraph styles
+object paragraphStyles = await container.DocumentEditor.GetStylesAsync(StyleType.Paragraph);
+//Get character styles
+object characterStyles = await container.DocumentEditor.GetStylesAsync(StyleType.Character);
+```
+
 You can refer to our [Blazor Word Processor](https://www.syncfusion.com/blazor-components/blazor-word-processor) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Word Processor example](https://blazor.syncfusion.com/demos/document-editor/default-functionalities) to know how to render and configure the document editor.
\ No newline at end of file
diff --git a/blazor/getting-started/blazor-web-app-authentication.md b/blazor/getting-started/blazor-web-app-authentication.md
new file mode 100644
index 0000000000..3f1b9e668f
--- /dev/null
+++ b/blazor/getting-started/blazor-web-app-authentication.md
@@ -0,0 +1,155 @@
+---
+layout: post
+title: Blazor Web App with Authentication | Syncfusion
+description: Check out the documentation for getting started with Blazor Web App and Syncfusion Blazor Components with Authentication.
+platform: Blazor
+component: Common
+documentation: ug
+---
+
+# Getting Started with Blazor Web App with Authentication
+
+This guide demonstrates how to build a **Blazor Web App with authentication** using **.NET 9**. It uses the built-in `AuthenticationStateProvider` to retrieve and manage user identity details from the application's authentication context, enabling secure and consistent user state handling across components.
+
+## Prerequisites
+
+* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
+
+## Create a new Blazor Web App in Visual Studio
+
+* Open Visual Studio 2022 and select **Create a new project** from the start screen.
+
+![Create-new-project](images/create-project.png)
+
+## Choose Project Template
+
+* Select the **Blazor Web App** template using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=windows) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio) and click **Next**.
+
+![Create-blazor-web-app-template](images/blazor-web-template.jpeg)
+
+## Configure Project Settings
+
+* In the project configuration settings, choose **Blazor Server, WebAssembly, or Auto** as the render mode. Ensure the Configure for **HTTPS option is enabled**, and select **Individual Accounts** as the authentication type before clicking **Create**. This setup enables authentication support without persisting user data in a local database.
+
+![Project-setting](images/project-setting.png)
+
+## Finalize Project Creation
+
+Click the **Create** button to generate the Blazor Web App. Once created, run the project and locate the **Register** button.
+
+![Click-register](images/register-button.png)
+
+## Register a User
+
+* Enter the necessary details, such as your **email address and password** into the registration form, then click **Register** to complete the account creation process.
+
+![Enter-register-details](images/register-details.jpg)
+
+## Apply Database Migrations
+
+After completing registration, click **Apply Migrations** to set up the database schema and configure it with the necessary account-related tables and settings.
+
+![Apply-migration](images/apply-migration.jpg)
+
+## Verify Login
+
+Once migrations are applied, refresh the page. The home page will now display the logged-in user's email address along with a **Logout** option.
+
+![Verify-login](images/verify-login.png)
+
+You can also integrate Syncfusion Blazor Components within the **AuthorizeView** component by following these steps:
+
+## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Calendars and Themes NuGet in the App in the App
+
+To add the **Blazor Calendar** component to your application, open the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*). Search and 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/) packages.
+
+Alternatively, you can install the packages using the following command in the **Package Manager Console**:
+
+{% 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 [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
+
+Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace.
+
+```cshtml
+
+@using Syncfusion.Blazor
+@using Syncfusion.Blazor.Calendars
+
+```
+
+Then, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly Standalone App.
+
+```cshtml
+
+....
+using Syncfusion.Blazor;
+....
+builder.Services.AddSyncfusionBlazor();
+....
+
+```
+
+## Add stylesheet and script resources
+
+The theme stylesheet and script are available via NuGet as [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). To include them in your application, add the stylesheet reference within the <head> section and the script reference just before the closing </body> tag, as shown below:
+
+* For **.NET 9 and .NET 8** Blazor Web app, include it in the **~/Components/App.razor** file.
+
+```html
+<head>
+    ....
+    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
+</head>
+
+<body>
+    ....
+    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+</body>
+
+```
+N> For more information on theming options, refer to the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) documentation, which covers various methods such as [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.
+
+Additionally, explore the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn about different approaches for including script references in your Blazor project.
+
+## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component
+
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Calendar component in the **~/Pages/Home.razor** file under `AuthorizeView`.
+
+{% tabs %}
+{% highlight razor %}
+
+<AuthorizeView>
+    <Authorized>
+        <SfCalendar TValue="DateTime" />
+    </Authorized>
+    <NotAuthorized>
+        <h1>Authentication Failure!</h1>
+        <p>You're not signed in.</p>
+    </NotAuthorized>
+</AuthorizeView>
+
+{% endhighlight %}
+{% endtabs %}
+
+* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will launch your default web browser and display the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Calendar component within the app interface.
+
+
+![Blazor Calendar Component](images/sync-components-auth.jpg)
+
+N> For detailed implementation, The demo project can be downloaded from the [GitHub](https://github.com/SyncfusionExamples/blazor-authentication) repository.
+
+## See Also
+
+* [Getting Started with Blazor WASM App with Authentication Library](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-authentication)
+
+* [Secure an ASP.NET Core Blazor WebAssembly standalone app with the Authentication library](https://learn.microsoft.com/en-us/aspnet/core/blazor/security/webassembly/standalone-with-authentication-library?view=aspnetcore-8.0&tabs=visual-studio)
diff --git a/blazor/getting-started/images/apply-migration.jpg b/blazor/getting-started/images/apply-migration.jpg
new file mode 100644
index 0000000000..44ce2e0778
Binary files /dev/null and b/blazor/getting-started/images/apply-migration.jpg differ
diff --git a/blazor/getting-started/images/blazor-web-template.jpeg b/blazor/getting-started/images/blazor-web-template.jpeg
new file mode 100644
index 0000000000..631cba189a
Binary files /dev/null and b/blazor/getting-started/images/blazor-web-template.jpeg differ
diff --git a/blazor/getting-started/images/create-project.png b/blazor/getting-started/images/create-project.png
new file mode 100644
index 0000000000..621350b783
Binary files /dev/null and b/blazor/getting-started/images/create-project.png differ
diff --git a/blazor/getting-started/images/project-setting.png b/blazor/getting-started/images/project-setting.png
new file mode 100644
index 0000000000..944b59a26f
Binary files /dev/null and b/blazor/getting-started/images/project-setting.png differ
diff --git a/blazor/getting-started/images/register-button.png b/blazor/getting-started/images/register-button.png
new file mode 100644
index 0000000000..6595f9c817
Binary files /dev/null and b/blazor/getting-started/images/register-button.png differ
diff --git a/blazor/getting-started/images/register-details.jpg b/blazor/getting-started/images/register-details.jpg
new file mode 100644
index 0000000000..f052c056fa
Binary files /dev/null and b/blazor/getting-started/images/register-details.jpg differ
diff --git a/blazor/getting-started/images/sync-components-auth.jpg b/blazor/getting-started/images/sync-components-auth.jpg
new file mode 100644
index 0000000000..d3ec870fd6
Binary files /dev/null and b/blazor/getting-started/images/sync-components-auth.jpg differ
diff --git a/blazor/getting-started/images/verify-login.png b/blazor/getting-started/images/verify-login.png
new file mode 100644
index 0000000000..6ef5a10459
Binary files /dev/null and b/blazor/getting-started/images/verify-login.png differ
diff --git a/blazor/getting-started/license-key/how-to-register-syncfusion-license-securely-in-blazor-wasm-app.md b/blazor/getting-started/license-key/how-to-register-syncfusion-license-securely-in-blazor-wasm-app.md
index 825cc7457c..b7461103b4 100644
--- a/blazor/getting-started/license-key/how-to-register-syncfusion-license-securely-in-blazor-wasm-app.md
+++ b/blazor/getting-started/license-key/how-to-register-syncfusion-license-securely-in-blazor-wasm-app.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Secure Registration of Syncfusion License Keys in Blazor WebAssembly Applications
 
-Securely managing license keys in Blazor WebAssembly (WASM) applications is essential to prevent unauthorized access and ensure compliance. Registering a license key in the `Program.cs` file exposes it in the browser through DLLs, creating security risks.
+Registering a license key directly in the Program.cs file of a Blazor WebAssembly Client project can expose it through the compiled assemblies, making it accessible in the browser, creating security risks.
 
 ## Recommended Solution: Use Licensed NuGet Packages
 
@@ -34,7 +34,59 @@ These steps ensure secure and compliant Blazor WASM applications, preventing lic
 Build your Blazor WASM application using licensed NuGet packages from these sources:
 
 - **Local Folder:** Store packages locally and configure your project for restoration.
-- **Private Repository Manager:** Host and manage packages using a private NuGet repository manager like Nexus.
+- **Private Repository Manager:** Host and manage packages using a private NuGet repository manager like Nexus, Azure DevOps artifact feed.
+
+
+>**Important Note:**  
+> When referencing both a local folder or private repository and `nuget.org` in your `NuGet.config`, and if both sources contain the same version of Syncfusion packages, the build may default to restoring from `nuget.org` (trial versions). This fallback can result in **license popup issues**.
+
+### Use Package Source Mapping
+To ensure your project always restores Syncfusion packages from the licensed source, configure [Package Source Mapping](https://learn.microsoft.com/en-us/nuget/consume-packages/package-source-mapping) in your `NuGet.config`:
+
+```xml
+<configuration>
+  <packageSources>
+    <add key="licensed-nuget" value="path/to/your/nuget-source" />
+    <add key="nuget.org" value="https://api.nuget.org/v3/index.json" />
+  </packageSources>
+  <packageSourceMapping>
+    <packageSource key="licensed-nuget">
+      <package pattern="Syncfusion.*" />
+    </packageSource>
+  </packageSourceMapping>
+</configuration>
+```
+
+### Verifying Assembly Licensing:
+
+To confirm whether your application is referencing licensed or trial assemblies:
+
+* Navigate to your build output directory and Locate the Syncfusion assemblies.
+
+* Right-click on each assemblies → Select Properties → Go to the Details tab.
+
+* Check the File Description:
+
+    * If it includes “LR”, it’s a trial version.
+
+        ![trail dll preview](images/trial.png)
+
+    * If it does not include “LR”, it’s a licensed version.
+
+        ![licensed dll](images/licensed.png)
+
+
+If trial assemblies are detected in your application, follow these steps to ensure a clean and licensed setup:
+
+Clear the NuGet cache to remove any previously downloaded trial packages:
+```bash
+dotnet nuget locals all --clear
+```
+
+
+Delete the **bin and obj**  folders from your project directories to remove any cached build artifacts.
+
+Uninstall and reinstall the Syncfusion packages, making sure they are restored only from your licensed NuGet source.
 
 ## Securely manage Syncfusion license keys using Azure Key Vault
 
@@ -45,4 +97,4 @@ For enhanced security, especially in cloud-hosted environments, store and access
 Integrate Azure Key Vault to retrieve the license key at runtime, preventing browser exposure or storage in client-side code.
 
 For detailed steps, refer to:
-[Securely Store and Use Syncfusion License Keys in Azure Key Vault](https://help.syncfusion.com/common/essential-studio/licensing/licensing-faq/how-to-securely-store-and-use-syncfusion-license-keys-in-azure-key-vault)
+[Securely Store and Use Syncfusion License Keys in Azure Key Vault](https://help.syncfusion.com/common/essential-studio/licensing/licensing-faq/how-to-securely-store-and-use-syncfusion-license-keys-in-azure-key-vault)
\ No newline at end of file
diff --git a/blazor/getting-started/license-key/images/get-community-license-key.png b/blazor/getting-started/license-key/images/get-community-license-key.png
index 47b8f6f887..5bfd1cb0cb 100644
Binary files a/blazor/getting-started/license-key/images/get-community-license-key.png and b/blazor/getting-started/license-key/images/get-community-license-key.png differ
diff --git a/blazor/getting-started/license-key/images/licensed.png b/blazor/getting-started/license-key/images/licensed.png
new file mode 100644
index 0000000000..4203a47c10
Binary files /dev/null and b/blazor/getting-started/license-key/images/licensed.png differ
diff --git a/blazor/getting-started/license-key/images/trial.png b/blazor/getting-started/license-key/images/trial.png
new file mode 100644
index 0000000000..67c67ea3a1
Binary files /dev/null and b/blazor/getting-started/license-key/images/trial.png differ
diff --git a/blazor/getting-started/maui-blazor-app.md b/blazor/getting-started/maui-blazor-app.md
index 1bfbf4e1f8..0e3f375cdc 100644
--- a/blazor/getting-started/maui-blazor-app.md
+++ b/blazor/getting-started/maui-blazor-app.md
@@ -7,7 +7,7 @@ component: Common
 documentation: ug
 ---
 
-# Getting Started with .NET MAUI Blazor Application
+# Getting Started with .NET MAUI Blazor Hybrid App
 
 This section explains how to create and run the first .NET Multi-platform Blazor App UI (.NET MAUI Blazor) app with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components.
 
diff --git a/blazor/getting-started/maui-blazor-web-app.md b/blazor/getting-started/maui-blazor-web-app.md
index 72383df8c9..13673f5079 100644
--- a/blazor/getting-started/maui-blazor-web-app.md
+++ b/blazor/getting-started/maui-blazor-web-app.md
@@ -7,7 +7,7 @@ component: Common
 documentation: ug
 ---
 
-# Getting Started with .NET MAUI Blazor Hybrid and Blazor Web App
+# Getting Started with .NET MAUI Blazor Hybrid and Web App
 
 This section explains how to create and run the first .NET Multi-platform Blazor App UI (.NET MAUI with Blazor Web App) app with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components.
 
diff --git a/blazor/installation/offline-installer/images/Blazor_web_installer.png b/blazor/installation/offline-installer/images/Blazor_web_installer.png
index fbd84aa529..d2f3e0eae9 100644
Binary files a/blazor/installation/offline-installer/images/Blazor_web_installer.png and b/blazor/installation/offline-installer/images/Blazor_web_installer.png differ
diff --git a/blazor/installation/offline-installer/images/blazor_windows.png b/blazor/installation/offline-installer/images/blazor_windows.png
index 9e23ceca61..e95d30fd0f 100644
Binary files a/blazor/installation/offline-installer/images/blazor_windows.png and b/blazor/installation/offline-installer/images/blazor_windows.png differ
diff --git a/blazor/installation/offline-installer/images/start-trial-download-offline-installer.PNG b/blazor/installation/offline-installer/images/start-trial-download-offline-installer.PNG
index 9e23ceca61..e95d30fd0f 100644
Binary files a/blazor/installation/offline-installer/images/start-trial-download-offline-installer.PNG and b/blazor/installation/offline-installer/images/start-trial-download-offline-installer.PNG differ
diff --git a/blazor/installation/offline-installer/images/webofflineinstaller-1.png b/blazor/installation/offline-installer/images/webofflineinstaller-1.png
index cd5991a6a2..ce7a85f844 100644
Binary files a/blazor/installation/offline-installer/images/webofflineinstaller-1.png and b/blazor/installation/offline-installer/images/webofflineinstaller-1.png differ
diff --git a/blazor/installation/offline-installer/images/webofflineinstaller-2.png b/blazor/installation/offline-installer/images/webofflineinstaller-2.png
index 74ea3265b7..2cf0e031df 100644
Binary files a/blazor/installation/offline-installer/images/webofflineinstaller-2.png and b/blazor/installation/offline-installer/images/webofflineinstaller-2.png differ
diff --git a/blazor/installation/offline-installer/images/webofflineinstaller-3.png b/blazor/installation/offline-installer/images/webofflineinstaller-3.png
index 0e1f6e3786..0221659e5d 100644
Binary files a/blazor/installation/offline-installer/images/webofflineinstaller-3.png and b/blazor/installation/offline-installer/images/webofflineinstaller-3.png differ
diff --git a/blazor/installation/offline-installer/images/webofflineinstaller-4.png b/blazor/installation/offline-installer/images/webofflineinstaller-4.png
index 3a7d0a9153..774c480430 100644
Binary files a/blazor/installation/offline-installer/images/webofflineinstaller-4.png and b/blazor/installation/offline-installer/images/webofflineinstaller-4.png differ
diff --git a/blazor/installation/offline-installer/images/webofflineinstaller-5.png b/blazor/installation/offline-installer/images/webofflineinstaller-5.png
index 190276edbb..bd2766b436 100644
Binary files a/blazor/installation/offline-installer/images/webofflineinstaller-5.png and b/blazor/installation/offline-installer/images/webofflineinstaller-5.png differ
diff --git a/blazor/installation/offline-installer/images/webofflineinstaller-7.png b/blazor/installation/offline-installer/images/webofflineinstaller-7.png
index 824acc81a3..0fac077256 100644
Binary files a/blazor/installation/offline-installer/images/webofflineinstaller-7.png and b/blazor/installation/offline-installer/images/webofflineinstaller-7.png differ
diff --git a/blazor/installation/offline-installer/images/webofflineinstaller-8.png b/blazor/installation/offline-installer/images/webofflineinstaller-8.png
index a4804b445b..0c34ef0ffc 100644
Binary files a/blazor/installation/offline-installer/images/webofflineinstaller-8.png and b/blazor/installation/offline-installer/images/webofflineinstaller-8.png differ
diff --git a/blazor/installation/offline-installer/images/webofflineinstaller-9.png b/blazor/installation/offline-installer/images/webofflineinstaller-9.png
index cc3602ff16..a69fad126d 100644
Binary files a/blazor/installation/offline-installer/images/webofflineinstaller-9.png and b/blazor/installation/offline-installer/images/webofflineinstaller-9.png differ
diff --git a/blazor/installation/web-installer/images/blazor-web-installer-license.png b/blazor/installation/web-installer/images/blazor-web-installer-license.png
index fbd84aa529..d2f3e0eae9 100644
Binary files a/blazor/installation/web-installer/images/blazor-web-installer-license.png and b/blazor/installation/web-installer/images/blazor-web-installer-license.png differ
diff --git a/blazor/installation/web-installer/images/blazor-web-trial.png b/blazor/installation/web-installer/images/blazor-web-trial.png
index fbd84aa529..d2f3e0eae9 100644
Binary files a/blazor/installation/web-installer/images/blazor-web-trial.png and b/blazor/installation/web-installer/images/blazor-web-trial.png differ
diff --git a/blazor/installation/web-installer/images/start-trial-download-offline-installer.PNG b/blazor/installation/web-installer/images/start-trial-download-offline-installer.PNG
index fbd84aa529..d2f3e0eae9 100644
Binary files a/blazor/installation/web-installer/images/start-trial-download-offline-installer.PNG and b/blazor/installation/web-installer/images/start-trial-download-offline-installer.PNG differ
diff --git a/blazor/installation/web-installer/images/webinstaller-1.png b/blazor/installation/web-installer/images/webinstaller-1.png
index 6319726c49..48405995a3 100644
Binary files a/blazor/installation/web-installer/images/webinstaller-1.png and b/blazor/installation/web-installer/images/webinstaller-1.png differ
diff --git a/blazor/installation/web-installer/images/webinstaller-10.png b/blazor/installation/web-installer/images/webinstaller-10.png
index 1a055d8241..d30eb51f2d 100644
Binary files a/blazor/installation/web-installer/images/webinstaller-10.png and b/blazor/installation/web-installer/images/webinstaller-10.png differ
diff --git a/blazor/installation/web-installer/images/webinstaller-11.png b/blazor/installation/web-installer/images/webinstaller-11.png
index 66db64c59d..3ffe18c6b3 100644
Binary files a/blazor/installation/web-installer/images/webinstaller-11.png and b/blazor/installation/web-installer/images/webinstaller-11.png differ
diff --git a/blazor/installation/web-installer/images/webinstaller-12.png b/blazor/installation/web-installer/images/webinstaller-12.png
index 1666f39319..4bf034a165 100644
Binary files a/blazor/installation/web-installer/images/webinstaller-12.png and b/blazor/installation/web-installer/images/webinstaller-12.png differ
diff --git a/blazor/installation/web-installer/images/webinstaller-13.png b/blazor/installation/web-installer/images/webinstaller-13.png
index 92d9492851..f270da911a 100644
Binary files a/blazor/installation/web-installer/images/webinstaller-13.png and b/blazor/installation/web-installer/images/webinstaller-13.png differ
diff --git a/blazor/installation/web-installer/images/webinstaller-2.png b/blazor/installation/web-installer/images/webinstaller-2.png
index 1a9df2b7be..9da1500f18 100644
Binary files a/blazor/installation/web-installer/images/webinstaller-2.png and b/blazor/installation/web-installer/images/webinstaller-2.png differ
diff --git a/blazor/installation/web-installer/images/webinstaller-3.png b/blazor/installation/web-installer/images/webinstaller-3.png
index 7389dede71..3743f46769 100644
Binary files a/blazor/installation/web-installer/images/webinstaller-3.png and b/blazor/installation/web-installer/images/webinstaller-3.png differ
diff --git a/blazor/installation/web-installer/images/webinstaller-4.png b/blazor/installation/web-installer/images/webinstaller-4.png
index 0b11ef288c..aac26ecbd6 100644
Binary files a/blazor/installation/web-installer/images/webinstaller-4.png and b/blazor/installation/web-installer/images/webinstaller-4.png differ
diff --git a/blazor/installation/web-installer/images/webinstaller-5.png b/blazor/installation/web-installer/images/webinstaller-5.png
index 43276da4df..c02ee9c6ac 100644
Binary files a/blazor/installation/web-installer/images/webinstaller-5.png and b/blazor/installation/web-installer/images/webinstaller-5.png differ
diff --git a/blazor/installation/web-installer/images/webinstaller-6.png b/blazor/installation/web-installer/images/webinstaller-6.png
index 8d52fb3847..cf41630593 100644
Binary files a/blazor/installation/web-installer/images/webinstaller-6.png and b/blazor/installation/web-installer/images/webinstaller-6.png differ
diff --git a/blazor/installation/web-installer/images/webinstaller-7.png b/blazor/installation/web-installer/images/webinstaller-7.png
index b1b605b71e..faf82e21d9 100644
Binary files a/blazor/installation/web-installer/images/webinstaller-7.png and b/blazor/installation/web-installer/images/webinstaller-7.png differ
diff --git a/blazor/installation/web-installer/images/webinstaller-8.png b/blazor/installation/web-installer/images/webinstaller-8.png
index 893923cc7b..d477383305 100644
Binary files a/blazor/installation/web-installer/images/webinstaller-8.png and b/blazor/installation/web-installer/images/webinstaller-8.png differ
diff --git a/blazor/installation/web-installer/images/webinstaller-9.png b/blazor/installation/web-installer/images/webinstaller-9.png
index eb75877892..c02ee9c6ac 100644
Binary files a/blazor/installation/web-installer/images/webinstaller-9.png and b/blazor/installation/web-installer/images/webinstaller-9.png differ
diff --git a/blazor/installation/web-installer/images/webinstaller-uninstall-2.png b/blazor/installation/web-installer/images/webinstaller-uninstall-2.png
index 0b11ef288c..59f7f9bcda 100644
Binary files a/blazor/installation/web-installer/images/webinstaller-uninstall-2.png and b/blazor/installation/web-installer/images/webinstaller-uninstall-2.png differ
diff --git a/blazor/installation/web-installer/images/webinstaller-uninstall-3.png b/blazor/installation/web-installer/images/webinstaller-uninstall-3.png
index fee5588e11..3743f46769 100644
Binary files a/blazor/installation/web-installer/images/webinstaller-uninstall-3.png and b/blazor/installation/web-installer/images/webinstaller-uninstall-3.png differ
diff --git a/blazor/installation/web-installer/images/webinstaller-uninstall-4.png b/blazor/installation/web-installer/images/webinstaller-uninstall-4.png
index 8d52fb3847..cf41630593 100644
Binary files a/blazor/installation/web-installer/images/webinstaller-uninstall-4.png and b/blazor/installation/web-installer/images/webinstaller-uninstall-4.png differ
diff --git a/blazor/installation/web-installer/images/webinstaller-uninstall-5.png b/blazor/installation/web-installer/images/webinstaller-uninstall-5.png
index 893923cc7b..7f0bc63f1a 100644
Binary files a/blazor/installation/web-installer/images/webinstaller-uninstall-5.png and b/blazor/installation/web-installer/images/webinstaller-uninstall-5.png differ
diff --git a/blazor/installation/web-installer/images/webinstaller-uninstall-6.png b/blazor/installation/web-installer/images/webinstaller-uninstall-6.png
index 23cf9d84fd..b8af30ca2b 100644
Binary files a/blazor/installation/web-installer/images/webinstaller-uninstall-6.png and b/blazor/installation/web-installer/images/webinstaller-uninstall-6.png differ
diff --git a/blazor/installation/web-installer/images/webinstaller-uninstall-7.png b/blazor/installation/web-installer/images/webinstaller-uninstall-7.png
index 0bf2eb11d9..f80bcabe31 100644
Binary files a/blazor/installation/web-installer/images/webinstaller-uninstall-7.png and b/blazor/installation/web-installer/images/webinstaller-uninstall-7.png differ
diff --git a/blazor/installation/web-installer/images/webinstaller-uninstall-8.png b/blazor/installation/web-installer/images/webinstaller-uninstall-8.png
index b1b605b71e..fb18da1092 100644
Binary files a/blazor/installation/web-installer/images/webinstaller-uninstall-8.png and b/blazor/installation/web-installer/images/webinstaller-uninstall-8.png differ
diff --git a/blazor/installation/web-installer/images/webofflineinstaller-1.png b/blazor/installation/web-installer/images/webofflineinstaller-1.png
index 6319726c49..48405995a3 100644
Binary files a/blazor/installation/web-installer/images/webofflineinstaller-1.png and b/blazor/installation/web-installer/images/webofflineinstaller-1.png differ
diff --git a/blazor/introduction.md b/blazor/introduction.md
index 364d012d01..1b194d3b91 100644
--- a/blazor/introduction.md
+++ b/blazor/introduction.md
@@ -79,6 +79,7 @@ padding-top: 20px;
         <div class="controlanchorlink"><a target="_self" href="https://blazor.syncfusion.com/documentation/pivot-table/getting-started">Pivot Table</a></div>
         <div class="controlanchorlink"><a target="_self" href="https://blazor.syncfusion.com/documentation/treegrid/getting-started">TreeGrid</a></div>
         <div class="controlanchorlink"><a target="_self" href="https://blazor.syncfusion.com/documentation/multicolumn-combobox/getting-started">Multicolumn ComboBox</a></div>
+        <div class="controlanchorlink"><a target="_self" href="https://blazor.syncfusion.com/documentation/spreadsheet/getting-started-webapp">Spreadsheet</a></div>
         <div><p class="controlcategory">FILE VIEWERS & EDITORS</p></div>
         <div class="controlanchorlink"><a target="_self" href="https://blazor.syncfusion.com/documentation/rich-text-editor/getting-started">RichTextEditor</a></div>
         <div class="controlanchorlink"><a target="_self" href="https://blazor.syncfusion.com/documentation/markdown-editor/getting-started-webapp">Markdown Editor</a></div>
@@ -161,7 +162,7 @@ padding-top: 20px;
         <div class="controlanchorlink"><a target="_self" href="https://blazor.syncfusion.com/documentation/query-builder/getting-started">Query Builder</a></div>
 		<div class="controlanchorlink"><a target="_self" href="https://blazor.syncfusion.com/documentation/data-form/getting-started">Data Form</a></div>
         <div><p class="controlcategory">Interactive Chat</p></div>
-        <div class="controlanchorlink"><a target="_self" href="https://blazor.syncfusion.com/documentation/ai-assistview/getting-started">AI Assistview</a></div>
+        <div class="controlanchorlink"><a target="_self" href="https://blazor.syncfusion.com/documentation/ai-assistview/getting-started">AI AssistView</a></div>
         <div class="controlanchorlink"><a target="_self" href="https://blazor.syncfusion.com/documentation/chat-ui/getting-started">Chat UI</a></div>
     </td>
     <td>
diff --git a/blazor/nuget-packages.md b/blazor/nuget-packages.md
index 56e15401b0..e863a9beb0 100644
--- a/blazor/nuget-packages.md
+++ b/blazor/nuget-packages.md
@@ -2063,6 +2063,48 @@ The Blazor SplitButtons package contains UI components such as DropDownButton, S
 </tr>
 </table>
 
+## Syncfusion.Blazor.Spreadsheet
+
+The Blazor Spreadsheet supports drag selection simplifies data manipulation and essential operations like cut, copy, and paste, complemented by an intelligent autofill function for quick data entry.
+
+<table>
+<tr>
+<td>
+<b>NuGet package</b>
+</td>
+<td>
+<b>Components friendly name</b>
+</td>
+<td>
+<b>Components name</b>
+</td>
+<td>
+<b>Dependencies</b>
+</td>
+</tr>
+<tr>
+<td><a href="https://www.nuget.org/packages/Syncfusion.Blazor.Spreadsheet">Syncfusion.Blazor.Spreadsheet</a></td>
+<td><a href="https://blazor.syncfusion.com/documentation/spreadsheet/getting-started-webapp">Spreadsheet</a></td>
+<td>SfSpreadsheet</td>
+<td>
+<ul>
+<li><a href="https://www.nuget.org/packages/Syncfusion.Blazor.Buttons/">Syncfusion.Blazor.Buttons</a></li>
+<li><a href="https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/">Syncfusion.Blazor.Calendars</a></li>
+<li><a href="https://www.nuget.org/packages/Syncfusion.Blazor.Core/">Syncfusion.Blazor.Core</a></li>
+<li><a href="https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns/">Syncfusion.Blazor.DropDowns</a></li>
+<li><a href="https://www.nuget.org/packages/Syncfusion.Blazor.Inputs/">Syncfusion.Blazor.Inputs</a></li>
+<li><a href="https://www.nuget.org/packages/Syncfusion.Blazor.Lists/">Syncfusion.Blazor.Lists</a></li>
+<li><a href="https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/">Syncfusion.Blazor.Navigations</a></li>
+<li><a href="https://www.nuget.org/packages/Syncfusion.Blazor.Popups/">Syncfusion.Blazor.Popups</a></li>
+<li><a href="https://www.nuget.org/packages/Syncfusion.Blazor.Ribbon/">Syncfusion.Blazor.Ribbon</a></li>
+<li><a href="https://www.nuget.org/packages/Syncfusion.Blazor.Spinner/">Syncfusion.Blazor.Spinner</a></li>
+<li><a href="https://www.nuget.org/packages/Syncfusion.Blazor.SplitButtons/">Syncfusion.Blazor.SplitButtons</a></li>
+<li><a href="https://www.nuget.org/packages/Syncfusion.XlsIO.Net.Core/">Syncfusion.XlsIO.Net.Core</a></li>
+</ul>
+</td>
+</tr>
+</table>
+
 ## Syncfusion.Blazor.StockChart
 
 The Blazor Stock Chart is an easy-to-use financial charting package to track and visualize the stock price of any company over a specific period using charting and range tools. It also comes with a lot of features such as zooming, panning, tooltip, crosshair, trackball, period selector, range selector, and events to make the stock charts more interactive.
diff --git a/blazor/pager/getting-started.md b/blazor/pager/getting-started.md
index e22198f436..cf4419bea0 100644
--- a/blazor/pager/getting-started.md
+++ b/blazor/pager/getting-started.md
@@ -26,7 +26,7 @@ To get started quickly with Blazor Pager component, check on the following video
 
 ## Create a new Blazor App in Visual Studio
 
-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) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+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 Navigations and Themes NuGet in the App
 
diff --git a/blazor/pdfviewer-2/how-to/content-security-policy.md b/blazor/pdfviewer-2/how-to/content-security-policy.md
new file mode 100644
index 0000000000..507a35119e
--- /dev/null
+++ b/blazor/pdfviewer-2/how-to/content-security-policy.md
@@ -0,0 +1,56 @@
+---
+layout: post
+title: Use strict CSP in Blazor SfPdfViewer | Syncfusion
+description: Learn here all about how to use the Content Security Policy in Syncfusion Blazor SfPdfViewer component.
+platform: Blazor
+control: SfPdfViewer
+documentation: ug
+---
+
+# Use strict CSP in Blazor SfPdfViewer Component
+
+Content Security Policy (CSP) is a security feature implemented by web browsers that helps to protect against attacks such as cross-site scripting (XSS) and data injection. It limits the sources from which content can be loaded on a web page.
+
+To enable strict [Content Security Policy (CSP)](https://csp.withgoogle.com/docs/strict-csp.html), certain browser features are disabled by default. In order to use Syncfusion PDF Viewer control with strict CSP mode, it is essential to include following directives in the CSP meta tag.
+
+* Syncfusion PDF Viewer control are rendered with calculated **inline styles** and **base64** font icons, which are blocked on a strict CSP-enabled site. To allow them, add the [`style-src 'self' 'unsafe-inline' blob:;`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src) and [`font-src 'self' data:;`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/font-src) directives in the meta tag as follows.
+
+* Syncfusion **material** and **tailwind** built-in themes contain a reference to the [`Roboto's external font`](https://fonts.googleapis.com/css?family=Roboto:400,500), which is also blocked. To allow them, add the [`external font`](https://fonts.googleapis.com/css?family=Roboto:400,500) reference to the [`style-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src) and [`font-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/font-src) directives in the above meta tag.
+
+* Syncfusion PDF Viewer control uses **web workers** and makes network connections, which are blocked on a strict CSP-enabled site. To allow them, add the [`worker-src 'self' blob:;`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/worker-src) and [`connect-src 'self' https://cdn.syncfusion.com data:;`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/connect-src) directives in the above meta tag.
+
+* For JavaScript execution and WebAssembly operations, the [`script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.syncfusion.com blob:;`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src) directive is required to allow inline scripts, eval operations, and blob-based scripts.
+
+The resultant meta tag is included within the `<head>` tag and resolves the CSP violation on the application's side when utilizing Syncfusion PDF Viewer control with material and tailwind themes.
+
+{% tabs %}
+{% highlight razor tabtitle="HTML" %}
+<head>
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self';
+    frame-src 'self' blob:;
+    script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.syncfusion.com blob:;
+    style-src 'self' 'unsafe-inline' blob: https://cdn.syncfusion.com https://fonts.googleapis.com;
+    img-src 'self' blob: data:;
+    worker-src 'self' blob:;
+    connect-src 'self' https://cdn.syncfusion.com data:;
+    font-src 'self' data: https://fonts.googleapis.com/ https://fonts.gstatic.com/;" />
+</head>
+{% endhighlight %}
+{% endtabs %}
+
+N> In accordance with the latest security practices, the Syncfusion PDF Viewer control requires `'unsafe-eval'` in the script-src directive for proper JavaScript execution and WebAssembly operations. The `worker-src` directive is also essential for web worker functionality used by the PDF Viewer. Make sure to update your CSP meta tags to include these directives for optimal functionality and security compliance.
+
+### Please find the usage of each directives:
+
+| Directive                          | Usage                                                                                                                                                                                                                  |
+|------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `default-src 'self';`              | Sets the default policy for loading resources. `'self'` means only allow resources from the same origin (same domain).                                                                                                 |
+| `script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.syncfusion.com blob:;` | Defines where JavaScript code can come from. `'self'` allows scripts from the same origin. `'unsafe-inline'` allows inline scripts. `'unsafe-eval'` allows eval() operations needed for WebAssembly. `blob:` allows loading scripts from Blob URLs. |
+| `worker-src 'self' blob:;`         | Controls where workers can be loaded from. `'self'` allows same-origin workers. `blob:` allows blob-based workers, common in PDF viewers and heavy JS applications.                                                     |
+| `connect-src 'self' https://cdn.syncfusion.com data:;` | Controls where the application can make network requests, such as `fetch()`, XHR, and WebSockets. `'self'` restricts to the same origin, with additional allowances for Syncfusion CDN and data URLs. |
+| `style-src 'self' 'unsafe-inline' blob: https://cdn.syncfusion.com https://fonts.googleapis.com;` | Defines the sources for stylesheets. `'self'` restricts to the same origin. `'unsafe-inline'` allows inline styles. `blob:` allows dynamically generated styles. External font CDNs are also allowed. |
+| `font-src 'self' data: https://fonts.googleapis.com/ https://fonts.gstatic.com/;` | Controls where fonts can be loaded from. `'self'` allows local fonts. `data:` allows inline fonts (base64 embedded), and the URLs allow loading from external font CDNs. |
+| `img-src 'self' blob: data:;`      | Controls where images can be loaded from. `'self'` restricts to the same origin. `blob:` allows blob-based images. `data:` allows inline images (base64).                                                            |
+| `frame-src 'self' blob:;`          | Controls where frames can be loaded from. `'self'` allows same-origin frames. `blob:` allows blob-based frames, which may be used by the PDF Viewer for certain operations.                                          |
+
+[View sample in GitHub](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples/tree/master/Common/Pdfviewer%20Sample%20With%20CSP).
\ No newline at end of file
diff --git a/blazor/predefined-dialogs/getting-started-webapp.md b/blazor/predefined-dialogs/getting-started-webapp.md
index 53b0424617..a252dceefe 100644
--- a/blazor/predefined-dialogs/getting-started-webapp.md
+++ b/blazor/predefined-dialogs/getting-started-webapp.md
@@ -21,9 +21,9 @@ This section briefly explains about how to include `Blazor Predefined Dialogs` c
 
 ## Create a new Blazor Web App in Visual Studio
 
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+You can create a **Blazor Web App** using Visual Studio 2022 via [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).
 
-You need to configure the corresponding [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=windows) while creating a Blazor Web Application.
+You need to configure the corresponding [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) while creating a Blazor Web Application.
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Popups and Themes NuGet in the App
 
diff --git a/blazor/progress-bar/getting-started-webapp.md b/blazor/progress-bar/getting-started-webapp.md
index 44b19f2c6a..0c4b1c79d5 100644
--- a/blazor/progress-bar/getting-started-webapp.md
+++ b/blazor/progress-bar/getting-started-webapp.md
@@ -21,9 +21,9 @@ This section briefly explains about how to include [Blazor ProgressBar](https://
 
 ## Create a new Blazor Web App in Visual Studio
 
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+You can create a **Blazor Web App** using Visual Studio 2022 via [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).
 
-You need to configure the corresponding [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=windows) while creating a Blazor Web Application.
+You need to configure the corresponding [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) while creating a Blazor Web Application.
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor ProgressBar and Themes NuGet in the App
 
diff --git a/blazor/rich-text-editor/toolbar.md b/blazor/rich-text-editor/toolbar.md
index 48d843c4eb..92a9256384 100644
--- a/blazor/rich-text-editor/toolbar.md
+++ b/blazor/rich-text-editor/toolbar.md
@@ -16,6 +16,7 @@ You can customize the toolbar configurations by using the [RichTextEditorToolbar
 1. Expand
 2. MultiRow
 3. Scrollable
+4. Popup 
 
 ## Expand Toolbar
 
diff --git a/blazor/rich-text-editor/undo-redo-manager.md b/blazor/rich-text-editor/undo-redo-manager.md
index 64acc5982b..dfcff43c16 100644
--- a/blazor/rich-text-editor/undo-redo-manager.md
+++ b/blazor/rich-text-editor/undo-redo-manager.md
@@ -153,4 +153,4 @@ To clear the entire undo and redo stack, use the public [ClearUndoRedoAsync](htt
 {% include_relative code-snippet/clear-undo-redo.razor %}
 
 {% endhighlight %}
-{% endtabs %}
+{% endtabs %}
\ No newline at end of file
diff --git a/blazor/scheduler/events.md b/blazor/scheduler/events.md
index 445a324607..6006b43ba6 100644
--- a/blazor/scheduler/events.md
+++ b/blazor/scheduler/events.md
@@ -427,7 +427,7 @@ The action type that can be checked within the [`ActionCompleted`](https://help.
     DateTime CurrentDate = new DateTime(2020, 3, 10);
     public void OnNavigating(NavigatingEventArgs args)
     {
-        if (args.Action == "date") {
+        if (args.ActionType == ActionType.DateNavigate) {
             args.Cancel = true;   //To prevent date navigation
         }
     }
diff --git a/blazor/scheduler/header-bar.md b/blazor/scheduler/header-bar.md
index 2b7b86c3ab..83df66b259 100644
--- a/blazor/scheduler/header-bar.md
+++ b/blazor/scheduler/header-bar.md
@@ -246,6 +246,48 @@ The date header can be customized by using [`OnRenderCell`](https://help.syncfus
 }
 ```
 
+## Customizing the date range text
+
+The [`dateRangeTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleTemplates.html#Syncfusion_Blazor_Schedule_ScheduleTemplates_DateRangeTemplate) option allows you to customize the text content of the date range displayed in the scheduler. By default, the date range text is determined by the scheduler view being used. However, you can use the [`dateRangeTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleTemplates.html#Syncfusion_Blazor_Schedule_ScheduleTemplates_DateRangeTemplate) option to override the default text and specify your own custom text to be displayed.
+
+The [`dateRangeTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleTemplates.html#Syncfusion_Blazor_Schedule_ScheduleTemplates_DateRangeTemplate) property includes `startDate`, `endDate` and `currentView` options, you can customize the date range text using these available options.
+
+```cshtml
+@using Syncfusion.Blazor.Schedule
+@using System.Globalization
+
+<SfSchedule TValue="AppointmentData" Width="100%" Height="650px" @bind-SelectedDate="@CurrentDate">
+    <ScheduleTemplates>
+        <DateRangeTemplate>
+            @((context as DateRangeTemplateContext).StartDate.ToString("dd MMMM yyyy", CultureInfo.CurrentCulture)) - @((context as DateRangeTemplateContext).EndDate.ToString("dd MMMM yyyy", CultureInfo.CurrentCulture))
+        </DateRangeTemplate>
+    </ScheduleTemplates>
+    <ScheduleViews>
+        <ScheduleView Option="View.Day"></ScheduleView>
+        <ScheduleView Option="View.Week"></ScheduleView>
+        <ScheduleView Option="View.WorkWeek"></ScheduleView>
+    </ScheduleViews>
+</SfSchedule>
+
+@code {
+    DateTime CurrentDate = new DateTime(2023, 1, 10);
+    
+    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; }
+    }
+}
+```
+
 ## TimelineYear header customization
 
 The day header cells and month header cells can be customized in the TimelineYear view of the Scheduler using [`DayHeaderTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleTemplates.html#Syncfusion_Blazor_Schedule_ScheduleTemplates_DayHeaderTemplate) and [`MonthHeaderTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleTemplates.html#Syncfusion_Blazor_Schedule_ScheduleTemplates_MonthHeaderTemplate). The [`DayHeaderTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleTemplates.html#Syncfusion_Blazor_Schedule_ScheduleTemplates_DayHeaderTemplate) option is used to customize the day header cells of the TimelineYear view in both Vertical and Horizontal orientations. The [`MonthHeaderTemplate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleTemplates.html#Syncfusion_Blazor_Schedule_ScheduleTemplates_MonthHeaderTemplate) option is used to customize the month header cells of the TimelineYear view in both Vertical and Horizontal orientations.
diff --git a/blazor/scheduler/images/blazor-scheduler-setWorkDays-resetWorkDays.png b/blazor/scheduler/images/blazor-scheduler-setWorkDays-resetWorkDays.png
new file mode 100644
index 0000000000..29008379aa
Binary files /dev/null and b/blazor/scheduler/images/blazor-scheduler-setWorkDays-resetWorkDays.png differ
diff --git a/blazor/scheduler/working-hours.md b/blazor/scheduler/working-hours.md
index e5f1f25e7b..dcb5861574 100644
--- a/blazor/scheduler/working-hours.md
+++ b/blazor/scheduler/working-hours.md
@@ -65,6 +65,117 @@ The following example code depicts how to set the Scheduler to display Monday, W
 
 ![Set Working Days in Blazor Scheduler](images/blazor-scheduler-workdays.png)
 
+## Dynamically setting work days
+
+The `SetWorkDaysAsync` and `ResetWorkDaysAsync` methods can be used to dynamically set and reset work days in the Scheduler. The `SetWorkDaysAsync` method accepts a list of dates to be set as working days, whereas `ResetWorkDaysAsync` resets specified work days when dates are passed and resets all the days in the current view to non-working days when called without passing any dates.
+
+Before setting up custom working days, you need to reset the default work days using the `ResetWorkDaysAsync` method. Note that both methods do not accept dates with an unspecified kind.
+
+In this example, we retrieve the current view dates during initial rendering, date and view navigations and reset all days to non-working days using `ResetWorkDaysAsync`. Then we remove common holiday dates from the current view dates. Then we loop through each resource and for each resource we exclude resource specific leave dates from the working dates and set their available days as working days using `SetWorkDaysAsync` method.
+
+```cshtml
+@using Syncfusion.Blazor.Schedule
+
+<SfSchedule @ref="ScheduleRef" TValue="AppointmentData" ShowWeekend="false" Height="650px" @bind-SelectedDate="@CurrentDate">
+    <ScheduleGroup Resources="@Resources"></ScheduleGroup>
+    <ScheduleResources>
+        <ScheduleResource TItem="ResourceData" TValue="int"
+        DataSource="@Employees" Field="EmployeeID" Title="Employee"
+        Name="Employees" TextField="Text" IdField="Id" ColorField="Color"></ScheduleResource>
+    </ScheduleResources>
+    <ScheduleEvents TValue="AppointmentData" Created="OnCreated" ActionCompleted="OnActionCompleted"></ScheduleEvents>
+    <ScheduleViews>
+        <ScheduleView Option="View.Month"></ScheduleView>
+        <ScheduleView Option="View.TimelineMonth"></ScheduleView>
+    </ScheduleViews>
+</SfSchedule>
+
+@code {
+    public SfSchedule<AppointmentData> ScheduleRef;
+    DateTime CurrentDate = new DateTime(2025, 1, 31);
+    public string[] Resources { get; set; } = { "Employees" };
+    public List<ResourceData> Employees { get; set; } = new List<ResourceData> {
+        new ResourceData{ Text = "John Doe", Id= 1, Color = "#df5286" },
+        new ResourceData{ Text = "Jane Smith", Id= 2, Color = "#7fa900" }
+    };
+    private List<DateTime> Holidays { get; set; } = new List<DateTime>
+    {
+            new DateTime(2025, 1, 1),
+            new DateTime(2025, 1, 26),
+            new DateTime(2025, 4, 18),
+            new DateTime(2025, 5, 1),
+            new DateTime(2025, 8, 15),
+            new DateTime(2025, 11, 12),
+            new DateTime(2025, 12, 25)
+    };
+    private Dictionary<int, List<DateTime>> EmployeeLeaves { get; set; } = new Dictionary<int, List<DateTime>>
+    {
+        { 1, new List<DateTime> {
+            new DateTime(2025, 1, 15),
+            new DateTime(2025, 1, 16),
+            new DateTime(2025, 1, 17)
+        }},
+        { 2, new List<DateTime> {
+            new DateTime(2025, 1, 6),
+            new DateTime(2025, 1, 7),
+            new DateTime(2025, 1, 8)
+        }}
+    };
+    private async Task OnCreated()
+    {
+        await SetWorkDays();
+    }
+    private async void OnActionCompleted(ActionEventArgs<AppointmentData> args)
+    {
+        if (args.ActionType == ActionType.ViewNavigate || args.ActionType == ActionType.DateNavigate)
+        {
+            await SetWorkDays();
+        }
+    }
+    private async Task SetWorkDays()
+    {
+        await ScheduleRef.ResetWorkDaysAsync();
+
+        List<DateTime> currentViewDates = ScheduleRef.GetCurrentViewDates();
+        List<DateTime> workDates = currentViewDates.Except(Holidays).ToList();
+
+        foreach (var employee in Employees)
+        {
+            if (EmployeeLeaves.TryGetValue(employee.Id, out var leaveDates))
+            {
+                List<DateTime> resourceWorkDays = workDates
+                    .Except(leaveDates)
+                    .Select(d => DateTime.SpecifyKind(d, DateTimeKind.Utc))
+                    .ToList();
+                int employeeIndex = ScheduleRef.GetGroupIndex(employee.Id, Resources[Resources.Length - 1]);
+                await ScheduleRef.SetWorkDaysAsync(resourceWorkDays, employeeIndex);
+            }
+        }
+    }
+    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; }
+        public int EmployeeID { get; set; }
+    }
+    public class ResourceData
+    {
+        public int Id { get; set; }
+        public string? Text { get; set; }
+        public string? Color { get; set; }
+    }
+}
+```
+![Set dynamic work Days in Blazor Scheduler](images/blazor-scheduler-setWorkDays-resetWorkDays.png)
+
 ## Hiding weekend days
 
 The [`ShowWeekend`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_ShowWeekend) property is used to either show or hide the weekend days of a week and it is not applicable on Work week view (as non-working days are usually not displayed on work week view). By default, it is set to `true`. The days which are not a part of the working days collection of a Scheduler are usually considered as non-working or weekend days.
diff --git a/blazor/skeleton/getting-started-webapp.md b/blazor/skeleton/getting-started-webapp.md
index 4743b4e04e..ea76beb2c7 100644
--- a/blazor/skeleton/getting-started-webapp.md
+++ b/blazor/skeleton/getting-started-webapp.md
@@ -21,9 +21,9 @@ This section briefly explains about how to include `Blazor Skeleton` component i
 
 ## Create a new Blazor Web App in Visual Studio
 
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+You can create a **Blazor Web App** using Visual Studio 2022 via [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).
 
-You need to configure the corresponding [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=windows) while creating a Blazor Web Application.
+You need to configure the corresponding [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) while creating a Blazor Web Application.
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Notifications and Themes NuGet in the App
 
diff --git a/blazor/speech-to-text/getting-started-web-app.md b/blazor/speech-to-text/getting-started-web-app.md
index f3f26251a4..2956b46f45 100644
--- a/blazor/speech-to-text/getting-started-web-app.md
+++ b/blazor/speech-to-text/getting-started-web-app.md
@@ -23,7 +23,7 @@ This section briefly explains about how to include [Blazor SpeechToText](https:/
 
 ## 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-7.0) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-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-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 Inputs NuGet in the App
 
diff --git a/blazor/spreadsheet/clipboard.md b/blazor/spreadsheet/clipboard.md
index cf9b29e7f2..3417bebfda 100644
--- a/blazor/spreadsheet/clipboard.md
+++ b/blazor/spreadsheet/clipboard.md
@@ -9,78 +9,391 @@ documentation: ug
 
 # Clipboard in Blazor Spreadsheet component
 
-The Spreadsheet provides support for clipboard operations such as **Cut**, **Copy**, and **Paste**. These operations can be enabled or disabled by setting the [`EnableClipboard`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_EnableClipboard) property in the Spreadsheet component. By default, the `EnableClipboard` property is set to **true**.
+The Spreadsheet supports clipboard operations such as **Cut**, **Copy**, and **Paste**. These operations can be enabled or disabled using the [EnableClipboard](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_EnableClipboard) property of the Spreadsheet component. By default, the `EnableClipboard` property is set to **true**.
+
+The keyboard shortcuts are available to perform clipboard operations efficiently within the Spreadsheet component. `Ctrl+C` copies the selected cells, `Ctrl+X` cuts the selected cells, and `Ctrl+V` pastes the content from the clipboard.
+
+When `EnableClipboard` is set to **false**, the **Cut** and **Copy** options are removed from the user interface (Ribbon and Context Menu). In addition, shortcut keys (**Ctrl+C, Ctrl+X, Ctrl+V**) and API methods will not work. If the worksheet is protected, clipboard operations such as cut and paste are also disabled. For more information on worksheet protection, refer [here](https://blazor.syncfusion.com/documentation/spreadsheet/protection#protect-sheet).
 
 ## Cut
 
-The cut operation removes data from a selected range of cells, rows, or columns in a sheet and places it on the clipboard for use elsewhere.
+The **Cut** operation removes data from selected cells, rows, or columns within a worksheet and temporarily stores the content on the clipboard. When the content is pasted to a new location, the original data is deleted from its source. This behavior enables the relocation of content within the Spreadsheet.
+
+### Cut operations via UI
+
+The **Cut** operation can be performed through the user interface (UI) using any of the following methods:
+
+**Using the Ribbon**
+
+- Select a cell or range of cells to cut the content.
+- Click the **Cut** button in the **Home** tab of the **Ribbon** toolbar. This action removes the selected cell or range of cells and places the content on the clipboard.
+
+![Cut - Ribbon](images/cut-copy.png)
+
+**Using the Context Menu**
+
+- Select a cell or range of cells to cut the content.
+- Right-click on the selected cell or range of cells.
+- Choose the **Cut** option from the context menu.
+
+![Cut - Context Menu](images/contextmenu-cut-copy.png)
+
+### Cut operations programmatically
+
+The [CutCellAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_CutCellAsync_System_String_) method allows performing cut operations within any sheet. This method copies the specified cell or range and its properties (including value, format, style, etc.) to the clipboard and removes it from the sheet. It supports multiple scenarios for cutting cells or ranges. Below are the details for each scenario, including code examples and parameter information.
+
+> The **Cut** operation will not execute if invalid or out-of-boundary cell ranges are specified. All cell references must fall within the defined worksheet boundaries to ensure successful execution of the operation.
+
+**Cut active range**
+
+When `CutCellAsync` method is invoked without any parameters, the content is automatically cut from the most recently selected range, provided an active selection exists. If no range is currently selected, the method defaults to cutting the content from the active cell.
+
+{% tabs %}
+{% highlight razor %}
+
+@using Syncfusion.Blazor.Spreadsheet
+
+<button @onclick="CutActiveCell">Cut Active Cell</button>
+
+<SfSpreadsheet @ref=SpreadsheetInstance DataSource="DataSourceBytes">
+    <SpreadsheetRibbon></SpreadsheetRibbon>
+</SfSpreadsheet>
+
+@code {
+    public byte[] DataSourceBytes { get; set; }
+    public SfSpreadsheet SpreadsheetInstance;
+
+    protected override void OnInitialized()
+    {
+        string filePath = "wwwroot/Sample.xlsx";
+        DataSourceBytes = File.ReadAllBytes(filePath);
+    }
+
+    public async Task CutActiveCell()
+    {
+        // Cuts content from the currently active cell or selected range in the active worksheet.
+        await SpreadsheetInstance.CutCellAsync();
+    }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+**Cut specific range in active sheet**
+
+To cut content from specific cells in the active worksheet, a cell address or a range of cell addresses must be passed as a parameter to the `CutCellAsync` method. When a valid cell or range is specified, the Spreadsheet component cuts the corresponding content and places it on the clipboard, making it available for pasting in another location.
+
+The available parameters in the `CutCellAsync` method are:
+
+| Parameter   | Type              | Description |
+|-------------|-------------------|-------------|
+| cellAddress | string (optional) | Specifies the target cell or range of cells to be cut. Accepts either a single cell reference (for example, **"A1"**) or a range (for example, **"A1:B5"**) from the active worksheet. If no parameter is provided, the currently selected cell or range will be used for the **Cut** operation. |
+
+{% tabs %}
+{% highlight razor %}
+
+@using Syncfusion.Blazor.Spreadsheet
+
+<button @onclick="CutCell">Cut Cell</button>
+<button @onclick="CutRange">Cut Range</button>
+
+<SfSpreadsheet @ref=SpreadsheetInstance DataSource="DataSourceBytes">
+    <SpreadsheetRibbon></SpreadsheetRibbon>
+</SfSpreadsheet>
+
+@code {
+    public byte[] DataSourceBytes { get; set; }
+    public SfSpreadsheet SpreadsheetInstance;
+
+    protected override void OnInitialized()
+    {
+        string filePath = "wwwroot/Sample.xlsx";
+        DataSourceBytes = File.ReadAllBytes(filePath);
+    }
+
+    public async Task CutCell()
+    {
+        // Cuts the specified cell from the active worksheet.
+        await SpreadsheetInstance.CutCellAsync("A2"); 
+    }
+
+    public async Task CutRange()
+    {
+        // Cuts a specified range of cells from the active worksheet.
+        await SpreadsheetInstance.CutCellAsync("A1:D10");
+    }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+**Cut specific range in different sheet**
+
+To cut content from a specific worksheet, the source sheet name must be included along with the cell reference in the parameter passed to the `CutCellAsync` method. When specifying a sheet name, an exclamation mark (**!**) must be used to separate the sheet name from the cell reference. Upon execution, the Spreadsheet component cuts the designated content and places it on the clipboard, making it available for pasting in another location.
+
+The available parameters in the `CutCellAsync` method are:
+
+| Parameter   | Type              | Description |
+|-------------|-------------------|-------------|
+| cellAddress | string (optional) | Specifies the cell or range of cells to be cut. Accepts either a single cell reference (for example, **"Sheet1!A1"**) or a range (for example, **"Sheet2!A1:C5"**) from a specific worksheet. If no parameter is provided, the currently selected cell or range from the active worksheet will be used for the cut operation. |
+
+{% tabs %}
+{% highlight razor %}
+
+@using Syncfusion.Blazor.Spreadsheet
+
+<button @onclick="CutCellFromSpecificSheet">Cut Cell from Specific Sheet</button>
+<button @onclick="CutRangeFromSpecificSheet">Cut Range from Specific Sheet</button>
+
+<SfSpreadsheet @ref=SpreadsheetInstance DataSource="DataSourceBytes">
+    <SpreadsheetRibbon></SpreadsheetRibbon>
+</SfSpreadsheet>
+
+@code {
+    public byte[] DataSourceBytes { get; set; }
+    public SfSpreadsheet SpreadsheetInstance;
+
+    protected override void OnInitialized()
+    {
+        string filePath = "wwwroot/Sample.xlsx";
+        DataSourceBytes = File.ReadAllBytes(filePath);
+    }
 
-**Cutting Data in Spreadsheet**
+    public async Task CutCellFromSpecificSheet()
+    {
+        
+        // Specifies the address, along with the worksheet name, from which the content will be cut.
+        await SpreadsheetInstance.CutCellAsync("Sheet1!B2");
+    }
 
-The cut operation can be performed through the following methods:
+    public async Task CutRangeFromSpecificSheet()
+    {
+        // Cuts a specified range from a specific worksheet.
+        await SpreadsheetInstance.CutCellAsync("Sheet2!B3:E8");
+    }
+}
 
-* Select the **Cut** button in the **HOME** tab of the Ribbon toolbar to execute the cut operation.
-* Right-click and select the **Cut** option from the context menu.
-* Press the keyboard shortcut `Ctrl + X`(Windows) or `Command + X`(Mac).
-* Using the [`CutCellAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_CutCellAsync_System_String_) method.
+{% endhighlight %}
+{% endtabs %}
 
 ## Copy
 
-The copy operation copies data from a selected range of cells, rows, or columns in a sheet and places it on the clipboard for use elsewhere.
+The **Copy** operation duplicates data from a selected range of cells, rows, or columns within a worksheet and temporarily stores it on the clipboard. Unlike the **Cut** operation, copying retains the original content in its source location, allowing the data to be reused without modification.
+
+### Copy operations via UI
+
+The copy operation can be performed through the user interface (UI) using any of the following methods:
+
+**Using the Ribbon**
+
+- Select the cell or range of cells to copy.
+- Click the **Copy** button in the **Home** tab of the **Ribbon** toolbar. This action duplicates the selected cell or range of cells and places the content on the clipboard.
+
+![Copy - Ribbon](images/cut-copy.png)
+
+**Using the Context Menu**
+
+- Select the cell or range of cells to copy.
+- Right-click on the selected cell or range of cells.
+- Choose the **Copy** option from the context menu.
+
+![Copy - Context Menu](images/contextmenu-cut-copy.png)
+
+### Copy operations programmatically
+
+The [CopyCellAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_CopyCellAsync_System_String_) method enables performing copy operations within any sheet. This method copies the specified cell or range of cells along with its properties (including value, format, style, etc.) to the clipboard. It supports multiple scenarios for copying cells or ranges. Below are the details for each scenario, including code examples and parameter information.
+
+> The **Copy** operation will not execute if invalid or out-of-boundary cell ranges are specified. All cell addresses must fall within the valid boundaries of the worksheet to ensure successful execution of the operation.
+
+**Copy active range**
+
+When `CopyCellAsync` method is invoked without any parameters, the content is automatically copied from the most recently selected range, provided an active selection exists. If no range is selected, the method defaults to copying the content from the active cell.
+
+{% tabs %}
+{% highlight razor %}
+
+@using Syncfusion.Blazor.Spreadsheet
+
+<button @onclick="CopyActiveCell">Copy Active Cell</button>
+
+<SfSpreadsheet @ref=SpreadsheetInstance DataSource="DataSourceBytes">
+    <SpreadsheetRibbon></SpreadsheetRibbon>
+</SfSpreadsheet>
+
+@code {
+    public byte[] DataSourceBytes { get; set; }
+    public SfSpreadsheet SpreadsheetInstance;
+
+    protected override void OnInitialized()
+    {
+        string filePath = "wwwroot/Sample.xlsx";
+        DataSourceBytes = File.ReadAllBytes(filePath);
+    }
+
+    public async Task CopyActiveCell()
+    {
+        // Copies content from the currently active cell or selected range in the active worksheet.
+        await SpreadsheetInstance.CopyCellAsync();
+    }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+**Copy specific range in active sheet**
+
+To copy content from specific cells in the active worksheet, a cell address or a range of cell addresses must be provided as a parameter to the `CopyCellAsync` method. When a valid cell or range is specified, the Spreadsheet component copies the corresponding content and places it on the clipboard, making it available for pasting in another location.
+
+The available parameters in the `CopyCellAsync` method are:
+
+| Parameter   | Type              | Description |
+|-------------|-------------------|-------------|
+| cellAddress | string (optional) | Specifies the cell or range of cells to be copied. Accepts either a single cell reference from the active worksheet (for example, **"A1"**) or a range (for example, **"A1:B5"**). If no parameter is provided, the currently selected cell or range will be used for the copy operation. |
+
+{% tabs %}
+{% highlight razor %}
+
+@using Syncfusion.Blazor.Spreadsheet
+
+<button @onclick="CopyCell">Copy Cell</button>
+<button @onclick="CopyRange">Copy Range </button>
+
+<SfSpreadsheet @ref=SpreadsheetInstance DataSource="DataSourceBytes">
+    <SpreadsheetRibbon></SpreadsheetRibbon>
+</SfSpreadsheet>
+
+@code {
+    public byte[] DataSourceBytes { get; set; }
+    public SfSpreadsheet SpreadsheetInstance;
 
-**Copying Data in Spreadsheet**
+    protected override void OnInitialized()
+    {
+        string filePath = "wwwroot/Sample.xlsx";
+        DataSourceBytes = File.ReadAllBytes(filePath);
+    }
 
-The copy operation can be performed through the following methods:
+    public async Task CopyCell()
+    {
+        // The specified cell is copied from the active worksheet.
+        await SpreadsheetInstance.CopyCellAsync("A2"); 
+    }
 
-* Select the **Copy** button in the **HOME** tab of the Ribbon toolbar to execute the copy operation.
-* Right-click and select the **Copy** option from the context menu.
-* Press the keyboard shortcut `Ctrl + C` (Windows) or `Command + C` (Mac).
-* Using the [`CopyCellAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_CopyCellAsync_System_String_) method.
+    public async Task CopyRange()
+    {
+        // A specified range of cells is copied from the active worksheet.
+        await SpreadsheetInstance.CopyCellAsync("A1:D10");
+    }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+**Copy specific range in different sheet**
+
+To copy content from a specific worksheet, the source sheet name must be included along with the cell reference in the parameter passed to the `CopyCellAsync` method. When specifying the sheet name, an exclamation mark (**!**) is used to separate it from the cell reference. The Spreadsheet component performs the copy operation and places the content on the clipboard, making it available for pasting into another location.
+
+The available parameters in the `CopyCellAsync` method are:
+
+| Parameter   | Type              | Description |
+|-------------|-------------------|-------------|
+| cellAddress | string (optional) | Specifies the cell or range of cells to be copied. Accepts either a single cell reference from a specific worksheet (for example, **"Sheet1!A1"**) or a range of cells (for example, **"Sheet2!A1:C5"**). If no value is provided, the currently selected cell or range from the active worksheet will be used for the copy operation. |
+
+{% tabs %}
+{% highlight razor %}
+
+@using Syncfusion.Blazor.Spreadsheet
+
+<button @onclick="CopyCellFromSpecificSheet">Copy Cell from Specific Sheet</button>
+<button @onclick="CopyRangeFromSpecificSheet">Copy Range from Specific Sheet</button>
+
+<SfSpreadsheet @ref=SpreadsheetInstance DataSource="DataSourceBytes">
+    <SpreadsheetRibbon></SpreadsheetRibbon>
+</SfSpreadsheet>
+
+@code {
+    public byte[] DataSourceBytes { get; set; }
+    public SfSpreadsheet SpreadsheetInstance;
+
+    protected override void OnInitialized()
+    {
+        string filePath = "wwwroot/Sample.xlsx";
+        DataSourceBytes = File.ReadAllBytes(filePath);
+    }
+
+    public async Task CopyCellFromSpecificSheet()
+    {
+        // The cell address, including the sheet name, is copied from the specified worksheet.
+        await SpreadsheetInstance.CopyCellAsync("Sheet1!B2");
+    }
+
+    public async Task CopyRangeFromSpecificSheet()
+    {
+        // A specified range of cells is copied from the designated worksheet.
+        await SpreadsheetInstance.CopyCellAsync("Sheet2!B3:E8");
+    }
+}
+
+{% endhighlight %}
+{% endtabs %}
 
 ## Paste
 
-The paste operation pastes data from the clipboard into a selected range of cells, rows, or columns. This includes all information such as values and formatting.
+The paste operation inserts data from the clipboard into a selected range of cells, rows, or columns, retaining all relevant details such as values, formats, and styles. When performing a **Cut** followed by **Paste**, the clipboard is cleared after the data is transferred. In contrast, with a **Copy** followed by **Paste**, the clipboard contents remain available for reuse. 
+
+**External clipboard** support is provided, allowing content to be pasted not only from within the spreadsheet but also from external sources such as Google Sheets, Microsoft Excel, Word documents, plain text files, and web pages.
+
+### Paste operations via UI
+
+The paste operation can be performed through the user interface (UI) using any of the following methods:
+
+**Using the Ribbon**
+
+- A cell must be selected or a range of cells highlighted before initiating the paste operation.
+- The **Paste** button located in the **Home** tab of the **Ribbon** toolbar must be clicked to perform the paste action.
+- The values previously cut or copied from the clipboard will be inserted into the selected range.
+- If the clipboard does not contain any values, the **Paste** option will remain disabled.
+
+![Paste - Ribbon](./images/cutcopypaste.png)
 
-External clipboard functionality is supported. When using cut and paste, the clipboard is cleared after pasting. With copy and paste, the clipboard contents remain unchanged.
+**Using the Context Menu**
 
-**Pasting Data in Spreadsheet**:
+- A cell must be clicked or a range of cells selected before initiating the paste operation.
+- The **Paste** option must be selected from the context menu accessed via right-click.
+- The values previously cut or copied from the clipboard will be inserted into the selected range.
+- If the clipboard does not contain any values, the **Paste** option will remain disabled.
 
-The paste operation can be performed through the following methods:
+![Paste - Context Menu](./images/contextcutcopypaste.png)
 
-* Select the **Paste** button in the **HOME** tab of the Ribbon toolbar to execute the paste operation.
-* Right-click and select the **Paste** option from the context menu.
-* Press the keyboard shortcut `Ctrl + V` (Windows) or `Command + V` (Mac).
-* Using the [`PasteCellAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_PasteCellAsync_System_String_) method.
+### Paste operations programmatically
 
-> When using the keyboard shortcut keys for cut (`Ctrl + X`) or copy (`Ctrl + C`) from external sources, use the `Ctrl + V` shortcut to paste content into the Spreadsheet.
+The [PasteCellAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_PasteCellAsync_System_String_) method pastes the clipboard content into a specified cell or range of cells and preserves all associated properties (including value, format, style, etc.). When the source range is larger than the specified target range, all data from the source will still be pasted. The paste operation automatically extends beyond the defined target boundaries and overrides the content in the expanded area to match the full dimensions of the source.
 
-![UI showing context menu cut, copy and paste option](./images/contextcutcopypaste.png)
+**Example**
+- Source Range: **"Sheet1!A1:C3"** (3 rows × 3 columns)
+- Target Range: **"Sheet2!B2"** (single cell)
 
-![UI showing ribbon cut, copy and paste option](./images/cutcopypaste.png)
+In this case, although only a single cell is selected as the target, the paste operation overrides the range **"Sheet2!B2:D4"** to match the full 3×3 source content.
+
+> The **Paste** operation will not be executed if invalid or out-of-boundary cell ranges are specified. All cell addresses must fall within the valid boundaries of the worksheet to ensure successful execution of the paste action.
+
+**Paste to active range**
+
+When the `PasteCellAsync` method is invoked without any parameters, the content is automatically pasted into the last selected range, provided an active selection exists. If no range is selected, the content is pasted into the active cell.
 
 {% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
- 
+{% highlight razor %}
+
 @using Syncfusion.Blazor.Spreadsheet
-@using Syncfusion.Blazor.SplitButtons
-
-<SfDropDownButton Content="Clipboard">
-    <DropDownMenuItems>
-        <DropDownMenuItem Text="Copy"></DropDownMenuItem>
-        <DropDownMenuItem Text="Cut"></DropDownMenuItem>
-        <DropDownMenuItem Text="Paste"></DropDownMenuItem>
-    </DropDownMenuItems>
-    <DropDownButtonEvents ItemSelected="ItemSelected">
-    </DropDownButtonEvents>
-</SfDropDownButton>
-
-<SfSpreadsheet @ref="SpreadsheetRef" DataSource="DataSourceBytes">
+
+<button @onclick="PasteActiveCell">Paste to Active Cell</button>
+
+<SfSpreadsheet @ref=SpreadsheetInstance DataSource="DataSourceBytes">
     <SpreadsheetRibbon></SpreadsheetRibbon>
 </SfSpreadsheet>
- 
+
 @code {
     public byte[] DataSourceBytes { get; set; }
-    public SfSpreadsheet SpreadsheetRef { get; set; }
+    public SfSpreadsheet SpreadsheetInstance;
 
     protected override void OnInitialized()
     {
@@ -88,57 +401,201 @@ The paste operation can be performed through the following methods:
         DataSourceBytes = File.ReadAllBytes(filePath);
     }
 
-    private async Task ItemSelected(MenuEventArgs args)
+    public async Task PasteActiveCell()
     {
-        if (args.Item.Text == "Cut")
-        {
-            await SpreadsheetRef.CutCellAsync();
-        }
+        // The content is pasted into the currently active cell or range.
+        await SpreadsheetInstance.PasteCellAsync();
+    }
+}
 
-        if (args.Item.Text == "Copy")
-        {
-            await SpreadsheetRef.CopyCellAsync();
-        }
+{% endhighlight %}
+{% endtabs %}
 
-        if (args.Item.Text == "Paste")
-        {
-            await SpreadsheetRef.PasteCellAsync();
-        } 
+**Paste to specific range in active sheet**
+
+To paste content into specific range in the current active sheet, provide the target cell address as a parameter to the `PasteCellAsync` method. A valid cell selection must exist prior to executing the paste operation. Either a single cell or a range of cells can be specified as the destination.
+
+The available parameters in the `PasteCellAsync` method are:
+
+| Parameter   | Type              | Description |
+|-------------|-------------------|-------------|
+| cellAddress | string (optional) | Specifies the target cell or range of cells for pasting clipboard content. Accepts either a single cell reference (for example, **"A1"**) or a range of cells (for example, **"A1:B5"**) from the active worksheet. A valid cell selection must exist prior to executing the paste operation. If no parameter is provided, the currently selected cell or range will be used as the paste destination. |
+
+{% tabs %}
+{% highlight razor %}
+
+@using Syncfusion.Blazor.Spreadsheet
+
+<button @onclick="PasteCell">Paste Cell</button>
+<button @onclick="PasteRange">Paste Range</button>
+<button @onclick="CopyAndPasteOversizedRange">Copy and Paste Oversized Range</button>
+
+<SfSpreadsheet @ref=SpreadsheetInstance DataSource="DataSourceBytes">
+    <SpreadsheetRibbon></SpreadsheetRibbon>
+</SfSpreadsheet>
+
+@code {
+    public byte[] DataSourceBytes { get; set; }
+    public SfSpreadsheet SpreadsheetInstance;
+
+    protected override void OnInitialized()
+    {
+        string filePath = "wwwroot/Sample.xlsx";
+        DataSourceBytes = File.ReadAllBytes(filePath);
+    }
+
+    public async Task PasteCell()
+    {
+        // The clipboard content is pasted into the specified cell.
+        await SpreadsheetInstance.PasteCellAsync("A2"); 
+    }
+
+    public async Task PasteRange()
+    {
+        // The clipboard content is pasted into the specified range of cells.
+        await SpreadsheetInstance.PasteCellAsync("A2:B5"); 
+    }
+    
+    // A larger source range is copied and pasted into a smaller target range.
+    public async Task CopyAndPasteOversizedRange()
+    {
+        // A range containing 7 rows is copied from the source.
+        await SpreadsheetInstance.CopyCellAsync("F3:F9");
+        
+        // The content is pasted into a smaller 3-row target range. All 7 rows will be pasted, extending beyond the specified range.
+        await SpreadsheetInstance.PasteCellAsync("A5:A7");
     }
 }
- 
+
 {% endhighlight %}
 {% endtabs %}
 
-### Prevent pasting
+**Paste to specific range in different sheet**
+
+To paste content into a specific sheet, include the target sheet name along with the cell reference as a parameter to the `PasteCellAsync` method. When specifying a sheet name, use an exclamation mark (**!**) to separate it from the cell reference.
+
+The available parameters in the `PasteCellAsync` method are:
 
-The following example illustrates how to prevent the paste action in the Spreadsheet. In the [`Pasting`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.PastingEventArgs.html) event, setting the `Cancel` argument to **true** prevents the paste operation.
+| Parameter   | Type              | Description |
+|-------------|-------------------|-------------|
+| cellAddress | string (optional) | Specifies the target cell or range of cells for pasting clipboard content. Accepts either a single cell reference from a specific worksheet (for example, **"Sheet1!A1"**) or a range of cells (for example, **"Sheet2!A1:C5"**). A valid cell selection must exist before executing the paste operation. If no parameter is provided, the currently selected cell or range will be used as the paste destination. |
+
+{% tabs %}
+{% highlight razor %}
+
+@using Syncfusion.Blazor.Spreadsheet
+
+<button @onclick="PasteCellToTargetSheet">Paste</button>
+
+<SfSpreadsheet @ref=SpreadsheetInstance DataSource="DataSourceBytes">
+    <SpreadsheetRibbon></SpreadsheetRibbon>
+</SfSpreadsheet>
+
+@code {
+    public byte[] DataSourceBytes { get; set; }
+    public SfSpreadsheet SpreadsheetInstance;
+
+    protected override void OnInitialized()
+    {
+        string filePath = "wwwroot/Sample.xlsx";
+        DataSourceBytes = File.ReadAllBytes(filePath);
+    }
+
+    public async Task PasteCellToTargetSheet()
+    {
+        // The cell address, including the sheet name, is used as the paste destination
+        await SpreadsheetInstance.PasteCellAsync("Sheet1!B2");
+    }    
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Events
+
+The Blazor Spreadsheet provides events that are triggered during the clipboard action such as [CutCopyActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.CutCopyActionBeginEventArgs.html) and  [Pasting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.PastingEventArgs.html). These events can be used to perform any custom actions before the clipboard action starts or interacted with, allowing for validation, customization, and response handling.
+
+* **CutCopyActionBegin** - `CutCopyActionBegin` event is triggered before a cut or copy operation is initiated.
+* **Pasting** - `Pasting` event is triggered prior to the initiation of a paste operation.
+
+### CutCopyActionBegin
+
+The `CutCopyActionBegin` event is triggered before a copy or cut operation is performed in the spreadsheet. This event allows inspection, validation, or cancellation of the operation based on custom business logic.
+
+**Purpose**
+
+This event addresses scenarios that require monitoring or restriction of clipboard operations, such as preventing sensitive data from being copied, logging clipboard activities for audit and compliance purposes, enforcing custom validation rules for designated cells or ranges, and restricting cut operations while allowing copy functionality.
+
+**Event Arguments**
+
+The `CutCopyActionBeginEventArgs` includes the following properties:
+
+| Event Arguments | Description |
+|----------------|-------------|
+| ClipboardAction | Specifies the type of clipboard operation in progress. Returns a value from the **ClipboardAction** enumeration, such as **ClipboardAction.Cut** or **ClipboardAction.Copy**. |
+| CopiedRange | Represents the full address of the cell range involved in the clipboard operation. Includes the worksheet name and range in A1 notation (e.g., **"Sheet1!A1:B5"**). |
+| Cancel | Indicates whether the clipboard operation should be cancelled. Set to **true** to prevent the cut or copy action from proceeding. |
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
  
 @using Syncfusion.Blazor.Spreadsheet
-@using Syncfusion.Blazor.SplitButtons
-
-<SfDropDownButton Content="Clipboard">
-    <DropDownMenuItems>
-        <DropDownMenuItem Text="Copy"></DropDownMenuItem>
-        <DropDownMenuItem Text="Cut"></DropDownMenuItem>
-        <DropDownMenuItem Text="Paste"></DropDownMenuItem>
-    </DropDownMenuItems>
-    <DropDownButtonEvents ItemSelected="ItemSelected">
-    </DropDownButtonEvents>
-</SfDropDownButton>
-
-<SfSpreadsheet @ref="SpreadsheetRef" DataSource="DataSourceBytes">
+
+<SfSpreadsheet DataSource="DataSourceBytes">
     <SpreadsheetRibbon></SpreadsheetRibbon>
-    <SpreadsheetEvents Pasting="OnBeforePasteHandler"></SpreadsheetEvents>
+    <SpreadsheetEvents CutCopyActionBegin="OnCutCopyActionBegin" ></SpreadsheetEvents>
 </SfSpreadsheet>
  
 @code {
     public byte[] DataSourceBytes { get; set; }
+    
+    protected override void OnInitialized()
+    {
+        string filePath = "wwwroot/Sample.xlsx";
+        DataSourceBytes = File.ReadAllBytes(filePath);
+    }
+
+    public void OnCutCopyActionBegin(CutCopyActionBeginEventArgs args)
+    {
+        // Cancels the cut or copy operation.
+        args.Cancel = true;
+    }
+}
+ 
+{% endhighlight %}
+{% endtabs %}
+
+### Pasting
+
+The `Pasting` event is triggered before data is pasted into the spreadsheet. This event allows inspection and validation of the paste operation before it is completed, with options to modify or cancel the operation entirely.
+
+**Purpose**
 
-    public SfSpreadsheet SpreadsheetRef { get; set; }
+This event is applicable in scenarios that require control over paste operations, such as validating data before allowing paste actions, restricting paste functionality to specific worksheets or cell ranges, applying data transformation rules during paste execution, and enforcing data integrity through oversight of paste operations.
+
+**Event Arguments**
+
+The `PastingEventArgs` includes the following properties:
+
+| Event Arguments | Description |
+|----------------|-------------|
+| ExternalClipboardData | An array of strings containing raw text data from external sources (like Excel or Google Sheets), with each element representing a row of data. Set to **null** when copying from within the workbook. |
+| CopiedRange | A string in the format **"SheetName!Range"** (e.g., **"Sheet1!A1:A10"**) representing the source location of the copied or cut content. Set to **null** when pasting external content. |
+| PasteRange | A string in the format **"SheetName!Range"** specifying the target cell range where content will be pasted. |
+| Cancel | A boolean value that can be set to **true** to prevent the paste operation, allowing event handlers to control the paste behavior. The default value is **false**. |
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+ 
+@using Syncfusion.Blazor.Spreadsheet
+
+<SfSpreadsheet DataSource="DataSourceBytes">
+    <SpreadsheetRibbon></SpreadsheetRibbon>
+    <SpreadsheetEvents Pasting="OnPasting" ></SpreadsheetEvents>
+</SfSpreadsheet>
+ 
+@code {
+    public byte[] DataSourceBytes { get; set; }   
 
     protected override void OnInitialized()
     {
@@ -146,28 +603,26 @@ The following example illustrates how to prevent the paste action in the Spreads
         DataSourceBytes = File.ReadAllBytes(filePath);
     }
 
-    private async Task ItemSelected(MenuEventArgs args)
+    public void OnPasting(PastingEventArgs args)
     {
-        if (args.Item.Text == "Cut")
+        // Cancels the paste operation if the target range includes "A1:B5".
+        if (args.PasteRange.Contains("A1:B5"))
         {
-            await SpreadsheetRef.CutCellAsync();
+            args.Cancel = true;
         }
 
-        if (args.Item.Text == "Copy")
+        // Checks external clipboard data for restricted content.
+        if (args.ExternalClipboardData != null)
         {
-            await SpreadsheetRef.CopyCellAsync();
+            foreach (var line in args.ExternalClipboardData)
+            {
+                if (line.Contains("Confidential"))
+                {
+                    args.Cancel = true;
+                    break;
+                }
+            }
         }
-
-        if (args.Item.Text == "Paste")
-        {
-            await SpreadsheetRef.PasteCellAsync();
-        } 
-    }
-
-    public void OnBeforePasteHandler(PastingEventArgs args)
-    {
-        // To cancel the paste action.
-        args.Cancel = true;
     }
 }
  
diff --git a/blazor/spreadsheet/contextmenu.md b/blazor/spreadsheet/contextmenu.md
index c0a1b39174..8c697c6b85 100644
--- a/blazor/spreadsheet/contextmenu.md
+++ b/blazor/spreadsheet/contextmenu.md
@@ -9,52 +9,121 @@ documentation: ug
 
 # Context Menu in Blazor Spreadsheet component
 
-The context menu is used to improve user interaction with the Spreadsheet component using the built-in popup menu. It opens when right-clicking on a cell, column header, row header, or sheet tab in the Spreadsheet. The [EnableContextMenu](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_EnableContextMenu) property can be used to enable/disable the context menu. The default value for the `EnableContextMenu` property is **true**.
+The context menu enhances interaction with the Syncfusion Blazor Spreadsheet component by displaying a popup with relevant operations when a right-click is performed on elements such as **cells**, **column headers**, **row headers**, or **sheet tabs**. Its visibility can be controlled via the [`EnableContextMenu`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_EnableContextMenu) property, which is set to **true** by default, enabling the context menu automatically.
 
-## Cell context menu options
+N> When the `EnableContextMenu` property is set to **false**, the context menu does not appear upon right-clicking any element in the component.
 
-Please find the table below for the default context menu options and their actions.
+## Context menu options categorized by element
+
+The context menu options are dynamically adjusted based on the specific element in the Spreadsheet that is right-clicked. Each element displays context-specific functionality relevant to its type.
+
+### Cell context menu options
+
+When a cell or range of cells is right-clicked, the context menu displays the following options:
 
 | Options | Action |
 | -- | -- |
-| Cut | Cut the selected cells data to the clipboard. The data can be pasted into a different cell location. |
-| Copy | Copy the selected cells data to the clipboard for pasting elsewhere. |
-| Paste | Paste the data from clipboard to Spreadsheet. |
-| Hyperlink | Create a link in the Spreadsheet to navigate to web links or cell reference within the sheet or other sheets in the Spreadsheet. |
-| Sort | Perform sorting to the selected range of cells by ascending or descending. |
-| Clear Contents | Remove the selected cells data. |
-| Filter | Perform filtering to the selected cells based on an active cells value. |
+| Cut | Removes data from the selected cells and temporarily stores it on the clipboard for reuse within the Spreadsheet or in an external application. |
+| Copy | Copies data from the selected cells and temporarily stores it on the clipboard for reuse within the Spreadsheet or in an external application. |
+| Paste | Inserts data from the clipboard into the currently selected cells. |
+| Hyperlink | Creates a navigational link to a web address or a cell reference within the current sheet or other sheets in the Spreadsheet. To know more about Hyperlink, refer [here](https://blazor.syncfusion.com/documentation/spreadsheet/hyperlink). |
+| Sort | Sorts the selected range of cells in ascending or descending order using sub-options. To know more about sorting, refer [here](https://blazor.syncfusion.com/documentation/spreadsheet/sorting). |
+| Clear Contents | Removes all data from the selected cells while retaining formatting properties. |
+| Filter | Applies a filter to the selected cells based on the value of the active cell. To know more about filtering, refer [here](https://blazor.syncfusion.com/documentation/spreadsheet/filtering). |
+
+![Context menu options for cell](./images/contextmenu-cell.png)
 
-![UI showing context menu options for cell](./images/cell-contextmenu.png)
+When a sheet is protected, the **Cut**, **Paste**, and **Clear Contents** functions are restricted to unlocked cells. The **Hyperlink**, **Sort**, and **Filter** options are available only when explicitly enabled in the protection sheet option settings and applied to unlocked cells.
 
-## Row and column header context menu options
+![Context menu protection sheet option for cell](./images/contextmenu-protectcell.png)
+
+### Row header context menu options
+
+When right-clicking a single row header or a range of selected row headers, the context menu displays the following options:
 
-Please find the table below for the default context menu options and their actions.
 
 | Options | Action |
 | -- | -- |
-| Cut | Cut the selected row/column header data to the clipboard. The data can be pasted into a different cell location. |
-| Copy | Copy the selected row/column header data to the clipboard for pasting elsewhere. |
-| Paste | Paste the data from the clipboard to Spreadsheet. |
-| Insert Rows / Insert Columns | Insert new rows or columns into the worksheet. |
+| Cut | Removes data from the selected rows and temporarily stores it on the clipboard for reuse within the Spreadsheet or in an external application. |
+| Copy | Copies data from the selected rows and temporarily stores it on the clipboard for reuse within the Spreadsheet or in an external application. |
+| Paste | Inserts data from the clipboard into the Spreadsheet at the current selection. |
+| Insert Rows Above | Adds new rows above the selected rows. The number of rows inserted matches the number of rows selected. |
+| Insert Rows Below | Adds new rows below the selected rows. The number of rows inserted matches the number of rows selected. |
+
+![Context menu options for row-header](./images/contextmenu-row.png)
 
-![UI showing context menu options for row header](./images/row-header-contextmenu.png)
+When a sheet is protected, **Insert Rows Above** and **Insert Rows Below** options are accessible only when the **Insert Rows** permission is enabled in the protection sheet option settings.
 
-![UI showing context menu options for column header](./images/column-header-contextmenu.png)
+![Context menu row protection sheet option](./images/contextmenu-protectrow.png)
 
-## Sheet tab context menu options
+### Column header context menu options
 
-Please find the table below for the default context menu options and their actions.
+When right-clicking a single column header or a range of selected column headers, the context menu displays options specific to column-level operations.
 
 | Options | Action |
 | -- | -- |
-| Insert | Insert a new worksheet after the existing worksheet in the Spreadsheet. |
-| Delete | Delete the selected worksheet from the Spreadsheet. |
-| Duplicate | Create a copy of the selected worksheet in the Spreadsheet. |
-| Rename | Rename the selected worksheet. |
-| Protect Sheet / Unprotect Sheet | Protect sheet prevents unwanted changes from others by limiting their ability to edit. Unprotect sheet removes these restrictions. |
-| Move Right | Move the selected worksheet to the right of the next sheet. |
-| Move Left | Move the selected worksheet to the left of the previous sheet. |
-| Hide | Hide the selected worksheet. |
-
-![UI showing context menu options for sheet tab](./images/sheet-tab-contextmenu.png)
\ No newline at end of file
+| Cut | Removes data from the selected columns and temporarily stores it on the clipboard for reuse within the Spreadsheet or in an external application. |
+| Copy | Copies data from the selected columns and temporarily stores it on the clipboard for reuse within the Spreadsheet or in an external application. |
+| Paste | Inserts data from the clipboard into the Spreadsheet at the current selection. |
+| Insert columns  to the left |  Adds new columns to the left of the selected columns. The number of columns inserted matches the number of columns selected. |
+| Insert columns  to the right | Adds new columns to the right of the selected columns. The number of columns inserted matches the number of columns selected. |
+
+![Context menu options for column-header](./images/contextmenu-column.png)
+
+When a sheet is protected, **Insert column to the left** and **Insert column to the right** options are accessible only when the **Insert Columns** permission is enabled in the protection sheet option settings.
+
+![Context menu column protection sheet option](./images/contextmenu-protectcolumn.png)
+
+### Sheet tab context menu options
+
+When right-clicking on a sheet tab located at the bottom of the Spreadsheet, the context menu displays options specific to sheet-level operations.
+
+| Options | Action |
+| -- | -- |
+| Insert |  Inserts a new sheet immediately after the currently active sheet. |
+| Delete | Deletes the selected sheet from the Spreadsheet. This option is disabled when only one sheet exists. |
+| Duplicate | Creates an exact copy of the selected sheet, including content, formatting, and settings. The duplicate is positioned immediately after the current sheet. |
+| Rename | Opens a dialog box to modify the name of the selected sheet. |
+| Protect Sheet / Unprotect Sheet | The **Protect Sheet** / **Unprotect Sheet** option dynamically switches based on the current protection status of the sheet. When the sheet is unprotected, the context menu displays **Protect Sheet** to restrict editing. Once protection is applied, the option changes to **Unprotect Sheet**, allowing removal of those restrictions. |
+| Move Right | Moves the selected sheet one position to the right in the tab sequence. Disabled when only one sheet is visible or when the last sheet is selected. |
+| Move Left | Moves the selected sheet one position to the left in the tab sequence. Disabled when only one sheet is visible or when the first sheet is selected. |
+| Hide | Hides the selected sheet within the Spreadsheet. This option is disabled when only one sheet is visible. |
+
+![Context menu options for sheet tab](./images/contextmenu-sheettab.png)
+
+Sheet tab context menu behavior is controlled by workbook-level protection. In protected workbook, only the **Protect Sheet** or **Unprotect Sheet** option remains active. All other options like **Insert**, **Delete**, **Rename**, **Move Right**, **Move Left**, **Hide**, and **Duplicate** are disabled to preserve workbook structure.
+
+## Properties that influence context menu options
+
+These properties control specific context menu functionality:
+
+| Property | Default | Effect when set to "false" |
+| -- | -- | -- |
+| `EnableClipboard` | true | Removes the **Cut**, **Copy**, and **Paste** options from all context menus throughout the Spreadsheet |
+| `AllowSorting` | true | Removes the **Sort** option from the context menu, preventing sorting operations. |
+| `AllowFiltering` | true | Removes the **Filter** option from the context menu, disabling filtering capabilities. |
+| `AllowHyperlink` | true | Removes all hyperlink-related options from the context menu, preventing hyperlink operations. |
+
+![Context menu options when disabling the properties](./images/contextmenu-propertyaffect.png)
+
+{% tabs %}
+{% highlight razor %}
+
+@using Syncfusion.Blazor.Spreadsheet
+
+<SfSpreadsheet DataSource="DataSourceBytes" AllowFiltering="false" AllowSorting="false" EnableClipboard="false" AllowHyperlink="false">
+    <SpreadsheetRibbon></SpreadsheetRibbon>
+</SfSpreadsheet>
+
+@code {
+    public byte[] DataSourceBytes { get; set; }
+
+    protected override void OnInitialized()
+    {
+        string filePath = "wwwroot/Sample.xlsx";
+        DataSourceBytes = File.ReadAllBytes(filePath);
+    }
+}
+
+{% endhighlight %}
+{% endtabs %}
\ No newline at end of file
diff --git a/blazor/spreadsheet/editing.md b/blazor/spreadsheet/editing.md
index 6376fe08fe..88b04b5027 100644
--- a/blazor/spreadsheet/editing.md
+++ b/blazor/spreadsheet/editing.md
@@ -1,39 +1,93 @@
 ---
 layout: post
-title: Cell Editing in Blazor Spreadsheet component | Syncfusion
+title: Cell Editing in the Blazor Spreadsheet component | Syncfusion
 description: Checkout and learn here about the cell editing features in the Syncfusion Blazor Spreadsheet component and more.
 platform: Blazor
 control: Spreadsheet
 documentation: ug
 ---
 
-# Editing in Blazor Spreadsheet component
+# Cell editing in the Blazor Spreadsheet component
 
-The contents of a cell can be edited directly within the cell or by typing in the formula bar. By default, the editing feature is enabled in the Spreadsheet. Use the [AllowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AllowEditing) property to enable or disable the editing feature.
+Cell editing in the Blazor Spreadsheet component enables modification of cell content either directly within the spreadsheet or through the formula bar. This feature is enabled by default and can be controlled using the [AllowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AllowEditing) property. To disable or enable cell editing, set the value of this property accordingly.
 
 ## Edit cell
 
-Editing can be started in one of the following ways,
+Cell editing can be initiated directly through the UI using any of the following options:
 
-* Double-click a cell to start edit mode.
-* Press the `F2` key to edit the active cell.
-* Use the formula bar to perform editing.
-* Press `BACKSPACE` or `SPACE` key to clear the cell content and start edit mode.
+- **Double-click** a cell to enter edit mode.  
+- Press **F2** to activate editing for the selected cell.  
+- Use the **formula bar** to modify the cell's contents.  
+- Press **BACKSPACE** or **SPACE** to clear the cell and begin editing.
 
-## Save cell
+> For additional keyboard shortcuts related to cell editing, refer [here](https://blazor.syncfusion.com/documentation/spreadsheet/accessibility#keyboard-shortcuts).
 
-If the cell is in an editable state, the edited cell can be saved in one of the following ways,
+## Update cell
 
-* Click any other cell except the one currently being edited.
+When a cell is in an editable state, the updated content can be saved using one of the following methods:
 
-* Press the `Enter` or `Tab` key to save the edited cell.
+* **Click** any cell other than the one currently being edited.
+* Press **Enter** or **Tab** to save changes and move the selection.
+
+### Update cell programmatically
+
+Cell updates can be performed programmatically using the `UpdateCellAsync` method, which supports values such as strings, numbers, booleans, and formulas. This method modifies the content of a designated cell and is suitable for tasks requiring precise changes, such as updating statuses or values in specific locations. The cell address must include the sheet name—for example, **Sheet1!A1**—to enable updates across different sheets within the same workbook.
+
+If a cell address is incorrectly formatted, refers to a non-existent sheet, or lies outside the valid range, the update is skipped without triggering an error. When a range is specified, such as **A1:B5**, the method automatically assigns the provided value to each cell within that range, allowing efficient batch updates.
+
+| Parameter     | Type   | Description |
+|---------------|--------|-------------|
+| cellAddress | string | Specifies the address of the cell to update, including the sheet name (e.g., **Sheet1!A1**). Updates can be performed across different sheets. Invalid addresses—such as those referencing non-existent sheets or using improperly formatted cell references—are skipped without error. |
+| cellValue | object | Defines the new value to assign to the cell. Supported types include strings, numbers, booleans, and formulas (e.g., `=SUM(A1:B1)`). When a range is specified (e.g., **A1:B5**), the value is automatically applied to all cells within the range. |
+
+{% tabs %}
+{% highlight razor %}
+
+@using Syncfusion.Blazor.Spreadsheet
+
+<button @onclick="UpdateCell">Update Cell</button>
+
+<SfSpreadsheet @ref=SpreadsheetRef DataSource="DataSourceBytes">
+    <SpreadsheetRibbon></SpreadsheetRibbon>
+</SfSpreadsheet>
+
+@code {
+
+    public byte[] DataSourceBytes { get; set; }
+    public SfSpreadsheet SpreadsheetRef;
+
+    protected override void OnInitialized()
+    {
+        string filePath = "wwwroot/Sample.xlsx";
+        DataSourceBytes = File.ReadAllBytes(filePath);
+    }
+
+    private async Task UpdateCell()
+    {
+        // Updates cell A3 with a product name.
+        await SpreadsheetRef.UpdateCellAsync("Sheet1!A3", "Tablet");
+
+        // Updates cell B3 with a numeric value.
+        await SpreadsheetRef.UpdateCellAsync("Sheet1!B3", 799);
+
+        // Updates cell C3 with a formula.
+        await SpreadsheetRef.UpdateCellAsync("Sheet1!C3", "=SUM(A3:B3)");
+    }
+}
+
+{% endhighlight %}
+{% endtabs %}
 
 ## Cancel editing
 
-To cancel editing without saving changes, press the `ESCAPE` key. This exits the editable state and restores the original cell content.
+To exit edit mode without saving changes, press the **ESCAPE** key. This action restores the original content of the cell and cancels any modifications made during editing.
+
+![Cancel Editing](./images/cell-editing.gif)
 
-The following animation illustrates basic cell editing operations in the Spreadsheet component, including double-clicking a cell to enter edit mode, editing values directly, saving changes by pressing `ENTER` key, and canceling edits with the `ESCAPE` key.
+## Cell editing in protected sheet
 
-![UI showing cell editing](./images/cell-editing.gif)
+In a protected sheet, only the unlocked ranges can be edited based on the sheet's protection settings. Attempting to modify a locked range triggers an error message, as shown below:
 
+![Protection Error Dialog](./images/protection-error-dialog.png)
 
+N> For more information on worksheet protection, refer [here](https://blazor.syncfusion.com/documentation/spreadsheet/protection).
diff --git a/blazor/spreadsheet/filtering.md b/blazor/spreadsheet/filtering.md
index 25a8bea5fb..bf81164feb 100644
--- a/blazor/spreadsheet/filtering.md
+++ b/blazor/spreadsheet/filtering.md
@@ -7,202 +7,284 @@ control: Spreadsheet
 documentation: ug
 ---
 
-# Filtering in Blazor Spreadsheet component
+# Filtering in Blazor Spreadsheet Component
 
-Filtering in the Spreadsheet component enables the display of only relevant rows based on specified criteria, facilitating focused data analysis. To control this functionality, the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AllowFiltering) property can be used to enable or disable filtering operations in the Spreadsheet. The default value of the `AllowFiltering` property is **true**.
+Filtering in the Blazor Spreadsheet component enables focused data analysis by displaying only the rows that meet specific criteria. This functionality helps create interactive views by hiding rows that do not match the filtering conditions. Filtering behavior is controlled using the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AllowFiltering) property, which is set to **true** by default.
 
-## Filter operations
+N> When `AllowFiltering` is set to **false**, filtering options are disabled in the ribbon and removed from the context menu. API methods related to filtering will also be inactive. Additionally, if the worksheet is protected, the filtering feature is disabled. For more information on worksheet protection, refer [here](https://blazor.syncfusion.com/documentation/spreadsheet/protection#protect-sheet).
 
-The Blazor Spreadsheet provides multiple filtering options to manage and analyze data effectively:
+Filtering can be accessed through the user interface using the following method:
 
-* **Filter by Cell Value** - Displays only the rows containing values that match a specific cell's content.
-* **Clear Filter** - Removes any active filters applied to columns.
-* **Reapply Filter** - Updates filtering results after changes are made to the data.
+- Select the **Home** tab in the **Ribbon**.
+- Click the **Sort & Filter** icon.
+- Choose the **Filter** option.
 
-**Accessing filter options via the UI**
+This action enables filter buttons in the header cells of each column, allowing direct interaction with filtering options.
 
-In the active sheet, filtering can be accessed using any of the following methods:
+![Enable filtering via Ribbon](./images/ribbon-filter.png)
 
-* **Using Ribbon Toolbar**:
-   * Select the **Sort & Filter** icon from the **Home** tab
-   * Click the filtering option required
+## Excel-like filter dialog
 
-   ![Filter options via the Ribbon toolbar](./images/ribbon-filter.png)
+The Blazor Spreadsheet includes a comprehensive Excel-like filter dialog that adapts dynamically to the data type in the selected column. The filter dialog provides intuitive filtering mechanisms designed for different data types and analysis needs.
 
-* **Using Context Menu**:
-   * Right-click the selected cell
-   * Choose the **Filter** option from the context menu
+The filter dialog appears when clicking on a column's filter icon and provides the following features:
 
-   ![Filter options via the context menu](./images/contextmenu-filter.png)
+* **Sort options** - Provides commands for sorting data in **Ascending** or **Descending** order.
+* **Clear filter** - Removes any filtering applied to the selected column.
+* **Data type-specific filters** - Displays sub menus tailored to the column's content type, such as **Text Filters**, **Number Filters**, or **Date Filters**.
+* **Search box** - Enables quick lookup of values within the filter list.
+* **Select All** checkbox - Toggles the selection of all available values in the column.
+* **Value** checkboxes - Lists individual checkboxes for each unique value found in the column.
 
-## Filter by cell value
+![Filter dialog](./images/checkbox-filter.png)
 
-The Blazor Spreadsheet component allows filtering of data to display only rows that contain values matching a specific cell's content. This provides a quick way to focus on particular data subsets without the need to create complex filter conditions.
+### Data type-specific filters
 
-### Applying cell value filter via the UI
+When applying filters in the Blazor Spreadsheet component, the filter menu dynamically adapts based on the data type of the column. This ensures that only relevant filtering options are presented, improving usability and accuracy.
 
-To filter rows by a specific cell's value:
+**Text filters**
 
-* Right-click the target cell
-* Select **Filter By Value of Selected Cell** from the context menu
-* The Spreadsheet automatically applies filtering to show only rows containing the selected value
+Text filters enable filtering based on specific string conditions. When applied to text-based columns, the **Text Filters** submenu provides the following operators:
 
-![Cell value filtering interface](./images/filterbycellvalue-filter.png)
+| Operator | Description |
+| -- | -- |
+| Equal | Displays rows with cell values that exactly match the specified text. |
+| Not Equal | Displays rows with cell values that do not match the specified text. |
+| Starts With | Displays rows with cell values that begin with the specified text. |
+| Does Not Start With | Displays rows with cell values that do not begin with the specified text. |
+| Ends With | Displays rows with cell values that end with the specified text. |
+| Does Not End With | Displays rows with cell values that do not end with the specified text. |
+| Contains | Displays rows with cell values that include the specified text. |
+| Does Not Contain | Displays rows with cell values that do not include the specified text. |
+| Custom Filter | Opens a dialog for defining advanced filter conditions. Multiple criteria can be combined using logical operators such as **AND** and **OR**. Each condition supports standard text operators and custom input values, enabling precise and flexible filtering.  For text-based filtering, the dialog also includes a **Match Case** option. When enabled, this option applies case-sensitive filtering to the specified conditions. The **Match Case** checkbox is displayed only when filtering text data, ensuring relevance to the data type being processed. |
 
-### Applying cell value filter programmatically
+![Text filter](./images/text-filter-options.png)
 
-The Spreadsheet component supports programmatic filtering using the [FilterByCellValueAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_FilterByCellValueAsync_System_Object_System_String_) method. This method applies filtering based on the specified value and cell range.
+**Number filters**
 
-{% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
+Number filters provide specialized filtering options for columns containing numeric data. The **Number Filters** menu includes a range of comparison operators that support precise value-based filtering:
 
-@using Syncfusion.Blazor.Spreadsheet
+| Operator | Description |
+| -- | -- |
+| Equal | Displays rows where the cell value exactly match the specified number. |
+| Not Equal | Displays rows where the cell value does not match the specified number. |
+| Less Than | Displays rows where the cell value is less than the specified number. |
+| Less Than Or Equal | Displays rows where the cell value is less than or equal to the specified number. |
+| Greater Than | Displays rows where the cell value is greater than the specified number. |
+| Greater Than Or Equal | Displays rows where the cell value falls within a specified numeric range. |
+| Between | Displays rows with cell values that include the specified text. |
+| Custom Filter | Opens a dialog for defining advanced numeric filter conditions. This dialog allows the combination of multiple criteria using logical operators such as **AND** and **OR**. Each condition can be configured using numeric comparison operators and custom values, enabling flexible and targeted filtering of numerical data. |
 
-<button @onclick="ApplyFilter">Filter by Value</button>
+![Number filter](./images/number-filter.png)
 
-<SfSpreadsheet @ref="SpreadsheetRef" DataSource="DataSourceBytes">
-    <SpreadsheetRibbon></SpreadsheetRibbon>
-</SfSpreadsheet>
+**Date filters**
 
-@code {
+The date filters provide specialized filtering options for columns containing date values. The component automatically detects date columns and offers both standard filtering options and date-specific filtering:
 
-    public byte[] DataSourceBytes { get; set; }
-    public SfSpreadsheet SpreadsheetRef;
+| Operator | Description |
+| -- | -- |
+| Equal | Displays rows where the cell value exactly match the specified value. |
+| Not Equal | Displays rows where the cell value does not match the specified value. |
+| Less Than | Displays rows where the date is earlier than the specified value. |
+| Greater Than | Displays rows where the date is later than the specified value. |
+| Between | Displays rows where the date falls within a defined date range. |
+| This Month | Filters rows where the date falls within the current calendar month. |
+| Last Month | Filters rows where the date falls within the previous calendar month. |
+| Next Month | Filters rows where the date falls within the next calendar month. |
+| This Quarter | Filters rows where the date falls within the current quarter. |
+| Last Quarter | Filters rows where the date falls within the previous quarter. |
+| Next Quarter | Filters rows where the date falls within the next quarter. |
+| This Year | Filters rows where the date falls within the current year. |
+| Last Year | Filters rows where the date falls within the previous year. |
+| Next Year | Filters rows where the date falls within the next year. |
+| Custom Filter | Opens a dialog to define complex date-based conditions using logical operators such as **AND** and **OR**. This dialog allows combining multiple criteria to perform precise filtering based on date values.  |
 
-    protected override void OnInitialized()
-    {
-        string filePath = "wwwroot/Sample.xlsx";
-        DataSourceBytes = File.ReadAllBytes(filePath);
-    }
+**Date hierarchy and grouping**
 
-    public async Task ApplyFilter()
-    {
-        // Filter column A for "New York".
-        await SpreadsheetRef.FilterByCellValueAsync("New York", "A1"); 
-    }
-}
+The component organizes date values into a structured, expandable hierarchy to simplify filtering and navigation. This is especially helpful when working with large datasets that span multiple months or years.
 
-{% endhighlight %}
-{% endtabs %}
+Hierarchical Structure:
 
-## Filtering data with Excel Filter Dialog
+* **Year Level** - Dates are first grouped by year. For example, all dates from 2023 are grouped under **2023**.
+* **Month Level** - Within each year, dates are further grouped by month. For instance, under **2023**, months like **January**, **February**, etc., are listed.
+* **Day Level** - Expanding a month reveals individual day entries. For example, under **2023 → January**, dates like **10**, **15**, and **28** are shown.
+* **Expand/collapse controls** - Each year and month group includes a toggle control to expand or collapse its contents. This helps reduce clutter and allows for focused viewing of specific time periods.
+* **Group selection** - Entire groups—such as a full year or a specific month—can be selected or deselected with a single click. This enables quick filtering without manually selecting each date.
 
-The Blazor Spreadsheet component offers several types of filtering mechanisms for different data analysis needs:
+This hierarchical approach makes it easier to browse, locate, and filter date-based data efficiently.
 
-### Excel-style checkbox filter
+![Date filter](./images/date-filter.gif)
 
-The checkbox filter provides a simple way to filter data by checking or unchecking values in a column. When a filter is applied to a column, a dropdown button appears in the column header. Clicking this button displays a menu with the following options:
+**Custom filter**
 
-* **Sort options** - Ascending and descending sort commands
-* **Clear filter** - Option to remove all filtering applied to the column
-* **Data filter** - Submenu containing data type-specific filtering options (Text, Number, and Date) that change dynamically based on the column's content type
-* **Search box** - For quickly finding values in the list
-* **Select All checkbox** - Toggles selection of all values
-* **Value checkboxes** - Individual checkboxes for each unique value in the column
+The **Custom Filter** dialog enables advanced filtering by allowing the definition of multiple conditions using logical operators. This dialog adapts dynamically based on the data type of the column being filtered.
 
-This interface enables quick filtering of data by simply checking or unchecking values to include or exclude them from the view.
+* **First condition**
+  * **Operator dropdown** - Select a filter type such as Equals, Contains, Greater Than, or Before. The available options vary based on the data type of the column being filtered.
+  * **Value field** - Enter the value to compare against the selected operator. This can be a word, number, or date, depending on the column's data type.
+* **Logical operator**
+    * Choose how two conditions should be combined:
+        * **AND** – Both conditions must be true.
+        * **OR** – At least one condition must be true.
+* **Match case (Text only)**
+    * Available only for text columns.
+    * Enable this option to make the filter case-sensitive (e.g., **"Apple" ≠ "apple"**)
+* **Second condition**:
+  * **Operator dropdown** - Select a filter type for the second condition. Available options are the same as those provided for the first condition and vary based on the data type.
+  * **Value field** - Enter a value to compare against the selected operator. This field supports text, numeric, and date inputs, depending on the data type of the column being filtered.
 
-![Checkbox filter](./images/checkbox-filter.png)
+The operators available in the custom filter dialog change dynamically based on the data type:
 
-### Text filters
+| Data Type  | Supported Operators |
+| -- | -- |
+| Text | Starts With, Does Not Start With, Ends With, Does Not End With, Contains, Does Not Contain, Equals, Not Equal. |
+| Number | Equals, Not Equal, Greater Than, Greater Than Or Equal, Less Than, Less Than Or Equal. |
+| Date | Equals, Not Equal, Greater Than, Greater Than Or Equal, Less Than, Less Than Or Equal. |
 
-The text filters enable filtering based on specific text conditions. Clicking the **Text Filters** option in the filter dropdown reveals additional filtering criteria:
+![Custom filter](./images/custom-filter.png)
 
-* **Equal** - Shows rows where the cell value exactly matches the specified text
-* **Not Equal** - Shows rows where the cell value does not match the specified text
-* **Starts With** - Shows rows where the cell value begins with the specified text
-* **Ends With** - Shows rows where the cell value ends with the specified text
-* **Contains** - Shows rows where the cell value includes the specified text
-* **Does Not Contain** - Shows rows where the cell value does not include the specified text
-* **Custom Filter** - Opens a dialog for creating more complex filter conditions
+### Add current selection to filter
 
-![Text filter](./images/text-filter-options.png)
+The **Add current selection to filter** option appears below the search box in the filter dialog. It allows multiple filter selections to be combined without clearing previous ones. By default, applying a new filter to a column replaces any existing selections. Enabling this option ensures that new selections are added to the existing filter criteria instead of replacing them.
 
-### Date filters
+**How it works**
+- Open the filter dialog for a column.
+- The search box enables quick identification of specific values within the filter list.
+- Check the **Add current selection to filter** box.
+- Select additional values to include in the filter.
+- Apply the filter. 
 
-The date Filters provide specialized filtering options for columns containing date values. When working with date columns, clicking the filter button displays a dropdown with both standard filtering options and date-specific filtering:
+The new values are added to the existing filter set, making this feature especially useful for building complex filters incrementally without losing earlier selections.
 
+![Add current selection UI](./images/add-current-selection-to-filter.png)
 
-* **Equal** - Shows rows where the date exactly matches a specified date
-* **Not Equal** - Shows rows where the date does not match a specified date
-* **Today** - Shows only entries with today's date
-* **Yesterday** - Shows only entries with yesterday's date
-* **Tomorrow** - Shows only entries with tomorrow's date
-* **This Week** - Shows entries within the current week
-* **Last Week** - Shows entries from the previous week
-* **Next Week** - Shows entries for the upcoming week
-* **This Month/Last Month/Next Month** - Filters by monthly periods
-* **This Quarter/Last Quarter/Next Quarter** - Filters by quarterly periods
-* **This Year/Last Year/Next Year** - Filters by annual periods
-* **Custom Filter** - Opens a dialog for creating more complex filter conditions
+### Mixed data handling
 
-**Date grouping**
+The filter dialog intelligently handles columns containing mixed data types:
 
-The date values are automatically grouped by year and month for easier filtering of large date ranges
-  * Expand/collapse year groups using the arrow indicators
-  * Select/deselect entire years or specific months with checkboxes
+* **Automatic type detection** 
+    - The system analyzes the column's content to identify the most common data type and adjusts the filter behavior accordingly.
+    - **Example:** If most values in a column are numbers but a few are text, the filter treats the column as numeric and shows number-based filter options.
 
-![Date filter](./images/date-filter.gif)
+* **Type-based grouping** 
+    - When filtering a column that contains mixed data types, the filter checkbox list organizes values into groups based on their type. This grouping helps improve readability and ensures consistent filtering behavior.
+    
+    - **Example:** A column with values **100, "Done", TRUE, blank and 12/07/2025** cell will display them grouped in the filter list in the following order:
+    **Boolean → Number → Date → Text → Blank**
+    **TRUE, 100, 12/07/2025, "Done", and (Blank)**
 
-### Number filters
+* **Special handling for empty values** 
+    - Empty cells are shown as **(Blank)** in the filter list, making them easy to identify and select.
+    - **Example:** If a column has some missing values, these cells appear as **(Blank)** in the filter, allowing users to include or exclude them.
 
-The number filters offer specialized filtering options for columns containing numeric data. The **Number Filters** menu provides both value-based filtering and comprehensive comparison operators:
+* **Search across types** 
+    - The search box works across all data types in the column.
+    - **Example:** Typing 100 in the search box will return both the number 100 and the text "100" if both exist in the column.
 
-* **Equal** - Shows rows where values exactly match a specified number
-* **Not Equal** - Shows rows where values do not match a specified number
-* **Less Than** - Shows rows where values are smaller than a specified number
-* **Less Than Or Equal** - Shows rows where values are smaller than or equal to a specified number
-* **Greater Than** - Shows rows where values exceed a specified number
-* **Greater Than Or Equal** - Shows rows where values are greater than or equal to a specified number
-* **Between** - Shows rows where values fall within a specified numeric range
-* **Custom Filter** - Opens a dialog for creating more complex numeric conditions with AND/OR logical operators.
+* **Format preservation** 
+    - The filter dialog keeps the original formatting of values (e.g., **Currency**, **Date** format) when displaying them.
+    - **Example:** A value formatted as **$1,000.00** in the spreadsheet will appear the same way in the filter list.
 
-![Number filter](./images/number-filter.png)
+The advanced filtering mechanism ensures effective data handling even in spreadsheets containing inconsistent or mixed data types.
 
-### Custom filter
+## Filter by cell value
 
-The custom filter option provides advanced filtering capabilities with logical operators. Selecting **Custom Filter** from the filters submenu opens a dialog with the following components:
+The filter by cell value enables filtering worksheet data based on a selected cell's content. This functionality streamlines data analysis by instantly displaying only rows that match the selected value.
 
-* **Condition dropdowns** - Select filter conditions (Equals, Contains, Starts With, etc.)
-* **Value fields** - Enter the text or values to match against
-* **Logical operator** - Choose between AND/OR to combine multiple conditions
-* **MatchCase option** - Enable case-sensitive filtering when checked
+### Filter by cell value via UI
 
-![Custom filter](./images/custom-filter.png)
+Filtering based on a specific cell value can be performed directly through the user interface. This method allows quick filtering without manually configuring conditions.
 
-## Reapply filter
+- Select the cell containing the desired value.
+- Right-click to open the context menu.
+- Choose the **Filter** option.
+- Click **Filter by Value of Selected Cell**.
 
-The reapply filter functionality updates filtered results to match current data values while preserving existing filter criteria. This feature is particularly useful when working with dynamic data that changes frequently.
+This action filters the column to display only the rows that match the selected cell's value.
 
-**Reapplying filter via the UI**
+![Filter by cell value](./images/contextmenu-filter.png)
 
-To refresh a filter after data modifications:
+### Filter by cell value programmatically
 
-* Click **Reapply** button under the **Sort & Filter** icon from the **Home** tab in the Ribbon toolbar
-* Alternatively, right-click a filtered cell and select the **Reapply** option from the context menu
+The [FilterByCellValueAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_FilterByCellValueAsync_System_String_System_Object_) method allows filtering based on a specified value and cell address without using the UI. The available parameters in the `FilterByCellValueAsync` method are:
 
-![Reapply filter option in Ribbon toolbar](./images/reapplyfilter-option-ribbon.png)
+| Parameter     | Type   | Description |
+|---------------|--------|-------------|
+| cellAddress | string | Specifies the address of the cell that contains the filter criteria. This determines the column to which the filter is applied. For example, "A1" applies the filter to Column A. Using this parameter also updates the used range of the Spreadsheet. |
+| cellValue | object | Defines the value to filter by. This can be a string, number, date, or boolean. The filter displays only the rows where the cell in the specified column matches this value. For example, "New York" displays rows where Column A contains "New York". Providing an incorrect value results in inaccurate filtered output. |
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Spreadsheet
+@using Syncfusion.Blazor.Buttons
+
+<SfButton OnClick="ApplyFilter" Content="Filter by cell value"></SfButton>
+
+<SfSpreadsheet @ref="SpreadsheetInstance" DataSource="DataSourceBytes">
+    <SpreadsheetRibbon></SpreadsheetRibbon>
+</SfSpreadsheet>
+
+@code {
+    public byte[] DataSourceBytes { get; set; }
+    public SfSpreadsheet SpreadsheetInstance;
+
+    protected override void OnInitialized()
+    {
+        string filePath = "wwwroot/Sample.xlsx";
+        DataSourceBytes = File.ReadAllBytes(filePath);
+    }
+
+    public async Task ApplyFilter()
+    {
+        // This method applies a filter to Column A showing only rows containing "New York".
+        await SpreadsheetInstance.FilterByCellValueAsync("A1", "New York"); 
+    }
+}
+
+{% endhighlight %}
+{% endtabs %}
 
 ## Clear filter
+                 
+The clear filter restores visibility to all rows by removing any filters currently applied to columns. It offers flexibility by allowing filters to be cleared from a specific column or from all columns at once.
+
+### Clear filter via UI
+
+Filters can be cleared through the user interface using the following methods:
+
+**Using the Ribbon**
 
-The clear filter functionality in the Spreadsheet component removes active filters from columns, restoring the complete dataset view. This operation ensures seamless transitions between filtered and unfiltered data views without losing information.
+* Click the **Home** tab in the Ribbon.
+* In the **Sort & Filter** section, click **Clear**.
+* All active filters will be removed from the worksheet.
 
-### Clear filter via the UI
+![Clear filter option using Ribbon](./images/clearfilter-option-ribbon.png)
 
-To clear existing filters:
+**Using the Filter Icon**
 
-* Click the **Sort & Filter** icon from the **Home** tab in the Ribbon toolbar
-* Select the **Clear** option to remove all active filters
+* Click the filter icon in the header of a filtered column.
+* In the filter dialog, click **Clear Filter**.
+* The filter applied to that column will be removed.
 
-![Clear filter option in Ribbon toolbar](./images/clearfilter-option-ribbon.png)
+![Clear filter option using Filter Icon](./images/clearfilter-option-filterbutton.png)
 
-### Clear filters programmatically
+**Using the Context Menu**
 
-The Blazor Spreadsheet component provides method to programmatically clear filters that have been applied to the worksheet data.
+* Right-click any cell in a filtered column.
+* Choose **Filter** from the context menu.
+* Select **Clear Filter From "Column Name"**.
+* The filter applied to that column will be removed.
 
-**Clear filter from specific column**
+![Clear filter option using Context Menu](./images/clearfilter-option-contextmenu.png)
 
-The [ClearFilterAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_ClearFilterAsync_System_Int32_) method removes filtering from a specific column in the Spreadsheet. The method takes a column index parameter to identify which column's filter should be cleared.
+### Clear filter programmatically
+
+The [ClearFilterAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_ClearFilterAsync_System_Int32_) method removes filtering from a specific column in the active sheet. The available parameters in the `ClearFilterAsync` method are:
+
+| Parameter     | Type | Description |
+|---------------|------|-------------|
+| columnIndex | int  | The zero-based index of the column whose filter is to be cleared. For example, "0" refers to the first column (Column A). |
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -210,29 +292,33 @@ The [ClearFilterAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor
 @using Syncfusion.Blazor.Spreadsheet
 @using Syncfusion.Blazor.Buttons
 
-<SfButton OnClick="ClearColumnFilter" Content="Clear Filter"></SfButton>
+<SfButton OnClick="ClearColumnFilter" Content="Clear Column Filter"></SfButton>
 
-<SfSpreadsheet @ref="@sfSpreadsheet">
+<SfSpreadsheet @ref="@SpreadsheetInstance" DataSource="DataSourceBytes">
     <SpreadsheetRibbon></SpreadsheetRibbon>
 </SfSpreadsheet>
 
 @code {
+    public byte[] DataSourceBytes { get; set; }
+    public SfSpreadsheet SpreadsheetInstance;
 
-    public SfSpreadsheet sfSpreadsheet { get; set; }
+    protected override void OnInitialized()
+    {
+        string filePath = "wwwroot/Sample.xlsx";
+        DataSourceBytes = File.ReadAllBytes(filePath);
+    }
 
     public async Task ClearColumnFilter()
     {
-        // Clear filter from column A (Index - 1)
-        await sfSpreadsheet.ClearFilterAsync(1);
+        // This command removes all filtering from Column A (represented by index 0).
+        await SpreadsheetInstance.ClearFilterAsync(0);
     }
 }
 
 {% endhighlight %}
 {% endtabs %}
 
-**Clear all filters**
-
-The [ClearAllFiltersAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_ClearAllFiltersAsync) method removes all active filters from the Spreadsheet, restoring the complete dataset view. This method is particularly useful when multiple columns have filters applied and need to be cleared at once.
+The [ClearAllFiltersAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_ClearAllFiltersAsync) method removes all active filters from the currently active sheet, restoring visibility to the entire dataset. This is especially useful when multiple columns are filtered and a complete reset is needed.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -241,20 +327,103 @@ The [ClearAllFiltersAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Bl
 @using Syncfusion.Blazor.Buttons
 
 <SfButton OnClick="ClearAllFilters" Content="Clear All Filters"></SfButton>
-<SfSpreadsheet @ref="@sfSpreadsheet">
+<SfSpreadsheet @ref="@SpreadsheetInstance" DataSource="DataSourceBytes">
     <SpreadsheetRibbon></SpreadsheetRibbon>
 </SfSpreadsheet>
 
 @code {
+    public byte[] DataSourceBytes { get; set; }
+    public SfSpreadsheet SpreadsheetInstance;
 
-    public SfSpreadsheet sfSpreadsheet { get; set; }
+    protected override void OnInitialized()
+    {
+        string filePath = "wwwroot/Sample.xlsx";
+        DataSourceBytes = File.ReadAllBytes(filePath);
+    }
 
     public async Task ClearAllFilters()
     {
-        await sfSpreadsheet.ClearAllFiltersAsync();
+        // Removes all active filters from the spreadsheet, restoring visibility to every row.
+        await SpreadsheetInstance.ClearAllFiltersAsync();
     }
 }
 
 {% endhighlight %}
 {% endtabs %}
 
+## Reapply filter
+
+The reapply filter updates filtered results after changes are made to the data. It preserves the existing filter conditions and refreshes the view to reflect the most current data accurately.
+
+For instance, if a filter is applied to display only rows where the **Status** column is set to **Approved**, and a new row is added with **Approved** as its value, the new row will not immediately appear. Using **Reapply Filter** recalculates the filter and ensures the new row is included in the filtered results.
+
+### Reapply filter via UI
+
+Filters can be reapplied using the interface through the following methods:
+
+**Using the Ribbon**
+
+* Click the **Home** tab in the Ribbon.
+* In the **Sort & Filter** section, select **Reapply**.
+* Active filters are refreshed based on the updated data.
+
+![Reapply filter using Ribbon](./images/clearfilter-option-ribbon.png)
+
+**Using the Context Menu**
+
+* Right-click any cell in a filtered column.
+* Choose **Filter** from the context menu.
+* Select **Reapply**.
+* Active filters are refreshed based on the updated data.
+
+![Reapply filter using Context Menu](./images/clearfilter-option-contextmenu.png)
+
+### Reapply filter programmatically
+
+The [ReapplyFilterAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_ReapplyFilterAsync) method refreshes all active filters to match updated worksheet data. This method is especially beneficial when rows are modified, inserted, or imported.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Spreadsheet
+@using Syncfusion.Blazor.Buttons
+
+<SfButton OnClick="UpdateAndReapply" Content="Update Data and Reapply Filters"></SfButton>
+<SfSpreadsheet @ref="@SpreadsheetInstance" DataSource="DataSourceBytes">
+    <SpreadsheetRibbon></SpreadsheetRibbon>
+</SfSpreadsheet>
+
+@code {
+    public byte[] DataSourceBytes { get; set; }
+    public SfSpreadsheet SpreadsheetInstance;
+
+    protected override void OnInitialized()
+    {
+        string filePath = "wwwroot/Sample.xlsx";
+        DataSourceBytes = File.ReadAllBytes(filePath);
+    }
+
+    public async Task UpdateAndReapply()
+    {
+        // Updates cell A1 on Sheet1 with a new value.
+        await SpreadsheetInstance.UpdateCellAsync("Sheet1!A1", "New Value");
+        
+        // Reapplies all active filters to include the updated data.
+        await SpreadsheetInstance.ReapplyFiltersAsync();
+    }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Filtering range validation messages
+
+When applying filters in the Blazor Spreadsheet, validation messages are displayed in specific scenarios to inform about filtering constraints:
+
+- **Invalid selection range validation** - If a selected cell or range is outside the used range of the active worksheet, the selection is considered invalid. An **Invalid selection range** alert message is displayed, and an exception is thrown to indicate this limitation.
+
+![Invalid selection range validation message](./images/out-of-range-validation.png)
+
+- **Multiple selection range validation** - If multiple ranges are selected for filtering, the selection is considered invalid. A **Multiple selection range** alert message is shown to highlight this limitation.
+
+![Multiple ranges validation message](./images/multi-range-validation.png)
\ No newline at end of file
diff --git a/blazor/spreadsheet/hyperlink.md b/blazor/spreadsheet/hyperlink.md
index 062eb045b3..5798359dcb 100644
--- a/blazor/spreadsheet/hyperlink.md
+++ b/blazor/spreadsheet/hyperlink.md
@@ -9,44 +9,67 @@ documentation: ug
 
 # Hyperlink in Blazor Spreadsheet component
 
-Hyperlink in the Spreadsheet component allow users to navigate to web URLs, specific cell references within the same sheet, or to other sheets. To control this functionality, use the [AllowHyperlink](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AllowHyperLink) property, which enables or disables hyperlink support in the Spreadsheet. The default value for the `AllowHyperlink` property is **true**.
+Hyperlink in the Blazor Spreadsheet enable interactive navigation both within and outside of spreadsheets. This feature creates clickable link that connect to external web URLs, specific cells within the current worksheet, or cells in other worksheets. To control this functionality, use the [AllowHyperlink](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AllowHyperLink) property, which enables or disables hyperlink support in the Spreadsheet. The default value of the `AllowHyperlink` property is **true**.
+
+The keyboard shortcut `Ctrl + K` can be used to quickly open the **Insert** or **Edit** hyperlink dialog for the active cell, without using the UI elements. This shortcut works regardless of whether the hyperlink functionality is accessed through the Ribbon or the Context Menu.
+
+N> When `AllowHyperlink` is set to **false**, the hyperlink options are removed from the interface (Ribbon and Context Menu), although existing hyperlinks will still function. Additionally, shortcut keys (**Ctrl + K**) and API methods related to this feature will no longer work.
 
 ## Insert hyperlink
 
-Hyperlink can be inserted into worksheet cells to provide direct access to external web pages, specific cell references within the same worksheet, or cells in other worksheets. This functionality enhances navigation and improves the interactivity of the Spreadsheet.
+Hyperlink can be added to worksheet cells to create interactive elements that improve navigation and connect data to external sources. These links can point to:
+* **Web URLs** - Direct access to websites, such as https://www.syncfusion.com
+* **Cell References** - Quick jumps to specific cells within the same sheet, like **A1** or a range such as **B5:C10**
+* **Sheet References** - Navigation to cells in other sheets, for example, **Sheet2!A1**
 
-### Insert hyperlink via the UI
+The linked cells are typically formatted with underlined and colored text to indicate they are clickable.
 
-In the active sheet, select the cell where the hyperlink should be inserted. A hyperlink can be inserted using any of the following methods:
+### Insert hyperlink via UI
 
-* Select the **Insert** tab in the Ribbon toolbar and choose the **Link** option.
+Hyperlink can be inserted through the user interface (UI) using any of the following methods:
 
-* Right click the selected cell, then choose the **Hyperlink** option from the context menu.
+**Using the Ribbon**
 
-* Hyperlink can be inserted or edited using the `Ctrl + K` keyboard shortcut.
+- Select a cell or range of cells for adding a hyperlink.
+- Click the **Insert** tab in the **Ribbon** toolbar.
+- Click the **Link** option.
+- Complete the hyperlink information in the dialog box.
+- Click the **Insert** button to add the hyperlink to the selected cell or range.
 
+![Insert hyperlink using Ribbon](images/insert-hyperlink-using-ribbon.gif)
 
-![Insert tab in the Ribbon toolbar with the Link option highlighted](images/insert-link.png)
+**Using the Context Menu**
 
-![Hyperlink dialog box displaying options for inserting a web URL](images/insert-hyperlink-dialogbox.png)
+- Right-click the selected or active cell.
+- Choose **Hyperlink** from the context menu.
+- Complete the hyperlink information in the dialog box.
+- Click the **Insert** button to add the hyperlink to the selected cell or range.
+
+![Insert hyperlink using Context Menu](images/insert-hyperlink-using-contextmenu.gif)
 
 ### Insert hyperlink programmatically
 
-To add hyperlink programmatically in the Spreadsheet component, the [AddHyperlinkAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AddHyperlinkAsync_System_String_System_String_System_String_) method can be used.
+Hyperlink can be added programmatically using the [AddHyperlinkAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AddHyperlinkAsync_System_String_System_String_System_String_) method. This method allows hyperlink to be added to cell or range of cells without using the UI. The available parameters in the `AddHyperlinkAsync` method are:
+
+| Parameter | Type | Description |
+| -- | -- | -- |
+| cellAddress | string | Specifies the cell or range of cells where the hyperlink should be added. |
+| hyperlink | string | Specifies the destination of the hyperlink. This can be a web URL (with or without a protocol), a cell reference, or a sheet reference. |
+| displayText | string (optional) |  Specifies the text to display in the cell. If omitted, the hyperlink address is used as the display text. For cells with existing values, this parameter overrides the existing text. |
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
 
 @using Syncfusion.Blazor.Spreadsheet
 
-<button @onclick="AddHyperlinkHandler">Add Hyperlink</button>
-<SfSpreadsheet @ref="spreadsheetObj" DataSource="DataSourceBytes">
+<button @onclick="AddHyperlink">Add Hyperlink</button>
+<SfSpreadsheet @ref="SpreadsheetInstance" DataSource="DataSourceBytes">
     <SpreadsheetRibbon></SpreadsheetRibbon>
 </SfSpreadsheet>
 
 @code {
     public byte[] DataSourceBytes { get; set; }
-    public SfSpreadsheet spreadsheetObj;
+    public SfSpreadsheet SpreadsheetInstance;
 
     protected override void OnInitialized()
     {
@@ -54,68 +77,115 @@ To add hyperlink programmatically in the Spreadsheet component, the [AddHyperlin
         DataSourceBytes = File.ReadAllBytes(filePath);
     }
 
-    public async Task AddHyperlinkHandler()
+    public async Task AddHyperlink()
     {
-	    await spreadsheetObj.AddHyperlinkAsync("https://www.syncfusion.com/blazor-components/blazor-spreadsheet","A2:A5");
+        // Adds a hyperlink to the range "A2:A5".
+        await SpreadsheetInstance.AddHyperlinkAsync("A2:A5", "https://www.syncfusion.com/blazor-components/blazor-spreadsheet");
     }
 }
 
 {% endhighlight %}
 {% endtabs %}
 
+The `AddHyperlinkAsync` method is flexible and supports various scenarios beyond basic usage. The following are some special cases and behaviors to be aware of:
+
+{% tabs %}
+{% highlight razor%}
+
+// Adds a web URL hyperlink to a single cell.
+await spreadsheetInstance.AddHyperlinkAsync("A1", "https://www.syncfusion.com", "Syncfusion");
+
+// Adds a cell reference hyperlink.
+await spreadsheetInstance.AddHyperlinkAsync("B5", "D10", "Go to Summary");
+
+// Adds a sheet reference hyperlink.
+await spreadsheetInstance.AddHyperlinkAsync("A2", "Sheet2!B5", "View Details");
+
+// Adds a hyperlink to multiple cells.
+await spreadsheetInstance.AddHyperlinkAsync("A2:A5", "https://www.syncfusion.com", "Documentation");
+
+// Adds a web URL without a protocol, which is automatically prefixed with "https://".
+await spreadsheetInstance.AddHyperlinkAsync("A1", "syncfusion.com");
+
+// Adds a hyperlink without display text, using the hyperlink address as display text.
+await spreadsheetInstance.AddHyperlinkAsync("B1", "https://www.syncfusion.com");
+
+// Adds a hyperlink to a non-existent sheet reference; no error is thrown, but the link may not function properly.
+await spreadsheetInstance.AddHyperlinkAsync("C1", "NonExistentSheet!A1", "Invalid Sheet");
+
+// Adds a hyperlink to a cell with an existing value; the display text will update if provided.
+await spreadsheetInstance.AddHyperlinkAsync("D1", "https://www.syncfusion.com", "New Text");
+
+{% endhighlight %}
+{% endtabs %}
+
 ## Edit hyperlink
 
-Existing hyperlink in the workbook can be modified to update the destination or the display text. This includes:
+Hyperlink in a spreadsheet can be edited to update the destination or the display text. This includes:
 
-* **Changing the Web URL**: Update the hyperlink to point to a different website or online resource.
+- **Changing the Web URL** - Update the hyperlink to point to a different website or online resource.
+- **Editing the Display Text** - Modify the text in the cell without affecting the link destination.
+- **Updating Cell References** - Modify the hyperlink to point to a different cell in the same sheet (e.g., from A1 to B5).
+- **Linking to Another Sheet** - Redirect the hyperlink to a different sheet by modifying the sheet name in the reference (e.g., from Sheet1!A1 to Sheet2!C3).
 
-* **Modifying the Display Text**: Adjust the text shown in the cell without altering the hyperlink destination.
+### Edit hyperlink via UI
 
-* **Editing Cell References**: Update the hyperlink to point to a different cell within the same sheet by changing the cell address (e.g., from A1 to B5).
+Hyperlink can be edited through the user interface (UI) using any of the following methods:
 
-* **Updating Sheet Information**: Redirect the hyperlink to a different sheet by modifying the sheet name in the reference (e.g., from Sheet1!A1 to Sheet2!C3).
+**Using the Ribbon**
 
-### Edit hyperlink via the UI
+- Select the cell containing the hyperlink.
+- Click the **Insert** tab in the **Ribbon** toolbar.
+- Click the **Link** option.
+- Make changes to the hyperlink information in the dialog box.
+- Click **Update** to apply the changes.
 
-In the active sheet, select the cell that contains the hyperlink to be modified. The hyperlink can be edited by opening the dialog using any of the following methods:
+![Edit hyperlink using Ribbon](images/edit-hyperlink-using-ribbon.gif)
 
-* Select the **Insert** tab in the Ribbon toolbar and click the **Link** option.
+**Using the Context Menu**
 
-* Right click the cell and choose **Edit Hyperlink** option from the context menu, or press `Ctrl + K`.
+- Right-click the cell containing the hyperlink.
+- Choose **Edit Hyperlink** from the context menu.
+- Make changes to the hyperlink information in the dialog box.
+- Click **Update** to apply the changes.
 
-* In the dialog box, make the necessary changes and click **Update** to apply them.
+![Edit hyperlink using Context Menu](images/edit-hyperlink-using-contextmenu.gif)
 
-![Edit hyperlink dialog with options to modify an existing link](images/edit-hyperlink-dialogbox.png)
+> When editing hyperlink to other sheets, ensure that the target sheet exists in the workbook. Link to non-existent sheets result in errors when clicked.
 
 ## Remove hyperlink
 
-Performing this operation removes the hyperlink without affecting the display text.
+Removing a hyperlink disconnects the cells from their associated destinations while retaining the display text. This operation eliminates only the hyperlink functionality without altering the actual content of the cells. Any cells that do not contain a hyperlink are ignored during the process, and no errors are generated.
 
-### Remove hyperlink via the UI
+### Remove hyperlink via UI
 
-In the active sheet, select the cell containing the hyperlink to be removed. Hyperlinks can be removed in the following way:
+To remove a hyperlink using the interface, select the cell that contains the hyperlink, then right-click to open the context menu. From the available options, choose **Remove Hyperlink** to delete the link from the selected cell.
 
-* Right click the cell and then click **Remove Hyperlink** option in the context menu.
+When dealing with multiple hyperlinks, selecting a range of cells - such as A1 to D5 - allows all hyperlinks within that range to be removed in a single operation. This method is efficient for cleaning up large sets of hyperlinks quickly.
 
-![Remove Hyperlink option in the cell context menu](images/remove-hyperlink.png)
+![Remove hyperlink using Context Menu](images/remove-hyperlink.png)
 
 ### Remove hyperlink programmatically
 
-To remove hyperlink programmatically in the Spreadsheet component, the [RemoveHyperlinkAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_RemoveHyperlinkAsync_System_String_) method can be used.
+Hyperlink can be removed programmatically by using the  [RemoveHyperlinkAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_RemoveHyperlinkAsync_System_String_) method. This method eliminates hyperlink functionality from the specified cell or range of cells within a spreadsheet, allowing for efficient bulk removal through code. The available parameters in the `RemoveHyperlinkAsync` method are:
+
+| Parameter | Type | Description |
+| -- | -- | -- |
+| cellAddress | string | Specifies the cell or range of cells from which hyperlink should be removed. |
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
 
 @using Syncfusion.Blazor.Spreadsheet
 
-<button @onclick="RemoveHyperlinkHandler">Remove Hyperlink</button>
-<SfSpreadsheet @ref="spreadsheetObj" DataSource="DataSourceBytes">
+<button @onclick="RemoveHyperlink">Remove Hyperlink</button>
+<SfSpreadsheet @ref="SpreadsheetInstance" DataSource="DataSourceBytes">
     <SpreadsheetRibbon></SpreadsheetRibbon>
 </SfSpreadsheet>
 
 @code {
     public byte[] DataSourceBytes { get; set; }
-    public SfSpreadsheet spreadsheetObj;
+    public SfSpreadsheet SpreadsheetInstance;
 
     protected override void OnInitialized()
     {
@@ -123,12 +193,207 @@ To remove hyperlink programmatically in the Spreadsheet component, the [RemoveHy
         DataSourceBytes = File.ReadAllBytes(filePath);
     }
 
-    public async Task RemoveHyperlinkHandler()
+    public async Task RemoveHyperlink()
+    { 
+        // Removes all hyperlinks from the specified cell range (A2 to A5) in the active sheet.
+        await SpreadsheetInstance.RemoveHyperlinkAsync("A2:A5");
+    }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+The `RemoveHyperlinkAsync` method is flexible and supports various scenarios beyond basic usage. Below are some special cases and behaviors to be aware of:
+
+{% tabs %}
+{% highlight razor%}
+
+// Remove hyperlink from a single cell.
+await spreadsheetInstance.RemoveHyperlinkAsync("A1");
+
+// Remove hyperlinks from a range of cells
+await spreadsheetInstance.RemoveHyperlinkAsync("A1:C5");
+
+// Remove hyperlink from a single cell in a specific sheet
+await spreadsheetInstance.RemoveHyperlinkAsync("Sheet2!D10");
+
+// Remove hyperlinks from a range of cells in a specific sheet
+await spreadsheetInstance.RemoveHyperlinkAsync("Sheet3!A1:A20");
+
+{% endhighlight %}
+{% endtabs %}
+
+## Events
+
+The Blazor Spreadsheet provides events that are triggered during hyperlink operations, such as [HyperlinkCreating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.HyperlinkCreatingEventArgs.html), [HyperlinkCreated](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.HyperlinkCreatedEventArgs.html), and [HyperlinkClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.HyperlinkClickEventArgs.html). These events enable the execution of custom actions before and after hyperlink is created or interacted with, allowing for validation, customization, and response handling.
+
+* **HyperlinkCreating** - The `HyperlinkCreating` event is triggered prior to the creation of a hyperlink. It offers an opportunity to modify or validate the hyperlink details before the link is added to the sheet, enabling custom logic or restrictions to be applied during the hyperlink creation process.
+
+* **HyperlinkCreated** - The `HyperlinkCreated` event is triggered after a hyperlink has been successfully added to the sheet. It provides detailed information about the newly created hyperlink, enabling further processing or logging if required.
+
+* **HyperlinkClick** - The `HyperlinkClick` event is triggered when a hyperlink in the sheet is clicked.
+
+### HyperlinkCreating
+
+The `HyperlinkCreating` event is triggered before a hyperlink is added to cell. This event provides an opportunity to inspect, modify, or cancel the hyperlink creation process based on custom logic or validation requirements.
+
+**Purpose**
+
+This event is useful for scenarios where hyperlink behavior needs to be controlled dynamically - such as restricting certain URLs, customizing display text, or preventing hyperlinks in specific cells.
+
+**Event Arguments**
+
+The event uses the [HyperlinkCreatingEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.HyperlinkCreatingEventArgs.html) class, which includes the following properties:
+
+| Event Arguments | Description |
+|----------------|-------------|
+| Uri | Represents the hyperlink destination, which can be a web URL or an internal sheet reference in the format **"SheetName!CellReference"**. This value can be modified to redirect the hyperlink to a different location. |
+| CellAddress | Specifies the cell location where the hyperlink will be inserted. The address must be specified using A1 notation (e.g., "A1", "B5"). |
+| DisplayText | Defines the visible text shown in the cell for the hyperlink. This can be customized to provide a user-friendly label, distinct from the actual hyperlink destination. |
+| Cancel | Indicates whether the hyperlink creation should be aborted. Setting this property to **true** prevents the hyperlink from being added, allowing for conditional validation or restriction logic. |
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Spreadsheet
+
+<SfSpreadsheet DataSource="DataSourceBytes">
+    <SpreadsheetRibbon></SpreadsheetRibbon>
+    <SpreadsheetEvents HyperlinkCreating="OnHyperlinkCreating" ></SpreadsheetEvents>
+</SfSpreadsheet>
+
+@code {
+    public byte[] DataSourceBytes { get; set; }
+    
+    protected override void OnInitialized()
     {
-	    await spreadsheetObj.RemoveHyperlinkAsync("A2:A5");
+        string filePath = "wwwroot/Sample.xlsx";
+        DataSourceBytes = File.ReadAllBytes(filePath);
+    }
+
+    public void OnHyperlinkCreating(HyperlinkCreatingEventArgs args)
+    {
+        // Prevent the creation of a hyperlink to a specific domain.
+        if (args.Uri?.StartsWith("http://example.com") == true)
+        {
+            args.Cancel = true;
+        }
+
+        // Customize the display text if it is empty.
+        if (string.IsNullOrEmpty(args.DisplayText))
+        {
+            args.DisplayText = "Click here";
+        }
+
+        // Convert simple domain names to full URLs.
+        if (args.Uri?.StartsWith("www.") == true)
+        {
+            args.Uri = "https://" + args.Hyperlink;
+        }
+    }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+### HyperlinkCreated
+
+The `HyperlinkCreated` event is triggered after a hyperlink has been successfully added to a cell. This event provides read-only access to the details of the newly created hyperlink, allowing for post-processing actions such as logging, auditing, or UI updates.
+
+**Purpose**
+
+This event is useful for scenarios where actions need to be taken after a hyperlink is created - such as confirming the link, updating related metadata, or notifying users of the change.
+
+**Event Arguments**
+
+The [HyperlinkCreatedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.HyperlinkCreatedEventArgs.html) includes the following properties:
+
+| Event Arguments | Description |
+|----------------|-------------|
+| Uri | Represents the hyperlink destination, which can be either an external web URL (e.g., "https://example.com") or an internal sheet references. This value is read-only and reflects the final destination of the hyperlink. |
+| CellAddress | Specifies the cell location where the hyperlink has been inserted. The address is provided in A1 notation (e.g., **"A1"**, **"B5"**), and indicates the exact position of the hyperlink in the worksheet. This value is read-only. |
+| DisplayText | Defines the visible text shown in the cell for the hyperlink. This user-friendly label may differ from the actual hyperlink address and is useful for providing descriptive or meaningful link text. This value is read-only. |
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Spreadsheet
+
+<SfSpreadsheet DataSource="DataSourceBytes">
+    <SpreadsheetRibbon></SpreadsheetRibbon>
+    <SpreadsheetEvents HyperlinkCreated="OnHyperlinkCreated" ></SpreadsheetEvents>
+</SfSpreadsheet>
+
+@code {
+    public byte[] DataSourceBytes { get; set; }
+    
+    protected override void OnInitialized()
+    {
+        string filePath = "wwwroot/Sample.xlsx";
+        DataSourceBytes = File.ReadAllBytes(filePath);
+    }
+
+    public void OnHyperlinkCreated(HyperlinkCreatedEventArgs args)
+    {
+        // Log information about the newly created hyperlink.
+        Console.WriteLine($"Hyperlink created at {args.CellAddress} pointing to {args.Uri}");
+        Console.WriteLine($"Display text: {args.DisplayText}");
     }
 }
 
 {% endhighlight %}
 {% endtabs %}
 
+### HyperlinkClick
+
+The `HyperlinkClick` event is triggered when a hyperlink within the spreadsheet is clicked. This event provides contextual information about the clicked hyperlink, enabling custom responses such as logging, conditional navigation, or user notifications.
+
+**Purpose**
+
+This event is designed for observing hyperlink interactions and executing custom logic in response. Since all event arguments are read-only, it is not intended for modifying the hyperlink but rather for handling actions that follow a click - such as auditing, validation, or UI updates.
+
+**Event Arguments**
+
+The [HyperlinkClickEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.HyperlinkClickEventArgs.html) includes the following properties:
+
+| Event Arguments | Description |
+|----------------|-------------|
+| Uri | Represents the hyperlink destination, which may be an external web URL (e.g., **"https://example.com"**) or an internal sheet references. This value reflects the actual navigation target of the hyperlink. This value is read only. |
+| CellAddress | Specifies the cell location where the hyperlink resides. The address is provided in A1 notation (e.g., **"A1"**, **"B5"**), indicating the exact position of the hyperlink in the worksheet. This value is read only. |
+| DisplayText | Defines the visible text shown in the cell for the hyperlink. This user-friendly label may differ from the actual hyperlink address and is useful for identifying the link's purpose or context. This value is read only.|
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Spreadsheet
+
+<SfSpreadsheet DataSource="DataSourceBytes">
+    <SpreadsheetRibbon></SpreadsheetRibbon>
+    <SpreadsheetEvents HyperlinkClick="OnHyperlinkClick" ></SpreadsheetEvents>
+</SfSpreadsheet>
+
+@code {
+    public byte[] DataSourceBytes { get; set; }
+    
+    protected override void OnInitialized()
+    {
+        string filePath = "wwwroot/Sample.xlsx";
+        DataSourceBytes = File.ReadAllBytes(filePath);
+    }
+
+    public void OnHyperlinkClick(HyperlinkClickEventArgs args)
+    {
+        // Track hyperlink usage.
+        Console.WriteLine($"Hyperlink clicked at {args.CellAddress}: {args.Uri}");
+        
+        // Handle special URLs or sheet references differently.
+        if (args.Hyperlink.StartsWith("https://restricted"))
+        {
+            // Implement custom handling for restricted sites.
+            // For example, show a warning or redirect elsewhere.
+        }
+    }
+}
+
+{% endhighlight %}
+{% endtabs %}
\ No newline at end of file
diff --git a/blazor/spreadsheet/images/add-current-selection-to-filter.png b/blazor/spreadsheet/images/add-current-selection-to-filter.png
new file mode 100644
index 0000000000..ebf722afe2
Binary files /dev/null and b/blazor/spreadsheet/images/add-current-selection-to-filter.png differ
diff --git a/blazor/spreadsheet/images/addsheet.png b/blazor/spreadsheet/images/addsheet.png
index aef6dd4f34..212e919dc7 100644
Binary files a/blazor/spreadsheet/images/addsheet.png and b/blazor/spreadsheet/images/addsheet.png differ
diff --git a/blazor/spreadsheet/images/cell-contextmenu.png b/blazor/spreadsheet/images/cell-contextmenu.png
deleted file mode 100644
index 26c2c7bfe2..0000000000
Binary files a/blazor/spreadsheet/images/cell-contextmenu.png and /dev/null differ
diff --git a/blazor/spreadsheet/images/checkbox-filter.png b/blazor/spreadsheet/images/checkbox-filter.png
index 218fe4b59c..ccc0a4beaa 100644
Binary files a/blazor/spreadsheet/images/checkbox-filter.png and b/blazor/spreadsheet/images/checkbox-filter.png differ
diff --git a/blazor/spreadsheet/images/clearfilter-option-contextmenu.png b/blazor/spreadsheet/images/clearfilter-option-contextmenu.png
new file mode 100644
index 0000000000..f3cfc5906c
Binary files /dev/null and b/blazor/spreadsheet/images/clearfilter-option-contextmenu.png differ
diff --git a/blazor/spreadsheet/images/clearfilter-option-filterbutton.png b/blazor/spreadsheet/images/clearfilter-option-filterbutton.png
new file mode 100644
index 0000000000..40ef5dd94e
Binary files /dev/null and b/blazor/spreadsheet/images/clearfilter-option-filterbutton.png differ
diff --git a/blazor/spreadsheet/images/clearfilter-option-ribbon.png b/blazor/spreadsheet/images/clearfilter-option-ribbon.png
index 6b19d011c9..70250cc289 100644
Binary files a/blazor/spreadsheet/images/clearfilter-option-ribbon.png and b/blazor/spreadsheet/images/clearfilter-option-ribbon.png differ
diff --git a/blazor/spreadsheet/images/column-header-contextmenu.png b/blazor/spreadsheet/images/column-header-contextmenu.png
deleted file mode 100644
index 246158292c..0000000000
Binary files a/blazor/spreadsheet/images/column-header-contextmenu.png and /dev/null differ
diff --git a/blazor/spreadsheet/images/contextmenu-cell.png b/blazor/spreadsheet/images/contextmenu-cell.png
new file mode 100644
index 0000000000..4cc3e76563
Binary files /dev/null and b/blazor/spreadsheet/images/contextmenu-cell.png differ
diff --git a/blazor/spreadsheet/images/contextmenu-column.png b/blazor/spreadsheet/images/contextmenu-column.png
new file mode 100644
index 0000000000..5d64f19798
Binary files /dev/null and b/blazor/spreadsheet/images/contextmenu-column.png differ
diff --git a/blazor/spreadsheet/images/contextmenu-cut-copy.png b/blazor/spreadsheet/images/contextmenu-cut-copy.png
new file mode 100644
index 0000000000..7ec37449a4
Binary files /dev/null and b/blazor/spreadsheet/images/contextmenu-cut-copy.png differ
diff --git a/blazor/spreadsheet/images/contextmenu-filter.png b/blazor/spreadsheet/images/contextmenu-filter.png
index 5b1227b18b..0cf820d03c 100644
Binary files a/blazor/spreadsheet/images/contextmenu-filter.png and b/blazor/spreadsheet/images/contextmenu-filter.png differ
diff --git a/blazor/spreadsheet/images/contextmenu-filteroption.png b/blazor/spreadsheet/images/contextmenu-filteroption.png
new file mode 100644
index 0000000000..2d3462863e
Binary files /dev/null and b/blazor/spreadsheet/images/contextmenu-filteroption.png differ
diff --git a/blazor/spreadsheet/images/contextmenu-hyperlink.png b/blazor/spreadsheet/images/contextmenu-hyperlink.png
new file mode 100644
index 0000000000..ab7133eac1
Binary files /dev/null and b/blazor/spreadsheet/images/contextmenu-hyperlink.png differ
diff --git a/blazor/spreadsheet/images/contextmenu-paste.png b/blazor/spreadsheet/images/contextmenu-paste.png
new file mode 100644
index 0000000000..539532155a
Binary files /dev/null and b/blazor/spreadsheet/images/contextmenu-paste.png differ
diff --git a/blazor/spreadsheet/images/contextmenu-propertyaffect.png b/blazor/spreadsheet/images/contextmenu-propertyaffect.png
new file mode 100644
index 0000000000..4f8608dbe4
Binary files /dev/null and b/blazor/spreadsheet/images/contextmenu-propertyaffect.png differ
diff --git a/blazor/spreadsheet/images/contextmenu-protectcell.png b/blazor/spreadsheet/images/contextmenu-protectcell.png
new file mode 100644
index 0000000000..7bd965aabf
Binary files /dev/null and b/blazor/spreadsheet/images/contextmenu-protectcell.png differ
diff --git a/blazor/spreadsheet/images/contextmenu-protectcolumn.png b/blazor/spreadsheet/images/contextmenu-protectcolumn.png
new file mode 100644
index 0000000000..5e1f91f056
Binary files /dev/null and b/blazor/spreadsheet/images/contextmenu-protectcolumn.png differ
diff --git a/blazor/spreadsheet/images/contextmenu-protectrow.png b/blazor/spreadsheet/images/contextmenu-protectrow.png
new file mode 100644
index 0000000000..5240460e7b
Binary files /dev/null and b/blazor/spreadsheet/images/contextmenu-protectrow.png differ
diff --git a/blazor/spreadsheet/images/contextmenu-protectsheet.png b/blazor/spreadsheet/images/contextmenu-protectsheet.png
new file mode 100644
index 0000000000..5d99bfd635
Binary files /dev/null and b/blazor/spreadsheet/images/contextmenu-protectsheet.png differ
diff --git a/blazor/spreadsheet/images/contextmenu-row.png b/blazor/spreadsheet/images/contextmenu-row.png
new file mode 100644
index 0000000000..5f2bdae51c
Binary files /dev/null and b/blazor/spreadsheet/images/contextmenu-row.png differ
diff --git a/blazor/spreadsheet/images/contextmenu-sheettab.png b/blazor/spreadsheet/images/contextmenu-sheettab.png
new file mode 100644
index 0000000000..c3578d7e70
Binary files /dev/null and b/blazor/spreadsheet/images/contextmenu-sheettab.png differ
diff --git a/blazor/spreadsheet/images/contextmenu-sortoption.png b/blazor/spreadsheet/images/contextmenu-sortoption.png
new file mode 100644
index 0000000000..78e6241014
Binary files /dev/null and b/blazor/spreadsheet/images/contextmenu-sortoption.png differ
diff --git a/blazor/spreadsheet/images/custom-filter.png b/blazor/spreadsheet/images/custom-filter.png
index 0715676c46..9c54bac519 100644
Binary files a/blazor/spreadsheet/images/custom-filter.png and b/blazor/spreadsheet/images/custom-filter.png differ
diff --git a/blazor/spreadsheet/images/cut-copy.png b/blazor/spreadsheet/images/cut-copy.png
new file mode 100644
index 0000000000..b06b8c0e2f
Binary files /dev/null and b/blazor/spreadsheet/images/cut-copy.png differ
diff --git a/blazor/spreadsheet/images/delete-confirm-dialog.png b/blazor/spreadsheet/images/delete-confirm-dialog.png
new file mode 100644
index 0000000000..86fb2ae56a
Binary files /dev/null and b/blazor/spreadsheet/images/delete-confirm-dialog.png differ
diff --git a/blazor/spreadsheet/images/delete-sheet-option.png b/blazor/spreadsheet/images/delete-sheet-option.png
index 25be951563..55f8b62704 100644
Binary files a/blazor/spreadsheet/images/delete-sheet-option.png and b/blazor/spreadsheet/images/delete-sheet-option.png differ
diff --git a/blazor/spreadsheet/images/duplicate-sheet-option.png b/blazor/spreadsheet/images/duplicate-sheet-option.png
index 15f397fae5..17ae1ae128 100644
Binary files a/blazor/spreadsheet/images/duplicate-sheet-option.png and b/blazor/spreadsheet/images/duplicate-sheet-option.png differ
diff --git a/blazor/spreadsheet/images/edit-hyperlink-using-contextmenu.gif b/blazor/spreadsheet/images/edit-hyperlink-using-contextmenu.gif
new file mode 100644
index 0000000000..ab3c8fef6a
Binary files /dev/null and b/blazor/spreadsheet/images/edit-hyperlink-using-contextmenu.gif differ
diff --git a/blazor/spreadsheet/images/edit-hyperlink-using-ribbon.gif b/blazor/spreadsheet/images/edit-hyperlink-using-ribbon.gif
new file mode 100644
index 0000000000..99127262d6
Binary files /dev/null and b/blazor/spreadsheet/images/edit-hyperlink-using-ribbon.gif differ
diff --git a/blazor/spreadsheet/images/file-new-feature.png b/blazor/spreadsheet/images/file-new-feature.png
new file mode 100644
index 0000000000..1682e97b9e
Binary files /dev/null and b/blazor/spreadsheet/images/file-new-feature.png differ
diff --git a/blazor/spreadsheet/images/file-open-feature.png b/blazor/spreadsheet/images/file-open-feature.png
index 9aeb30cd1d..57d0e415da 100644
Binary files a/blazor/spreadsheet/images/file-open-feature.png and b/blazor/spreadsheet/images/file-open-feature.png differ
diff --git a/blazor/spreadsheet/images/file-save-dialogbox.png b/blazor/spreadsheet/images/file-save-dialogbox.png
index 1bbe9a41ae..59c525e344 100644
Binary files a/blazor/spreadsheet/images/file-save-dialogbox.png and b/blazor/spreadsheet/images/file-save-dialogbox.png differ
diff --git a/blazor/spreadsheet/images/file-save-feature.png b/blazor/spreadsheet/images/file-save-feature.png
index 92e623c304..18f1ef00a3 100644
Binary files a/blazor/spreadsheet/images/file-save-feature.png and b/blazor/spreadsheet/images/file-save-feature.png differ
diff --git a/blazor/spreadsheet/images/filter-dialog-sort.gif b/blazor/spreadsheet/images/filter-dialog-sort.gif
new file mode 100644
index 0000000000..679d772440
Binary files /dev/null and b/blazor/spreadsheet/images/filter-dialog-sort.gif differ
diff --git a/blazor/spreadsheet/images/hide-sheet-option.png b/blazor/spreadsheet/images/hide-sheet-option.png
index 56f6b25e42..068c5052e0 100644
Binary files a/blazor/spreadsheet/images/hide-sheet-option.png and b/blazor/spreadsheet/images/hide-sheet-option.png differ
diff --git a/blazor/spreadsheet/images/insert-hyperlink-using-contextmenu.gif b/blazor/spreadsheet/images/insert-hyperlink-using-contextmenu.gif
new file mode 100644
index 0000000000..e5d3dcea26
Binary files /dev/null and b/blazor/spreadsheet/images/insert-hyperlink-using-contextmenu.gif differ
diff --git a/blazor/spreadsheet/images/insert-hyperlink-using-ribbon.gif b/blazor/spreadsheet/images/insert-hyperlink-using-ribbon.gif
new file mode 100644
index 0000000000..34536c6216
Binary files /dev/null and b/blazor/spreadsheet/images/insert-hyperlink-using-ribbon.gif differ
diff --git a/blazor/spreadsheet/images/insert-sheet-option.png b/blazor/spreadsheet/images/insert-sheet-option.png
index ff001bec10..689e94d660 100644
Binary files a/blazor/spreadsheet/images/insert-sheet-option.png and b/blazor/spreadsheet/images/insert-sheet-option.png differ
diff --git a/blazor/spreadsheet/images/move-left-option.png b/blazor/spreadsheet/images/move-left-option.png
index d0d29d5e04..0cbab63630 100644
Binary files a/blazor/spreadsheet/images/move-left-option.png and b/blazor/spreadsheet/images/move-left-option.png differ
diff --git a/blazor/spreadsheet/images/move-right-option.png b/blazor/spreadsheet/images/move-right-option.png
index 511bc4410f..37cdbc93ed 100644
Binary files a/blazor/spreadsheet/images/move-right-option.png and b/blazor/spreadsheet/images/move-right-option.png differ
diff --git a/blazor/spreadsheet/images/multi-range-validation.png b/blazor/spreadsheet/images/multi-range-validation.png
new file mode 100644
index 0000000000..c2faab0c62
Binary files /dev/null and b/blazor/spreadsheet/images/multi-range-validation.png differ
diff --git a/blazor/spreadsheet/images/number-filter.png b/blazor/spreadsheet/images/number-filter.png
index 2ae6dd11e4..57bd467e84 100644
Binary files a/blazor/spreadsheet/images/number-filter.png and b/blazor/spreadsheet/images/number-filter.png differ
diff --git a/blazor/spreadsheet/images/out-of-range-validation.png b/blazor/spreadsheet/images/out-of-range-validation.png
new file mode 100644
index 0000000000..cf47d22fdc
Binary files /dev/null and b/blazor/spreadsheet/images/out-of-range-validation.png differ
diff --git a/blazor/spreadsheet/images/paste.png b/blazor/spreadsheet/images/paste.png
new file mode 100644
index 0000000000..4308a6e0cb
Binary files /dev/null and b/blazor/spreadsheet/images/paste.png differ
diff --git a/blazor/spreadsheet/images/protection-error-dialog.png b/blazor/spreadsheet/images/protection-error-dialog.png
new file mode 100644
index 0000000000..a94391feaf
Binary files /dev/null and b/blazor/spreadsheet/images/protection-error-dialog.png differ
diff --git a/blazor/spreadsheet/images/redo-feature.png b/blazor/spreadsheet/images/redo-feature.png
index 1cc3fe8b40..946d48bb54 100644
Binary files a/blazor/spreadsheet/images/redo-feature.png and b/blazor/spreadsheet/images/redo-feature.png differ
diff --git a/blazor/spreadsheet/images/remove-hyperlink.png b/blazor/spreadsheet/images/remove-hyperlink.png
index 2a6329d26f..eed17cca7c 100644
Binary files a/blazor/spreadsheet/images/remove-hyperlink.png and b/blazor/spreadsheet/images/remove-hyperlink.png differ
diff --git a/blazor/spreadsheet/images/rename-dialog.png b/blazor/spreadsheet/images/rename-dialog.png
new file mode 100644
index 0000000000..04e58b6076
Binary files /dev/null and b/blazor/spreadsheet/images/rename-dialog.png differ
diff --git a/blazor/spreadsheet/images/rename-sheet-option.png b/blazor/spreadsheet/images/rename-sheet-option.png
index 5cb90a200a..029d4012f4 100644
Binary files a/blazor/spreadsheet/images/rename-sheet-option.png and b/blazor/spreadsheet/images/rename-sheet-option.png differ
diff --git a/blazor/spreadsheet/images/ribbon-filter.png b/blazor/spreadsheet/images/ribbon-filter.png
index 83eafa7875..6a9800ea02 100644
Binary files a/blazor/spreadsheet/images/ribbon-filter.png and b/blazor/spreadsheet/images/ribbon-filter.png differ
diff --git a/blazor/spreadsheet/images/row-header-contextmenu.png b/blazor/spreadsheet/images/row-header-contextmenu.png
deleted file mode 100644
index f52ca22716..0000000000
Binary files a/blazor/spreadsheet/images/row-header-contextmenu.png and /dev/null differ
diff --git a/blazor/spreadsheet/images/select-excel-file.png b/blazor/spreadsheet/images/select-excel-file.png
index ac0b65a21b..57f8866a13 100644
Binary files a/blazor/spreadsheet/images/select-excel-file.png and b/blazor/spreadsheet/images/select-excel-file.png differ
diff --git a/blazor/spreadsheet/images/sheet-tab-contextmenu.png b/blazor/spreadsheet/images/sheet-tab-contextmenu.png
deleted file mode 100644
index dcb10870cb..0000000000
Binary files a/blazor/spreadsheet/images/sheet-tab-contextmenu.png and /dev/null differ
diff --git a/blazor/spreadsheet/images/text-filter-options.png b/blazor/spreadsheet/images/text-filter-options.png
index e01b1466c0..8a2997bc23 100644
Binary files a/blazor/spreadsheet/images/text-filter-options.png and b/blazor/spreadsheet/images/text-filter-options.png differ
diff --git a/blazor/spreadsheet/images/undo-feature.png b/blazor/spreadsheet/images/undo-feature.png
index 3acea7840e..a3becbaeb2 100644
Binary files a/blazor/spreadsheet/images/undo-feature.png and b/blazor/spreadsheet/images/undo-feature.png differ
diff --git a/blazor/spreadsheet/images/unhide-sheet-option.png b/blazor/spreadsheet/images/unhide-sheet-option.png
index 14d87b85d3..d113c57eea 100644
Binary files a/blazor/spreadsheet/images/unhide-sheet-option.png and b/blazor/spreadsheet/images/unhide-sheet-option.png differ
diff --git a/blazor/spreadsheet/open-and-save.md b/blazor/spreadsheet/open-and-save.md
index dacb504b8d..a49a10180f 100644
--- a/blazor/spreadsheet/open-and-save.md
+++ b/blazor/spreadsheet/open-and-save.md
@@ -9,20 +9,20 @@ documentation: ug
 
 # Open and Save in Blazor Spreadsheet component
 
-The **Open** and **Save** options in the Spreadsheet component enable efficient management of Excel files. These functionalities support opening existing Excel files for analysis and modification, as well as saving updates or new files to the system in compatible formats.
+The **Open** and **Save** options in the Blazor Spreadsheet component enable efficient management of Excel files. These functionalities support opening existing Excel files for analysis and modification, as well as saving updates or new files to the system in compatible formats.
 
 ## Open
-The Spreadsheet component can open an Excel document along with its data, styles, formats, and more. 
+The Blazor Spreadsheet component preserves all data, cell styles, formatting, and other spreadsheet elements when loading Excel files. These files can be accessed either through user interface actions or programmatic methods.
 
-### Open an Excel file via the UI
-To open an Excel document using the interface, select the `File > Open` option from the ribbon menu.
+### Open an Excel file via UI
+To open an Excel document using the interface, select the **File > Open** option from the **Ribbon**. A file explorer dialog will appear, allowing selection of the desired Excel file for loading into the component.
 
 ![UI showing file menu with open option](./images/file-open-feature.png)
 
 ![File explorer showing Excel file](./images/select-excel-file.png)
 
 ### Open an Excel file from a local path
-The Syncfusion Blazor Spreadsheet component enables loading Excel files directly by converting them into byte arrays. This method is particularly effective for dynamically loading Spreadsheet content from a backend service.
+To load Excel files programmatically, they can be converted into byte arrays. This approach is particularly effective when files are retrieved from a backend service.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -47,7 +47,7 @@ The Syncfusion Blazor Spreadsheet component enables loading Excel files directly
 {% endtabs %}
 
 ### Open an Excel file from Base64 string data
-Excel files can also be loaded by passing a Base64-encoded representation of the file. This approach is effective for dynamically loading content from a database or API without exposing the file path.
+To load Excel files encoded as Base64 strings into the component, this option proves effective in scenarios involving data retrieval from databases or APIs.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -72,20 +72,27 @@ Excel files can also be loaded by passing a Base64-encoded representation of the
 {% endtabs %}
 
 ### Supported file formats
-The following format is supported for opening:
-* MS Excel (.xlsx)
-* MS Excel 97-2003 (.xls)
+The Spreadsheet component supports the following file formats for opening:
+* Microsoft Excel (.xlsx)
+* Microsoft Excel 97-2003 (.xls)
 
 ## Save
-The Spreadsheet component can save data, styles, formatting, and additional content as an Excel file.
+The Spreadsheet component allows saving data, styles, formatting, and additional content as an Excel file. This functionality ensures that all modifications are retained in a compatible format.
 
 ### Save an Excel file using UI
-To save the Spreadsheet content through the user interface, select the `File > Save As` option from the ribbon menu.
+To save the Spreadsheet content through the user interface, select the **File > Save As** option from the **Ribbon**.
 
 ![UI showing file menu with save option](./images/file-save-feature.png)
 
 ![File explorer interface for saving a file](./images/file-save-dialogbox.png)
 
+### Saving file with active protection settings
+When a protected sheet or workbook is saved or downloaded, all associated settings - such as the protection password, unlocked cell ranges, and sheet options - are preserved in the Excel file. These settings remain active and are consistently maintained when the file is opened in other viewers like **Microsoft Excel** or **Google Sheets**, ensuring seamless protection across viewers. To know more about protection, refer [here](https://blazor.syncfusion.com/documentation/spreadsheet/protection#protect-sheet).
+
 ### Supported file formats
-The following format is supported for saving:
-* MS Excel (.xlsx)
\ No newline at end of file
+The Spreadsheet component supports saving files in the Microsoft Excel (.xlsx) format.
+
+## New
+To create a new workbook through the user interface, select **File > New** from the **Ribbon**. This action initializes a blank Spreadsheet component, ready for data entry or formatting. If unsaved changes are present, a confirmation dialog will appear, indicating that these changes will be lost. The dialog presents options to proceed with creating the new workbook by selecting **OK**, or to cancel the operation by selecting **Cancel**.
+
+![UI showing file menu with new option](./images/file-new-feature.png)
\ No newline at end of file
diff --git a/blazor/spreadsheet/sorting.md b/blazor/spreadsheet/sorting.md
index 48ab090316..bec5b93caa 100644
--- a/blazor/spreadsheet/sorting.md
+++ b/blazor/spreadsheet/sorting.md
@@ -1,6 +1,6 @@
 ---
 layout: post
-title: Sorting in Blazor Spreadsheet Component | Syncfusion.
+title: Sorting in Blazor Spreadsheet Component | Syncfusion
 description: Checkout and learn here about sorting functionality in Syncfusion Blazor Spreadsheet component and much more.
 platform: Blazor
 component: Spreadsheet
@@ -9,37 +9,104 @@ documentation: ug
 
 # Sorting in Blazor Spreadsheet component
 
-Sorting in the Spreadsheet component enables organizing data in a meaningful order, allowing for better data analysis and presentation. The Blazor Spreadsheet component provides comprehensive sorting capabilities for worksheet data in ascending or descending order.
-
-To control the sorting functionality, the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AllowSorting) property can be used to enable or disable sorting operations in the Spreadsheet. The default value of the `AllowSorting` property is **true**.
+The Blazor Spreadsheet component provides built-in sorting functionality that enables users to organize worksheet data in either ascending or descending order. This support is especially helpful for improving readability and simplifying data analysis by arranging content according to selected columns. The sorting behavior is controlled by the [`AllowSorting`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_AllowSorting) property, which is set to `true` by default. When `AllowSorting` is set to `false`, all sorting options are removed from the interface, including the Ribbon and Context Menu, and related API methods become inactive. Additionally, sorting is disabled if the worksheet is protected. For more information on worksheet protection, refer [here](https://blazor.syncfusion.com/documentation/spreadsheet/protection#protect-sheet).
 
 ## Sort operations
 
-The Spreadsheet component offers two sorting orders:
+The component supports two types of sort orders that help organize data for easier analysis and presentation:
 
 * **Ascending** - Arranges data from lowest to highest (A to Z, 0 to 9).
 * **Descending** - Arranges data from highest to lowest (Z to A, 9 to 0).
 
+### Sort via UI
+
+Sorting can be performed through the user interface (UI) using any of the following methods:
+
+**Using the Ribbon**
+
+- Select a cell or range of cells to sort.
+- Click the **Home** tab in the **Ribbon**.
+- Click the **Sort & Filter** icon.
+- Choose either **Ascending** or **Descending** from the dropdown menu.
+
+![Sort option via Ribbon](./images/ribbon-sort.png)
+
+**Using the Context Menu**
+
+- Select a cell or range of cells to sort.
+- Right-click on the selected range to open the context menu.
+- Hover over the **Sort** option.
+- Select either **Ascending** or **Descending** from the submenu.
+
+![Sort option via Context Menu](./images/contextmenu-sort.png)
+
+**Using the Filter Dialog**
+
+If filtering is enabled, sorting can also be performed using the filter dialog. This adds another layer of flexibility by allowing users to sort data directly through the filtered view. For more details on how filtering works in the Blazor Spreadsheet component, refer [here](https://blazor.syncfusion.com/documentation/spreadsheet/filtering).
+
+- Apply **Filter** to the desired column.
+- Click the filter icon in the column header.
+- In the filter dialog, choose either **Sort Ascending** or **Sort Descending**.
+- The sort will be applied to the entire used range based on the selected column.
+
+![Sort option via Filter Dialog](./images/filter-dialog-sort.gif)
+
 ### Sort by active cell
 
-The sort operation uses the column of the active cell as the primary sort criterion. When sorting is applied, the Spreadsheet component sorts all related data based on the values in the active cell's column, maintaining row integrity even when only a specific range is selected.
+When a sort operation is performed without an explicitly selected range, the component automatically identifies the **used range** of the worksheet. The used range includes all contiguous cells that contain data. Sorting is applied to this range using the column of the **active cell** as the sort key.
+
+A **sort key** is the column whose values determine the order of the rows during sorting. It compares the values in this column and rearranges the rows accordingly.
+
+This behavior ensures that the entire dataset is sorted cohesively, preserving row integrity and preventing data misalignment.
+
+**Example**
+
+If the **active cell** is located in **Column C** and no range is selected, it's sorts all rows within the used range based on the values in **Column C**.
+
+### Sort by selected range
+
+When a specific range is selected before initiating a sort operation, the component restricts the sort to the selected range. The column of the active cell within the selected range is used as the sort key. This method allows targeted sorting of a subset of data without affecting the rest of the worksheet.
+
+**Example**
+
+If the range **B2:D10** is selected and the active cell is in **Column D**, the component sorts only the rows within **B2:D10** based on the values in **Column D**.
+
+### Sort via programmatically
+
+The [SortRangeAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_SortRangeAsync_System_String_System_String_System_String_) method enables sorting of a specified range of cells based on the values in a specific column. This method provides a programmatic way to sort data without using the UI. The available parameters in the `SortRangeAsync` method are:
+
+| **Parameter**     | **Type**                   | **Description** |
+|-------------------|----------------------------|-----------------|
+| selectedRange   | string *(optional)*       | Specifies the address of the cell range to sort. If not provided, the currently selected range in the active worksheet is used. The range must follow the standard Excel format (e.g., `"B2:C5"`). Sorting is based on the first column within the specified range. |
+| sortDirection   | SortDirection *(optional)* | Defines the direction in which data is sorted. Accepts values from the `SortDirection` enumeration. If unspecified, the default is **SortDirection.Ascending**.<br><br>**Possible values:**<br>• **SortDirection.Ascending** – Sorts data in ascending order.<br>• **SortDirection.Descending** – Sorts data in descending order. |
 
-### Performing sort operations via the UI
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
 
-In the active sheet, select the cell range to be sorted. Sorting can be performed using any of the following methods:
+@using Syncfusion.Blazor.Spreadsheet
 
-* **Using Ribbon Toolbar**:
-   * Select the **Sort & Filter** icon from the **Home** tab
-   * Click **Ascending** or **Descending**
+<button @onclick="SortData">Sort</button>
 
-   ![Sort options via the Ribbon toolbar](./images/ribbon-sort.png)
+<SfSpreadsheet @ref="SpreadsheetInstance" DataSource="DataSourceBytes">
+    <SpreadsheetRibbon></SpreadsheetRibbon>
+</SfSpreadsheet>
 
-* **Using Context Menu**:
-   * Right-click the selected range
-   * Choose **Sort** > **Ascending** or **Descending**
+@code {
+    public byte[] DataSourceBytes { get; set; }
+    public SfSpreadsheet SpreadsheetInstance;
 
-   ![Sort options via the context menu](./images/contextmenu-sort.png)
+    protected override void OnInitialized()
+    {
+        string filePath = "wwwroot/Sample.xlsx";
+        DataSourceBytes = File.ReadAllBytes(filePath);
+    }
 
-The following image illustrates basic sorting operations in the Spreadsheet component, showing how data can be organized in ascending or descending order while maintaining row relationships.
+    public async Task SortData()
+    {
+         // Sorts the range B2:D5 in ascending order based on values in "Column B".
+         await SpreadsheetInstance.SortRangeAsync("B2:D5", SortDirection.Ascending);
+    }
+}
 
-![Sorting demonstration in Blazor Spreadsheet](./images/sorting.gif)
\ No newline at end of file
+{% endhighlight %}
+{% endtabs %}
diff --git a/blazor/spreadsheet/undo-redo.md b/blazor/spreadsheet/undo-redo.md
index 9fdd7f8dc1..5044fb8f16 100644
--- a/blazor/spreadsheet/undo-redo.md
+++ b/blazor/spreadsheet/undo-redo.md
@@ -9,26 +9,28 @@ documentation: ug
 
 # Undo and Redo in Blazor Spreadsheet component
 
-The <b>Undo</b> option reverses the last action performed in the Spreadsheet, while the <b>Redo</b> option reapplies an action that was previously undone.
+The **Undo** and **Redo** functionality in the Blazor Spreadsheet component allows users to easily reverse or reapply recent actions. It maintains a history of spreadsheet operations, encouraging experimentation with data and formatting while preserving the ability to restore previous states. All major operations are supported, including cell editing, formatting, structural changes, and data manipulation. The keyboard shortcuts - **Ctrl + Z** for Undo and **Ctrl + Y** for Redo - provide quick access without interacting with interface elements. 
 
-## Undo
+N> The undo and redo history is limited to **25 operations** to optimize memory usage; once this limit is reached, older actions are automatically discarded. Additionally, the history is cleared when worksheet protection is enabled.
 
-<b>Undo</b> reverses the last action performed in the Spreadsheet. It can be done in the following ways:
+## Undo
 
-* Select the <b>Undo</b> option from the **Home** tab on the Ribbon toolbar.
+The **Undo** operation reverses the most recent action performed within the Spreadsheet, restoring the previous state of the component and enabling safe modifications to content and formatting. End users can perform the undo operation through the user interface (UI) in the following ways:
 
-* Use the keyboard shortcut  <kbd>Ctrl</kbd> + <kbd>Z</kbd>.
+* Click the **Undo** button located in the **Home** tab of the **Ribbon** to reverse the latest operation.
+* Use the keyboard shortcut **Ctrl + Z** for a quick way to undo the last action.
 
 ![UI showing undo option](./images/undo-feature.png)
 
-## Redo
+N> The **Undo** button is automatically disabled when there are no reversible operations available.
 
-<b>Redo</b> reverses the last action performed in the Spreadsheet. It can be done in the following ways:
+## Redo
 
-* Select the <b>Redo</b> option from the **Home** tab on the Ribbon toolbar.
+The **Redo** operation reapplies an action that was previously undone, allowing end users to move forward through the operation history and restore both data and interface states. Redo actions can be performed via the user interface in the following ways:
 
-* Use the keyboard shortcut <kbd>Ctrl</kbd> + <kbd>Y</kbd>.
+* Click the **Redo** button located in the **Home** tab of the **Ribbon** to reapply the most recently undone operation.
+* Use the keyboard shortcut **Ctrl + Y** for quick access to redo the last undone action.
 
 ![UI showing redo option](./images/redo-feature.png)
 
-
+N> The **Redo** button is automatically disabled when no actions are available to reapply or when a cell is in editing mode. Additionally, the redo history is cleared whenever a new action is performed following an undo.
diff --git a/blazor/spreadsheet/worksheet.md b/blazor/spreadsheet/worksheet.md
index c9b5813e1d..c886505bb1 100644
--- a/blazor/spreadsheet/worksheet.md
+++ b/blazor/spreadsheet/worksheet.md
@@ -9,21 +9,36 @@ documentation: ug
 
 # Worksheet in Blazor Spreadsheet component
 
-A worksheet is a collection of cells organized in the form of rows and columns that allows for storing, formatting, and manipulating data.
+A worksheet is a collection of cells organized in the form of rows and columns that allows for storing, formatting, and manipulating data. This feature supports data organization across multiple sheets, making it suitable for scenarios like managing department-wise records, financial reports, or project data in separate sheets.
+
+N> If the workbook is protected, operations like inserting, deleting, renaming, hiding, unhiding, moving, or duplicating sheets are disabled through both user interface (UI) and code. To know more about workbook protection, refer [here](https://blazor.syncfusion.com/documentation/spreadsheet/protection#protect-workbook).
 
 ## Insert sheet
 
-The Spreadsheet component provides support for inserting new sheets. New sheets can be dynamically inserted through the following methods:
+The Insert sheet feature in the Syncfusion Blazor Spreadsheet component allows adding new sheets to a workbook, enabling better organization of data across multiple sheets. This feature can be accessed through user interface (UI) or programmatically, offering flexibility based on the application's requirements.
+
+### Insert sheet via UI
+
+To add or insert a new sheet using the UI, follow these steps:
 
 * Click the `+` icon button in the **Sheet** tab. This will insert a new empty sheet next to current active sheet.
+![Add sheet option](images/addsheet.png)
 
 * Right click on a **Sheet** tab, and then select **Insert** option from the context menu to insert a new empty sheet after the current active sheet.
-
-* Using [InsertSheetAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_InsertSheetAsync_System_Nullable_System_Int32__System_Nullable_System_Int32__) method.
+![Insert sheet context menu](images/insert-sheet-option.png)
 
 ### Insert sheet programmatically
 
-The `InsertSheetAsync()` method enables programmatic insertion of multiple sheets at the desired index. The following code example illustrates how to insert a sheet programmatically.
+The [InsertSheetAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_InsertSheetAsync_System_Nullable_System_Int32__System_Nullable_System_Int32__) method allows adding one or more sheets to a workbook using code. It supports two main scenarios: adding multiple sheets with default names or adding a single sheet with a user-defined name. Below are the details for each scenario, including code examples and parameter information.
+
+**Insert multiple sheets at a specific index**
+
+This method inserts one or more sheets at a specified position in the workbook with default names (e.g., Sheet1, Sheet2). For example, if the spreadsheet has three sheets named Sheet1, Sheet2, and Sheet3, adding two sheets at position 1 results in: Sheet1, Sheet4, Sheet5, Sheet2, Sheet3. If no position is provided, the sheets are added based on active sheet index. This is ideal for scenarios requiring multiple sheets, such as organizing large datasets or creating templates for repetitive tasks.
+
+| Parameter | Type | Description |
+| -- | -- | -- |
+| index | int (optional) | The zero-based index where the sheets will be inserted. If not specified, sheets are added based on active sheet index. If the specified index is invalid (e.g., negative or beyond the workbook's sheet count), no action occurs. |
+| count | int (optional) | The number of sheets to add. Defaults to 1 if not specified. |
 
 {% tabs %}
 {% highlight razor %}
@@ -37,7 +52,6 @@ The `InsertSheetAsync()` method enables programmatic insertion of multiple sheet
 </SfSpreadsheet>
 
 @code {
-
     public byte[] DataSourceBytes { get; set; }
     public SfSpreadsheet SpreadsheetRef;
 
@@ -49,31 +63,81 @@ The `InsertSheetAsync()` method enables programmatic insertion of multiple sheet
 
     public async Task InsertSheetHandler()
     {
-        // Inserts new sheets from index 1 to 3.
-        await SpreadsheetRef.InsertSheetAsync(1,3);
+        // Insert 2 sheets at index 1.
+        await SpreadsheetRef.InsertSheetAsync(1, 2);
     }
 }
 
 {% endhighlight %}
 {% endtabs %}
 
-The following image illustrates the insert sheet options in the Spreadsheet.
+**Insert a single sheet with a user-defined name**
 
-![Add sheet option](images/addsheet.png)
+This method adds one sheet at a specific position with a user-defined name. Each call to this method adds only one sheet. Using meaningful names like "Budget" or "Inventory" makes the workbook easier to understand. If a negative index value is provided, the method will exit without adding any sheet.
 
-![Insert sheet context menu](images/insert-sheet-option.png)
+| Parameter | Type | Description |
+| -- | -- | -- |
+| index | int | The zero-based index where the sheet will be inserted. If the specified index is invalid (e.g., negative or beyond the workbook's sheet count), no action occurs. |
+| sheetName | string | The name for the new sheet. If the name already exist in workbook, no action occurs. |
+
+{% tabs %}
+{% highlight razor %}
+
+@using Syncfusion.Blazor.Spreadsheet
+
+<button @onclick="InsertSheetHandler">Insert Sheet</button>
+
+<SfSpreadsheet @ref=SpreadsheetRef DataSource="DataSourceBytes">
+    <SpreadsheetRibbon></SpreadsheetRibbon>
+</SfSpreadsheet>
+
+@code {
+    public byte[] DataSourceBytes { get; set; }
+    public SfSpreadsheet SpreadsheetRef;
+
+    protected override void OnInitialized()
+    {
+        string filePath = "wwwroot/Sample.xlsx";
+        DataSourceBytes = File.ReadAllBytes(filePath);
+    }
+
+    public async Task InsertSheetHandler()
+    {
+        // Insert a sheet at index 1 with a user-defined name.
+        await SpreadsheetRef.InsertSheetAsync(1, "Sales");
+    }
+}
+
+{% endhighlight %}
+{% endtabs %}
 
 ## Delete sheet
 
-The Spreadsheet component provides support for removing existing worksheets. The existing worksheet can be dynamically deleted through the following methods:
+The Spreadsheet component supports removing sheets from a spreadsheet. When the workbook contains only one sheet, the delete option is disabled in the user interface (UI), and no action occurs during programmatic deletion attempts. Sheets can be deleted using user interface (UI) or programmatically, based on application requirements.
+
+### Delete sheet via UI
+
+To remove a sheet using the user interface (UI), follow these steps:
 
 * Right click on a **Sheet** tab, and then select **Delete** option from context menu.
 
-* Using [DeleteSheetAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_DeleteSheetAsync_System_Nullable_System_Int32__) method.
+![Delete sheet option](images/delete-sheet-option.png)
+
+* Click **OK** in the confirmation dialog to delete the sheet.
+
+![Delete confirm dialog](images/delete-confirm-dialog.png)
 
 ### Delete sheet programmatically
 
-The sheets can be programmatically deleted at the desired index using the `DeleteSheetAsync()` method. The following code example illustrates how to delete a sheet programmatically.
+Sheets can be deleted at a specific index using the [DeleteSheetAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_DeleteSheetAsync_System_Nullable_System_Int32__) method. It supports two main scenarios: delete sheet by index or delete sheet by name. Below are the details for each scenario, including code examples and parameter information.
+
+**Delete sheet by index**
+
+This method removes a sheet from a specific position. It works best when the sheet location in the workbook is known, such as when removing the first or last sheet through code. If no position is specified, the current active sheet gets deleted.
+
+| Parameter | Type | Description |
+| -- | -- | -- |
+| index | int (optional) | The zero-based index of the sheet to delete. If no index is provided, the active sheet is deleted. If the index is invalid (e.g., negative or beyond the workbook's sheet count) or the workbook has only one sheet, no action occurs. |
 
 {% tabs %}
 {% highlight razor %}
@@ -87,7 +151,6 @@ The sheets can be programmatically deleted at the desired index using the `Delet
 </SfSpreadsheet>
 
 @code {
-
     public byte[] DataSourceBytes { get; set; }
     public SfSpreadsheet SpreadsheetRef;
 
@@ -99,7 +162,7 @@ The sheets can be programmatically deleted at the desired index using the `Delet
 
     public async Task DeleteSheetHandler()
     {
-        // To delete the first sheet.
+        // Remove sheet at index 0.
         await SpreadsheetRef.DeleteSheetAsync(0);
     }
 }
@@ -107,47 +170,104 @@ The sheets can be programmatically deleted at the desired index using the `Delet
 {% endhighlight %}
 {% endtabs %}
 
-The following image illustrates the delete sheet option in the Spreadsheet. 
+**Delete sheet by name**
 
-![Delete sheet option](images/delete-sheet-option.png)
+This method removes a sheet that matches the given name. It helps when the exact sheet name is known, like when deleting sheets called "Budget" or "Sales". No sheets will be deleted if only one sheet exists in the workbook. The method also won't delete any sheets if the provided name is invalid.
+
+| Parameter | Type | Description |
+| -- | -- | -- |
+| sheetName | string | The name of the sheet to delete. If the name does not exist or the workbook has only one sheet, no action occurs. |
+
+{% tabs %}
+{% highlight razor %}
+
+@using Syncfusion.Blazor.Spreadsheet
+
+<button @onclick="DeleteSheetHandler">Delete Sheet</button>
+
+<SfSpreadsheet @ref=SpreadsheetRef DataSource="DataSourceBytes">
+    <SpreadsheetRibbon></SpreadsheetRibbon>
+</SfSpreadsheet>
+
+@code {
+    public byte[] DataSourceBytes { get; set; }
+    public SfSpreadsheet SpreadsheetRef;
+
+    protected override void OnInitialized()
+    {
+        string filePath = "wwwroot/Sample.xlsx";
+        DataSourceBytes = File.ReadAllBytes(filePath);
+    }
+
+    public async Task DeleteSheetHandler()
+    {
+        // Remove sheet named "Sales".
+        await SpreadsheetRef.DeleteSheetAsync("Sales");
+    }
+}
+
+{% endhighlight %}
+{% endtabs %}
 
 ## Rename sheet
 
-The Spreadsheet component provides support for renaming worksheets. Existing worksheets can be dynamically renamed by right-clicking on a **Sheet** tab, and then selecting the **Rename** option from the context menu. 
+The Rename Sheet feature allows assigning user-defined names to sheets for better organization. Sheet names must be unique within the workbook, and renaming does not affect data or formulas. This feature is essential for improving workbook clarity, especially in complex workbooks with multiple sheets.
+
+To rename a sheet:
 
-The following image illustrates the rename sheet option in the Spreadsheet.
+* Right-click a **Sheet** tab and select **Rename** from the context menu.
 
 ![Rename sheet option](images/rename-sheet-option.png)
 
+*  Enter a new name and click **update** to confirm.
+
+![Rename dialog](images/rename-dialog.png)
+
 ## Hide sheet
 
-The Spreadsheet component provides support for hiding worksheets. Hiding worksheets helps prevent unauthorized or accidental changes to the file. Existing worksheets can be dynamically hidden by right-clicking on a **Sheet** tab that should be hidden, then selecting the **Hide** option from the context menu. The selected sheet will be hidden from view but will remain in the workbook.
+Hiding sheets in the Spreadsheet component prevents unauthorized access or accidental changes. Hidden sheets remain in the workbook, retaining all data, formulas, and functionality, but are not visible in the user interface (UI). To hide a sheet, right-click the **Sheet** tab and select **Hide** from the context menu.
 
-The following image illustrates the hide sheet option in the Spreadsheet.
+**NOTE**
+
+* The **Hide** option is available only if the workbook has more than one visible sheet, ensuring at least one sheet remains visible.
+
+* Hidden sheets can still be referenced in formulas and calculations.
+
+* Access the sheet selection menu to view all sheets, including hidden ones.
 
 ![Hide sheet option](images/hide-sheet-option.png)
 
 ## Unhide sheet
 
-The Spreadsheet component also provides functionality to restore hidden worksheets to view. Hidden worksheets appear in a disabled state within the sheet selection menu. To make a hidden sheet visible again, click on the **Sheet** tab list icon and then click the hidden sheet. The previously hidden sheet will reappear in the sheet tab collection and become available for editing.
-
-The following image illustrates the sheet selection menu showing a visible sheet (Sheet1) and a disabled hidden sheet (Sheet2).
+The Spreadsheet component allows restoring hidden sheets to view, which appear in a disabled state within the sheet selection menu. To make a hidden sheet visible again, click on the **Sheet** tab list icon and then select the hidden sheet. Once selected, the sheet will reappear in the sheet tab collection and become available for editing.
 
 ![Unhide sheet option](images/unhide-sheet-option.png)
 
 ## Move sheet
 
-The Spreadsheet component allows for rearranging the order of worksheets by moving them to different positions. Sheets can be moved in the following methods:
+The Spreadsheet component allows reordering sheets by moving them to different positions within the workbook. This feature helps organize sheets in a preferred sequence for better navigation and workflow efficiency. Sheets can be moved using user interface (UI) or programmatically, based on application needs.
+
+### Move sheet via UI
+
+To move a sheet using the user interface (UI), follow these steps:
 
 * Click and hold on a **Sheet** tab, then drag it to the desired position.
 
 * Right click on a **Sheet** tab and select **Move Left** or **Move Right** options from the context menu to reposition the sheet accordingly.
 
-* Using [MoveSheetAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_MoveSheetAsync_System_Nullable_System_Int32__System_Int32_) method.
+N> **Move Right** is enabled only if a sheet exists to the right, and **Move Left** is enabled only if a sheet exists to the left.
+
+![Move Left sheet option](images/move-left-option.png)
+![Move Right sheet option](images/move-right-option.png)
 
 ### Move sheet programmatically
 
-The `MoveSheetAsync()` method can be used to move a sheet from one index position to another programmatically.
+The [MoveSheetAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_MoveSheetAsync_System_Nullable_System_Int32__System_Int32_) method moves a sheet from one index to another programmatically. This method requires two parameters: the current zero-based index of the sheet to move and the destination zero-based index where the sheet will be placed. If either index is invalid (negative or beyond the sheet count), the method will not perform any action.
+
+| Parameter | Type | Description |
+| -- | -- | -- |
+| sourceIndex | int | The zero-based index of the sheet to move. If invalid (e.g., negative or beyond sheet count), no action occurs. |
+| destinationIndex | int | The zero-based index where the sheet will be moved. If invalid, no action occurs. |
 
 {% tabs %}
 {% highlight razor %}
@@ -161,7 +281,6 @@ The `MoveSheetAsync()` method can be used to move a sheet from one index positio
 </SfSpreadsheet>
 
 @code {
-
     public byte[] DataSourceBytes { get; set; }
     public SfSpreadsheet SpreadsheetRef;
 
@@ -181,22 +300,27 @@ The `MoveSheetAsync()` method can be used to move a sheet from one index positio
 {% endhighlight %}
 {% endtabs %}
 
-The following images illustrates the move sheet options in the Spreadsheet.
-
-![Move Left sheet option](images/move-left-option.png)
-![Move Right sheet option](images/move-right-option.png)
-
 ## Duplicate sheet
 
-The Spreadsheet component provides functionality to create an exact copy of an existing worksheet. Duplicating a worksheet is helpful when creating multiple sheets with similar content or structure. Sheets can be duplicated using the following methods:
+The Spreadsheet component allows creating an exact copy of a sheet, including all data, formatting, formulas, and styling. Duplicating a sheet is useful for creating multiple sheets with similar content or structure. The duplicated sheet is inserted immediately after the original sheet and is assigned a unique name, typically appending a number (e.g., "Sheet1" becomes "Sheet1 (2)"). Sheet duplication can be performed through user interface (UI) or programmatically, depending on application needs.
+
+### Duplicate sheet via UI
 
-* Right click on a **Sheet** tab that needs to be duplicated and select **Duplicate** option from the context menu.
+To duplicate a sheet using the user interface (UI), simply right-click on the desired **Sheet** tab and choose the **Duplicate** option from the context menu.
 
-* Using [DuplicateSheetAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_DuplicateSheetAsync_System_Nullable_System_Int32__) method.
+![Duplicate sheet option](images/duplicate-sheet-option.png)
 
 ### Duplicate sheet programmatically
 
-The `DuplicateSheetAsync()` method can be used to create a copy of a sheet programmatically. The duplicate sheet will be inserted after the source sheet by default.
+The [DuplicateSheetAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Spreadsheet.SfSpreadsheet.html#Syncfusion_Blazor_Spreadsheet_SfSpreadsheet_DuplicateSheetAsync_System_Nullable_System_Int32__) method allows duplicating a sheet programmatically by specifying its index or name. The duplicated sheet is inserted immediately after the original sheet. Below are details for duplicating a sheet by index or by name, including parameter information and code examples.
+
+**Duplicate sheet by index**
+
+This method creates a copy of the sheet at the specified index. If no index is provided, the active sheet is duplicated. This is useful when the position of the sheet in the workbook is known.
+
+| Parameter | Type | Description |
+| -- | -- | -- |
+| index | int (optional) | The zero-based index of the sheet to duplicate. If no index is provided, the active sheet is duplicated. If the index is invalid (e.g., negative or beyond sheet count), no action occurs. |
 
 {% tabs %}
 {% highlight razor %}
@@ -210,7 +334,6 @@ The `DuplicateSheetAsync()` method can be used to create a copy of a sheet progr
 </SfSpreadsheet>
 
 @code {
-
     public byte[] DataSourceBytes { get; set; }
     public SfSpreadsheet SpreadsheetRef;
 
@@ -230,6 +353,41 @@ The `DuplicateSheetAsync()` method can be used to create a copy of a sheet progr
 {% endhighlight %}
 {% endtabs %}
 
-The following image illustrates the duplicate sheet option in the Spreadsheet.
+**Duplicate sheet by name**
+
+This method creates a copy of the sheet with the specified name. The sheet name matching is case-insensitive. This is useful when the exact sheet name is known, such as duplicating a sheet named "Budget" or "Sales".
+
+| Parameter | Type | Description |
+| -- | -- | -- |
+| sheetName | string | The name of the sheet to duplicate. If the name does not exist, no action occurs. |
+
+{% tabs %}
+{% highlight razor %}
+
+@using Syncfusion.Blazor.Spreadsheet
+
+<button @onclick="DuplicateSheetHandler">Duplicate Sheet</button>
+
+<SfSpreadsheet @ref=SpreadsheetRef DataSource="DataSourceBytes">
+    <SpreadsheetRibbon></SpreadsheetRibbon>
+</SfSpreadsheet>
 
-![Duplicate sheet option](images/duplicate-sheet-option.png)
\ No newline at end of file
+@code {
+    public byte[] DataSourceBytes { get; set; }
+    public SfSpreadsheet SpreadsheetRef;
+
+    protected override void OnInitialized()
+    {
+        string filePath = "wwwroot/Sample.xlsx";
+        DataSourceBytes = File.ReadAllBytes(filePath);
+    }
+
+    public async Task DuplicateSheetHandler()
+    {
+        // Duplicate the sheet named "Sheet1".
+        await SpreadsheetRef.DuplicateSheetAsync("Sheet1");
+    }
+}
+
+{% endhighlight %}
+{% endtabs %}
\ 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 e61c581ca4..a4b2a1674a 100644
--- a/blazor/tabs/how-to/create-wizard-using-tab.md
+++ b/blazor/tabs/how-to/create-wizard-using-tab.md
@@ -93,11 +93,11 @@ You can go back on each tab using buttons available in it and tabs are disabled
                         <SfGrid @ref="AvailableTrain" Width="100%" TValue="GridFields" DataSource="@GridData">
                             <GridEvents RowSelected="SelectedTrainDetails" TValue="GridFields"></GridEvents>
                             <GridColumns>
-                                <GridColumn Field=@nameof(GridFields.TrainNo) HeaderText="Train No" Width="120" Type="ColumnType.Number"></GridColumn>
+                                <GridColumn Field=@nameof(GridFields.TrainNo) HeaderText="Train No" Width="120" Type="ColumnType.Integer"></GridColumn>
                                 <GridColumn Field=@nameof(GridFields.Name) Width="140"></GridColumn>
                                 <GridColumn Field=@nameof(GridFields.Departure) HeaderText="Departure" Width="120"></GridColumn>
                                 <GridColumn Field=@nameof(GridFields.Arrival) HeaderText="Arrival" Width="140"></GridColumn>
-                                <GridColumn Field=@nameof(GridFields.Availability) HeaderText="Availability" Width="140" Type="ColumnType.Number"></GridColumn>
+                                <GridColumn Field=@nameof(GridFields.Availability) HeaderText="Availability" Width="140" Type="ColumnType.Integer"></GridColumn>
                             </GridColumns>
                         </SfGrid>
                         <br />
@@ -216,10 +216,10 @@ You can go back on each tab using buttons available in it and tabs are disabled
                         <div class="tab-title1 wizard-title">Confirm the details and proceed</div>
                         <SfGrid @ref="TicketDetailGrid" Width="100%" TValue="PassengerFields" DataSource="@PassengerData">
                             <GridColumns>
-                                <GridColumn Field=@nameof(PassengerFields.TrainNo) HeaderText="Train No" Width="120" Type="ColumnType.Number"></GridColumn>
+                                <GridColumn Field=@nameof(PassengerFields.TrainNo) HeaderText="Train No" Width="120" Type="ColumnType.Integer"></GridColumn>
                                 <GridColumn Field=@nameof(PassengerFields.Name) HeaderText="Name" Width="140"></GridColumn>
                                 <GridColumn Field=@nameof(PassengerFields.Gender) HeaderText="Gender" Width="120"></GridColumn>
-                                <GridColumn Field=@nameof(PassengerFields.Berth) Width="140" Type="ColumnType.Number"></GridColumn>
+                                <GridColumn Field=@nameof(PassengerFields.Berth) Width="140" Type="ColumnType.Integer"></GridColumn>
                             </GridColumns>
                         </SfGrid>
                         <br />
diff --git a/blazor/tabs/images/blazor-active-tabs-textIcon-customize.png b/blazor/tabs/images/blazor-active-tabs-textIcon-customize.png
new file mode 100644
index 0000000000..7e64611c1c
Binary files /dev/null and b/blazor/tabs/images/blazor-active-tabs-textIcon-customize.png differ
diff --git a/blazor/tabs/images/blazor-tabs-customize-content-background.png b/blazor/tabs/images/blazor-tabs-customize-content-background.png
new file mode 100644
index 0000000000..a43d6d0688
Binary files /dev/null and b/blazor/tabs/images/blazor-tabs-customize-content-background.png differ
diff --git a/blazor/tabs/images/blazor-tabs-customize-content.png b/blazor/tabs/images/blazor-tabs-customize-content.png
new file mode 100644
index 0000000000..38d191253b
Binary files /dev/null and b/blazor/tabs/images/blazor-tabs-customize-content.png differ
diff --git a/blazor/tabs/images/blazor-tabs-customize-items.png b/blazor/tabs/images/blazor-tabs-customize-items.png
new file mode 100644
index 0000000000..219d268f19
Binary files /dev/null and b/blazor/tabs/images/blazor-tabs-customize-items.png differ
diff --git a/blazor/tabs/images/blazor-tabs-customize.png b/blazor/tabs/images/blazor-tabs-customize.png
new file mode 100644
index 0000000000..6e3ab53418
Binary files /dev/null and b/blazor/tabs/images/blazor-tabs-customize.png differ
diff --git a/blazor/tabs/images/blazor-tabs-header-customization.png b/blazor/tabs/images/blazor-tabs-header-customization.png
new file mode 100644
index 0000000000..e4360e5b1d
Binary files /dev/null and b/blazor/tabs/images/blazor-tabs-header-customization.png differ
diff --git a/blazor/tabs/images/blazor-tabs-header-icon-customization.png b/blazor/tabs/images/blazor-tabs-header-icon-customization.png
new file mode 100644
index 0000000000..fd3c55b8bb
Binary files /dev/null and b/blazor/tabs/images/blazor-tabs-header-icon-customization.png differ
diff --git a/blazor/tabs/images/blazor-tabs-hover-customization.png b/blazor/tabs/images/blazor-tabs-hover-customization.png
new file mode 100644
index 0000000000..75082bf8cd
Binary files /dev/null and b/blazor/tabs/images/blazor-tabs-hover-customization.png differ
diff --git a/blazor/tabs/style.md b/blazor/tabs/style.md
index 7b5defa302..db02d43818 100644
--- a/blazor/tabs/style.md
+++ b/blazor/tabs/style.md
@@ -23,6 +23,8 @@ Use the following CSS to customize the Tab.
 
 ```
 
+![Customize Tab](./images/blazor-tabs-customize.png)
+
 ## Customizing the Tab items
 
 Use the following CSS to customize the header items of Tab.
@@ -36,6 +38,8 @@ Use the following CSS to customize the header items of Tab.
 
 ```
 
+![Customize Tab](./images/blazor-tabs-customize-items.png)
+
 Use the following CSS to customize the content items of Tab.
 
 ```CSS
@@ -47,6 +51,8 @@ Use the following CSS to customize the content items of Tab.
 
 ```
 
+![Customize Tab](./images/blazor-tabs-customize-content.png)
+
 ## Customizing Tab's header
 
 Use the following CSS to customize the header of Tab control.
@@ -59,6 +65,8 @@ Use the following CSS to customize the header of Tab control.
 
 ```
 
+![Customize Tab](./images/blazor-tabs-header-customization.png)
+
 ## Customizing Tab's header icon
 
 Use the following CSS to customize the header item icon of Tab control.
@@ -71,6 +79,8 @@ Use the following CSS to customize the header item icon of Tab control.
 
 ```
 
+![Customize Tab](./images/blazor-tabs-header-icon-customization.png)
+
 ## Customizing Tab's content
 
 Use the following CSS to customize the content of Tab control.
@@ -83,6 +93,8 @@ Use the following CSS to customize the content of Tab control.
 
 ```
 
+![Customize Tab](./images/blazor-tabs-customize-content-background.png)
+
 ## Customizing the hover state of Tab control
 
 Use the following CSS to customize the tab item when hovering.
@@ -95,6 +107,8 @@ Use the following CSS to customize the tab item when hovering.
 
 ```
 
+![Customize Tab](./images/blazor-tabs-hover-customization.png)
+
 Use the following CSS to customize the tab item popup icon when hovering.
 
 ```CSS
@@ -118,6 +132,8 @@ Use the following CSS to customize the selected tab item.
 
 ```
 
+![Customize Tab](./images/blazor-tabs-hover-customization.png)
+
 Use the following CSS to customize the selected tab item text and icon.
 
 ```CSS
@@ -127,4 +143,6 @@ Use the following CSS to customize the selected tab item text and icon.
     color: green !important;
 }
 
-```
\ No newline at end of file
+```
+
+![Customize Tab](./images/blazor-active-tabs-textIcon-customize.png)
\ No newline at end of file
diff --git a/blazor/tutorials/build-a-blazor-stay-reservation-app.md b/blazor/tutorials/build-a-blazor-stay-reservation-app.md
index 59c1204cb4..4239fb8f0c 100644
--- a/blazor/tutorials/build-a-blazor-stay-reservation-app.md
+++ b/blazor/tutorials/build-a-blazor-stay-reservation-app.md
@@ -53,7 +53,7 @@ Now, let's configure the app to recognize and style the Syncfusion components.
 
     In your `Program.cs` file, register the Syncfusion Blazor service.
 
-    ```csharp Program.cs
+    ```csharp
     // Add the following line before builder.Build()
     builder.Services.AddSyncfusionBlazor();
     ```
@@ -111,16 +111,40 @@ First, define your data model in `Data/AppointmentData.cs`:
 public class AppointmentData
 {
     public int Id { get; set; }
+    [Required]
     public string Subject { get; set; }
     public DateTime StartTime { get; set; }
     public DateTime EndTime { get; set; }
-    public int? FloorId { get; set; } // Represents the resource
-    // Add other relevant properties like notes, guest name, etc.
+    public bool IsAllDay { get; set; } = false;
+    public string RecurrenceRule { get; set; }
+    public string RecurrenceException { get; set; }
+    public Nullable<int> RecurrenceID { get; set; }
+    public int FloorId { get; set; } // Represents the resource
+    public int RoomId { get; set; }
+    public string Price { get; set; }
+    public int Nights { get; set; }
+    public int Adults { get; set; }
+    public int Children { get; set; }
+    [Required]
+    public string Purpose { get; set; }
+    [Required]
+    public int Proof { get; set; }
+    [Required]
+    public string ProofNumber { get; set; }
+    [Required]
+    [RegularExpression(@"^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$", ErrorMessage = "Invalid email address")]
+    public string Email { get; set; }
+    [Required]
+    [RegularExpression("^[0-9]{10}$", ErrorMessage = "Invalid Phone Number")]
+    public string Phone { get; set; }
+    public string BorderColor { get; set; }
 }
 ```
 
 Now, create the `AppointmentService.cs` in the `Data` folder. This service will hold the appointment list and references to our components.
 
+The complete code for `AppointmentService.cs` is available in the GitHub repository at the following link: [`AppointmentService.cs`](https://github.com/syncfusion/blazor-showcase-stay-reservation/blob/master/webapp/Stay-Reservation/Data/AppointmentService.cs). You may reuse the full code as needed.
+
 ```csharp
 public class AppointmentService
 {
@@ -228,6 +252,8 @@ The Scheduler needs two main pieces of data:
 
 The appointment and resource data will come from `AppointmentService`.
 
+The complete code for `Schedule.razor` is available in the GitHub repository at the following link: [`Schedule.razor`](https://github.com/syncfusion/blazor-showcase-stay-reservation/blob/master/webapp/Stay-Reservation/Components/Pages/Schedule.razor). You may reuse the full code as needed.
+
 ```html
 @inject AppointmentService Service
 
@@ -325,6 +351,9 @@ Update `Components/Pages/Index.razor` with the following code:
 We need to connect the checkboxes in the sidebar to the data displayed in the scheduler. Since we're using our `AppointmentService` to hold the state, we can detect changes to the checkbox values and re-filter the scheduler's resource data. Can bind the change event to checkbox and sliders to form the filter query and update the resource data.
 
 Refer the following code to implement the filtering logic in `Components/Pages/Sidebar.razor`:
+
+The complete code for `Sidebar.razor` is available in the GitHub repository at the following link: [`Sidebar.razor`](https://github.com/syncfusion/blazor-showcase-stay-reservation/blob/master/webapp/Stay-Reservation/Components/Pages/Sidebar.razor). You may reuse the full code as needed.
+
 ```csharp
 @code {
     // ... existing code ...
diff --git a/blazor/ui-kit/overview.md b/blazor/ui-kit/overview.md
index 400103181e..8ce383f3c6 100644
--- a/blazor/ui-kit/overview.md
+++ b/blazor/ui-kit/overview.md
@@ -9,7 +9,7 @@ documentation: ug
 
 # Overview: Essential UI Kit for Blazor
 
-The Essential UI Kit for Blazor comprises over 230 responsive, ready-to-use, easy-to-implement, and customizable blocks designed to help you quickly build web applications. These blocks are developed using HTML (Razor), CSS, C#, and Syncfusion Blazor components, delivering robust functionality and ease of use. They are compatible with both Tailwind CSS and Bootstrap 5.3 CSS frameworks, supporting light and dark modes to offer flexibility and seamless integration across different user preferences. The UI kit includes blocks for the following categories:
+The Essential UI Kit for Blazor comprises over 260 responsive, ready-to-use, easy-to-implement, and customizable blocks designed to help you quickly build web applications. These blocks are developed using HTML (Razor), CSS, C#, and Syncfusion Blazor components, delivering robust functionality and ease of use. They are compatible with both Tailwind CSS and Bootstrap 5.3 CSS frameworks, supporting light and dark modes to offer flexibility and seamless integration across different user preferences. The UI kit includes blocks for the following categories:
 
 <table>
   <tr>
@@ -22,8 +22,8 @@ The Essential UI Kit for Blazor comprises over 230 responsive, ready-to-use, eas
       <ul>
         <li>Sign In</li>
         <li>Sign Up</li>
-        <li>Mobile - Sign In</li>
-        <li>OTP - Sign In</li>
+        <li>Sign In - Mobile</li>
+        <li>Sign In - OTP</li>
         <li>Forgot Password</li>
         <li>Sign Out</li>
         <li>Unlock Session</li>
@@ -59,8 +59,11 @@ The Essential UI Kit for Blazor comprises over 230 responsive, ready-to-use, eas
     <td>
       <ul>
         <li>Line Chart</li>
+        <li>Area Chart</li>
         <li>Bar Chart</li>
-        <li>Accumulation Chart</li>
+        <li>Scatter Chart</li>
+        <li>Bubble Chart</li>
+        <li>Distribution Chart</li>
       </ul>
     </td>
   </tr>
@@ -68,18 +71,18 @@ The Essential UI Kit for Blazor comprises over 230 responsive, ready-to-use, eas
     <td>AI</td>
     <td>
       <ul>
-          <li>Al Login</li>
-          <li>Al Sidebar</li>
-          <li>Al Setting</li>
-          <li>Al Search</li>
-          <li>Al Card</li>
-          <li>Al Prompt Card</li>
-          <li>Al Chat</li>
-          <li>Al Dialog</li>
-          <li>Al Floating Menu</li>
-          <li>Al Notification</li>
-          <li>Al FAQ</li>
-          <li>Al Pricing Table</li>
+        <li>AI Login</li>
+        <li>AI Sidebar</li>
+        <li>AI Setting</li>
+        <li>AI Search</li>
+        <li>AI Card</li>
+        <li>AI Prompt Card</li>
+        <li>AI Chat</li>
+        <li>AI Dialog</li>
+        <li>AI Floating Widget</li>
+        <li>AI Notification</li>
+        <li>AI FAQ</li>
+        <li>AI Pricing Table</li>
       </ul>
     </td>
   </tr>
