diff --git a/ej2-javascript-toc.html b/ej2-javascript-toc.html
index d26eebb7f..b4843288e 100644
--- a/ej2-javascript-toc.html
+++ b/ej2-javascript-toc.html
@@ -47,7 +47,7 @@
     <li><a href="/ej2-javascript/appearance/size-modes">Size-Modes</a></li>
     <li><a href="/ej2-javascript/appearance/icons">Icons</a></li>
     <li><a href="/ej2-javascript/appearance/theme-studio">Theme Studio</a></li>
-    <li><a href="/ej2-javascript/appearance/material3">Material 3 Theme</a></li>
+    <li><a href="/ej2-javascript/appearance/css-variables">Themes using CSS</a></li>
     </ul>
 </li>
 <li>
@@ -712,9 +712,9 @@
         <ul>
         <li><a href="/ej2-javascript/diagram/customization">Customization</a></li>
         <li><a href="/ej2-javascript/diagram/nodes-interaction">Interaction</a></li>
-        <li><a href="ej2-javascript/diagram/nodes-events">Events</a></li>
+        <li><a href="/ej2-javascript/diagram/nodes-events">Events</a></li>
         <li><a href="/ej2-javascript/diagram/positioning">Positioning</a></li>
-        <li><a href="ej2-javascript/diagram/expandAndCollapse">ExpandAndCollapse</a></li>
+        <li><a href="/ej2-javascript/diagram/expandAndCollapse">ExpandAndCollapse</a></li>
         </ul>
     </li>
     <li><a href="/ej2-javascript/diagram/shapes">Shapes</a></li>
@@ -722,13 +722,13 @@
         <ul>
             <li><a href="/ej2-javascript/diagram/bpmn-events">BPMN Events</a></li>
             <li><a href="/ej2-javascript/diagram/bpmn-gateway">BPMN Gateway</a></li>
-            <li><a href="ej2-javascript/diagram/bpmn-activities">BPMN Activity</a></li>
+            <li><a href="/ej2-javascript/diagram/bpmn-activities">BPMN Activity</a></li>
             <li><a href="/ej2-javascript/diagram/bpmn-dataObject">BPMN Data Object</a></li>
-            <li><a href="ej2-javascript/diagram/bpmn-dataSource">BPMN Data Source</a></li>
-            <li><a href="ej2-javascript/diagram/bpmn-textAnnotation">BPMN Text Annotation</a></li>
-            <li><a href="ej2-javascript/diagram/bpmn-groups">BPMN Group</a></li>
-            <li><a href="ej2-javascript/diagram/bpmn-expandedSubProcess">BPMN Expanded SubProcess</a></li>
-            <li><a href="ej2-javascript/diagram/bpmn-flows">BPMN Flow Connectors</a></li>
+            <li><a href="/ej2-javascript/diagram/bpmn-dataSource">BPMN Data Source</a></li>
+            <li><a href="/ej2-javascript/diagram/bpmn-textAnnotation">BPMN Text Annotation</a></li>
+            <li><a href="/ej2-javascript/diagram/bpmn-groups">BPMN Group</a></li>
+            <li><a href="/ej2-javascript/diagram/bpmn-expandedSubProcess">BPMN Expanded SubProcess</a></li>
+            <li><a href="/ej2-javascript/diagram/bpmn-flows">BPMN Flow Connectors</a></li>
         </ul>
     </li>
     <li><a href="/ej2-javascript/diagram/umldiagram">UML Diagram Shapes</a></li>
@@ -736,15 +736,15 @@
         <ul>
             <li><a href="/ej2-javascript/diagram/connector-segments">Segments</a>
                 <ul>
-                    <li><a href="/ej2-javascript/diagram/connector-staright">Straight</a></li>
-                    <li><a href="ej2-javascript/diagram/connector-orthogonal">Orthogonal</a></li>
+                    <li><a href="/ej2-javascript/diagram/connector-straight">Straight</a></li>
+                    <li><a href="/ej2-javascript/diagram/connector-orthogonal">Orthogonal</a></li>
                     <li><a href="/ej2-javascript/diagram/connector-bezier">Bezier</a>
                         <ul>
                             <li><a href="/ej2-javascript/diagram/bezier-controlPoint">Control point interaction</a></li>
-                            <li><a href="/ej2-javascript/diagram/bezier-seEditOrientation">Segment edit orientation</a></li>
+                            <li><a href="/ej2-javascript/diagram/bezier-segEditOrientation">Segment edit orientation</a></li>
                         </ul>
                     </li>
-                    <li><a href="ej2-javascript/diagram/multipleSegments">Multiple Segments</a></li>
+                    <li><a href="/ej2-javascript/diagram/multipleSegments">Multiple Segments</a></li>
                 </ul>
             </li>
             <li><a href="/ej2-javascript/diagram/connector-customization">Customization</a></li>
@@ -2418,15 +2418,9 @@
 <li><a href="/ej2-javascript/spreadsheet/keyboard-shortcuts">Keyboard Shortcuts</a></li>
 <li>How To
 <ul>
-<li><a href="/ej2-javascript/spreadsheet/how-to/sort-a-range-by-custom-list">Sort a range by custom list</a></li>
 <li><a href="/ej2-javascript/spreadsheet/how-to/create-a-object-structure">Create a JSON structure</a></li>
-<li><a href="/ej2-javascript/spreadsheet/how-to/print">Print the single multiple sheets</a></li>
 <li><a href="/ej2-javascript/spreadsheet/how-to/change-active-sheet">Changing the active sheet while importing a file</a></li>
-<li><a href="/ej2-javascript/spreadsheet/how-to/import-an-excel-document-using-file-uploader">Import an excel document using file uploader</a></li>
 <li><a href="/ej2-javascript/spreadsheet/how-to/identify-the-context-menu-opened">Identify the context menu opened</a></li>
-<li><a href="/ej2-javascript/spreadsheet/how-to/save-and-open-spreadsheet-data-as-base64-string">Save and open Spreadsheet data as Base64 string</a></li>
-<li><a href="/ej2-javascript/spreadsheet/how-to/insert-sheet-programmatically-and-make-it-the-active-sheet">Insert a sheet programmatically and make it the active sheet</a></li>
-<li><a href="/ej2-javascript/spreadsheet/how-to/get-filtered-rows">Get filtered rows</a></li>
 </ul>
 </li>
 <li><a href="/ej2-javascript/spreadsheet/mobile-responsiveness">Mobile Responsiveness</a></li>
@@ -2938,7 +2932,7 @@
 </ul>
 </li> <li>Release Notes
                 <ul>
-				<li>2024 Volume 2 - 26.*<ul><li>Weekly Release<ul><li><a href="/ej2-javascript/release-notes/26.1.39">26.1.39</a></li><li><a href="/ej2-javascript/release-notes/26.1.38">26.1.38</a></li></ul></li><li><a href="/ej2-javascript/release-notes/26.1.35">26.1.35 Main Release</a></li></ul></li><li>2024 Volume 1 - 25.*<ul><li>Weekly Release<ul><li><a href="/ej2-javascript/release-notes/25.2.7">25.2.7</a></li><li><a href="/ej2-javascript/release-notes/25.2.6">25.2.6</a></li><li><a href="/ej2-javascript/release-notes/25.2.5">25.2.5</a></li><li><a href="/ej2-javascript/release-notes/25.2.4">25.2.4</a></li><li><a href="/ej2-javascript/release-notes/25.1.42">25.1.42</a></li><li><a href="/ej2-javascript/release-notes/25.1.41">25.1.41</a></li><li><a href="/ej2-javascript/release-notes/25.1.40">25.1.40</a></li><li><a href="/ej2-javascript/release-notes/25.1.39">25.1.39</a></li><li><a href="/ej2-javascript/release-notes/25.1.38">25.1.38</a></li><li><a href="/ej2-javascript/release-notes/25.1.37">25.1.37</a></li></ul></li><li><a href="/ej2-javascript/release-notes/25.2.3">25.2.3 Service Pack Release</a></li><li><a href="/ej2-javascript/release-notes/25.1.35">25.1.35 Main Release</a></li></ul></li>
+				<li>2024 Volume 2 - 26.*<ul><li>Weekly Release<ul><li><a href="/ej2-javascript/release-notes/26.1.40">26.1.40</a></li><li><a href="/ej2-javascript/release-notes/26.1.39">26.1.39</a></li><li><a href="/ej2-javascript/release-notes/26.1.38">26.1.38</a></li></ul></li><li><a href="/ej2-javascript/release-notes/26.1.35">26.1.35 Main Release</a></li></ul></li><li>2024 Volume 1 - 25.*<ul><li>Weekly Release<ul><li><a href="/ej2-javascript/release-notes/25.2.7">25.2.7</a></li><li><a href="/ej2-javascript/release-notes/25.2.6">25.2.6</a></li><li><a href="/ej2-javascript/release-notes/25.2.5">25.2.5</a></li><li><a href="/ej2-javascript/release-notes/25.2.4">25.2.4</a></li><li><a href="/ej2-javascript/release-notes/25.1.42">25.1.42</a></li><li><a href="/ej2-javascript/release-notes/25.1.41">25.1.41</a></li><li><a href="/ej2-javascript/release-notes/25.1.40">25.1.40</a></li><li><a href="/ej2-javascript/release-notes/25.1.39">25.1.39</a></li><li><a href="/ej2-javascript/release-notes/25.1.38">25.1.38</a></li><li><a href="/ej2-javascript/release-notes/25.1.37">25.1.37</a></li></ul></li><li><a href="/ej2-javascript/release-notes/25.2.3">25.2.3 Service Pack Release</a></li><li><a href="/ej2-javascript/release-notes/25.1.35">25.1.35 Main Release</a></li></ul></li>
 				<li>2023 Volume 4 - 24.*<ul><li>Weekly Release<ul><li><a href="/ej2-javascript/release-notes/24.2.9">24.2.9</a></li><li><a href="/ej2-javascript/release-notes/24.2.8">24.2.8</a></li><li><a href="/ej2-javascript/release-notes/24.2.7">24.2.7</a></li><li><a href="/ej2-javascript/release-notes/24.2.6">24.2.6</a></li><li><a href="/ej2-javascript/release-notes/24.2.5">24.2.5</a></li><li><a href="/ej2-javascript/release-notes/24.2.4">24.2.4</a></li><li><a href="/ej2-javascript/release-notes/24.1.47">24.1.47</a></li><li><a href="/ej2-javascript/release-notes/24.1.46">24.1.46</a></li><li><a href="/ej2-javascript/release-notes/24.1.45">24.1.45</a></li><li><a href="/ej2-javascript/release-notes/24.1.44">24.1.44</a></li><li><a href="/ej2-javascript/release-notes/24.1.43">24.1.43</a></li></ul></li><li><a href="/ej2-javascript/release-notes/24.2.3">24.2.3 Service Pack Release</a></li><li><a href="/ej2-javascript/release-notes/24.1.41">24.1.41 Main Release</a></li></ul></li>
 				<li>2023 Volume 3 - 23.*<ul><li> Weekly Release<ul><li><a href="/ej2-javascript/release-notes/23.2.7">23.2.7</a></li><li><a href="/ej2-javascript/release-notes/23.2.6">23.2.6</a></li><li><a href="/ej2-javascript/release-notes/23.2.5">23.2.5</a></li><li><a href="/ej2-javascript/release-notes/23.1.44">23.1.44</a></li><li><a href="/ej2-javascript/release-notes/23.1.43">23.1.43</a></li><li><a href="/ej2-javascript/release-notes/23.1.42">23.1.42</a></li><li><a href="/ej2-javascript/release-notes/23.1.41">23.1.41</a></li><li><a href="/ej2-javascript/release-notes/23.1.40">23.1.40</a></li><li><a href="/ej2-javascript/release-notes/23.1.39">23.1.39</a></li><li><a href="/ej2-javascript/release-notes/23.1.38">23.1.38</a></li></ul></li><li><a href="/ej2-javascript/release-notes/23.2.4">23.2.4 Service Pack Release</a></li><li><a href="/ej2-javascript/release-notes/23.1.36">23.1.36 Main Release</a></li></ul></li>
 				<li>2023 Volume 2 - 22.*
