diff --git a/ej2-asp-core-mvc/code-snippet/gantt/how-to/indicator-background-color-cs1/Indicator.cs b/ej2-asp-core-mvc/code-snippet/gantt/how-to/indicator-background-color-cs1/Indicator.cs
new file mode 100644
index 0000000000..eec9005cde
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/gantt/how-to/indicator-background-color-cs1/Indicator.cs
@@ -0,0 +1,5 @@
+public IActionResult Index()
+{
+    ViewBag.DataSource = GanttData.ProjectNewData();
+    return View();
+}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/gantt/how-to/indicator-background-color-cs1/razor b/ej2-asp-core-mvc/code-snippet/gantt/how-to/indicator-background-color-cs1/razor
new file mode 100644
index 0000000000..fab24fb5f0
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/gantt/how-to/indicator-background-color-cs1/razor
@@ -0,0 +1,14 @@
+@Html.EJS().Button("indicator").Content("Indicator background change").CssClass("e-primary").Render()
+
+@Html.EJS().Gantt("Gantt").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("450px").TaskFields(ts => ts.Id(
+                "TaskId").Name("TaskName").StartDate("StartDate").Duration("Duration").Progress("Progress").ParentID("ParentId").Indicators("Indicators")
+                ).Render()
+
+<script>
+    document.getElementById('indicator').addEventListener('click', function (args) {
+        var node = document.querySelectorAll('.e-indicator-span');
+        node.forEach((box) => {
+            box.children[0].style.color = 'red';
+        });
+    });
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/gantt/how-to/indicator-background-color-cs1/tagHelper b/ej2-asp-core-mvc/code-snippet/gantt/how-to/indicator-background-color-cs1/tagHelper
new file mode 100644
index 0000000000..b0ad0871d7
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/gantt/how-to/indicator-background-color-cs1/tagHelper
@@ -0,0 +1,15 @@
+<ejs-button id="indicator" content="Indicator background change" cssClass="e-primary"></ejs-button>
+<ejs-gantt id='Gantt' dataSource="ViewBag.DataSource" height="450px">
+    <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate"
+                        duration="Duration" progress="Progress" parentID="ParentId" indicators="Indicators">
+    </e-gantt-taskfields>
+</ejs-gantt>
+
+<script>
+    document.getElementById('indicator').addEventListener('click', function (args) {
+        var node = document.querySelectorAll('.e-indicator-span');
+        node.forEach((box) => {
+            box.children[0].style.color = 'red';
+        });
+    });
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/gantt/how-to/indicator-background.md b/ej2-asp-core-mvc/gantt/how-to/indicator-background.md
new file mode 100644
index 0000000000..a4506e2b07
--- /dev/null
+++ b/ej2-asp-core-mvc/gantt/how-to/indicator-background.md
@@ -0,0 +1,34 @@
+---
+layout: post
+title: Custom indicator background in ##Platform_Name## Gantt | Syncfusion
+description: Learn here all about Dynamically change indicator background color in Syncfusion ##Platform_Name## Gantt component of Syncfusion Essential JS 2 and more.
+platform: ej2-asp-core-mvc
+control: Indicator background color
+publishingplatform: ##Platform_Name##
+documentation: ug
+---
+
+# Dynamically change indicator background color in Gantt component
+
+Indicators are a great way to highlight important points or events on tasks within the Syncfusion Gantt Chart. By default, these indicators have a black background color. However, the background color can be dynamically changed based on specific conditions or actions within the application.
+
+The following code snippets demonstrate how to achieve this.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/gantt/how-to/indicator-background-color-cs1/tagHelper %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/gantt/how-to/indicator-background-color-cs1/razor %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+![Alt text](../images/indicator-background-color.png)
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/gantt/images/indicator-background-color.png b/ej2-asp-core-mvc/gantt/images/indicator-background-color.png
new file mode 100644
index 0000000000..08be847f4b
Binary files /dev/null and b/ej2-asp-core-mvc/gantt/images/indicator-background-color.png differ
diff --git a/ej2-asp-core-toc.html b/ej2-asp-core-toc.html
index ca75e3a4d5..934b9d2878 100644
--- a/ej2-asp-core-toc.html
+++ b/ej2-asp-core-toc.html
@@ -1250,6 +1250,7 @@
 			<li><a href="/ej2-asp-core/gantt/how-to/drag-and-drop">Drag and drop from another component</a></li>
 			<li><a href="/ej2-asp-core/gantt/how-to/new-row-position">Add new row position while adding</a></li>
 			<li><a href="/ej2-asp-core/gantt/how-to/restrict-collapse-chart-rows">Restrict collapsing of records when clicking on Gantt chart rows</a></li>
+			<li><a href="/ej2-asp-core/gantt/how-to/indicator-background">Indicator background color</a></li>
 			</ul>
 			</li>
 			<li>
diff --git a/ej2-asp-mvc-toc.html b/ej2-asp-mvc-toc.html
index 7b84bff62b..b8832a3003 100644
--- a/ej2-asp-mvc-toc.html
+++ b/ej2-asp-mvc-toc.html
@@ -1199,6 +1199,7 @@
 			<li><a href="/ej2-asp-mvc/gantt/how-to/drag-and-drop">Drag and drop from another component</a></li>
 			<li><a href="/ej2-asp-mvc/gantt/how-to/new-row-position">Add new row position while adding</a></li>
 			<li><a href="/ej2-asp-mvc/gantt/how-to/restrict-collapse-chart-rows">Restrict collapsing of records when clicking on Gantt chart rows</a></li>
+			<li><a href="/ej2-asp-mvc/gantt/how-to/indicator-background">Indicator background color</a></li>
 			</ul>
 			</li>
 			<li>