diff --git a/blazor/appearance/images/bigger-theme-button.png b/blazor/appearance/images/bigger-theme-button.png
new file mode 100644
index 0000000000..756f2e2015
Binary files /dev/null and b/blazor/appearance/images/bigger-theme-button.png differ
diff --git a/blazor/appearance/themes.md b/blazor/appearance/themes.md
index 998181f463..e833ad8c5c 100644
--- a/blazor/appearance/themes.md
+++ b/blazor/appearance/themes.md
@@ -32,6 +32,24 @@ The following list of themes are included in the Syncfusion Blazor components li
The Syncfusion Blazor Bootstrap Theme is designed based on Bootstrap v3, whereas the Bootsrap4 theme is designed based on Bootstrap v4.
+## Optimized CSS files
+
+Syncfusion Blazor Themes have two size modes for each theme: **normal** and **bigger**. By default, the **normal** size mode is applied, offering a standard appearance that is suitable for all devices. The **bigger** size mode provides an enlarged interface for enhanced interactions, visibility, and an overall improved user experience by increasing the size of the UI controls.
+
+The **bigger** size mode is ideal when an enlarged appearance is needed, while the normal size mode works best for maintaining the default appearance of controls.
+
+Comparison of the Syncfusion Blazor Button Component in **normal** and **bigger** size modes:
+
+
+
+Each theme includes both **normal** and **bigger** size modes, which increases the overall file size. To optimize performance, Syncfusion offers additional theme files (e.g., `fluent2-lite.css`), which only include the normal size mode styles. This results in a significant reduction in file size, improving load times and overall application performance, especially when the bigger size mode is unnecessary.
+
+Refer to the comparison below for the default and optimized theme file sizes:
+
+| Theme Name | Default Theme Size | Optimized Theme Size |
+| -- | -- | -- |
+| Fluent 2 | 3.97 MB | 2.96 MB |
+
## Reference themes in Blazor application
Syncfusion Blazor themes can be used in your Blazor application by referencing the style sheet.
@@ -78,6 +96,13 @@ When using individual NuGet packages in your application, add [Syncfusion.Blazor
```
+To refer to optimized CSS files, use the following syntax:
+
+ ```html
+
+
+
+```
When using [Syncfusion.Blazor](https://www.nuget.org/packages/Syncfusion.Blazor/) NuGet package,
@@ -86,6 +111,13 @@ When using [Syncfusion.Blazor](https://www.nuget.org/packages/Syncfusion.Blazor/
```
+To reference optimized CSS files from [Syncfusion.Blazor](https://www.nuget.org/packages/Syncfusion.Blazor/) NuGet package, here's how to:
+
+ ```html
+
+
+
+```
## CDN reference
@@ -99,6 +131,14 @@ Syncfusion Blazor Themes are available in the CDN. Make sure that the version in
```
+To refer to optimized CSS files, use the following syntax:
+
+```html
+
+
+
+```
+
| Theme Name | CDN Reference |
|--- | --- |
| Material 3 | https://cdn.syncfusion.com/blazor/{{ site.blazorversion }}/styles/material3.css |