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 2ae71084bc328ab5299dc090f3981cf80a91c0f4..f97797972a1f52432d1f98343b4c4f687d4f01a8 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/view.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/view.js
@@ -1680,7 +1680,7 @@ export class TimelineView extends Component {
                     <div className="p-grid">
                         {/* SU List Panel */}
                         <div className={isSUListVisible && (isSUDetsVisible || isReservDetsVisible || isTaskDetsVisible ||  
-                            (canExtendSUList && !canShrinkSUList) ? "timeline-panel col-lg-4 col-md-4 col-sm-12" :
+                            (canExtendSUList && !canShrinkSUList) ? "timeline-panel col-lg-3 col-md-3 col-sm-12" :
                             ((canExtendSUList && canShrinkSUList) ? "timeline-panel col-lg-5 col-md-5 col-sm-12" : "timeline-panel col-lg-6 col-md-6 col-sm-12"))}
                             style={isSUListVisible ? { position: "inherit", borderRight: "3px solid #efefef", paddingTop: "10px" } : { display: 'none' }}>
                             <TimelineListTabs suBlueprintList={this.state.suBlueprintList}
@@ -1694,10 +1694,10 @@ export class TimelineView extends Component {
                                 ></TimelineListTabs>
                         </div>
                         {/* Timeline Panel */}
-                        <div className={isSUListVisible ? ((isSUDetsVisible || isReservDetsVisible || isTaskDetsVisible || this.state.isUnscheduledDetVisible) ? "timeline-panel col-lg-5 col-md-5 col-sm-12" :
-                            (!canExtendSUList && canShrinkSUList) ? "timeline-panel col-lg-6 col-md-6 col-sm-12" :
-                                ((canExtendSUList && canShrinkSUList) ? "timeline-panel col-lg-7 col-md-7 col-sm-12" : "timeline-panel col-lg-8 col-md-8 col-sm-12")) :
-                            ((isSUDetsVisible || isReservDetsVisible || isTaskDetsVisible) ? "timeline-panel col-lg-9 col-md-9 col-sm-12" : "timeline-panel col-lg-12 col-md-12 col-sm-12")}
+                        <div className={isSUListVisible ? ((isSUDetsVisible || isReservDetsVisible || isTaskDetsVisible || this.state.isUnscheduledDetVisible) ? "timeline-panel col-lg-6 col-md-6 col-sm-12" :
+                            (!canExtendSUList && canShrinkSUList) ? "timeline-panel col-lg-8 col-md-7 col-sm-12" :
+                                ((canExtendSUList && canShrinkSUList) ? "timeline-panel col-lg-9 col-md-9 col-sm-12" : "timeline-panel col-lg-9 col-md-9 col-sm-12")) :
+                            ((isSUDetsVisible || isReservDetsVisible || isTaskDetsVisible) ? "timeline-panel col-lg-11 col-md-11 col-sm-12" : "timeline-panel col-lg-12 col-md-12 col-sm-12")}
                         >
                             {/* Panel Resize buttons */}
                             {isSUListVisible &&
@@ -1738,7 +1738,7 @@ export class TimelineView extends Component {
                                 {!this.state.stationView &&
                                 <div className="sub-header col-lg-1">
                                     <label >On Sky View</label>
-                                    <InputSwitch checked={this.state.isOnSkyView} tooltip='show on-sky or system durations' onChange={(e) => { this.setOnSkyView(e.value)}} />
+                                    <InputSwitch checked={this.state.isOnSkyView} tooltip='Show on-sky or system durations' onChange={(e) => { this.setOnSkyView(e.value)}} />
                                 </div>
                                 }
                                 {this.state.stationView &&
@@ -1747,10 +1747,10 @@ export class TimelineView extends Component {
                                         <div className={`sub-header-content ${isSUListVisible?"col-lg-12":"col-lg-8"}`} style={{padding: '0px !important'}}>
                                         <fieldset>
                                             <label style={{ marginLeft: '0px' }}>Show :</label>
-                                            <input type="radio" value="su" name="Only SUs" className="timeline-toolbar-radio" inputId="suOnly" onClick={(e) => this.changeViewBlocks()} checked={this.state.showSUs && !this.state.showTasks} />
+                                            <input type="radio" value="su" name="Only SUs" className="timeline-toolbar-radio" inputId="suOnly" onClick={(e) => this.changeViewBlocks()} checked={this.state.isStationTasksVisible} />
                                             <label htmlFor="suOnly">SUs</label>
-                                            <input type="radio" value="task" name="Only Tasks" className="timeline-toolbar-radio" inputId="taskOnly" onChange={(e) => this.changeViewBlocks()} checked={!this.state.showSUs && this.state.showTasks} />
-                                            <label htmlFor="suOnly">Tasks</label>
+                                            <input type="radio" value="task" name="Only Tasks" className="timeline-toolbar-radio" inputId="taskOnly" onChange={(e) => this.changeViewBlocks()} checked={!this.state.isStationTasksVisible   } />
+                                            <label htmlFor="taskOnly">Tasks</label>
                                         </fieldset>
                                         </div>
                                     </div>
@@ -1772,7 +1772,7 @@ export class TimelineView extends Component {
                                     <div className="sub-header col-lg-5">
                                         <div className={`sub-header-content ${isSUListVisible?"col-lg-12":"col-lg-8"}`} style={{padding: '0px !important'}}>
                                         <fieldset>
-                                            <label style={{ marginLeft: '0px' }}>Show :</label>
+                                            <label style={{ marginLeft: '0px' }}>Show:</label>
                                             <input type="radio" value="su" name="Only SUs" className="timeline-toolbar-radio" inputId="suOnly" onClick={(e) => this.showTimelineItems(e.target.value)} checked={this.state.showSUs && !this.state.showTasks} />
                                             <label htmlFor="suOnly">Only SU</label>
                                             <input type="radio" value="task" name="Only Tasks" className="timeline-toolbar-radio" inputId="taskOnly" onChange={(e) => this.showTimelineItems(e.target.value)} checked={!this.state.showSUs && this.state.showTasks} />
@@ -1802,10 +1802,12 @@ export class TimelineView extends Component {
                                         <div className={`sub-header-content ${isSUListVisible?"col-lg-12":"col-lg-8"}`} style={{padding: '0px !important'}}>
                                         <fieldset>
                                             <label style={{ marginLeft: '0px' }}>Group By :</label>
-                                            <input type="radio" value="su" name="Only SUs" className="timeline-toolbar-radio" inputId="suOnly" onClick={e => this.setGroupByProject(false)} checked={!this.state.groupByProject} />
-                                            <label htmlFor="suOnly">SU</label>
-                                            <input type="radio" value="project" name="Only Tasks" className="timeline-toolbar-radio" inputId="projectOnly" onClick={e => this.setGroupByProject(true)} checked={this.state.groupByProject} />
-                                            <label htmlFor="projectOnly">Project</label>
+                                            <div>
+                                                <input type="radio" value="su" name="Only SUs" className="timeline-toolbar-radio" inputId="suOnly" onClick={e => this.setGroupByProject(false)} checked={!this.state.groupByProject} />
+                                                <label htmlFor="suOnly">SU</label>
+                                                <input type="radio" value="project" name="Only Tasks" className="timeline-toolbar-radio" inputId="projectOnly" onClick={e => this.setGroupByProject(true)} checked={this.state.groupByProject} />
+                                                <label htmlFor="projectOnly">Project</label>
+                                            </div>
                                         </fieldset>
                                         </div>
                                     </div>
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 f79b938160b82fc6661deb1add05d4ee2cf69d88..9a583323cd6f6fea6263a6ef44365b197635414b 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
@@ -1417,7 +1417,7 @@ export class WeekTimelineView extends Component {
                                     </div>
                                     <div className="sub-header">
                                         <label >On Sky View</label>
-                                        <InputSwitch checked={this.state.isOnSkyView} onChange={(e) => { this.setOnSkyView(e.value)}} />
+                                        <InputSwitch checked={this.state.isOnSkyView} tooltip='Show on-sky or system durations' onChange={(e) => { this.setOnSkyView(e.value)}} />
                                     </div>
 
                                     {this.state.reservationEnabled &&