diff --git a/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/WeekView.js b/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/WeekView.js
index a52164c4d95e9ae540e9eb5e11f21c6b54cec951..daa6c3315fa31cdae586b48ec463d557d7e6ee12 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/WeekView.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/WeekView.js
@@ -503,7 +503,7 @@ export default function WeekView() {
                         )}
                 </div>)}
         </div>
-        {mouseOverItem && mouseOverItem.type !== "SUNTIME" ?
+        {mouseOverItem ?
             <div className="p-overlaypanel p-component timeline-popover"
                 style={{ ...popPosition }}>
                 <TimelineItemPopover mouseOverItem={mouseOverItem} />
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/components/TimelineItemPopover.js b/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/components/TimelineItemPopover.js
index 858f5056d9990ce346b6bd1d0a3d5ea7f3c84a68..b9ab91f53ebda011e23cf6989a2a3d75cab1f067 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/components/TimelineItemPopover.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/components/TimelineItemPopover.js
@@ -85,6 +85,28 @@ function getReservationItem(mouseOverItem) {
     </div>;
 }
 
+
+
+function getSunTimeItem(mouseOverItem) {
+    
+    let momentum
+    if (mouseOverItem.id?.startsWith("sunrise")) momentum="sunrise"
+    if (mouseOverItem.id?.startsWith("sunset")) momentum="sunset"
+    if (!momentum) return null;
+    const Suntyle = {
+        width: '175px',
+        backgroundColor: mouseOverItem.bgColor,
+        color: mouseOverItem.color,
+        paddingleft:'5px'
+    };
+    return <div className={`p-grid timeline-item-popover`} style={Suntyle}>
+        <span> <b>&nbsp;{momentum} </b> {mouseOverItem.start_time?.format("HH:mm:ss")} - {mouseOverItem.end_time?.format("HH:mm:ss")} </span>
+        
+        
+    </div>;
+}
+
+
 /**
  * @param mouseOverItem the item with all it's information to be shown in the pop-up
  * @return {*|null} the specific html for the type that is hovered over
@@ -95,6 +117,8 @@ function getItemForType(mouseOverItem) {
                 return getScheduleItem(mouseOverItem)
             case "RESERVATION":
                 return getReservationItem(mouseOverItem)
+            case "SUNTIME":
+                return getSunTimeItem(mouseOverItem);
             default: //when there should not be a pop-over; like a sun timing
                 return null;
         }
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/helpers/timeline.renderer.helper.js b/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/helpers/timeline.renderer.helper.js
index 604e6907ea9210208a2846ef1c56d89b53aa0fef..4fe0eef72fd65d8065d28cc2e56e896aba38bc77 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/helpers/timeline.renderer.helper.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/helpers/timeline.renderer.helper.js
@@ -25,14 +25,20 @@ function getItemContentStyle(itemContext,
     };
 }
 
-function calculatePopPosition(evt) {
+function calculatePopPosition(evt, ignoreHeighAdjust) {
     let popPosition = {
         display: "block",
         left: `${evt.pageX + 400 > window.innerWidth ? evt.pageX - 400 : evt.pageX + 20}px`
     };
 
     if (evt.clientY > window.screen.height / 2) {
-        popPosition.top = `${evt.pageY - 400}px`; // Bottem line position will not work here
+        if (!ignoreHeighAdjust) {
+            popPosition.top = `${evt.pageY - 400}px`; // Bottem line position will not work here
+        }
+        else
+        {
+            popPosition.top = `${evt.pageY}px`;    
+        }
     } else {
         popPosition.top = `${evt.pageY}px`;
     }
@@ -40,7 +46,8 @@ function calculatePopPosition(evt) {
 }
 
 function hoverOverItem(evt, item, setPopPositionCallback, setMouseOverItemCallback) {
-    let popPosition = calculatePopPosition(evt);
+
+    let popPosition = calculatePopPosition(evt,item?.type==="SUNTIME");
     setMouseOverItemCallback(item)
     setPopPositionCallback(popPosition)
 }
@@ -53,19 +60,22 @@ function renderSunTimingItem({
     item,
     itemContext,
     getItemProps
-}, setMouseOverItemCallback) {
+},setPopPositionCallback, setMouseOverItemCallback) {
     itemContext.dimensions.height = 20
 
     return <div {...getItemProps({ style: { ...getItemDivStyle(itemContext, item, true), height: "90%" } })}
-        onMouseOver={(evt) => {
-            hoverOverItem(evt, item, () => {
-            }, setMouseOverItemCallback)
-        }}
-
-        onFocus={(evt) => {
-            hoverOverItem(evt, item, () => {
-            }, setMouseOverItemCallback)
-        }}
+    onMouseOver={(evt) => {
+        hoverOverItem(evt, item, setPopPositionCallback, setMouseOverItemCallback)
+    }}
+    onFocus={(evt) => {
+        hoverOverItem(evt, item, setPopPositionCallback, setMouseOverItemCallback)
+    }}
+    onMouseOut={() => {
+        hoverOutItem(setPopPositionCallback)
+    }}
+    onBlur={() => {
+        hoverOutItem(setPopPositionCallback)
+    }}
     >
     </div>
 }
@@ -157,7 +167,7 @@ export function itemRenderer({ item, timelineContext, itemContext, getItemProps,
                 item,
                 itemContext,
                 getItemProps
-            }, setMouseOverItemCallback)
+            }, setPopPositionCallback,setMouseOverItemCallback)
     }
 }