diff --git a/SAS/TMSS/frontend/tmss_webapp/src/components/ViewTable.js b/SAS/TMSS/frontend/tmss_webapp/src/components/ViewTable.js
index 3428a67afc894027d9fb81d49d12ededd102db17..6fb4c7ca0dbacf31a3a3ccd584df597cb26b6201 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/components/ViewTable.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/components/ViewTable.js
@@ -579,7 +579,9 @@ const defaultColumn = React.useMemo(
                        <tr {...row.getRowProps()}>
                          {row.cells.map(cell => {
                           if(cell.column.id !== 'actionpath')
-                          return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
+                          return <td className="td_pre" {...cell.getCellProps()}>
+                          {cell.render('Cell')}
+                        </td>
                         else 
                           return "";
                          })}
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/layout/_overrides.scss b/SAS/TMSS/frontend/tmss_webapp/src/layout/_overrides.scss
index 2a374f424a3c437691b9f1f98916b3fcdd7665c2..3eaffc503653c9d4d2f1115070210aef4a254fed 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/layout/_overrides.scss
+++ b/SAS/TMSS/frontend/tmss_webapp/src/layout/_overrides.scss
@@ -185,4 +185,8 @@
     font-weight: 600;
     color: #004B93;
     text-align: center;
+}
+
+.td_pre {
+    white-space: pre;
 }
\ No newline at end of file
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/routes/Scheduling/SchedulingUnitList.js b/SAS/TMSS/frontend/tmss_webapp/src/routes/Scheduling/SchedulingUnitList.js
index f64b1133eb4b63b6787e5913e8e4a2f75f48452f..6b0bd3e0308deffed951215b276bc7336255cd45 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/routes/Scheduling/SchedulingUnitList.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/routes/Scheduling/SchedulingUnitList.js
@@ -18,6 +18,8 @@ class SchedulingUnitList extends Component{
         name:"Name",
         description:"Description",
         project:"Project",
+        targetDetails0: "Target 1",
+        targetDetails1: "Target 2",
         created_at:{
             name:"Created At",
             filter: "date"
@@ -74,7 +76,7 @@ class SchedulingUnitList extends Component{
             const schedulingSet = await ScheduleService.getSchedulingSets();
             const projects = await ScheduleService.getProjectList();
             const bluePrint = await ScheduleService.getSchedulingUnitBlueprint();
-            ScheduleService.getSchedulingUnitDraft().then(scheduleunit =>{
+            ScheduleService.getSchedulingUnitDraft().then(async (scheduleunit) =>{
                 const output = [];
                 var scheduleunits = scheduleunit.data.results;
                 for( const scheduleunit  of scheduleunits){
@@ -101,6 +103,17 @@ class SchedulingUnitList extends Component{
                     scheduleunit.canSelect = true;
                     output.push(scheduleunit);
                 }
+                const promises = [];
+                output.map(su => promises.push(this.getScheduleUnitTasks(su.type, su)));
+                const tasksResponses = await Promise.all(promises);
+                output.map(su => {
+                    su.taskDetails = tasksResponses.find(task => task.id === su.id && task.type === su.type).tasks;
+                    const targetObserv = su.taskDetails.find(task => task.template.type_value==='observation' && task.tasktype.toLowerCase()===su.type.toLowerCase() && task.specifications_doc.station_groups);
+                    // Constructing targets in single string to make it clear display 
+                    targetObserv.specifications_doc.SAPs.map((target, index) => {
+                        su[`targetDetails${index}`] = `Name: ${target.name}, \n Angle1: ${target.digital_pointing.angle1}, \n Angle2: ${target.digital_pointing.angle2}, \n Reference Frame: ${target.digital_pointing.direction_type}`;
+                    });
+                });
                 this.setState({
                     scheduleunit: output, isLoading: false
                 });
@@ -114,6 +127,13 @@ class SchedulingUnitList extends Component{
         
     }
 
+    getScheduleUnitTasks(type, scheduleunit){
+        if(type === 'Draft')
+            return ScheduleService.getTaskDetailsByDraftSchUnitById(scheduleunit.id, true, true, true);
+        else
+            return ScheduleService.getTaskDetailsByBluePrintSchUnitById(scheduleunit);
+    }
+
     /**
      * Callback function passed to ViewTable component to pass back the selected rows.
      * @param {Array} selectedRows - Subset of data passed to the ViewTable component based on selection.
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 3e7646d162cbd04337a6b55d24e4677976f1b408..cd0ae05eb82e20c7f7293ba0e29935890f584d5f 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/services/schedule.service.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/services/schedule.service.js
@@ -240,6 +240,22 @@ const ScheduleService = {
         });
         return scheduletasklist;
     },
+    getTaskDetailsByBluePrintSchUnitById: async function(scheduleunit) {
+        const response = await this.getTaskBPWithSubtaskTemplateOfSU(scheduleunit);
+        return {
+            id: scheduleunit.id,
+            tasks: response,
+            type: 'Blueprint'
+        }
+    },
+    getTaskDetailsByDraftSchUnitById: async function(id, loadTemplate, loadSubtasks, loadSubtaskTemplate) {
+        const response = await this.getTasksBySchedulingUnit(id, loadTemplate, loadSubtasks, loadSubtaskTemplate);
+        return {
+            id,
+            type: 'Draft',
+            tasks: response
+        }
+    },
     getTaskBlueprints: async function (){
         let res=[];
         await axios.get('/api/task_blueprint/?ordering=id')