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 a370acc085d585622908ab14def7d379c5c59c33..4746314d62e1ce0dbb349392e470dd18922fbf0c 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/components/Timeline/CalendarTimeline.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/components/Timeline/CalendarTimeline.js
@@ -73,7 +73,7 @@ export class CalendarTimeline extends Component {
         group: group,
         items: props.items || [],
         //>>>>>> Properties to pass to react-calendar-timeline component
-        stackItems: props.stackItems || true,
+        stackItems: props.stackItems || false,
         zoomAllowed: props.zoomAllowed || true,
         minZoom: props.minZoom || (1 * 60 * 1000),                  // One Minute
         maxZoom: props.maxZoom || (32 * 24 * 60 * 60 * 1000),       // 32 hours
@@ -520,13 +520,15 @@ export class CalendarTimeline extends Component {
                 color: item.color,
                 // borderColor,
                 borderStyle: "solid",
-                borderWidth: 1,
+                borderWidth: item.type==="SUNTIME"?0:0,
                 borderRadius: 3,
                 borderLeftWidth: itemContext.selected ? 3 : 1,
                 borderRightWidth: itemContext.selected ? 3 : 1
               },
               onMouseDown: () => {
-                this.onItemClick(item);
+                  if (item.type !== "SUNTIME") {
+                    this.onItemClick(item);
+                  }
               }
             })}
           >
@@ -634,12 +636,47 @@ export class CalendarTimeline extends Component {
             }
         }
         const result = await this.props.dateRangeCallback(startTime, endTime, refreshData);
-        if (!this.props.shoSunTimings && this.state.vieType === UIConstants.timeline.types.NORMAL) {
-            
+        if (!this.props.showSunTimings && this.state.viewType === UIConstants.timeline.types.NORMAL) {
+            await this.addStationSunTimes(startTime, endTime, result.group, result.items);
         }
         return result;
     }
 
+    async addStationSunTimes(startTime, endTime, stationGroup, items) {
+        const noOfDays = endTime.diff(startTime, 'days');
+        let sunItems = _.cloneDeep(items);
+        for (const number of _.range(noOfDays+1)) {
+            for (const station of stationGroup) {
+                const date = startTime.clone().add(number, 'days').hours(12).minutes(0).seconds(0);
+                const timings = await UtilService.getSunTimings(date.format("YYYYMMDDTHH:mm:ss")+"Z", station);
+                let sunriseItem = { id: `sunrise-${number}-${station.id}`, 
+                                    group: station.id,
+                                    title: timings.sun_rise,
+                                    project: "",
+                                    name: "",
+                                    duration: "",
+                                    start_time: moment.utc(timings.sun_rise),
+                                    end_time: moment.utc(timings.sun_rise).add(5, 'minutes'),
+                                    bgColor: "yellow",
+                                    selectedBgColor: "yellow",
+                                    type: "SUNTIME"};
+                sunItems.push(sunriseItem);
+                let sunsetItem = _.cloneDeep(sunriseItem);
+                sunsetItem.id = `sunset-${number}-${station.id}`;
+                sunsetItem.start_time = moment.utc(timings.sun_set);
+                sunsetItem.end_time = moment.utc(timings.sun_set).add(5, 'minutes');
+                sunsetItem.bgColor = "orange";
+                sunsetItem.selectedBgColor = "0range";
+                sunItems.push(sunsetItem);
+                
+            }
+        }
+        if (!this.props.showSunTimings && this.state.viewType === UIConstants.timeline.types.NORMAL) {
+            items = sunItems;
+        }
+        return items;
+    }
+
     /**
      * Resets the timeline view to default zoom and move to the current timeline
      */
@@ -847,7 +884,10 @@ export class CalendarTimeline extends Component {
      * as objects
      * @param {Object} props 
      */
-    updateTimeline(props) {
+    async updateTimeline(props) {
+        if (!this.props.showSunTimings && this.state.viewType === UIConstants.timeline.types.NORMAL) {
+            props.items = await this.addStationSunTimes(this.state.defaultStartTime, this.state.defaultEndTime, props.group, props.items);
+        }
         this.setState({group: DEFAULT_GROUP.concat(props.group), items: props.items});
     }
 
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 1c5e635be11f8ff590511f5b9407cbc7242a250a..953df5906117caa9ba42ad60fef84ea12934a515 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_timeline.scss
+++ b/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_timeline.scss
@@ -6,6 +6,10 @@
     background-color: #f0f0f0;
 }
 
+.rct-item {
+    border: none !important;
+}
+
 .timeline-view-toolbar {
     margin-left: 10px;
 }
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 e6f600209c22f20ff628acd0cbb15cc453ff7397..18ef4e0b00f6f17319b44f5b21149ce09037f933 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/view.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/view.js
@@ -289,6 +289,11 @@ export class TimelineView extends Component {
         }
     }
 
+    setStationView(e) {
+        this.closeSUDets();
+        this.setState({stationView: e.value});
+    }
+
     render() {
         if (this.state.redirect) {
             return <Redirect to={ {pathname: this.state.redirect} }></Redirect>
@@ -340,7 +345,7 @@ export class TimelineView extends Component {
                                 </div> 
                                 <div className="timeline-view-toolbar">
                                     <label>Station View</label>
-                                    <InputSwitch checked={this.state.stationView} onChange={(e) => {this.closeSUDets();this.setState({stationView: e.value})}} />
+                                    <InputSwitch checked={this.state.stationView} onChange={(e) => {this.setStationView(e)}} />
                                 </div>
                                 <Timeline ref={(tl)=>{this.timeline=tl}} 
                                         group={this.state.group}