diff --git a/ej2-javascript/Release-notes/26.1.40.md b/ej2-javascript/Release-notes/26.1.40.md
new file mode 100644
index 000000000..23d114bd0
--- /dev/null
+++ b/ej2-javascript/Release-notes/26.1.40.md
@@ -0,0 +1,16 @@
+---
+title: Essential Studio for ##Platform_Name## Weekly Release Release Notes  
+description: Essential Studio for ##Platform_Name## Weekly Release Release Notes  
+platform: ej2-javascript
+documentation: ug
+---
+
+# Essential Studio for ##Platform_Name##  Release Notes  
+
+{% include release-info.html date="July 02, 2024"  version="v26.1.40" %}
+
+{% directory path: _includes/release-notes/v26.1.40 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
\ No newline at end of file
diff --git a/ej2-javascript/appearance/css-variables.md b/ej2-javascript/appearance/css-variables.md
new file mode 100644
index 000000000..4c2fde85f
--- /dev/null
+++ b/ej2-javascript/appearance/css-variables.md
@@ -0,0 +1,289 @@
+---
+layout: post
+title: Themes using CSS Variables ##Platform_Name## Appearance control | Syncfusion
+description: Learn here all about Themes in Syncfusion ##Platform_Name## Appearance control of Syncfusion Essential JS 2 and more.
+platform: ej2-javascript
+control: Themes using CSS variable 
+publishingplatform: ##Platform_Name##
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# About CSS Variables in themes
+
+[CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties), also known as custom properties, are entities defined by CSS authors that contain specific values that can be reused throughout a CSS file. They are identified by their name, which must begin with two hyphens (--) followed by an identifier. These variables can be assigned any valid CSS value, such as colors, lengths, or fonts. To retrieve the value of a CSS variable, the var() function is used.
+
+Syncfusion currently offers two modern and highly customizable themes using CSS variables. These themes are designed to provide a consistent and visually appealing look and feel across all Syncfusion components. The themes available are:
+
+* Material 3 Theme
+* Fluent 2 Theme
+
+## CSS themes - Syncfusion ##Platform_Name## Controls
+
+[Material 3](https://m3.material.io/) and [Fluent 2](https://fluent2.microsoft.design/get-started/whatisnew) themes have been introduced across all EJ2 Controls, featuring both `light` and `dark` variants. This themes utilizes `CSS variables` to allow easy customization of control colors in CSS format. With this implementation, users can seamlessly switch between light and dark color schemes, providing a flexible solution to meet their preferences and application needs.
+
+> Kindly note that in the Material 3 theme, CSS variables with rgb() values are used for color variables. The use of hex values in this context may lead to improper functionality. For example, in previous versions of the Material theme or other themes, the primary color variable was defined as follows: $primary: #6200ee;. However, in the Material 3 theme, the primary color variable is defined as follows: --color-sf-primary: 98, 0, 238;.
+
+### Utilization of CSS variables in modern themes
+
+Modern themes like Material 3 and Fluent 2 incorporate support for CSS variables, where `Material 3` utilizes `rgb()` values for customizing colors and `Fluent 2` uses `hex` values for color customization. For more information you can refer this [documentation](./theme#syncfusion-material-3-theme) for color variables of these themes.  The examples below shows CSS variables with their values used for the respective themes.
+
+{% if page.publishingplatform == "typescript" %}
+
+ {% tabs %}
+{% highlight ts tabtitle="material3.css" %}
+{% include code-snippet/common/css-value-cs1/ts/material3.css %}
+{% endhighlight %}
+{% highlight ts tabtitle="fluent2.css" %}
+{% include code-snippet/common/css-value-cs1/ts/fluent2.css %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="material3.css" %}
+{% include code-snippet/common/css-value-cs1/js/material3.css %}
+{% endhighlight %}
+{% highlight ts tabtitle="fluent2.css" %}
+{% include code-snippet/common/css-value-cs1/js/fluent2.css %}
+{% endhighlight %}
+{% endtabs %}
+
+{% endif %}
+
+### How to get these themes?
+
+To access themes provided by Syncfusion, you have two primary options,
+
+* Package
+* CDN links
+
+|    |  Light  |  Dark  |
+|-----------|---------|--------|
+|Package  | [Material 3 Light](https://www.npmjs.com/package/@syncfusion/ej2-material3-theme) | [Material 3 Dark](https://www.npmjs.com/package/@syncfusion/ej2-material3-dark-theme) |
+|  | [Fluent 2 Light](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme) | [Fluent 2 Dark](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-dark-theme) |
+| CDN  | [Material 3 Light](https://cdn.syncfusion.com/ej2/24.2.8/material3.css)  |  [Material 3 Dark](https://cdn.syncfusion.com/ej2/24.2.8/material3-dark.css)  |
+|  |  [Fluent 2 light](https://cdn.syncfusion.com/ej2/26.1.35/fluent2.css)  |  [Fluent 2 Dark](https://cdn.syncfusion.com/ej2/26.1.35/fluent2-dark.css)  |
+
+### Color Customization in themes
+
+CSS variables allows you to dynamically change color values in real-time using JavaScript. This flexibility enables you to create interactive experiences where colors can adjust based on user interactions or other dynamic factors.
+
+#### Customization using CSS
+
+Here you can find the example for `Material 3` customization using CSS class.
+
+{% if page.publishingplatform == "typescript" %}
+
+ {% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/common/material3-cs1/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/common/material3-cs1/index.html %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/common/material3-cs1" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/common/material3-cs1/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/common/material3-cs1/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/common/material3-cs1" %}
+{% endif %}
+
+Example for `Fluent 2` customization using Css class.
+
+{% if page.publishingplatform == "typescript" %}
+
+ {% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/common/fluent2-cs1/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/common/fluent2-cs1/index.html %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/common/fluent2-cs1" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/common/fluent2-cs1/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/common/fluent2-cs1/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/common/fluent2-cs1" %}
+{% endif %}
+
+#### Customization using JavaScript
+
+Here you can find the example for `Material 3` customization using JavaScript.
+
+{% if page.publishingplatform == "typescript" %}
+
+ {% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/common/material3-cs3/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/common/material3-cs3/index.html %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/common/material3-cs3" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/common/material3-cs3/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/common/material3-cs3/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/common/material3-cs3" %}
+{% endif %}
+
+**Default Material 3 primary value**
+
+![default primary value](images/material3-default.png)
+
+**Customized Material 3 primary value**
+
+![customized primary value](images/material3-customize.png)
+
+Example for `Fluent 2` customization using JavaScript.
+
+{% if page.publishingplatform == "typescript" %}
+
+ {% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/common/fluent2-cs3/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/common/fluent2-cs3/index.html %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/common/fluent2-cs3" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/common/fluent2-cs3/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/common/fluent2-cs3/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/common/fluent2-cs3" %}
+{% endif %}
+
+**Default Fluent 2 primary value**
+
+![default primary value](images/fluent2-default.png)
+
+**Customized Fluent 2  primary value**
+
+![customized primary value](images/fluent2-customize.png)
+
+With this CSS variable support, you can effortlessly customize the color variable values for Syncfusion JavaScript controls.
+
+### Switching Light and Dark mode with CSS variables
+
+Switching between modes has become easier with the updated modern themes, which offer Light and Dark variants. In both the `Material 3` and `Fluent 2` light themes, there are distinct class variables for light and dark modes in a `single file`, providing flexibility for seamless switching between the two modes within your application.
+
+{% if page.publishingplatform == "typescript" %}
+
+ {% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/common/material3-cs1/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/common/material3-cs1/index.html %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/common/material3-cs1" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/common/material3-cs1/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/common/material3-cs1/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/common/material3-cs1" %}
+{% endif %}
+
+### Mode switching in Fluent 2 theme
+
+Similar to `Material 3`, we offer both Light and Dark variants with `Fluent 2`. In the Fluent 2 theme, there are distinct class variables for light and dark modes, as shown in the preview below.
+
+{% if page.publishingplatform == "typescript" %}
+
+ {% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/common/fluent2-cs1/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/common/fluent2-cs1/index.html %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/common/fluent2-cs1" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/common/fluent2-cs1/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/common/fluent2-cs1/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/common/fluent2-cs1" %}
+{% endif %}
+
+### How to switch dark mode?
+
+To activate dark mode, just append the `e-dark-mode` class to the body section of your application for both `Material 3` and `Fluent 2` theme. Once applied, the theme seamlessly switches to dark mode. Please refer to the example image below for visual guidance.
+
+`Material 3` dark mode
+
+![dark mode](images/material3-dark.png)
+
+`Fluent 2` dark mode
+
+![dark mode](images/fluent2-dark.png)
+
+### ThemeStudio Application
+
+The ThemeStudio application now includes seamless integration with the Material 3 and Fluent 2 themes, offering a comprehensive solution for customization requirements. This enhancement enables users to effortlessly customize and personalize their themes.
+
+Access the Syncfusion ThemeStudio application, featuring our themes, via the following link: [Link to Syncfusion ThemeStudio](https://ej2.syncfusion.com/themestudio/?theme=material3)
diff --git a/ej2-javascript/appearance/images/fluent2-customize.png b/ej2-javascript/appearance/images/fluent2-customize.png
new file mode 100644
index 000000000..6f88875a3
Binary files /dev/null and b/ej2-javascript/appearance/images/fluent2-customize.png differ
diff --git a/ej2-javascript/appearance/images/fluent2-dark.png b/ej2-javascript/appearance/images/fluent2-dark.png
new file mode 100644
index 000000000..91194f761
Binary files /dev/null and b/ej2-javascript/appearance/images/fluent2-dark.png differ
diff --git a/ej2-javascript/appearance/images/fluent2-default.png b/ej2-javascript/appearance/images/fluent2-default.png
new file mode 100644
index 000000000..cbf61b306
Binary files /dev/null and b/ej2-javascript/appearance/images/fluent2-default.png differ
diff --git a/ej2-javascript/appearance/images/material3-customize.PNG b/ej2-javascript/appearance/images/material3-customize.PNG
index 464ad44d0..f8d6df575 100644
Binary files a/ej2-javascript/appearance/images/material3-customize.PNG and b/ej2-javascript/appearance/images/material3-customize.PNG differ
diff --git a/ej2-javascript/appearance/images/material3-dark.PNG b/ej2-javascript/appearance/images/material3-dark.PNG
index 47bfba2fb..6c6c9a803 100644
Binary files a/ej2-javascript/appearance/images/material3-dark.PNG and b/ej2-javascript/appearance/images/material3-dark.PNG differ
diff --git a/ej2-javascript/appearance/images/material3-default.PNG b/ej2-javascript/appearance/images/material3-default.PNG
index 4201282eb..e140ac8f9 100644
Binary files a/ej2-javascript/appearance/images/material3-default.PNG and b/ej2-javascript/appearance/images/material3-default.PNG differ
diff --git a/ej2-javascript/appearance/material3.md b/ej2-javascript/appearance/material3.md
deleted file mode 100644
index ea69c461b..000000000
--- a/ej2-javascript/appearance/material3.md
+++ /dev/null
@@ -1,177 +0,0 @@
----
-layout: post
-title: Material 3 Theme in ##Platform_Name## Appearance control | Syncfusion
-description: Learn here all about Material 3 Theme in Syncfusion ##Platform_Name## Appearance control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Material 3 Theme 
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Material 3 Theme with CSS Variables
-
-[Material 3](https://m3.material.io/) is the latest version of Google's open-source design system, Material Design. It's the successor to [Material 2](https://m2.material.io/), which is a popular design system used in many apps. It has been specifically designed to align seamlessly with the new visual style and system UI introduced in Android 12 and above.
-
-[CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties), also known as custom properties, are entities defined by CSS authors that contain specific values that can be reused throughout a CSS file. They are identified by their name, which must begin with two hyphens (--) followed by an identifier. These variables can be assigned any valid CSS value, such as colors, lengths, or fonts. To retrieve the value of a CSS variable, the var() function is used.
-
-## Material 3 - Syncfusion ##Platform_Name## Controls
-
-Syncfusion has introduced the Material 3 theme across all EJ2 Controls, featuring both `light` and `dark` variants. This theme utilizes `CSS variables` to allow easy customization of control colors in CSS format. With this implementation, users can seamlessly switch between light and dark color schemes, providing a flexible solution to meet their preferences and application needs.
-
-> Kindly note that in the Material 3 theme, Syncfusion utilizes CSS variables with rgb() values for color variables. The use of hex values in this context may lead to improper functionality. For example, in previous versions of the Material theme or other themes, the primary color variable was defined as follows: $primary: #6200ee;. However, in the Material 3 theme, the primary color variable is defined as follows: --color-sf-primary: 98, 0, 238;.
-
-### How does Syncfusion Material 3 theme utilize CSS Variables?
-
-Syncfusion's Material 3 theme incorporates support for CSS variables, utilizing rgb() values for customizing colors. For more information you can refer this [documentation](./theme#syncfusion-material-3-theme) for color variables of material 3 theme.
-
-```CSS
-:root {
-  --color-sf-black: 0, 0, 0;
-  --color-sf-white: 255, 255, 255;
-  --color-sf-primary: 103, 80, 164;
-  --color-sf-primary-container: 234, 221, 255;
-  --color-sf-secondary: 98, 91, 113;
-  --color-sf-secondary-container: 232, 222, 248;
-  --color-sf-tertiary: 125, 82, 96;
-  --color-sf-tertiary-container: 255, 216, 228;
-  --color-sf-surface: 255, 255, 255;
-  --color-sf-surface-variant: 231, 224, 236;
-  --color-sf-background: var(--color-sf-surface);
-  --color-sf-on-primary: 255, 255, 255;
-  --color-sf-on-primary-container: 33, 0, 94;
-  --color-sf-on-secondary: 255, 255, 255;
-  --color-sf-on-secondary-container: 30, 25, 43;
-  --color-sf-on-tertiary: 255, 255, 255;
-}
-```
-### How to get the Material 3 theme?
-
-To access the Material 3 theme provided by Syncfusion, you have two primary options,
-
-* Package
-* CDN links
-
-|    |  Light  |  Dark  |
-|-----------|---------|--------|
-|Package  | [Material 3 Light](https://www.npmjs.com/package/@syncfusion/ej2-material3-theme) | [Material 3 Dark](https://www.npmjs.com/package/@syncfusion/ej2-material3-dark-theme) |
-| CDN  |  [Material 3 Light](https://cdn.syncfusion.com/ej2/24.2.8/material3.css)  |  [Material 3 Dark](https://cdn.syncfusion.com/ej2/24.2.8/material3-dark.css)  |
-
-### Color Customization in Material 3
-
-CSS variables allows you to dynamically change color values in real-time using JavaScript. This flexibility enables you to create interactive experiences where colors can adjust based on user interactions or other dynamic factors.
-
-#### Customization using CSS
-
-Here you can find the example for Material 3 customization using Css class.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/common/material3-cs1/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/common/material3-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/common/material3-cs1" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/common/material3-cs1/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/common/material3-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/common/material3-cs1" %}
-{% endif %}
-
-#### Customization using JavaScript
-
-Here you can find the example for Material 3 customization using JavaScript.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/common/material3-cs3/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/common/material3-cs3/index.html %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/common/material3-cs3" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/common/material3-cs3/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/common/material3-cs3/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/common/material3-cs3" %}
-{% endif %}
-
-**Default primary value**
-
-![default primary value](images/material3-default.PNG)
-
-**Customized primary value**
-
-![customized primary value](images/material3-customize.PNG)
-
-With this CSS variable support, you can effortlessly customize the color variable values for Syncfusion JavaScript controls.
-
-### Material 3 Light Theme
-
-Syncfusion has implemented the Material 3 theme, offering both Light and Dark variants. In the Material 3 light theme, there are distinct class variables for both light and dark modes, providing flexibility for seamless switching between the two modes within your application.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/common/material3-cs1/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/common/material3-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/common/material3-cs1" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/common/material3-cs1/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/common/material3-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/common/material3-cs1" %}
-{% endif %}
-
-### How to switch dark mode?
-
-With CSS variable support, transitioning between light and dark theme modes has become effortless. To activate dark mode, just append the `e-dark-mode` class to the body section of your application. Once applied, the theme seamlessly switches to dark mode. Please refer to the example image below for visual guidance.
-
-![dark mode](images/material3-dark.PNG)
-
-### ThemeStudio Application
-
-The ThemeStudio application now includes seamless integration with the Material 3 theme, offering a comprehensive solution for customization requirements. This enhancement enables users to effortlessly customize and personalize their themes.
-
-Access the Syncfusion ThemeStudio application, featuring the Material 3 theme, via the following link: [Link to Syncfusion ThemeStudio with Material 3 Theme](https://ej2.syncfusion.com/themestudio/?theme=material3)
diff --git a/ej2-javascript/appearance/theme.md b/ej2-javascript/appearance/theme.md
index 236b99eea..dbbb67856 100644
--- a/ej2-javascript/appearance/theme.md
+++ b/ej2-javascript/appearance/theme.md
@@ -15,6 +15,8 @@ The Syncfusion JavaScript library has provided the below list of in-built themes
 
 |Theme | Style Sheet Name |
 |--------|--------|
+|Fluent 2 | fluent2.css |
+|Fluent 2 Dark | fluent2-dark.css |
 |Material 3 | material3.css |
 |Material 3 Dark | material3-dark.css |
 |Fluent | fluent.css |
@@ -109,6 +111,8 @@ https://cdn.syncfusion.com/ej2/<version>/<theme_name>.css
 
 | Theme Name | CDN Reference |
 |--- | --- |
+| Fluent 2 | [https://cdn.syncfusion.com/ej2/26.1.35/fluent2.css](https://cdn.syncfusion.com/ej2/26.1.35/fluent2.css) |
+| Fluent 2 Dark | [https://cdn.syncfusion.com/ej2/26.1.35/fluent2-dark.css](https://cdn.syncfusion.com/ej2/26.1.35/fluent2-dark.css) |
 | Material 3 | [https://cdn.syncfusion.com/ej2/22.1.34/material3.css](https://cdn.syncfusion.com/ej2/22.1.34/material3.css) |
 | Material 3 Dark | [https://cdn.syncfusion.com/ej2/22.1.34/material3-dark.css](https://cdn.syncfusion.com/ej2/22.1.34/material3-dark.css) |
 | Fluent | [https://cdn.syncfusion.com/ej2/22.1.34/fluent.css](https://cdn.syncfusion.com/ej2/22.1.34/fluent.css) |
@@ -233,6 +237,287 @@ The following list of common variables are used in the Syncfusion JavaScript lib
 
 <!-- markdownlint-disable MD033 -->
 
+### Syncfusion Fluent 2 theme
+
+<table>
+    <style>
+        .circle-color-indicator {
+            width: 1.5em;
+            height: 1.5em;
+            border-radius: 50%;
+            display: inline-block;
+            border: 1px solid rgba(0, 0, 0, .08);
+            vertical-align: middle;
+        }
+        th, td {
+        text-align: left;
+        padding: 5px 15px;
+        vertical-align: top;
+        }
+    </style>
+    <thead>
+        <tr>
+            <th>Name</th>
+            <th>Value (Default Theme) </th>
+            <th>Value (Dark Theme) </th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td>--color-sf-black</td>
+            <td>
+                <span class="circle-color-indicator" style="background: #000"></span> #000
+            </td>
+            <td>
+                <span class="circle-color-indicator" style="background: #000"></span> #000
+            </td>
+        </tr>
+        <tr>
+            <td>--color-sf-white:</td>
+            <td>
+                <span class="circle-color-indicator" style="background: #fff"></span> #fff
+            </td>
+            <td>
+                <span class="circle-color-indicator" style="background: #fff"></span> #fff
+            </td>
+        </tr>
+        <tr>
+            <td>--color-sf-primary</td>
+            <td>
+                <span class="circle-color-indicator" style="background: #0f6cbd"></span> #0f6cbd
+            </td>
+            <td>
+                <span class="circle-color-indicator" style="background: #115ea3"></span> #115ea3
+            </td>
+        </tr>
+        <tr>
+            <td>--color-sf-primary-text-color</td>
+            <td>
+                <span class="circle-color-indicator" style="background: #fff"></span> #fff
+            </td>
+            <td>
+                <span class="circle-color-indicator" style="background: #fff"></span> #fff
+            </td>
+        </tr>
+        <tr>
+            <td>--color-sf-primary-light</td>
+            <td>
+                <span class="circle-color-indicator" style="background: #b4d6fa"></span> #b4d6fa
+            </td>
+            <td>
+                <span class="circle-color-indicator" style="background: #0e4775"></span> #0e4775
+            </td>
+        </tr>
+        <tr>
+            <td>--color-sf-primary-lighter</td>
+            <td>
+                <span class="circle-color-indicator" style="background: #ebf3fc"></span> #ebf3fc
+            </td>
+            <td>
+                <span class="circle-color-indicator" style="background: #082338"></span> #082338
+            </td>
+        </tr>
+        <tr>
+            <td>--color-sf-primary-dark</td>
+            <td>
+                <span class="circle-color-indicator" style="background: #0f548c"></span> #0f548c
+            </td>
+            <td>
+                <span class="circle-color-indicator" style="background: #62abf5"></span> #62abf5
+            </td>
+        </tr>
+        <tr>
+            <td>--color-sf-primary-darker</td>
+            <td>
+                <span class="circle-color-indicator" style="background: #0c3b5e"></span> #0c3b5e
+            </td>
+            <td>
+                <span class="circle-color-indicator" style="background: #96c6fa"></span> #96c6fa
+            </td>
+        </tr>
+        <tr>
+            <td>--color-sf-success</td>
+            <td>
+                <span class="circle-color-indicator" style="background: #0e700e"></span> #0e700e
+            </td>
+            <td>
+                <span class="circle-color-indicator" style="background: #107c10"></span> #107c10
+            </td>
+        </tr>
+        <tr>
+            <td>--color-sf-info</td>
+            <td>
+                <span class="circle-color-indicator" style="background: #008aa9"></span> #008aa9
+            </td>
+            <td>
+                <span class="circle-color-indicator" style="background: #0099bc"></span> #0099bc
+            </td>
+        </tr>
+        <tr>
+            <td>--color-sf-warning</td>
+            <td>
+                <span class="circle-color-indicator" style="background: #bc4b09"></span> #bc4b09
+            </td>
+            <td>
+                <span class="circle-color-indicator" style="background: #faa06b"></span> #faa06b
+            </td>
+        </tr>
+        <tr>
+            <td>--color-sf-danger</td>
+            <td>
+                <span class="circle-color-indicator" style="background: #d13438"></span> #d13438
+            </td>
+            <td>
+                <span class="circle-color-indicator" style="background: #dc626d"></span> #dc626d
+            </td>
+        </tr>
+        <tr>
+            <td>--color-sf-success-light</td>
+            <td>
+                <span class="circle-color-indicator" style="background: #54b054"></span> #54b054
+            </td>
+            <td>
+                <span class="circle-color-indicator" style="background: #094509"></span> #094509
+            </td>
+        </tr>
+        <tr>
+            <td>--color-sf-info-light</td>
+            <td>
+                <span class="circle-color-indicator" style="background: #56bfd7"></span> #56bfd7
+            </td>
+            <td>
+                <span class="circle-color-indicator" style="background: #005669"></span> #005669
+            </td>
+        </tr>
+        <tr>
+            <td>--color-sf-warning-light</td>
+            <td>
+                <span class="circle-color-indicator" style="background: #fee5d7"></span> #fee5d7
+            </td>
+            <td>
+                <span class="circle-color-indicator" style="background: #4a1e04"></span> #4a1e04
+            </td>
+        </tr>
+        <tr>
+            <td>--color-sf-danger-light</td>
+            <td>
+                <span class="circle-color-indicator" style="background: #eeacb2"></span> #eeacb2
+            </td>
+            <td>
+                <span class="circle-color-indicator" style="background: #6e0811"></span> #6e0811
+            </td>
+        </tr>
+        <tr>
+            <td>--color-sf-success-dark</td>
+            <td>
+                <span class="circle-color-indicator" style="background: #54b054"></span> #54b054
+            </td>
+            <td>
+                <span class="circle-color-indicator" style="background: #c9eac9"></span> #c9eac9
+            </td>
+        </tr>
+        <tr>
+            <td>--color-sf-info-dark</td>
+            <td>
+                <span class="circle-color-indicator" style="background: #56bfd7"></span> #56bfd7
+            </td>
+            <td>
+                <span class="circle-color-indicator" style="background: #cdedf4"></span> #cdedf4
+            </td>
+        </tr>
+        <tr>
+            <td>--color-sf-warning-dark</td>
+            <td>
+                <span class="circle-color-indicator" style="background: #8a3707"></span> #8a3707
+            </td>
+            <td>
+                <span class="circle-color-indicator" style="background: #fee5d7"></span> #fee5d7
+            </td>
+        </tr>
+        <tr>
+            <td>--color-sf-danger-dark</td>
+            <td>
+                <span class="circle-color-indicator" style="background: #6e0811"></span> #6e0811
+            </td>
+            <td>
+                <span class="circle-color-indicator" style="background: #fee5d7"></span> #fee5d7
+            </td>
+        </tr>
+        <tr>
+            <td>--color-sf-success-light-alt</td>
+            <td>
+                <span class="circle-color-indicator" style="background: #f1faf1"></span> #f1faf1
+            </td>
+            <td>
+                <span class="circle-color-indicator" style="background: #052505"></span> #052505
+            </td>
+        </tr>
+        <tr>
+            <td>--color-sf-info-light-alt</td>
+            <td>
+                <span class="circle-color-indicator" style="background: #f2fafc"></span> #f2fafc
+            </td>
+            <td>
+                <span class="circle-color-indicator" style="background: #002e38"></span> #002e38
+            </td>
+        </tr>
+        <tr>
+            <td>--color-sf-warning-light-alt</td>
+            <td>
+                <span class="circle-color-indicator" style="background: #fff9f5"></span> #fff9f5
+            </td>
+            <td>
+                <span class="circle-color-indicator" style="background: #4a1e04"></span> #4a1e04
+            </td>
+        </tr>
+        <tr>
+            <td>--color-sf-danger-light-alt</td>
+            <td>
+                <span class="circle-color-indicator" style="background: #fdf3f4"></span> #fdf3f4
+            </td>
+            <td>
+                <span class="circle-color-indicator" style="background: #3b0509"></span> #3b0509
+            </td>
+        </tr>
+        <tr>
+            <td>--color-sf-badge-warning</td>
+            <td>
+                <span class="circle-color-indicator" style="background: #fde300"></span> #fde300
+            </td>
+            <td>
+                <span class="circle-color-indicator" style="background: #fde300"></span> #fde300
+            </td>
+        </tr>
+        <tr>
+            <td>--color-sf-badge-warning-text</td>
+            <td>
+                <span class="circle-color-indicator" style="background: #847619"></span> #847619
+            </td>
+            <td>
+                <span class="circle-color-indicator" style="background: #fde300"></span> #fde300
+            </td>
+        </tr>
+        <tr>
+            <td>--color-sf-primary-label-color</td>
+            <td>
+                <span class="circle-color-indicator" style="background: #0f6cbd"></span> #0f6cbd
+            </td>
+            <td>
+                <span class="circle-color-indicator" style="background: #479ef5"></span> #479ef5
+            </td>
+        </tr>
+        <tr>
+            <td>--color-sf-primary-cell-selection</td>
+            <td>
+                <span class="circle-color-indicator" style="background: #ebf3fc"></span> #ebf3fc
+            </td>
+            <td>
+                <span class="circle-color-indicator" style="background: #ebf3fc"></span> #ebf3fc
+            </td>
+        </tr>
+    </tbody>
+</table>
+
 ### Syncfusion Material 3 theme
 
 <table>
@@ -413,7 +698,7 @@ The following list of common variables are used in the Syncfusion JavaScript lib
             </td>
         </tr>
         <tr>
-            <td>--color-sf-on-tertiary-containe</td>
+            <td>--color-sf-on-tertiary-container</td>
             <td>
                 <span class="circle-color-indicator" style="background: rgb(55, 11, 30)"></span> rgb(55, 11, 30)
             </td>
diff --git a/ej2-javascript/code-snippet/common/css-value-cs1/js/fluent2.css b/ej2-javascript/code-snippet/common/css-value-cs1/js/fluent2.css
new file mode 100644
index 000000000..0dfd19fa4
--- /dev/null
+++ b/ej2-javascript/code-snippet/common/css-value-cs1/js/fluent2.css
@@ -0,0 +1,23 @@
+/* Hex values of fluent2 theme */
+:root {
+    --color-sf-black: #000;
+    --color-sf-white: #fff;
+    --color-sf-primary: #0f6cbd;
+    --color-sf-primary-text-color: #fff;
+    --color-sf-primary-light: #b4d6fa;
+    --color-sf-primary-lighter: #ebf3fc;
+    --color-sf-primary-dark: #0f548c;
+    --color-sf-primary-darker: #0c3b5e;
+    --color-sf-success: #0e700e;
+    --color-sf-info: #008aa9;
+    --color-sf-warning: #bc4b09;
+    --color-sf-danger: #d13438;
+    --color-sf-success-light: #54b054;
+    --color-sf-info-light: #56bfd7;
+    --color-sf-warning-light: #fee5d7;
+    --color-sf-danger-light: #eeacb2;
+    --color-sf-success-dark: #54b054;
+    --color-sf-info-dark: #56bfd7;
+    --color-sf-warning-dark: #8a3707;
+    --color-sf-danger-dark: #6e0811;
+  }
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/common/css-value-cs1/js/material3.css b/ej2-javascript/code-snippet/common/css-value-cs1/js/material3.css
new file mode 100644
index 000000000..fe8b6cba3
--- /dev/null
+++ b/ej2-javascript/code-snippet/common/css-value-cs1/js/material3.css
@@ -0,0 +1,19 @@
+/* rgb() values of material3 theme */
+:root {
+    --color-sf-black: 0, 0, 0;
+    --color-sf-white: 255, 255, 255;
+    --color-sf-primary: 103, 80, 164;
+    --color-sf-primary-container: 234, 221, 255;
+    --color-sf-secondary: 98, 91, 113;
+    --color-sf-secondary-container: 232, 222, 248;
+    --color-sf-tertiary: 125, 82, 96;
+    --color-sf-tertiary-container: 255, 216, 228;
+    --color-sf-surface: 255, 255, 255;
+    --color-sf-surface-variant: 231, 224, 236;
+    --color-sf-background: var(--color-sf-surface);
+    --color-sf-on-primary: 255, 255, 255;
+    --color-sf-on-primary-container: 33, 0, 94;
+    --color-sf-on-secondary: 255, 255, 255;
+    --color-sf-on-secondary-container: 30, 25, 43;
+    --color-sf-on-tertiary: 255, 255, 255;
+  }
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/common/css-value-cs1/ts/fluent2.css b/ej2-javascript/code-snippet/common/css-value-cs1/ts/fluent2.css
new file mode 100644
index 000000000..0dfd19fa4
--- /dev/null
+++ b/ej2-javascript/code-snippet/common/css-value-cs1/ts/fluent2.css
@@ -0,0 +1,23 @@
+/* Hex values of fluent2 theme */
+:root {
+    --color-sf-black: #000;
+    --color-sf-white: #fff;
+    --color-sf-primary: #0f6cbd;
+    --color-sf-primary-text-color: #fff;
+    --color-sf-primary-light: #b4d6fa;
+    --color-sf-primary-lighter: #ebf3fc;
+    --color-sf-primary-dark: #0f548c;
+    --color-sf-primary-darker: #0c3b5e;
+    --color-sf-success: #0e700e;
+    --color-sf-info: #008aa9;
+    --color-sf-warning: #bc4b09;
+    --color-sf-danger: #d13438;
+    --color-sf-success-light: #54b054;
+    --color-sf-info-light: #56bfd7;
+    --color-sf-warning-light: #fee5d7;
+    --color-sf-danger-light: #eeacb2;
+    --color-sf-success-dark: #54b054;
+    --color-sf-info-dark: #56bfd7;
+    --color-sf-warning-dark: #8a3707;
+    --color-sf-danger-dark: #6e0811;
+  }
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/common/css-value-cs1/ts/material3.css b/ej2-javascript/code-snippet/common/css-value-cs1/ts/material3.css
new file mode 100644
index 000000000..fe8b6cba3
--- /dev/null
+++ b/ej2-javascript/code-snippet/common/css-value-cs1/ts/material3.css
@@ -0,0 +1,19 @@
+/* rgb() values of material3 theme */
+:root {
+    --color-sf-black: 0, 0, 0;
+    --color-sf-white: 255, 255, 255;
+    --color-sf-primary: 103, 80, 164;
+    --color-sf-primary-container: 234, 221, 255;
+    --color-sf-secondary: 98, 91, 113;
+    --color-sf-secondary-container: 232, 222, 248;
+    --color-sf-tertiary: 125, 82, 96;
+    --color-sf-tertiary-container: 255, 216, 228;
+    --color-sf-surface: 255, 255, 255;
+    --color-sf-surface-variant: 231, 224, 236;
+    --color-sf-background: var(--color-sf-surface);
+    --color-sf-on-primary: 255, 255, 255;
+    --color-sf-on-primary-container: 33, 0, 94;
+    --color-sf-on-secondary: 255, 255, 255;
+    --color-sf-on-secondary-container: 30, 25, 43;
+    --color-sf-on-tertiary: 255, 255, 255;
+  }
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/common/fluent2-cs1/index.css b/ej2-javascript/code-snippet/common/fluent2-cs1/index.css
new file mode 100644
index 000000000..62fa2a616
--- /dev/null
+++ b/ej2-javascript/code-snippet/common/fluent2-cs1/index.css
@@ -0,0 +1,47 @@
+body {
+  touch-action: none;
+}
+@font-face {
+  font-family: 'button-icons';
+  src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj1uSf8AAAEoAAAAVmNtYXDOXM6wAAABtAAAAFRnbHlmcV/SKgAAAiQAAAJAaGVhZBNt0QcAAADQAAAANmhoZWEIUQQOAAAArAAAACRobXR4NAAAAAAAAYAAAAA0bG9jYQNWA+AAAAIIAAAAHG1heHABGQAZAAABCAAAACBuYW1lASvfhQAABGQAAAJhcG9zdFAouWkAAAbIAAAA2AABAAAEAAAAAFwEAAAAAAAD9AABAAAAAAAAAAAAAAAAAAAADQABAAAAAQAAYD3WXF8PPPUACwQAAAAAANgtxgsAAAAA2C3GCwAAAAAD9AP0AAAACAACAAAAAAAAAAEAAAANAA0AAgAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wHnDQQAAAAAXAQAAAAAAAABAAAAAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAAAAAIAAAADAAAAFAADAAEAAAAUAAQAQAAAAAYABAABAALnCOcN//8AAOcB5wr//wAAAAAAAQAGABQAAAABAAMABAAHAAIACgAJAAgABQAGAAsADAAAAAAADgAkAEQAWgByAIoApgDAAOAA+AEMASAAAQAAAAADYQP0AAIAADcJAZ4CxP08DAH0AfQAAAIAAAAAA9QD9AADAAcAACUhESEBIREhAm4BZv6a/b4BZv6aDAPo/BgD6AAAAgAAAAADpwP0AAMADAAANyE1ISUBBwkBJwERI1kDTvyyAYH+4y4BeQGANv7UTAxNlwEIPf6eAWI9/ukDEwAAAAIAAAAAA/QDngADAAcAADchNSETAyEBDAPo/Bj6+gPo/gxipgFy/t0CRwAAAQAAAAAD9AP0AAsAAAEhFSERMxEhNSERIwHC/koBtnwBtv5KfAI+fP5KAbZ8AbYAAQAAAAAD9AP0AAsAAAEhFSERMxEhNSERIwHh/isB1T4B1f4rPgIfPv4rAdU+AdUAAgAAAAAD9AOlAAMADAAANyE1ISUnBxc3JwcRIwwD6PwYAcWjLO7uLKI/Wj+hoSvs6iyhAm0AAAABAAAAAAP0A/QACwAAAREhFSERMxEhNSERAeH+KwHVPgHV/isD9P4rPv4rAdU+AdUAAAAAAgAAAAADdwP0AAMADAAANyE1ISUBBwkBJwERI4kC7v0SAVj+0SkBdgF4Kf7RPgw+rQEJL/64AUgv/vgC/AAAAAEAAAAAA/QD9AALAAABIRUhETMRITUhESMB2v4yAc5MAc7+MkwCJkz+MgHOTAHOAAIAAAAAA/QDzQADAAcAADchNSE1KQEBDAPo/BgB9AH0/gwzpZUCYAACAAAAAAP0A80AAwAHAAA3ITUhNSkBAQwD6PwYAfQB9P4MM6WVAmAAAAASAN4AAQAAAAAAAAABAAAAAQAAAAAAAQAMAAEAAQAAAAAAAgAHAA0AAQAAAAAAAwAMABQAAQAAAAAABAAMACAAAQAAAAAABQALACwAAQAAAAAABgAMADcAAQAAAAAACgAsAEMAAQAAAAAACwASAG8AAwABBAkAAAACAIEAAwABBAkAAQAYAIMAAwABBAkAAgAOAJsAAwABBAkAAwAYAKkAAwABBAkABAAYAMEAAwABBAkABQAWANkAAwABBAkABgAYAO8AAwABBAkACgBYAQcAAwABBAkACwAkAV8gYnV0dG9uLWljb25zUmVndWxhcmJ1dHRvbi1pY29uc2J1dHRvbi1pY29uc1ZlcnNpb24gMS4wYnV0dG9uLWljb25zRm9udCBnZW5lcmF0ZWQgdXNpbmcgU3luY2Z1c2lvbiBNZXRybyBTdHVkaW93d3cuc3luY2Z1c2lvbi5jb20AIABiAHUAdAB0AG8AbgAtAGkAYwBvAG4AcwBSAGUAZwB1AGwAYQByAGIAdQB0AHQAbwBuAC0AaQBjAG8AbgBzAGIAdQB0AHQAbwBuAC0AaQBjAG8AbgBzAFYAZQByAHMAaQBvAG4AIAAxAC4AMABiAHUAdAB0AG8AbgAtAGkAYwBvAG4AcwBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHUAZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAANAQIBAwEEAQUBBgEHAQgBCQEKAQsBDAENAQ4ACm1lZGlhLXBsYXkLbWVkaWEtcGF1c2UQLWRvd25sb2FkLTAyLXdmLQltZWRpYS1lbmQHYWRkLW5ldwtuZXctbWFpbC13ZhB1c2VyLWRvd25sb2FkLXdmDGV4cGFuZC0wMy13Zg5kb3dubG9hZC0wMi13ZgphZGQtbmV3XzAxC21lZGlhLWVqZWN0Dm1lZGlhLWVqZWN0LTAxAAA=) format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+.e-btn-sb-icons {
+  font-family: 'button-icons';
+  line-height: 1;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.e-play-icon::before {
+  content: '\e701';
+}
+
+.e-pause-icon::before {
+  content: '\e705';
+}
+
+.e-open-icon::before {
+  content: '\e70d';
+}
+
+.e-add-icon::before {
+  content: '\e70a';
+}
+
+.e-style {
+  margin-top: 50px;
+}
+td {
+  padding: 20px;
+}
+
+body.e-dark-mode {
+  background: #1c1e1f;
+}
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/common/fluent2-cs1/index.js b/ej2-javascript/code-snippet/common/fluent2-cs1/index.js
new file mode 100644
index 000000000..f6d7ef1db
--- /dev/null
+++ b/ej2-javascript/code-snippet/common/fluent2-cs1/index.js
@@ -0,0 +1,16 @@
+var checkBoxObj = new ej.buttons.CheckBox({ label: 'Enable DarkMode', change: onDarkMode });
+checkBoxObj.appendTo('#darkmode');
+
+function onDarkMode(e) {
+    e.checked ? document.body.classList.add('e-dark-mode') : document.body.classList.remove('e-dark-mode');
+}
+    var btnObj = new ej.buttons.Button({ isPrimary: true });
+    btnObj.appendTo('#normal4');
+    btnObj = new ej.buttons.Button({ cssClass: 'e-success' });
+    btnObj.appendTo('#normal5');
+    btnObj = new ej.buttons.Button({ cssClass: 'e-info' });
+    btnObj.appendTo('#normal6');
+    btnObj = new ej.buttons.Button({ cssClass: 'e-warning' });
+    btnObj.appendTo('#normal7');
+    btnObj = new ej.buttons.Button({ cssClass: 'e-danger' });
+    btnObj.appendTo('#normal8');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/common/fluent2-cs1/index.ts b/ej2-javascript/code-snippet/common/fluent2-cs1/index.ts
new file mode 100644
index 000000000..aae7752fd
--- /dev/null
+++ b/ej2-javascript/code-snippet/common/fluent2-cs1/index.ts
@@ -0,0 +1,18 @@
+import { Button, CheckBox } from '@syncfusion/ej2-buttons';
+
+var checkBoxObj = new CheckBox({ label: 'Enable DarkMode', change: onDarkMode });
+checkBoxObj.appendTo('#darkmode');
+
+function onDarkMode(e: any) {
+    e.checked ? document.body.classList.add('e-dark-mode') : document.body.classList.remove('e-dark-mode');
+}
+var btnObj = new Button({ isPrimary: true });
+    btnObj.appendTo('#normal4');
+    btnObj = new Button({ cssClass: 'e-success' });
+    btnObj.appendTo('#normal5');
+    btnObj = new Button({ cssClass: 'e-info' });
+    btnObj.appendTo('#normal6');
+    btnObj = new Button({ cssClass: 'e-warning' });
+    btnObj.appendTo('#normal7');
+    btnObj = new Button({ cssClass: 'e-danger' });
+    btnObj.appendTo('#normal8');
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/common/fluent2-cs1/js/index.html b/ej2-javascript/code-snippet/common/fluent2-cs1/js/index.html
new file mode 100644
index 000000000..45b05b7d4
--- /dev/null
+++ b/ej2-javascript/code-snippet/common/fluent2-cs1/js/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 Fluent2</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Typescript Grid Control">
+    <meta name="author" content="Syncfusion">
+    <link href="./index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/26.1.35/fluent2.css" rel="stylesheet">
+    <script src="https://cdn.syncfusion.com/ej2/22.1.34/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+<body>
+    
+    <div id="container">
+        <div style="padding: 10px; display: inline-block;">
+            <input id="darkmode" type="checkbox" />
+        </div>
+        <div class="frame">
+            <table id="basic-button">
+                <tbody>
+                    <tr>
+                        <td><button id="normal4">Button</button></td>
+                        <td><button id="normal5">Button</button></td>
+                        <td><button id="normal6">Button</button></td>
+                        <td><button id="normal7">Button</button></td>
+                        <td><button id="normal8">Button</button></td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>       
+    </div>
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="./index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/common/fluent2-cs1/systemjs.config.js b/ej2-javascript/code-snippet/common/fluent2-cs1/systemjs.config.js
new file mode 100644
index 000000000..56f999fb6
--- /dev/null
+++ b/ej2-javascript/code-snippet/common/fluent2-cs1/systemjs.config.js
@@ -0,0 +1,45 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        'plugin-json':'https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js',
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", 
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js"
+    },
+     meta: { 
+       '*.json': { loader: 'plugin-json' }
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
diff --git a/ej2-javascript/code-snippet/common/fluent2-cs1/ts/index.html b/ej2-javascript/code-snippet/common/fluent2-cs1/ts/index.html
new file mode 100644
index 000000000..6d2144fd1
--- /dev/null
+++ b/ej2-javascript/code-snippet/common/fluent2-cs1/ts/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 Material3</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Typescript Grid Control">
+    <meta name="author" content="Syncfusion">
+    <link href="./index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/26.1.35/fluent2.css" rel="stylesheet">
+    <script src="https://cdn.syncfusion.com/ej2/22.1.34/dist/ej2.min.js" type="text/javascript"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+<body>
+    
+    <div id="container">
+        <div style="padding: 10px; display: inline-block;">
+            <input id="darkmode" type="checkbox" />
+        </div>
+        <div class="frame">
+            <table id="basic-button">
+                <tbody>
+                    <tr>
+                        <td><button id="normal4">Button</button></td>
+                        <td><button id="normal5">Button</button></td>
+                        <td><button id="normal6">Button</button></td>
+                        <td><button id="normal7">Button</button></td>
+                        <td><button id="normal8">Button</button></td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>       
+    </div>
+</body></html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/common/fluent2-cs3/index.css b/ej2-javascript/code-snippet/common/fluent2-cs3/index.css
new file mode 100644
index 000000000..6875dcb10
--- /dev/null
+++ b/ej2-javascript/code-snippet/common/fluent2-cs3/index.css
@@ -0,0 +1,47 @@
+body {
+  touch-action: none;
+}
+@font-face {
+  font-family: 'button-icons';
+  src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+.e-btn-sb-icons {
+  font-family: 'button-icons';
+  line-height: 1;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.e-play-icon::before {
+  content: '\e701';
+}
+
+.e-pause-icon::before {
+  content: '\e705';
+}
+
+.e-open-icon::before {
+  content: '\e70d';
+}
+
+.e-add-icon::before {
+  content: '\e70a';
+}
+
+.e-style {
+  margin-top: 50px;
+}
+td {
+  padding: 20px;
+}
+
+body.e-dark-mode {
+  background: #1c1e1f;
+}
diff --git a/ej2-javascript/code-snippet/common/fluent2-cs3/index.js b/ej2-javascript/code-snippet/common/fluent2-cs3/index.js
new file mode 100644
index 000000000..8e0dd93e5
--- /dev/null
+++ b/ej2-javascript/code-snippet/common/fluent2-cs3/index.js
@@ -0,0 +1,8 @@
+var button = new ej.buttons.Button({
+    content: 'Button', cssClass: 'e-primary'
+});
+button.appendTo('#element');
+
+var root = document.documentElement;
+var colorSFPrimary = '104, 134, 164';
+root.style.setProperty('--color-sf-primary', colorSFPrimary);
diff --git a/ej2-javascript/code-snippet/common/fluent2-cs3/index.ts b/ej2-javascript/code-snippet/common/fluent2-cs3/index.ts
new file mode 100644
index 000000000..794512310
--- /dev/null
+++ b/ej2-javascript/code-snippet/common/fluent2-cs3/index.ts
@@ -0,0 +1,14 @@
+import { Button } from '@syncfusion/ej2-buttons';
+import { enableRipple } from '@syncfusion/ej2-base';
+
+enableRipple(true);
+
+// Initialize the Button component.
+let button: Button = new Button({ content: 'Button', cssClass: 'e-primary' });
+
+// Render initialized button.
+button.appendTo('#element');
+
+var root = document.documentElement;
+var colorSFPrimary = '104, 134, 164';
+root.style.setProperty('--color-sf-primary', colorSFPrimary);
diff --git a/ej2-javascript/code-snippet/common/fluent2-cs3/js/index.html b/ej2-javascript/code-snippet/common/fluent2-cs3/js/index.html
new file mode 100644
index 000000000..d3cfd7457
--- /dev/null
+++ b/ej2-javascript/code-snippet/common/fluent2-cs3/js/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 Fluent2</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Typescript Grid Control">
+    <meta name="author" content="Syncfusion">
+    <link href="./index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/26.1.35/fluent2.css" rel="stylesheet">
+    <script src="https://cdn.syncfusion.com/ej2/22.1.34/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+<body>
+    
+    <div id='container'>
+        <button id='element'></button>
+    </div>
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="./index.js" type="text/javascript"></script>
+</body></html>
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/common/fluent2-cs3/systemjs.config.js b/ej2-javascript/code-snippet/common/fluent2-cs3/systemjs.config.js
new file mode 100644
index 000000000..56f999fb6
--- /dev/null
+++ b/ej2-javascript/code-snippet/common/fluent2-cs3/systemjs.config.js
@@ -0,0 +1,45 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        main: "index.ts",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        'plugin-json':'https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js',
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", 
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js"
+    },
+     meta: { 
+       '*.json': { loader: 'plugin-json' }
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});
diff --git a/ej2-javascript/code-snippet/common/fluent2-cs3/ts/index.html b/ej2-javascript/code-snippet/common/fluent2-cs3/ts/index.html
new file mode 100644
index 000000000..d45303df5
--- /dev/null
+++ b/ej2-javascript/code-snippet/common/fluent2-cs3/ts/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 Fluent2</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Typescript Grid Control">
+    <meta name="author" content="Syncfusion">
+    <link href="./index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/26.1.35/fluent2.css" rel="stylesheet">
+    <script src="https://cdn.syncfusion.com/ej2/22.1.34/dist/ej2.min.js" type="text/javascript"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+<body>
+    
+    <div id='container'>
+        <button id='element'></button>
+    </div>
+</body></html>
\ No newline at end of file
diff --git a/ej2-javascript/spreadsheet/filter.md b/ej2-javascript/spreadsheet/filter.md
index d41df4863..ba0042486 100644
--- a/ej2-javascript/spreadsheet/filter.md
+++ b/ej2-javascript/spreadsheet/filter.md
@@ -96,6 +96,39 @@ When you want to reapply the filter after some changes happened in the rows. It
 The following errors have been handled for filtering,
 * *Out of range validation:* When the selected range is not a used range of the active sheet, it is considered as invalid and the out of range alert with the message `Select a cell or range inside the used range and try again` will be displayed. No filter will be performed if the range is invalid.
 
+## Get data from filtered rows
+
+Filtering allows you to view specific rows in a spreadsheet while hiding the others. The [allowFiltering](https://ej2.syncfusion.com/documentation/api/spreadsheet/#allowfiltering) property allows you to enable or disable filtering functionality through the UI. You can also use the [allowFiltering](https://ej2.syncfusion.com/documentation/api/spreadsheet/#allowfiltering) property and [applyFilter](https://ej2.syncfusion.com/documentation/api/spreadsheet/#applyfilter) method combination to filter data via code behind. The filtered rows can be identified by iterating through the row collection on the sheet and using the `isFiltered` property available in each row object.
+
+The following code example shows how to get the filtered rows.
+
+{% if page.publishingplatform == "typescript" %}
+
+ {% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/spreadsheet/filter-cs2/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/spreadsheet/filter-cs2/index.html %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/spreadsheet/filter-cs2" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/spreadsheet/filter-cs2/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/spreadsheet/filter-cs2/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/spreadsheet/filter-cs2" %}
+{% endif %}
+
 ## Limitations
 
 The following features have some limitations in Filter:
diff --git a/ej2-javascript/spreadsheet/how-to/get-filtered-rows.md b/ej2-javascript/spreadsheet/how-to/get-filtered-rows.md
deleted file mode 100644
index 5429d4b07..000000000
--- a/ej2-javascript/spreadsheet/how-to/get-filtered-rows.md
+++ /dev/null
@@ -1,43 +0,0 @@
----
-layout: post
-title: Get the filtered rows in ##Platform_Name## Spreadsheet control | Syncfusion
-description: Learn here all about how to get the filtered rows in Syncfusion ##Platform_Name## Spreadsheet control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Spreadsheet
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-## Get the filtered rows in ##Platform_Name## Spreadsheet control
-
-Filtering allows you to view specific rows in a spreadsheet while hiding the others. The [allowFiltering](https://ej2.syncfusion.com/documentation/api/spreadsheet/#allowfiltering) property allows you to enable or disable filtering functionality through the UI. You can also use the [allowFiltering](https://ej2.syncfusion.com/documentation/api/spreadsheet/#allowfiltering) property and [applyFilter](https://ej2.syncfusion.com/documentation/api/spreadsheet/#applyfilter) method combination to filter data via code behind. The filtered rows can be identified by iterating through the row collection on the sheet and using the `isFiltered` property available in each row object.
-
-The following code example shows how to get the filtered rows.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/spreadsheet/filter-cs2/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/spreadsheet/filter-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/spreadsheet/filter-cs2" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/spreadsheet/filter-cs2/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/spreadsheet/filter-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/spreadsheet/filter-cs2" %}
-{% endif %}
diff --git a/ej2-javascript/spreadsheet/how-to/import-an-excel-document-using-file-uploader.md b/ej2-javascript/spreadsheet/how-to/import-an-excel-document-using-file-uploader.md
deleted file mode 100644
index a69da59b7..000000000
--- a/ej2-javascript/spreadsheet/how-to/import-an-excel-document-using-file-uploader.md
+++ /dev/null
@@ -1,42 +0,0 @@
----
-layout: post
-title: Import an excel document using file uploader in ##Platform_Name## Spreadsheet control | Syncfusion
-description: Learn here all about importing an excel document using file uploader in Syncfusion ##Platform_Name## Spreadsheet control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Spreadsheet 
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-## Import an excel document using file uploader in ##Platform_Name## Spreadsheet control
-
-If you explore your machine to select and upload an excel document using the file uploader, you will receive the uploaded document as a raw file in the [success](../api/uploader/#success) event of the file uploader. In this `success` event, you should pass the received raw file as an argument to the Spreadsheet's [open](../api/spreadsheet/#open) method to see the appropriate output.
-
-{% if page.publishingplatform == "typescript" %}
-
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/spreadsheet/import-using-uploader/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/spreadsheet/import-using-uploader/index.html %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/spreadsheet/import-using-uploader" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/spreadsheet/import-using-uploader/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/spreadsheet/import-using-uploader/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/spreadsheet/import-using-uploader" %}
-{% endif %}
-
diff --git a/ej2-javascript/spreadsheet/how-to/insert-sheet-programmatically-and-make-it-the-active-sheet.md b/ej2-javascript/spreadsheet/how-to/insert-sheet-programmatically-and-make-it-the-active-sheet.md
deleted file mode 100644
index 55558ab85..000000000
--- a/ej2-javascript/spreadsheet/how-to/insert-sheet-programmatically-and-make-it-the-active-sheet.md
+++ /dev/null
@@ -1,43 +0,0 @@
----
-layout: post
-title: Insert a sheet programmatically and make the inserted sheet as the active sheet in ##Platform_Name## Spreadsheet control | Syncfusion
-description: Learn here all about insert a sheet programmatically and make the inserted sheet as the active sheet in Syncfusion ##Platform_Name## Spreadsheet control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Spreadsheet 
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-## Insert a sheet programmatically and make it the active sheet in ##Platform_Name## Spreadsheet control
-
-A sheet is a collection of cells organized in the form of rows and columns that allows you to store, format, and manipulate the data. Using [insertSheet](https://helpej2.syncfusion.com/documentation/api/spreadsheet/#insertsheet) method, you can insert one or more sheets at the desired index. Then, you can make the inserted sheet as active sheet by focusing the start cell of that sheet using the [goTo](https://ej2.syncfusion.com/documentation/api/spreadsheet/#goto) method.
-
-The following code example shows how to insert a sheet programmatically and make it the active sheet.
-
-{% if page.publishingplatform == "typescript" %}
-
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/spreadsheet/insert-sheet-change-active-sheet-cs1/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/spreadsheet/insert-sheet-change-active-sheet-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/spreadsheet/insert-sheet-change-active-sheet-cs1" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/spreadsheet/insert-sheet-change-active-sheet-cs1/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/spreadsheet/insert-sheet-change-active-sheet-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/spreadsheet/insert-sheet-change-active-sheet-cs1" %}
-{% endif %}
diff --git a/ej2-javascript/spreadsheet/how-to/print.md b/ej2-javascript/spreadsheet/how-to/print.md
deleted file mode 100644
index 23b325f25..000000000
--- a/ej2-javascript/spreadsheet/how-to/print.md
+++ /dev/null
@@ -1,41 +0,0 @@
----
-layout: post
-title: Print in ##Platform_Name## Spreadsheet control | Syncfusion
-description: Learn here all about Print in Syncfusion ##Platform_Name## Spreadsheet control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Print 
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Print in ##Platform_Name## Spreadsheet control
-
-You can use the `print` method by importing from ej2-base package. Here, the `Select` event in the dropdown and the `dataBound` event are used to print the single/multiple sheets of data. To print the single/multiple sheets, use the dropdown button and select the `Print` (or) `Print All` option. In the following sample, you can be able to print the single/multiple sheets.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/spreadsheet/print-cs1/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/spreadsheet/print-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/spreadsheet/print-cs1" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/spreadsheet/print-cs1/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/spreadsheet/print-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/spreadsheet/print-cs1" %}
-{% endif %}
\ No newline at end of file
diff --git a/ej2-javascript/spreadsheet/how-to/save-and-open-spreadsheet-data-as-base64-string.md b/ej2-javascript/spreadsheet/how-to/save-and-open-spreadsheet-data-as-base64-string.md
deleted file mode 100644
index 1719307aa..000000000
--- a/ej2-javascript/spreadsheet/how-to/save-and-open-spreadsheet-data-as-base64-string.md
+++ /dev/null
@@ -1,45 +0,0 @@
----
-layout: post
-title: Save and open Spreadsheet data as a Base64 string in ##Platform_Name## Spreadsheet control | Syncfusion
-description: Learn here all about save and open Spreadsheet data as a Base64 string in Syncfusion ##Platform_Name## Spreadsheet control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Spreadsheet 
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-## Save and open Spreadsheet data as a Base64 string in ##Platform_Name## Spreadsheet control
-
-In the Spreadsheet control, there is currently no direct option to save and open data as a `Base64` string. You can achieve this by saving the Spreadsheet data as blob data and then converting that saved blob data to a `Base64` string using `FileReader`. 
-
-> You can get the Spreadsheet data as blob in the [saveComplete](https://helpej2.syncfusion.com/documentation/api/spreadsheet/#savecomplete) event when you set the  `needBlobData` as **true** and `isFullPost` as **false** in the [beforeSave](https://helpej2.syncfusion.com/documentation/api/spreadsheet/#beforesave) event.
-
-The following code example shows how to save and open the spreadsheet data as base64 string.
-
-{% if page.publishingplatform == "typescript" %}
-
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/spreadsheet/base-64-string/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/spreadsheet/base-64-string/index.html %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/spreadsheet/base-64-string" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/spreadsheet/base-64-string/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/spreadsheet/base-64-string/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/spreadsheet/base-64-string" %}
-{% endif %}
diff --git a/ej2-javascript/spreadsheet/how-to/sort-a-range-by-custom-list.md b/ej2-javascript/spreadsheet/how-to/sort-a-range-by-custom-list.md
deleted file mode 100644
index 5a9e50c70..000000000
--- a/ej2-javascript/spreadsheet/how-to/sort-a-range-by-custom-list.md
+++ /dev/null
@@ -1,49 +0,0 @@
----
-layout: post
-title: Sort a range by custom list in ##Platform_Name## Spreadsheet control | Syncfusion
-description: Learn here all about Sort a range by custom list in Syncfusion ##Platform_Name## Spreadsheet control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Sort a range by custom list 
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Sort a range by custom list in ##Platform_Name## Spreadsheet control
-
-You can also define the sorting of cell values based on your own customized personal list. In this article, custom list is achieved using `custom sort comparer`.
-
-In the following demo, the `Trustworthiness` column is sorted based on the custom lists `Perfect`, `Sufficient`, and `Insufficient`.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/spreadsheet/sort-cs1/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/spreadsheet/sort-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-        
-{% previewsample "page.domainurl/code-snippet/spreadsheet/sort-cs1" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/spreadsheet/sort-cs1/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/spreadsheet/sort-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/spreadsheet/sort-cs1" %}
-{% endif %}
-
-## See Also
-
-* [Filtering](../filter)
-* [Sorting](../sort)
-* [Hyperlink](../link)
diff --git a/ej2-javascript/spreadsheet/open-save.md b/ej2-javascript/spreadsheet/open-save.md
index ec5a11d41..8303af693 100644
--- a/ej2-javascript/spreadsheet/open-save.md
+++ b/ej2-javascript/spreadsheet/open-save.md
@@ -154,6 +154,37 @@ You can open excel file into a read-only mode by using the [`openComplete`](../a
 {% previewsample "page.domainurl/code-snippet/spreadsheet/open-save-cs4" %}
 {% endif %}
 
+### Open an excel file using a file uploader
+
+If you explore your machine to select and upload an excel document using the file uploader, you will receive the uploaded document as a raw file in the [success](../api/uploader/#success) event of the file uploader. In this `success` event, you should pass the received raw file as an argument to the Spreadsheet's [open](../api/spreadsheet/#open) method to see the appropriate output.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/spreadsheet/import-using-uploader/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/spreadsheet/import-using-uploader/index.html %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/spreadsheet/import-using-uploader" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/spreadsheet/import-using-uploader/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/spreadsheet/import-using-uploader/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/spreadsheet/import-using-uploader" %}
+{% endif %}
+
 ### Configure JSON deserialization options
 
 Previously, when opening a workbook JSON object into the Spreadsheet using the [openFromJson](../api/spreadsheet/#openfromjson) method, the entire workbook, including all features specified in the JSON object, was processed and loaded into the Spreadsheet. 
@@ -182,7 +213,7 @@ The following code snippet demonstrates how to configure the deserialization opt
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/spreadsheet/open-from-json/index.ts %}
 {% endhighlight %}
@@ -207,6 +238,39 @@ The following code snippet demonstrates how to configure the deserialization opt
 {% previewsample "page.domainurl/code-snippet/spreadsheet/open-from-json" %}
 {% endif %}
 
+### Open an excel file from Base64 string data
+
+In the Syncfusion Spreadsheet component, there is no direct option to open data as a `Base64` string. To achieve this, the `import()` function fetches the `Base64` string, converts it to a Blob, creates a File object from the Blob, and then opens it using the [open](../api/spreadsheet/#open) method in the spreadsheet.
+
+The following code example shows how to save the spreadsheet data as base64 string.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/spreadsheet/base-64-string/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/spreadsheet/base-64-string/index.html %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/spreadsheet/base-64-string" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/spreadsheet/base-64-string/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/spreadsheet/base-64-string/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/spreadsheet/base-64-string" %}
+{% endif %}
+
 ### External workbook confirmation dialog
 
 When you open an excel file that contains external workbook references, you will see a confirmation dialog. This dialog allows you to either continue with the file opening or cancel the operation. This confirmation dialog will appear only if you set the `AllowExternalWorkbook` property value to **false** during the open request, as shown below. This prevents the spreadsheet from displaying inconsistent data.
@@ -450,6 +514,42 @@ The following code snippet demonstrates how to configure the serialization optio
 {% previewsample "page.domainurl/code-snippet/spreadsheet/save-as-json" %}
 {% endif %}
 
+### To save data as a Base64 string
+
+In the Spreadsheet control, there is currently no direct option to save data as a `Base64` string. You can achieve this by saving the Spreadsheet data as blob data and then converting that saved blob data to a `Base64` string using `FileReader`. 
+
+> You can get the Spreadsheet data as blob in the [saveComplete](https://helpej2.syncfusion.com/documentation/api/spreadsheet/#savecomplete) event when you set the  `needBlobData` as **true** and `isFullPost` as **false** in the [beforeSave](https://helpej2.syncfusion.com/documentation/api/spreadsheet/#beforesave) event.
+
+The following code example shows how to save the spreadsheet data as base64 string.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/spreadsheet/base-64-string/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/spreadsheet/base-64-string/index.html %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/spreadsheet/base-64-string" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/spreadsheet/base-64-string/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/spreadsheet/base-64-string/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/spreadsheet/base-64-string" %}
+{% endif %}
+
+
 ### Supported file formats
 
 The following list of Excel file formats are supported in Spreadsheet:
diff --git a/ej2-javascript/spreadsheet/sort.md b/ej2-javascript/spreadsheet/sort.md
index 6f7f3d636..09df472bf 100644
--- a/ej2-javascript/spreadsheet/sort.md
+++ b/ej2-javascript/spreadsheet/sort.md
@@ -169,7 +169,40 @@ By customizing sort comparer, you can define the sort action as desired.
 
 > * The `sortComparer` is an optional property of `sortDescriptor`.
 
-For custom sort comparer example, refer to the [`Sort a range by custom list`](./how-to/sort-a-range-by-custom-list) in the `how-to` section.
+For custom sort comparer example, refer to the [`Sort a range by custom list`] below.
+
+### Sort a range by custom list
+
+You can also define the sorting of cell values based on your own customized personal list. In this article, custom list is achieved using `custom sort comparer`.
+
+In the following demo, the `Trustworthiness` column is sorted based on the custom lists `Perfect`, `Sufficient`, and `Insufficient`.
+
+{% if page.publishingplatform == "typescript" %}
+
+ {% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/spreadsheet/sort-cs1/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/spreadsheet/sort-cs1/index.html %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/spreadsheet/sort-cs1" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/spreadsheet/sort-cs1/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/spreadsheet/sort-cs1/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/spreadsheet/sort-cs1" %}
+{% endif %}
 
 ## Known error validations
 
@@ -186,7 +219,6 @@ The following errors have been handled for sorting,
 
 ## See Also
 
-* [Sort a range by custom list](./how-to/sort-a-range-by-custom-list)
 * [Hyperlink](./link)
 * [Filtering](./filter)
 * [Undo Redo](./undo-redo)
diff --git a/ej2-javascript/spreadsheet/worksheet.md b/ej2-javascript/spreadsheet/worksheet.md
index 8102fd5a1..8265a4170 100644
--- a/ej2-javascript/spreadsheet/worksheet.md
+++ b/ej2-javascript/spreadsheet/worksheet.md
@@ -50,6 +50,39 @@ The following code example shows the insert sheet operation in spreadsheet.
 {% previewsample "page.domainurl/code-snippet/spreadsheet/insert/sheet-cs1" %}
 {% endif %}
 
+### Insert a sheet programmatically and make it active sheet
+
+A sheet is a collection of cells organized in the form of rows and columns that allows you to store, format, and manipulate the data. Using [insertSheet](https://helpej2.syncfusion.com/documentation/api/spreadsheet/#insertsheet) method, you can insert one or more sheets at the desired index. Then, you can make the inserted sheet as active sheet by focusing the start cell of that sheet using the [goTo](https://ej2.syncfusion.com/documentation/api/spreadsheet/#goto) method.
+
+The following code example shows how to insert a sheet programmatically and make it the active sheet.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/spreadsheet/insert-sheet-change-active-sheet-cs1/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/spreadsheet/insert-sheet-change-active-sheet-cs1/index.html %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/spreadsheet/insert-sheet-change-active-sheet-cs1" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/spreadsheet/insert-sheet-change-active-sheet-cs1/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/spreadsheet/insert-sheet-change-active-sheet-cs1/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/spreadsheet/insert-sheet-change-active-sheet-cs1" %}
+{% endif %}
+
 ## Delete sheet
 
 The Spreadsheet has support for removing an existing worksheet. You can dynamically delete the existing sheet by the following way,
diff --git a/ej2-typescript-toc.html b/ej2-typescript-toc.html
index 8ed105740..fc7018a0e 100644
--- a/ej2-typescript-toc.html
+++ b/ej2-typescript-toc.html
@@ -53,7 +53,7 @@
     <li><a href="/ej2-typescript/appearance/size-modes">Size-Modes</a></li>
     <li><a href="/ej2-typescript/appearance/icons">Icons</a></li>
     <li><a href="/ej2-typescript/appearance/theme-studio">Theme Studio</a></li>
-    <li><a href="/ej2-typescript/appearance/material3">Material 3 Theme</a></li>
+    <li><a href="/ej2-typescript/appearance/css-variables">Themes using CSS</a></li>
     </ul>
 </li>
 <li>
@@ -716,9 +716,9 @@
         <ul>
             <li><a href="/ej2-typescript/diagram/customization">Customization</a></li>
             <li><a href="/ej2-typescript/diagram/nodes-interaction">Interaction</a></li>
-            <li><a href="ej2-typescript/diagram/nodes-events">Events</a></li>
+            <li><a href="/ej2-typescript/diagram/nodes-events">Events</a></li>
             <li><a href="/ej2-typescript/diagram/positioning">Positioning</a></li>
-            <li><a href="ej2-typescript/diagram/expandAndCollapse">ExpandAndCollapse</a></li>
+            <li><a href="/ej2-typescript/diagram/expandAndCollapse">ExpandAndCollapse</a></li>
         </ul>
     </li>
     <li><a href="/ej2-typescript/diagram/shapes">Shapes</a></li>
@@ -726,13 +726,13 @@
             <ul>
                 <li><a href="/ej2-typescript/diagram/bpmn-events">BPMN Events</a></li>
                 <li><a href="/ej2-typescript/diagram/bpmn-gateway">BPMN Gateway</a></li>
-                <li><a href="ej2-typescript/diagram/bpmn-activities">BPMN Activity</a></li>
+                <li><a href="/ej2-typescript/diagram/bpmn-activities">BPMN Activity</a></li>
                 <li><a href="/ej2-typescript/diagram/bpmn-dataObject">BPMN Data Object</a></li>
-                <li><a href="ej2-typescript/diagram/bpmn-dataSource">BPMN Data Source</a></li>
-                <li><a href="ej2-typescript/diagram/bpmn-textAnnotation">BPMN Text Annotation</a></li>
-                <li><a href="ej2-typescript/diagram/bpmn-groups">BPMN Group</a></li>
-                <li><a href="ej2-typescript/diagram/bpmn-expandedSubProcess">BPMN Expanded SubProcess</a></li>
-                <li><a href="ej2-typescript/diagram/bpmn-flows">BPMN Flow Connectors</a></li>
+                <li><a href="/ej2-typescript/diagram/bpmn-dataSource">BPMN Data Source</a></li>
+                <li><a href="/ej2-typescript/diagram/bpmn-textAnnotation">BPMN Text Annotation</a></li>
+                <li><a href="/ej2-typescript/diagram/bpmn-groups">BPMN Group</a></li>
+                <li><a href="/ej2-typescript/diagram/bpmn-expandedSubProcess">BPMN Expanded SubProcess</a></li>
+                <li><a href="/ej2-typescript/diagram/bpmn-flows">BPMN Flow Connectors</a></li>
             </ul>
     </li>
     <li><a href="/ej2-typescript/diagram/umldiagram">UML Diagram Shapes</a></li>
@@ -740,15 +740,15 @@
         <ul>
             <li><a href="/ej2-typescript/diagram/connector-segments">Segments</a>
                 <ul>
-                    <li><a href="/ej2-typescript/diagram/connector-staright">Straight</a></li>
-                    <li><a href="ej2-typescript/diagram/connector-orthogonal">Orthogonal</a></li>
+                    <li><a href="/ej2-typescript/diagram/connector-straight">Straight</a></li>
+                    <li><a href="/ej2-typescript/diagram/connector-orthogonal">Orthogonal</a></li>
                     <li><a href="/ej2-typescript/diagram/connector-bezier">Bezier</a>
                         <ul>
                             <li><a href="/ej2-typescript/diagram/bezier-controlPoint">Control point interaction</a></li>
-                            <li><a href="/ej2-typescript/diagram/bezier-seEditOrientation">Segment edit orientation</a></li>
+                            <li><a href="/ej2-typescript/diagram/bezier-segEditOrientation">Segment edit orientation</a></li>
                         </ul>
                     </li>
-                    <li><a href="ej2-typescript/diagram/multipleSegments">Multiple Segments</a></li>
+                    <li><a href="/ej2-typescript/diagram/multipleSegments">Multiple Segments</a></li>
                 </ul>
             </li>
             <li><a href="/ej2-typescript/diagram/connector-customization">Customization</a></li>
@@ -2420,15 +2420,9 @@
 <li><a href="/ej2-typescript/spreadsheet/ej1-api-migration">Migration from Essential JS 1</a></li>
 <li>How To
 <ul>
-<li><a href="/ej2-typescript/spreadsheet/how-to/sort-a-range-by-custom-list">Sort a range by custom list</a></li>
 <li><a href="/ej2-typescript/spreadsheet/how-to/create-a-object-structure">Create a JSON structure</a></li>
-<li><a href="/ej2-typescript/spreadsheet/how-to/print">Print the single multiple sheets</a></li>
 <li><a href="/ej2-typescript/spreadsheet/how-to/change-active-sheet">Changing the active sheet while importing a file</a></li>
-<li><a href="/ej2-typescript/spreadsheet/how-to/import-an-excel-document-using-file-uploader">Import an excel document using file uploader</a></li>
 <li><a href="/ej2-typescript/spreadsheet/how-to/identify-the-context-menu-opened">Identify the context menu opened</a></li>
-<li><a href="/ej2-typescript/spreadsheet/how-to/save-and-open-spreadsheet-data-as-base64-string">Save and open Spreadsheet data as Base64 string</a></li>
-<li><a href="/ej2-typescript/spreadsheet/how-to/insert-sheet-programmatically-and-make-it-the-active-sheet">Insert a sheet programmatically and make it the active sheet</a></li>
-<li><a href="/ej2-typescript/spreadsheet/how-to/get-filtered-rows">Get filtered rows</a></li>
 </ul>
 </li>
 <li><a href="/ej2-typescript/spreadsheet/mobile-responsiveness">Mobile Responsiveness</a></li>
@@ -2942,7 +2936,7 @@
 </ul>
 </li> <li>Release Notes
                 <ul>
-				<li>2024 Volume 2 - 26.*<ul><li>Weekly Release<ul><li><a href="/ej2-typescript/release-notes/26.1.39">26.1.39</a></li><li><a href="/ej2-typescript/release-notes/26.1.38">26.1.38</a></li></ul></li><li><a href="/ej2-typescript/release-notes/26.1.35">26.1.35 Main Release</a></li></ul></li><li>2024 Volume 1 - 25.*<ul>
+				<li>2024 Volume 2 - 26.*<ul><li>Weekly Release<ul><li><a href="/ej2-typescript/release-notes/26.1.40">26.1.40</a></li><li><a href="/ej2-typescript/release-notes/26.1.39">26.1.39</a></li><li><a href="/ej2-typescript/release-notes/26.1.38">26.1.38</a></li></ul></li><li><a href="/ej2-typescript/release-notes/26.1.35">26.1.35 Main Release</a></li></ul></li><li>2024 Volume 1 - 25.*<ul>
 				<li>Weekly Release<ul><li><a href="/ej2-typescript/release-notes/25.2.7">25.2.7</a></li>
 				<li><a href="/ej2-typescript/release-notes/25.2.6">25.2.6</a></li>
 				<li><a href="/ej2-typescript/release-notes/25.2.5">25.2.5</a></li>