diff --git a/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/components/DateTimeNavigator.js b/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/components/DateTimeNavigator.js
index 26cfd5d8d8f5bca8b907c3965fe34c19387fa959..521a3fb3e1df2d564f0a4cba76944394ae9d30c0 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/components/DateTimeNavigator.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/components/DateTimeNavigator.js
@@ -19,8 +19,8 @@ function getDateTimeElement(title, time, formatter) {
 
 function getDateTimeInfo(currentUTC, currentLST) {
     return <div className="datetime-info-container">
-        {getDateTimeElement("Date", currentUTC, "YYYY-MM-DD")}
-        {getDateTimeElement("UTC", currentUTC, "HH:mm:ss")}
+        {getDateTimeElement("Date", currentUTC, UIConstants.CALENDAR_DEFAULTDATE_FORMAT)}
+        {getDateTimeElement("UTC", currentUTC, UIConstants.CALENDAR_TIME_FORMAT)}
         {getDateTimeElement("LST", currentLST, UIConstants.CALENDAR_TIME_FORMAT)}
     </div>
 }
@@ -169,9 +169,9 @@ export default function DateTimeNavigator(props) {
                 .then((utcString) => {
                     UtilService.getLST(utcString)
                         .then(lstString => {
-                            const utcDay = moment.utc(utcString).format('DD-MMM-YYYY ');
+                            const utcDay = moment.utc(utcString).format(UIConstants.CALENDAR_DEFAULTDATE_FORMAT);
                             const lstTime = lstString.split('.')[0];
-                            setCurrentLST(moment(utcDay + lstTime, 'DD-MMM-YYYY HH:mm:ss'))
+                            setCurrentLST(moment(utcDay + lstTime, UIConstants.CALENDAR_DATETIME_FORMAT))
                         }).catch(error => {
                         console.error("Cannot retrieve the LST and thus cannot render the date time navigator: ", error)
                     })
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 3d4f9c4d90dbbb32871bedc804bd266f8a3efef3..d9ec29952175ec78d6e153d90abcf28b58a9c1f3 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
@@ -1,13 +1,12 @@
 import UIConstants from "../../../utils/ui.constants";
 import React from "react";
 
-export function getFieldsHtml(fields, status = undefined, style = undefined) {
+export function getFieldsHtml(fields, status = undefined, style = {}) {
     const labelClassName = status ? `col-5 su-${status}-icon` : 'col-5'
-    const styleAddition = style ? style : null
 
     return fields.map((field, index) => (
         <div key={index} className="entry">
-            <label className={labelClassName} style={styleAddition}>{field.label}</label>
+            <label className={labelClassName} style={style}>{field.label}</label>
             <div className="col-7">{field.value}</div>
         </div>
     ))
diff --git a/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/components/TimelineItemPopover.test.js b/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/components/TimelineItemPopover.test.js
index 4aca63389de2b84a26233e365508f054f8932f9d..a001a50c3d3941c2ce8759e7ac50989c1ca3513c 100644
--- a/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/components/TimelineItemPopover.test.js
+++ b/SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/components/TimelineItemPopover.test.js
@@ -58,7 +58,7 @@ describe("TimelineItemPopover", () => {
             bgColor: "#ffffff",
             color: "#000000",
             name: "Grass mowing",
-            desc: "By Henk Mulder",
+            desc: "By Fanna Lautenbach",
             activity_type: "Very intense",
             stations: {
                 groups: 2,