diff --git a/SAS/TMSS/frontend/tmss_webapp/src/components/Timeline/CalendarTimeline.js b/SAS/TMSS/frontend/tmss_webapp/src/components/Timeline/CalendarTimeline.js
index 5fb7c1a0eb9a67ce257426274466d3a6e1a716c0..f382ffdfb59abcf0f26d823fd83ee3837053d11f 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/components/Timeline/CalendarTimeline.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/components/Timeline/CalendarTimeline.js
@@ -6,7 +6,7 @@ import Timeline, {
     DateHeader,
     CustomMarker,
     CursorMarker,
-    CustomHeader
+    // CustomHeader
   } from 'react-calendar-timeline';
 import containerResizeDetector from 'react-calendar-timeline/lib/resize-detector/container';
 import moment from 'moment';
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 5a25a62050f2652843210ebe61992ffb126ac661..afe92374a938462f96a3cf4c2830890ae5aa561b 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/routes/Scheduling/ViewSchedulingUnit.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/routes/Scheduling/ViewSchedulingUnit.js
@@ -18,6 +18,7 @@ import { Redirect } from 'react-router-dom';
 import { CustomDialog } from '../../layout/components/CustomDialog';
 import { CustomPageSpinner } from '../../components/CustomPageSpinner';
 import { Growl } from 'primereact/components/growl/Growl';
