diff --git a/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_timeline.scss b/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_timeline.scss
index 47b27c13dccb151188e729171f0e82d239940a58..8a56db2bd26513238030ccea35521f577b4e9f6e 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_timeline.scss
+++ b/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_timeline.scss
@@ -387,6 +387,25 @@
     color: white !important;
 }
 
+.task-observation {
+    background-color: #90EE90 !important;
+    color: white !important;
+}
+
+.task-pipeline {
+    background-color: #FED8B1 !important;
+    color: white !important;
+}
+
+.task-ingest {
+    background-color: #728FCE !important;
+    color: white !important;
+}
+
+.task-cleanup {
+    background-color: #FFCCCB !important;
+    color: white !important;
+}
 .su-error-icon,.su-scheduled-icon,.su-observed-icon,.su-unschedulable-icon {
     color: white !important;
 }
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/routes/Scheduling/ViewSchedulingUnit.js b/SAS/TMSS/frontend/tmss_webapp/src/routes/Scheduling/ViewSchedulingUnit.js
index 7cfa0c575fb9511eaeb0e287fa9eb0095099e2cc..5c8cfc61658dbe6f7e50ed7e22c08cddf0b486b2 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/routes/Scheduling/ViewSchedulingUnit.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/routes/Scheduling/ViewSchedulingUnit.js
@@ -95,6 +95,7 @@ class ViewSchedulingUnit extends Component {
                 "ID",
                 "Control ID",
                 "Name",
+                "Task Type",
                 "Description",
                 "Short Description",
                 "Observation Start Time",
@@ -176,6 +177,11 @@ class ViewSchedulingUnit extends Component {
                 },
             }],
             optionalcolumns: [{
+                task_type: {
+                    name: "Task Type",
+                    showTag: true,
+                    tagClass: 'task-$dynamic$' //$dynamic$ will be replace with cell value
+                },
                 size: "Data size",
                 dataSizeOnDisk: "Data size on Disk",
                 subtaskContent: "Subtask Content",
@@ -744,7 +750,7 @@ class ViewSchedulingUnit extends Component {
         this.setState({taskDraftPermission : taskPermission[schedulingUnit.task_drafts[0].id]});
         let scheduletasklist = [];
         // Common keys for Task and Blueprint
-        let commonkeys = ['id', 'created_at', 'description', 'short_description' , 'name', 'tags', 'updated_at', 'url', 'do_cancel', 'relative_start_time', 'relative_stop_time', 'on_sky_start_time', 'on_sky_stop_time', 'process_start_time', 'process_stop_time', 'duration', 'status', 'obsolete'];
+        let commonkeys = ['id', 'created_at', 'description', 'short_description' , 'name', 'tags', 'updated_at', 'url', 'do_cancel', 'relative_start_time', 'relative_stop_time', 'on_sky_start_time', 'on_sky_stop_time', 'process_start_time', 'process_stop_time', 'duration', 'status', 'obsolete', 'task_type'];
         for (const task of schedulingUnit.task_drafts) {
             let scheduletask = {};
             scheduletask['tasktype'] = 'Draft';
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/routes/Task/list.js b/SAS/TMSS/frontend/tmss_webapp/src/routes/Task/list.js
index ba08b16505ed65fc4865be2744aa32658302a697..2f999981ba05b4d43b96b8afb38f16249d4355e6 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/routes/Task/list.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/routes/Task/list.js
@@ -66,6 +66,7 @@ export class TaskList extends Component {
                 "ID",
                 "Control ID",
                 "Name",
+                "Task Type",
                 "Description",
                 "Short Description",
                 "Observation Start Time",
@@ -177,6 +178,11 @@ export class TaskList extends Component {
                 },
             }],
             optionalcolumns: [{
+                task_type: {
+                    name: "Task Type",
+                    showTag: true,
+                    tagClass: 'task-$dynamic$' //$dynamic$ will be replace with cell value
+                },
                 size: {
                     name:"Data size [TB]"
                 },
@@ -345,7 +351,7 @@ export class TaskList extends Component {
 
     getFormattedTaskDraft(task) {
         // Common keys for Task and Blueprint
-        let commonkeys = ['id', 'created_at', 'description', 'short_description' , 'name', 'tags', 'updated_at', 'url', 'do_cancel', 'relative_start_time', 'relative_stop_time', 'on_sky_start_time', 'on_sky_stop_time', 'process_start_time', 'process_stop_time', 'duration', 'status',"obsolete"];
+        let commonkeys = ['id', 'created_at', 'description', 'short_description' , 'name', 'tags', 'updated_at', 'url', 'do_cancel', 'relative_start_time', 'relative_stop_time', 'on_sky_start_time', 'on_sky_stop_time', 'process_start_time', 'process_stop_time', 'duration', 'status','obsolete', 'task_type'];
         let scheduletask = {};
         scheduletask['tasktype'] = 'Draft';
         scheduletask['actionpath'] = '/task/view/draft/' + task['id'];
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/shared/timeline.constants.js b/SAS/TMSS/frontend/tmss_webapp/src/shared/timeline.constants.js
index d1f3767b490aecf14217c755647d174c39a734d3..ff210134eb433d94fdca84df2513f0f2a41e482a 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/shared/timeline.constants.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/shared/timeline.constants.js
@@ -149,7 +149,9 @@ const TimelineConstants = {
             name: "Cancelled"
         },
         task_type: {
-            name: "Type"
+            name: "Task Type",
+            showTag: true,
+            tagClass: 'task-$dynamic$' //$dynamic$ will be replace with cell value
         },
         start_time: {
             name: "Start Time",
@@ -216,7 +218,7 @@ const TimelineConstants = {
         "Status",
         "Unschedulable Reason",
         "Cancelled",
-        "Type",
+        "Task Type",
         "Start Time",
         "End Time",
         "Duration (HH:mm:ss)",