diff --git a/cope2n-fe/src/pages/reports/report_detail/index.tsx b/cope2n-fe/src/pages/reports/report_detail/index.tsx
index 970e0c9..272eb60 100644
--- a/cope2n-fe/src/pages/reports/report_detail/index.tsx
+++ b/cope2n-fe/src/pages/reports/report_detail/index.tsx
@@ -15,6 +15,7 @@ import { useParams } from 'react-router-dom';
 import { downloadReport } from 'request/report';
 import styled from 'styled-components';
 import { SheetViewer } from "react-office-viewer";
+import { datetimeStrToDate } from 'utils/time';
 
 export interface ReportFormValues {
   dateRange: [Dayjs, Dayjs];
@@ -127,13 +128,13 @@ const ReportDetail = () => {
         <Typography.Title level={5}>
           Start date:{' '}
           <span style={{ fontWeight: '400' }}>
-            {report_data?.metadata?.start_at.split('T')[0]}
+            {datetimeStrToDate(report_data?.metadata?.start_at, 'Asia/Singapore')}
           </span>
         </Typography.Title>
         <Typography.Title level={5}>
           End date:{' '}
           <span style={{ fontWeight: '400' }}>
-            {report_data?.metadata?.end_at.split('T')[0]}
+            {datetimeStrToDate(report_data?.metadata?.end_at, 'Asia/Singapore')}
           </span>
         </Typography.Title>
       </HeaderContainer>
diff --git a/cope2n-fe/src/utils/time.ts b/cope2n-fe/src/utils/time.ts
index e6768b3..51bc88c 100644
--- a/cope2n-fe/src/utils/time.ts
+++ b/cope2n-fe/src/utils/time.ts
@@ -1,4 +1,7 @@
 export function datetimeStrToDate(dateTimeStr: string, targetTimeZone: string): string {
+    if (!dateTimeStr) {
+        return "";
+    }
     const options: Intl.DateTimeFormatOptions = { timeZone: targetTimeZone, year: 'numeric', month: '2-digit', day: '2-digit' };
     const date = new Date(dateTimeStr);
     const convertedDateTimeStr = date.toLocaleDateString('en-US', options).split('/').reverse().join('-');