diff --git a/ej2-asp-core-mvc/code-snippet/timeline/items/content/string-based/stringbased.cs b/ej2-asp-core-mvc/code-snippet/timeline/items/content/string-based/stringbased.cs
index b6625aa605..67826bfbcf 100644
--- a/ej2-asp-core-mvc/code-snippet/timeline/items/content/string-based/stringbased.cs
+++ b/ej2-asp-core-mvc/code-snippet/timeline/items/content/string-based/stringbased.cs
@@ -1,4 +1,4 @@
-public ActionResult Demo()
+public ActionResult StringContent()
 {
     List<TimelineItem> orderStatus = new List<TimelineItem>();
     orderStatus.Add(new TimelineItem { Content = "Shipped" });
diff --git a/ej2-asp-core-mvc/code-snippet/timeline/items/content/template-based/templatebased.cs b/ej2-asp-core-mvc/code-snippet/timeline/items/content/template-based/templatebased.cs
index 1bda236a6a..f628070dd9 100644
--- a/ej2-asp-core-mvc/code-snippet/timeline/items/content/template-based/templatebased.cs
+++ b/ej2-asp-core-mvc/code-snippet/timeline/items/content/template-based/templatebased.cs
@@ -1,4 +1,4 @@
-public ActionResult Demo()
+public ActionResult TemplateContent()
 {
     List<TimelineItem> orderStatus = new List<TimelineItem>();
     orderStatus.Add(new TimelineItem { Content = "#content-template" });
diff --git a/ej2-asp-core-mvc/code-snippet/timeline/items/cssclass/cssclass.cs b/ej2-asp-core-mvc/code-snippet/timeline/items/cssclass/cssclass.cs
new file mode 100644
index 0000000000..9f6ed6151e
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/timeline/items/cssclass/cssclass.cs
@@ -0,0 +1,9 @@
+public ActionResult CssClass()
+{
+    List<TimelineItem> cssClassItem = new List<TimelineItem>();
+    cssClassItem.Add(new TimelineItem { Content = "Eat" });
+    cssClassItem.Add(new TimelineItem { Content = "Code" });
+    cssClassItem.Add(new TimelineItem { Content = "Repeat" });
+    ViewBag.cssClassItem = cssClassItem;
+    return View();
+}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/timeline/items/cssclass/razor b/ej2-asp-core-mvc/code-snippet/timeline/items/cssclass/razor
new file mode 100644
index 0000000000..a8903baf06
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/timeline/items/cssclass/razor
@@ -0,0 +1,25 @@
+@using Syncfusion.EJ2.Layouts
+
+<div id="container" style="height: 250px;">
+    @Html.EJS().Timeline("timeline").Items(ViewBag.cssClassItem).Render()
+</div>
+
+<style>
+    .eat .e-dot,
+    .eat.e-timeline-item.e-connector::after {
+        background-color: aqua;
+        border-color: aqua;
+    }
+
+    .code .e-dot,
+    .code.e-timeline-item.e-connector::after {
+        background-color: blue;
+        border-color: blue;
+    }
+
+    .repeat .e-dot,
+    .repeat.e-timeline-item.e-connector::after {
+        background-color: yellow;
+        border-color: yellow;
+    }
+</style>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/timeline/items/cssclass/tagHelper b/ej2-asp-core-mvc/code-snippet/timeline/items/cssclass/tagHelper
new file mode 100644
index 0000000000..d6f9336d63
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/timeline/items/cssclass/tagHelper
@@ -0,0 +1,31 @@
+@using Syncfusion.EJ2.Layouts;
+
+<div class="container" style="height: 250px">
+    <ejs-timeline id="timeline">
+        <e-timeline-items>
+            <e-timeline-item content="Eat" cssClass='eat' ></e-timeline-item>
+            <e-timeline-item content="Code" cssClass='code'></e-timeline-item>
+            <e-timeline-item content="Repeat" cssClass='repeat'></e-timeline-item>
+        </e-timeline-items>
+    </ejs-timeline>
+</div>
+
+<style>
+    .eat .e-dot,
+    .eat.e-timeline-item.e-connector::after {
+        background-color: aqua;
+        border-color: aqua;
+    }
+
+    .code .e-dot,
+    .code.e-timeline-item.e-connector::after {
+        background-color: blue;
+        border-color: blue;
+    }
+
+    .repeat .e-dot,
+    .repeat.e-timeline-item.e-connector::after {
+        background-color: yellow;
+        border-color: yellow;
+    }
+</style>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/timeline/items/disabled/disabled.cs b/ej2-asp-core-mvc/code-snippet/timeline/items/disabled/disabled.cs
index d5bba4f8a2..1364329abf 100644
--- a/ej2-asp-core-mvc/code-snippet/timeline/items/disabled/disabled.cs
+++ b/ej2-asp-core-mvc/code-snippet/timeline/items/disabled/disabled.cs
@@ -1,4 +1,4 @@
-public ActionResult Demo()
+public ActionResult DisabledItem()
 {
     List<TimelineItem> disabledItem = new List<TimelineItem>();
     disabledItem.Add(new TimelineItem { Content = "Eat" });
diff --git a/ej2-asp-core-mvc/code-snippet/timeline/items/dot-item/dotitem.cs b/ej2-asp-core-mvc/code-snippet/timeline/items/dot-item/dotitem.cs
index 6796f4573a..d0612e406f 100644
--- a/ej2-asp-core-mvc/code-snippet/timeline/items/dot-item/dotitem.cs
+++ b/ej2-asp-core-mvc/code-snippet/timeline/items/dot-item/dotitem.cs
@@ -1,4 +1,4 @@
-public ActionResult Demo()
+public ActionResult DotItem()
 {
     List<TimelineItem> dotItems = new List<TimelineItem>();
     dotItems.Add(new TimelineItem { Content = "Default" });
diff --git a/ej2-asp-core-mvc/code-snippet/timeline/items/dot-item/tagHelper b/ej2-asp-core-mvc/code-snippet/timeline/items/dot-item/tagHelper
index b79ca1caba..a018157f60 100644
--- a/ej2-asp-core-mvc/code-snippet/timeline/items/dot-item/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/timeline/items/dot-item/tagHelper
@@ -14,7 +14,7 @@
 <style>
     /* Provide the URL for the image here. */
     .e-dot.custom-image {
-        background-image: url("./images/timeline/dot-image.png");
+        background-image: url("https://ej2.syncfusion.com/demos/src/listview/images/margaret.png");
     }
 
     .e-dot.custom-text::before {
diff --git a/ej2-asp-core-mvc/code-snippet/timeline/items/opposite-content/oppositecontent.cs b/ej2-asp-core-mvc/code-snippet/timeline/items/opposite-content/oppositecontent.cs
index c705b0ac34..9670b9a9cf 100644
--- a/ej2-asp-core-mvc/code-snippet/timeline/items/opposite-content/oppositecontent.cs
+++ b/ej2-asp-core-mvc/code-snippet/timeline/items/opposite-content/oppositecontent.cs
@@ -1,4 +1,4 @@
-public ActionResult Demo()
+public ActionResult OppositeContent()
 {
     List<TimelineItem> mealTimes = new List<TimelineItem>();
     mealTimes.Add(new TimelineItem { Content = "Breakfast", OppositeContent = "8:00 AM" });
diff --git a/ej2-asp-core-mvc/timeline/EJ2_ASP.NETCORE/events.md b/ej2-asp-core-mvc/timeline/EJ2_ASP.NETCORE/events.md
index e1922bf837..e8b81505f5 100644
--- a/ej2-asp-core-mvc/timeline/EJ2_ASP.NETCORE/events.md
+++ b/ej2-asp-core-mvc/timeline/EJ2_ASP.NETCORE/events.md
@@ -22,9 +22,6 @@ The Timeline control triggers the [created](https://help.syncfusion.com/cr/aspne
 {% highlight cshtml tabtitle="CSHTML" %}
 {% include code-snippet/timeline/events/created/tagHelper %}
 {% endhighlight %}
-{% highlight c# tabtitle="Separator.cs" %}
-{% include code-snippet/timeline/events/created/created.cs %}
-{% endhighlight %}
 {% endtabs %}
 
 {% elsif page.publishingplatform == "aspnet-mvc" %}
@@ -49,9 +46,6 @@ The Timeline control triggers the [beforeItemRender](https://help.syncfusion.com
 {% highlight cshtml tabtitle="CSHTML" %}
 {% include code-snippet/timeline/events/beforeItemRender/tagHelper %}
 {% endhighlight %}
-{% highlight c# tabtitle="Separator.cs" %}
-{% include code-snippet/timeline/events/beforeItemRender/beforeItemRender.cs %}
-{% endhighlight %}
 {% endtabs %}
 
 {% elsif page.publishingplatform == "aspnet-mvc" %}
diff --git a/ej2-asp-core-mvc/timeline/EJ2_ASP.NETCORE/items.md b/ej2-asp-core-mvc/timeline/EJ2_ASP.NETCORE/items.md
index 635432a060..37f319e3f2 100644
--- a/ej2-asp-core-mvc/timeline/EJ2_ASP.NETCORE/items.md
+++ b/ej2-asp-core-mvc/timeline/EJ2_ASP.NETCORE/items.md
@@ -26,9 +26,6 @@ You can define string content for the Timeline items.
 {% highlight cshtml tabtitle="CSHTML" %}
 {% include code-snippet/timeline/items/content/string-based/tagHelper %}
 {% endhighlight %}
-{% highlight c# tabtitle="Separator.cs" %}
-{% include code-snippet/timeline/items/content/string-based/stringbased.cs %}
-{% endhighlight %}
 {% endtabs %}
 
 {% elsif page.publishingplatform == "aspnet-mvc" %}
@@ -55,9 +52,6 @@ You can specify the [Template Content](https://help.syncfusion.com/cr/aspnetcore
 {% highlight cshtml tabtitle="CSHTML" %}
 {% include code-snippet/timeline/items/content/template-based/tagHelper %}
 {% endhighlight %}
-{% highlight c# tabtitle="Separator.cs" %}
-{% include code-snippet/timeline/items/content/template-based/templatebased.cs %}
-{% endhighlight %}
 {% endtabs %}
 
 {% elsif page.publishingplatform == "aspnet-mvc" %}
@@ -84,9 +78,6 @@ You can add additional information to each Timeline item, by using the [opposite
 {% highlight cshtml tabtitle="CSHTML" %}
 {% include code-snippet/timeline/items/opposite-content/tagHelper %}
 {% endhighlight %}
-{% highlight c# tabtitle="Separator.cs" %}
-{% include code-snippet/timeline/items/opposite-content/oppositecontent.cs %}
-{% endhighlight %}
 {% endtabs %}
 
 {% elsif page.publishingplatform == "aspnet-mvc" %}
@@ -125,9 +116,6 @@ You can display text for the Timeline items using the `dotCss` property, by addi
 {% highlight cshtml tabtitle="CSHTML" %}
 {% include code-snippet/timeline/items/dot-item/tagHelper %}
 {% endhighlight %}
-{% highlight c# tabtitle="Separator.cs" %}
-{% include code-snippet/timeline/items/dot-item/dotitem.cs %}
-{% endhighlight %}
 {% endtabs %}
 
 {% elsif page.publishingplatform == "aspnet-mvc" %}
@@ -154,9 +142,6 @@ You can use the [disabled](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfus
 {% highlight cshtml tabtitle="CSHTML" %}
 {% include code-snippet/timeline/items/disabled/tagHelper %}
 {% endhighlight %}
-{% highlight c# tabtitle="Separator.cs" %}
-{% include code-snippet/timeline/items/disabled/disabled.cs %}
-{% endhighlight %}
 {% endtabs %}
 
 {% elsif page.publishingplatform == "aspnet-mvc" %}
@@ -175,4 +160,26 @@ You can use the [disabled](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfus
 
 ## CSS class
 
-The [cssClass](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Layouts.TimelineItem.html#Syncfusion_EJ2_Layouts_TimelineItem_CssClass) property allows you to define a custom class to modify the appearance of the Timeline item.
\ No newline at end of file
+You can customize the appearance of the Timeline item by specifying a custom CSS class using the [cssClass](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Layouts.TimelineItem.html#Syncfusion_EJ2_Layouts_TimelineItem_CssClass) property.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/timeline/items/cssClass/tagHelper %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/timeline/items/cssClass/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Separator.cs" %}
+{% include code-snippet/timeline/items/cssClass/cssClass.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+![CssClass items](images/cssClass.png)
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/timeline/EJ2_ASP.NETCORE/orientations.md b/ej2-asp-core-mvc/timeline/EJ2_ASP.NETCORE/orientations.md
index 95008bef95..047bdba93f 100644
--- a/ej2-asp-core-mvc/timeline/EJ2_ASP.NETCORE/orientations.md
+++ b/ej2-asp-core-mvc/timeline/EJ2_ASP.NETCORE/orientations.md
@@ -22,9 +22,6 @@ You can display the items one below the other vertically by setting the [orienta
 {% highlight cshtml tabtitle="CSHTML" %}
 {% include code-snippet/timeline/orientations/vertical/tagHelper %}
 {% endhighlight %}
-{% highlight c# tabtitle="Separator.cs" %}
-{% include code-snippet/timeline/orientations/vertical/vertical.cs %}
-{% endhighlight %}
 {% endtabs %}
 
 {% elsif page.publishingplatform == "aspnet-mvc" %}
@@ -51,9 +48,6 @@ In horizontal orientation, the items are displayed in a side-by-side manner by s
 {% highlight cshtml tabtitle="CSHTML" %}
 {% include code-snippet/timeline/orientations/horizontal/tagHelper %}
 {% endhighlight %}
-{% highlight c# tabtitle="Separator.cs" %}
-{% include code-snippet/timeline/orientations/horizontal/horizontal.cs %}
-{% endhighlight %}
 {% endtabs %}
 
 {% elsif page.publishingplatform == "aspnet-mvc" %}
diff --git a/ej2-asp-core-mvc/timeline/EJ2_ASP.NETCORE/template.md b/ej2-asp-core-mvc/timeline/EJ2_ASP.NETCORE/template.md
index 5b3d9a11d6..02a0732228 100644
--- a/ej2-asp-core-mvc/timeline/EJ2_ASP.NETCORE/template.md
+++ b/ej2-asp-core-mvc/timeline/EJ2_ASP.NETCORE/template.md
@@ -25,9 +25,6 @@ The `template` context receives the following information:
 {% highlight cshtml tabtitle="CSHTML" %}
 {% include code-snippet/timeline/template/tagHelper %}
 {% endhighlight %}
-{% highlight c# tabtitle="Separator.cs" %}
-{% include code-snippet/timeline/template/template.cs %}
-{% endhighlight %}
 {% endtabs %}
 
 {% elsif page.publishingplatform == "aspnet-mvc" %}
diff --git a/ej2-asp-core-mvc/timeline/customization.md b/ej2-asp-core-mvc/timeline/customization.md
index 6b9179e794..d9a3892e8f 100644
--- a/ej2-asp-core-mvc/timeline/customization.md
+++ b/ej2-asp-core-mvc/timeline/customization.md
@@ -24,9 +24,6 @@ You can define the styles applicable to the all the Timeline item connectors.
 {% highlight cshtml tabtitle="CSHTML" %}
 {% include code-snippet/timeline/customization/connector-common/tagHelper %}
 {% endhighlight %}
-{% highlight c# tabtitle="Separator.cs" %}
-{% include code-snippet/timeline/customization/connector-common/connectorcommon.cs %}
-{% endhighlight %}
 {% endtabs %}
 
 {% elsif page.publishingplatform == "aspnet-mvc" %}
@@ -53,9 +50,6 @@ You can also apply unique styles to individual connectors, to differentiate spec
 {% highlight cshtml tabtitle="CSHTML" %}
 {% include code-snippet/timeline/customization/connector-individual/tagHelper %}
 {% endhighlight %}
-{% highlight c# tabtitle="Separator.cs" %}
-{% include code-snippet/timeline/customization/connector-individual/connectorindividual.cs %}
-{% endhighlight %}
 {% endtabs %}
 
 {% elsif page.publishingplatform == "aspnet-mvc" %}
@@ -84,9 +78,6 @@ You can modify the color of the dots to highlight the specific Timeline items.
 {% highlight cshtml tabtitle="CSHTML" %}
 {% include code-snippet/timeline/customization/dot-color/tagHelper %}
 {% endhighlight %}
-{% highlight c# tabtitle="Separator.cs" %}
-{% include code-snippet/timeline/customization/dot-color/dotcolor.cs %}
-{% endhighlight %}
 {% endtabs %}
 
 {% elsif page.publishingplatform == "aspnet-mvc" %}
@@ -113,9 +104,6 @@ You can adjust the size of the dot to make it larger or smaller by using the `--
 {% highlight cshtml tabtitle="CSHTML" %}
 {% include code-snippet/timeline/customization/dot-size/tagHelper %}
 {% endhighlight %}
-{% highlight c# tabtitle="Separator.cs" %}
-{% include code-snippet/timeline/customization/dot-size/dotsize.cs %}
-{% endhighlight %}
 {% endtabs %}
 
 {% elsif page.publishingplatform == "aspnet-mvc" %}
@@ -142,9 +130,6 @@ You can add shadow effects to the Timeline dots to make it feel visually engagin
 {% highlight cshtml tabtitle="CSHTML" %}
 {% include code-snippet/timeline/customization/dot-shadow/tagHelper %}
 {% endhighlight %}
-{% highlight c# tabtitle="Separator.cs" %}
-{% include code-snippet/timeline/customization/dot-shadow/dotshadow.cs %}
-{% endhighlight %}
 {% endtabs %}
 
 {% elsif page.publishingplatform == "aspnet-mvc" %}
@@ -171,9 +156,6 @@ You can achieve the desired dot variant by customizing the border, outline and b
 {% highlight cshtml tabtitle="CSHTML" %}
 {% include code-snippet/timeline/customization/dot-variant/tagHelper %}
 {% endhighlight %}
-{% highlight c# tabtitle="Separator.cs" %}
-{% include code-snippet/timeline/customization/dot-variant/dotvariant.cs %}
-{% endhighlight %}
 {% endtabs %}
 
 {% elsif page.publishingplatform == "aspnet-mvc" %}
@@ -192,7 +174,7 @@ You can achieve the desired dot variant by customizing the border, outline and b
 
 ### Dot outline
 
-By adding the `e-outline` class to the Timeline `cssClass` property it enables the dots to have an outline state.
+By adding the `e-outline` class to the Timeline [cssClass](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Layouts.TimelineItem.html#Syncfusion_EJ2_Layouts_TimelineItem_CssClass) property it enables the dots to have an outline state.
 
 {% if page.publishingplatform == "aspnet-core" %}
 
@@ -200,9 +182,6 @@ By adding the `e-outline` class to the Timeline `cssClass` property it enables t
 {% highlight cshtml tabtitle="CSHTML" %}
 {% include code-snippet/timeline/customization/dot-outline/tagHelper %}
 {% endhighlight %}
-{% highlight c# tabtitle="Separator.cs" %}
-{% include code-snippet/timeline/customization/dot-outline/dot-outline.cs %}
-{% endhighlight %}
 {% endtabs %}
 
 {% elsif page.publishingplatform == "aspnet-mvc" %}
diff --git a/ej2-asp-core-mvc/timeline/images/cssClass.png b/ej2-asp-core-mvc/timeline/images/cssClass.png
new file mode 100644
index 0000000000..5cedf12a6a
Binary files /dev/null and b/ej2-asp-core-mvc/timeline/images/cssClass.png differ