+import TaskService from '../../services/task.service';
 
 class ViewSchedulingUnit extends Component{
     constructor(props){
@@ -106,6 +107,7 @@ class ViewSchedulingUnit extends Component{
         if (schedule_type && schedule_id) {
             this.stations = await ScheduleService.getStationGroup();
             this.setState({stationOptions: this.stations});
+            this.subtaskTemplates = await TaskService.getSubtaskTemplates();
             this.getSchedulingUnitDetails(schedule_type, schedule_id);
 		}
     }
@@ -119,33 +121,31 @@ class ViewSchedulingUnit extends Component{
     };
     
     getSchedulingUnitDetails(schedule_type, schedule_id) {
-        this.getScheduleUnit(schedule_type, schedule_id)
+        ScheduleService.getSchedulingUnitExtended(schedule_type, schedule_id)
             .then(schedulingUnit =>{
                 if (schedulingUnit) {
                     ScheduleService.getSchedulingConstraintTemplates().then((response) => {
                         this.constraintTemplates = response;
                         this.setState({ constraintSchema:  this.constraintTemplates.find(i => i.id === schedulingUnit.scheduling_constraints_template_id) })
                     });
-                    this.getScheduleUnitTasks(schedule_type, schedulingUnit)
-                        .then(tasks =>{
-                        tasks.map(task => {
+                    let tasks = schedulingUnit.task_drafts?this.getFormattedTaskDrafts(schedulingUnit):this.getFormattedTaskBlueprints(schedulingUnit);
+                    tasks.map(task => {
                             task.status_logs = task.tasktype === "Blueprint"?this.subtaskComponent(task):"";
                             //Displaying SubTask ID of the 'control' Task
                             const subTaskIds = task.subTasks?task.subTasks.filter(sTask => sTask.subTaskTemplate.name.indexOf('control') > 1):[];
                             task.subTaskID = subTaskIds.length ? subTaskIds[0].id : ''; 
                             return task;
-                        });
-                        const targetObservation = _.find(tasks, (task)=> {return task.template.type_value==='observation' && task.tasktype.toLowerCase()===schedule_type && task.specifications_doc.station_groups});
-                        this.setState({
-                            scheduleunitId: schedule_id,
-                            scheduleunit : schedulingUnit,
-                            scheduleunitType: schedule_type,
-                            schedule_unit_task : tasks,
-                            isLoading: false,
-                            stationGroup: targetObservation?targetObservation.specifications_doc.station_groups:[],
-                            redirect: null,
-                            dialogVisible: false
-                    }, this.getAllStations);
+                    });
+                    const targetObservation = _.find(tasks, (task)=> {return task.template.type_value==='observation' && task.tasktype.toLowerCase()===schedule_type && task.specifications_doc.station_groups});
+                    this.setState({
+                        scheduleunitId: schedule_id,
+                        scheduleunit : schedulingUnit,
+                        scheduleunitType: schedule_type,
+                        schedule_unit_task : tasks,
+                        isLoading: false,
+                        stationGroup: targetObservation?targetObservation.specifications_doc.station_groups:[],
+                        redirect: null,
+                        dialogVisible: false
                     });
                 }   else {
                     this.setState({
@@ -168,6 +168,85 @@ class ViewSchedulingUnit extends Component{
             }
     }
 
+    /**
+     * Formatting the task_drafts and task_blueprints in draft view to pass to the ViewTable component
+     * @param {Object} schedulingUnit - scheduling_unit_draft object from extended API call loaded with tasks(draft & blueprint) along with their template and subtasks
+     */
+    getFormattedTaskDrafts(schedulingUnit) {
+        let scheduletasklist=[];
+        // Common keys for Task and Blueprint
+        let commonkeys = ['id','created_at','description','name','tags','updated_at','url','do_cancel','relative_start_time','relative_stop_time','start_time','stop_time','duration','status'];
+        for(const task of schedulingUnit.task_drafts){
+            let scheduletask = [];
+            scheduletask['tasktype'] = 'Draft';
+            scheduletask['actionpath'] = '/task/view/draft/'+task['id'];
+            scheduletask['blueprint_draft'] = _.map(task['task_blueprints'], 'url');
+            scheduletask['status'] = task['status'];
+            
+            //fetch task draft details
+            for(const key of commonkeys){
+                scheduletask[key] = task[key];
+            }
+            scheduletask['created_at'] = moment(task['created_at'], moment.ISO_8601).format("YYYY-MMM-DD HH:mm:ss");
+            scheduletask['updated_at'] = moment(task['updated_at'], moment.ISO_8601).format("YYYY-MMM-DD HH:mm:ss");
+            scheduletask['specifications_doc'] = task['specifications_doc'];
+            scheduletask.duration = moment.utc((scheduletask.duration || 0)*1000).format('HH:mm:ss'); 
+            scheduletask.relative_start_time = moment.utc(scheduletask.relative_start_time*1000).format('HH:mm:ss'); 
+            scheduletask.relative_stop_time = moment.utc(scheduletask.relative_stop_time*1000).format('HH:mm:ss'); 
+            scheduletask.template = task.specifications_template;
+            
+            for(const blueprint of task['task_blueprints']){
+                let taskblueprint = [];
+                taskblueprint['tasktype'] = 'Blueprint';
+                taskblueprint['actionpath'] = '/task/view/blueprint/'+blueprint['id'];
+                taskblueprint['blueprint_draft'] = blueprint['draft'];
+                taskblueprint['status'] = blueprint['status'];
+                
+                for(const key of commonkeys){
+                    taskblueprint[key] = blueprint[key];
+                }
+                taskblueprint['created_at'] = moment(blueprint['created_at'], moment.ISO_8601).format("YYYY-MMM-DD HH:mm:ss");
+                taskblueprint['updated_at'] = moment(blueprint['updated_at'], moment.ISO_8601).format("YYYY-MMM-DD HH:mm:ss");
+                taskblueprint.duration = moment.utc((taskblueprint.duration || 0)*1000).format('HH:mm:ss'); 
+                taskblueprint.relative_start_time = moment.utc(taskblueprint.relative_start_time*1000).format('HH:mm:ss'); 
+                taskblueprint.relative_stop_time = moment.utc(taskblueprint.relative_stop_time*1000).format('HH:mm:ss'); 
+                taskblueprint.template = scheduletask.template;
+                taskblueprint.subTasks = blueprint.subtasks;
+                for (const subtask of taskblueprint.subTasks) {
+                    subtask.subTaskTemplate = _.find(this.subtaskTemplates, ['id', subtask.specifications_template_id]);
+                }
+                //Add Blue print details to array
+                scheduletasklist.push(taskblueprint);
+            }
+            //Add Task Draft details to array
+            scheduletasklist.push(scheduletask);
+        }
+        return scheduletasklist;
+    }
+
+    /**
+     * Formatting the task_blueprints in blueprint view to pass to the ViewTable component
+     * @param {Object} schedulingUnit - scheduling_unit_blueprint object from extended API call loaded with tasks(blueprint) along with their template and subtasks
+     */
+    getFormattedTaskBlueprints(schedulingUnit) {
+        let taskBlueprintsList = [];
+        for(const taskBlueprint of schedulingUnit.task_blueprints) {
+            taskBlueprint['tasktype'] = 'Blueprint';
+            taskBlueprint['actionpath'] = '/task/view/blueprint/'+taskBlueprint['id'];
+            taskBlueprint['blueprint_draft'] = taskBlueprint['draft'];
+            taskBlueprint['relative_start_time'] = 0;
+            taskBlueprint['relative_stop_time'] = 0;
+            taskBlueprint.duration = moment.utc((taskBlueprint.duration || 0)*1000).format('HH:mm:ss');
+            taskBlueprint.template = taskBlueprint.specifications_template;
+            for (const subtask of taskBlueprint.subtasks) {
+                subtask.subTaskTemplate = _.find(this.subtaskTemplates, ['id', subtask.specifications_template_id]);
+            }
+            taskBlueprint.subTasks = taskBlueprint.subtasks;
+            taskBlueprintsList.push(taskBlueprint);
+        }
+        return taskBlueprintsList;
+    }
+
     getScheduleUnitTasks(type, scheduleunit){
         if(type === 'draft')
             return ScheduleService.getTasksBySchedulingUnit(scheduleunit.id, true, true, true);
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/view.js b/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/view.js
index 7728f681598119d69646abed39451a641ef89ad3..8a388ddd5f3da91b5a3801f1dd9ac803fb322017 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/view.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/view.js
@@ -90,7 +90,7 @@ export class TimelineView extends Component {
     async componentDidMount() {
         // Fetch all details from server and prepare data to pass to timeline and table components
         const promises = [  ProjectService.getProjectList(), 
-                            ScheduleService.getSchedulingUnitBlueprintExtended(),
+                            ScheduleService.getSchedulingUnitsExtended('blueprint'),
                             ScheduleService.getSchedulingUnitDraft(),
                             ScheduleService.getSchedulingSets(),
                             UtilService.getUTC(),
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/week.view.js b/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/week.view.js
index 88997e9586ecd8e4c3574b21bfdfc8eb453bfd16..55efb7789b8bd71fdff045450b9815397ca0b764 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/week.view.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/week.view.js
@@ -70,7 +70,7 @@ export class WeekTimelineView extends Component {
     async componentDidMount() {
         // Fetch all details from server and prepare data to pass to timeline and table components
         const promises = [  ProjectService.getProjectList(), 
-                            ScheduleService.getSchedulingUnitBlueprintExtended(),
+                            ScheduleService.getSchedulingUnitsExtended('blueprint'),
                             ScheduleService.getSchedulingUnitDraft(),
                             ScheduleService.getSchedulingSets(),
                             UtilService.getUTC(),
@@ -204,7 +204,6 @@ export class WeekTimelineView extends Component {
                 }   else {
                     ScheduleService.getTaskBPWithSubtaskTemplateOfSU(suBlueprint)
                         .then(taskList => {
-                            const observationTask = _.find(taskList, (task)=> {return task.template.type_value==='observation' && task.specifications_doc.station_groups});
                             for (let task of taskList) {
                                 //Control Task ID
                                 const subTaskIds = (task.subTasks || []).filter(sTask => sTask.subTaskTemplate.name.indexOf('control') > 1);
@@ -296,9 +295,9 @@ export class WeekTimelineView extends Component {
                     stations = _.concat(stations, grpStations);
                 }
             }   else if (this.STATUS_BEFORE_SCHEDULED.indexOf(suBlueprint.status.toLowerCase()) < 0 
-                            && observationTask.subTasks) {
+                            && observationTask.subtasks) {
                 /** If the status of SU is scheduled or after get the stations from the subtask specification tasks */
-                for (const subtask of observationTask.subTasks) {
+                for (const subtask of observationTask.subtasks) {
                     if (subtask.specifications_doc.stations) {
                         stations = _.concat(stations, subtask.specifications_doc.stations.station_list);
                     }
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/services/schedule.service.js b/SAS/TMSS/frontend/tmss_webapp/src/services/schedule.service.js
index 8956a8ba9ca07b825d1fea509c340445f2edee18..9d1170a385261d0a2f82be412e4cb718ab0fc48b 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/services/schedule.service.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/services/schedule.service.js
@@ -30,22 +30,43 @@ const ScheduleService = {
         }
         return res;
     },
-    getSchedulingUnitBlueprintExtended: async function (){
+    getSchedulingUnitsExtended: async function (type){
         let blueprints = [];
         try {
-            let initialResponse = await axios.get('/api/scheduling_unit_blueprint_extended');
+            let initialResponse = await axios.get(`/api/scheduling_unit_${type}_extended`);
             const totalCount = initialResponse.data.count;
             const initialCount = initialResponse.data.results.length
             blueprints = blueprints.concat(initialResponse.data.results);
             if (totalCount > initialCount) {
-                let secondResponse = await axios.get(`/api/scheduling_unit_blueprint_extended/?ordering=id&limit=${totalCount-initialCount}&offset=${initialCount}`);
+                let secondResponse = await axios.get(`/api/scheduling_unit_${type}_extended/?ordering=id&limit=${totalCount-initialCount}&offset=${initialCount}`);
                 blueprints = blueprints.concat(secondResponse.data.results);
             }
         }   catch(error) {
-            console.error('[schedule.services.getSchedulingUnitBlueprintExtended]',error);
+            console.error('[schedule.services.getSchedulingUnitsExtended]',error);
         }
         return blueprints;
     },
+    getSchedulingUnitExtended: async function (type, id){
+        let schedulingUnit = null;
+        try {
+            const response = await axios.get(`/api/scheduling_unit_${type}_extended/${id}/`);
+            schedulingUnit = response.data;
+            if (schedulingUnit) {
+                if (type === "blueprint") {
+                    const schedulingUnitDraft = (await axios.get(`/api/scheduling_unit_draft/${id}/`)).data;
+                    schedulingUnit.draft_object = schedulingUnitDraft;
+                    schedulingUnit.scheduling_set_id = schedulingUnitDraft.scheduling_set_id;
+                    schedulingUnit.scheduling_constraints_doc = schedulingUnitDraft.scheduling_constraints_doc;
+                }
+                const schedulingSet = (await axios.get(`/api/scheduling_set/${schedulingUnit.scheduling_set_id}`)).data;
+                schedulingUnit.scheduling_set_object = schedulingSet;
+                schedulingUnit.scheduling_set = schedulingSet.url;
+            }
+        }   catch(error) {
+            console.error('[schedule.services.getSchedulingUnitExtended]',error);
+        }
+        return schedulingUnit;
+    },
     //>>>>>> TODO: Remove this method by using/modifying other functions with additional parameters
     getTaskBPWithSubtaskTemplate: async function(id) {
         let result;