diff --git a/packages/web-shared/components/ContentSingle.js b/packages/web-shared/components/ContentSingle.js
index 2ecc14b9..8b2d359e 100644
--- a/packages/web-shared/components/ContentSingle.js
+++ b/packages/web-shared/components/ContentSingle.js
@@ -37,6 +37,12 @@ const infoDivider = (
   </BodyText>
 );
 
+const timeDivider = (
+  <BodyText color="text.tertiary" mx="xs" display={{ xs: 'none', sm: 'block' }}>
+    -
+  </BodyText>
+);
+
 const CalendarIconWrapper = styled.span`
   margin-right: ${({ theme }) => theme.space.xxs};
   display: inline-flex;
@@ -56,7 +62,26 @@ const FlexBodyText = styled(BodyText)`
   align-items: center;
 `;
 
-function CalendarData({ start, end, location }) {
+function CalendarData({ start, end, startTime, endTime, location }) {
+  const [formatEndDateTime, setFormatEndDateTime] = useState(null);
+  const [formatStartDateTime, setFormatStartDateTime] = useState(null);
+
+  useEffect(() => {
+    if (start === end) {
+      setFormatEndDateTime(endTime);
+    } else {
+      setFormatEndDateTime(end + ' | ' + endTime);
+    }
+  }, [start, end, endTime]);
+
+  useEffect(() => {
+    if (startTime) {
+      setFormatStartDateTime(start + ' | ' + startTime);
+    } else {
+      setFormatEndDateTime(start);
+    }
+  }, [start, startTime]);
+
   return (
     <>
       {location ? (
@@ -65,19 +90,23 @@ function CalendarData({ start, end, location }) {
           {location}
         </FlexBodyText>
       ) : null}
-      {start && location ? infoDivider : null}
-      {start ? (
-        <FlexBodyText color="text.secondary" mb={'xxs'}>
-          <CalendarIcon name="calendar" />
-          {start}
-        </FlexBodyText>
-      ) : null}
-      {end && start ? infoDivider : null}
-      {end ? (
-        <FlexBodyText color="text.secondary" mb={'xxs'}>
-          <CalendarIcon name="clock" />
-          {end}
-        </FlexBodyText>
+      {(formatStartDateTime || formatEndDateTime) && location ? infoDivider : null}
+      {formatStartDateTime || formatEndDateTime ? (
+        <Box display="flex" flexDirection={'row'} alignItems="flex-start" width="100%">
+          {formatStartDateTime ? (
+            <FlexBodyText color="text.secondary" mb={'xxs'}>
+              <CalendarIcon name="calendar" />
+              {formatStartDateTime}
+            </FlexBodyText>
+          ) : null}
+          {formatStartDateTime && formatEndDateTime ? timeDivider : null}
+          {formatEndDateTime ? (
+            <FlexBodyText color="text.secondary" mb={'xxs'}>
+              <CalendarIcon name="clock" />
+              {formatEndDateTime}
+            </FlexBodyText>
+          ) : null}
+        </Box>
       ) : null}
     </>
   );
@@ -184,13 +213,14 @@ function ContentSingle(props = {}) {
   const formattedStartDate = props?.data?.start
     ? format(parseISO(props.data.start), 'eee, MMMM do, yyyy')
     : null;
-  const formattedStartToEnd =
-    props?.data?.start && props?.data?.end
-      ? `${format(parseISO(props.data.start), 'hh:mm a')} — ${format(
-          parseISO(props.data.end),
-          'hh:mm a'
-        )}`
-      : null;
+  const formattedStartTime = props?.data?.start
+    ? format(parseISO(props.data.start), 'hh:mm a')
+    : null;
+  const formattedEndDate = props?.data?.end
+    ? format(parseISO(props.data.end), 'eee, MMMM do, yyyy')
+    : null;
+  const formattedEndTime = props?.data?.end ? format(parseISO(props.data.end), 'hh:mm a') : null;
+
   const handleActionPress = (item) => {
     if (idFromParams !== getURLFromType(item)) {
       navigate({
@@ -283,7 +313,9 @@ function ContentSingle(props = {}) {
 
                 <CalendarData
                   start={formattedStartDate}
-                  end={formattedStartToEnd}
+                  end={formattedEndDate}
+                  startTime={formattedStartTime}
+                  endTime={formattedEndTime}
                   location={props?.data?.location}
                 />
               </Box>