diff --git a/package-lock.json b/package-lock.json
index 8b00ff0781..b98d8c6b5b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,8 +25,6 @@
         "blurhash": "2.0.4",
         "browser-encrypt-attachment": "0.3.0",
         "classnames": "2.3.2",
-        "dateformat": "5.0.3",
-        "dayjs": "1.11.10",
         "domhandler": "5.0.3",
         "emojibase": "6.1.0",
         "emojibase-data": "7.0.1",
@@ -4558,19 +4556,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/dateformat": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-5.0.3.tgz",
-      "integrity": "sha512-Kvr6HmPXUMerlLcLF+Pwq3K7apHpYmGDVqrxcDasBg86UcKeTSNWbEzU8bwdXnxnR44FtMhJAxI4Bov6Y/KUfA==",
-      "engines": {
-        "node": ">=12.20"
-      }
-    },
-    "node_modules/dayjs": {
-      "version": "1.11.10",
-      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
-      "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
-    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
diff --git a/package.json b/package.json
index d06b960195..caadfb2f95 100644
--- a/package.json
+++ b/package.json
@@ -36,8 +36,6 @@
     "blurhash": "2.0.4",
     "browser-encrypt-attachment": "0.3.0",
     "classnames": "2.3.2",
-    "dateformat": "5.0.3",
-    "dayjs": "1.11.10",
     "domhandler": "5.0.3",
     "emojibase": "6.1.0",
     "emojibase-data": "7.0.1",
diff --git a/src/app/components/message/Time.tsx b/src/app/components/message/Time.tsx
index a5126015f4..e0bdf9a947 100644
--- a/src/app/components/message/Time.tsx
+++ b/src/app/components/message/Time.tsx
@@ -1,27 +1,36 @@
 import React, { ComponentProps } from 'react';
 import { Text, as } from 'folds';
-import { timeDayMonYear, timeHourMinute, today, yesterday } from '../../utils/time';
+import { DateTime } from '../../utils/time';
 
 export type TimeProps = {
   compact?: boolean;
   ts: number;
+  dateTime: DateTime;
 };
 
 export const Time = as<'span', TimeProps & ComponentProps<typeof Text>>(
-  ({ compact, ts, ...props }, ref) => {
+  ({ compact, ts, dateTime, ...props }, ref) => {
+    const date = new Date(ts);
+    const { isToday, isYesterday, relativeTerm } = dateTime.relative(date);
     let time = '';
-    if (compact) {
-      time = timeHourMinute(ts);
-    } else if (today(ts)) {
-      time = timeHourMinute(ts);
-    } else if (yesterday(ts)) {
-      time = `Yesterday ${timeHourMinute(ts)}`;
+    if (compact || isToday) {
+      time = dateTime.time(date);
+    } else if (isYesterday) {
+      time = `${relativeTerm}, ${dateTime.time(date)}`;
     } else {
-      time = `${timeDayMonYear(ts)} ${timeHourMinute(ts)}`;
+      time = `${dateTime.dateTime(date)}`;
     }
 
     return (
-      <Text as="time" style={{ flexShrink: 0 }} size="T200" priority="300" {...props} ref={ref}>
+      <Text
+        as="time"
+        style={{ flexShrink: 0 }}
+        size="T200"
+        priority="300"
+        title={dateTime.full(date)}
+        {...props}
+        ref={ref}
+      >
         {time}
       </Text>
     );
diff --git a/src/app/components/room-intro/RoomIntro.tsx b/src/app/components/room-intro/RoomIntro.tsx
index 0fed123d35..9048e57314 100644
--- a/src/app/components/room-intro/RoomIntro.tsx
+++ b/src/app/components/room-intro/RoomIntro.tsx
@@ -8,7 +8,7 @@ import { getMemberDisplayName, getStateEvent } from '../../utils/room';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { getMxIdLocalPart } from '../../utils/matrix';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
-import { timeDayMonthYear, timeHourMinute } from '../../utils/time';
+import { DateTime } from '../../utils/time';
 import { useRoomNavigate } from '../../hooks/useRoomNavigate';
 import { RoomAvatar } from '../room-avatar';
 import { nameInitials } from '../../utils/common';
@@ -17,9 +17,10 @@ import { mDirectAtom } from '../../state/mDirectList';
 
 export type RoomIntroProps = {
   room: Room;
+  dateTime: DateTime;
 };
 
-export const RoomIntro = as<'div', RoomIntroProps>(({ room, ...props }, ref) => {
+export const RoomIntro = as<'div', RoomIntroProps>(({ room, dateTime, ...props }, ref) => {
   const mx = useMatrixClient();
   const { navigateRoom } = useRoomNavigate();
   const mDirects = useAtomValue(mDirectAtom);
@@ -65,7 +66,7 @@ export const RoomIntro = as<'div', RoomIntroProps>(({ room, ...props }, ref) =>
             <Text size="T200" priority="300">
               {'Created by '}
               <b>@{creatorName}</b>
-              {` on ${timeDayMonthYear(ts)} ${timeHourMinute(ts)}`}
+              {` on ${dateTime.full(ts)}`}
             </Text>
           )}
         </Box>
diff --git a/src/app/features/message-search/MessageSearch.tsx b/src/app/features/message-search/MessageSearch.tsx
index 5793ed9116..82d0a654cf 100644
--- a/src/app/features/message-search/MessageSearch.tsx
+++ b/src/app/features/message-search/MessageSearch.tsx
@@ -23,6 +23,7 @@ import { SearchResultGroup } from './SearchResultGroup';
 import { SearchInput } from './SearchInput';
 import { SearchFilters } from './SearchFilters';
 import { VirtualTile } from '../../components/virtualizer';
+import { useDateTime } from '../../utils/time';
 
 const useSearchPathSearchParams = (searchParams: URLSearchParams): _SearchPathSearchParams =>
   useMemo(
@@ -53,6 +54,7 @@ export function MessageSearch({
   const mx = useMatrixClient();
   const mDirects = useAtomValue(mDirectAtom);
   const allRooms = useRooms(mx, allRoomsAtom, mDirects);
+  const dateTime = useDateTime();
   const [mediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
   const [urlPreview] = useSetting(settingsAtom, 'urlPreview');
   const searchInputRef = useRef<HTMLInputElement>(null);
@@ -294,6 +296,7 @@ export function MessageSearch({
                     room={groupRoom}
                     highlights={highlights}
                     items={group.items}
+                    dateTime={dateTime}
                     mediaAutoLoad={mediaAutoLoad}
                     urlPreview={urlPreview}
                     onOpen={navigateRoom}
diff --git a/src/app/features/message-search/SearchResultGroup.tsx b/src/app/features/message-search/SearchResultGroup.tsx
index 6f84f62101..973a6b709d 100644
--- a/src/app/features/message-search/SearchResultGroup.tsx
+++ b/src/app/features/message-search/SearchResultGroup.tsx
@@ -33,11 +33,13 @@ import { ResultItem } from './useMessageSearch';
 import { SequenceCard } from '../../components/sequence-card';
 import { useRoomNavigate } from '../../hooks/useRoomNavigate';
 import { UserAvatar } from '../../components/user-avatar';
+import { DateTime } from '../../utils/time';
 
 type SearchResultGroupProps = {
   room: Room;
   highlights: string[];
   items: ResultItem[];
+  dateTime: DateTime;
   mediaAutoLoad?: boolean;
   urlPreview?: boolean;
   onOpen: (roomId: string, eventId: string) => void;
@@ -46,6 +48,7 @@ export function SearchResultGroup({
   room,
   highlights,
   items,
+  dateTime,
   mediaAutoLoad,
   urlPreview,
   onOpen,
@@ -228,7 +231,7 @@ export function SearchResultGroup({
                         <b>{displayName}</b>
                       </Text>
                     </Username>
-                    <Time ts={event.origin_server_ts} />
+                    <Time ts={event.origin_server_ts} dateTime={dateTime} />
                   </Box>
                   <Box shrink="No" gap="200" alignItems="Center">
                     <Chip
diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx
index b9bfb8434c..f9570465df 100644
--- a/src/app/features/room/RoomTimeline.tsx
+++ b/src/app/features/room/RoomTimeline.tsx
@@ -99,7 +99,7 @@ import { markAsRead } from '../../../client/action/notifications';
 import { useDebounce } from '../../hooks/useDebounce';
 import { getResizeObserverEntry, useResizeObserver } from '../../hooks/useResizeObserver';
 import * as css from './RoomTimeline.css';
-import { inSameDay, minuteDifference, timeDayMonthYear, today, yesterday } from '../../utils/time';
+import { isSameDay, minuteDifference, useDateTime } from '../../utils/time';
 import { createMentionElement, isEmptyEditor, moveCursor } from '../../components/editor';
 import { roomIdToReplyDraftAtomFamily } from '../../state/room/roomInputDrafts';
 import { usePowerLevelsAPI, usePowerLevelsContext } from '../../hooks/usePowerLevels';
@@ -448,6 +448,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
   const { navigateRoom, navigateSpace } = useRoomNavigate();
   const roomToParents = useAtomValue(roomToParentsAtom);
   const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
+  const dateTime = useDateTime();
 
   const imagePackRooms: Room[] = useMemo(() => {
     const allParentSpaces = [room.roomId].concat(
@@ -984,6 +985,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
             data-message-id={mEventId}
             room={room}
             mEvent={mEvent}
+            dateTime={dateTime}
             messageSpacing={messageSpacing}
             messageLayout={messageLayout}
             collapse={collapse}
@@ -1056,6 +1058,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
             data-message-id={mEventId}
             room={room}
             mEvent={mEvent}
+            dateTime={dateTime}
             messageSpacing={messageSpacing}
             messageLayout={messageLayout}
             collapse={collapse}
@@ -1165,6 +1168,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
             data-message-id={mEventId}
             room={room}
             mEvent={mEvent}
+            dateTime={dateTime}
             messageSpacing={messageSpacing}
             messageLayout={messageLayout}
             collapse={collapse}
@@ -1216,7 +1220,9 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
         const highlighted = focusItem?.index === item && focusItem.highlight;
         const parsed = parseMemberEvent(mEvent);
 
-        const timeJSX = <Time ts={mEvent.getTs()} compact={messageLayout === 1} />;
+        const timeJSX = (
+          <Time ts={mEvent.getTs()} compact={messageLayout === 1} dateTime={dateTime} />
+        );
 
         return (
           <Event
@@ -1249,7 +1255,9 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
         const senderId = mEvent.getSender() ?? '';
         const senderName = getMemberDisplayName(room, senderId) || getMxIdLocalPart(senderId);
 
-        const timeJSX = <Time ts={mEvent.getTs()} compact={messageLayout === 1} />;
+        const timeJSX = (
+          <Time ts={mEvent.getTs()} compact={messageLayout === 1} dateTime={dateTime} />
+        );
 
         return (
           <Event
@@ -1283,7 +1291,9 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
         const senderId = mEvent.getSender() ?? '';
         const senderName = getMemberDisplayName(room, senderId) || getMxIdLocalPart(senderId);
 
-        const timeJSX = <Time ts={mEvent.getTs()} compact={messageLayout === 1} />;
+        const timeJSX = (
+          <Time ts={mEvent.getTs()} compact={messageLayout === 1} dateTime={dateTime} />
+        );
 
         return (
           <Event
@@ -1317,7 +1327,9 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
         const senderId = mEvent.getSender() ?? '';
         const senderName = getMemberDisplayName(room, senderId) || getMxIdLocalPart(senderId);
 
-        const timeJSX = <Time ts={mEvent.getTs()} compact={messageLayout === 1} />;
+        const timeJSX = (
+          <Time ts={mEvent.getTs()} compact={messageLayout === 1} dateTime={dateTime} />
+        );
 
         return (
           <Event
@@ -1353,7 +1365,9 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
       const senderId = mEvent.getSender() ?? '';
       const senderName = getMemberDisplayName(room, senderId) || getMxIdLocalPart(senderId);
 
-      const timeJSX = <Time ts={mEvent.getTs()} compact={messageLayout === 1} />;
+      const timeJSX = (
+        <Time ts={mEvent.getTs()} compact={messageLayout === 1} dateTime={dateTime} />
+      );
 
       return (
         <Event
@@ -1394,7 +1408,9 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
       const senderId = mEvent.getSender() ?? '';
       const senderName = getMemberDisplayName(room, senderId) || getMxIdLocalPart(senderId);
 
-      const timeJSX = <Time ts={mEvent.getTs()} compact={messageLayout === 1} />;
+      const timeJSX = (
+        <Time ts={mEvent.getTs()} compact={messageLayout === 1} dateTime={dateTime} />
+      );
 
       return (
         <Event
@@ -1444,7 +1460,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
       newDivider = prevEvent?.getId() === readUptoEventIdRef.current;
     }
     if (!dayDivider) {
-      dayDivider = prevEvent ? !inSameDay(prevEvent.getTs(), mEvent.getTs()) : false;
+      dayDivider = prevEvent ? !isSameDay(prevEvent.getDate()!, mEvent.getDate()!) : false;
     }
 
     const collapsed =
@@ -1454,7 +1470,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
       prevEvent !== undefined &&
       prevEvent.getSender() === mEvent.getSender() &&
       prevEvent.getType() === mEvent.getType() &&
-      minuteDifference(prevEvent.getTs(), mEvent.getTs()) < 2;
+      minuteDifference(prevEvent.getDate()!, mEvent.getDate()!) < 2;
 
     const eventJSX = reactionOrEditEvent(mEvent)
       ? null
@@ -1488,9 +1504,9 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
             <Badge as="span" size="500" variant="Secondary" fill="None" radii="300">
               <Text size="L400">
                 {(() => {
-                  if (today(mEvent.getTs())) return 'Today';
-                  if (yesterday(mEvent.getTs())) return 'Yesterday';
-                  return timeDayMonthYear(mEvent.getTs());
+                  const date = mEvent.getDate()!;
+                  const { relativeTerm } = dateTime.relative(date);
+                  return relativeTerm || dateTime.date(date);
                 })()}
               </Text>
             </Badge>
@@ -1553,7 +1569,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
                 }`,
               }}
             >
-              <RoomIntro room={room} />
+              <RoomIntro room={room} dateTime={dateTime} />
             </div>
           )}
           {(canPaginateBack || !rangeAtStart) &&
diff --git a/src/app/features/room/message/Message.tsx b/src/app/features/room/message/Message.tsx
index 6db366ac44..b315567398 100644
--- a/src/app/features/room/message/Message.tsx
+++ b/src/app/features/room/message/Message.tsx
@@ -75,6 +75,7 @@ import {
 import { copyToClipboard } from '../../../utils/dom';
 import { useClientConfig } from '../../../hooks/useClientConfig';
 import { stopPropagation } from '../../../utils/keyboard';
+import { DateTime } from '../../../utils/time';
 
 export type ReactionHandler = (keyOrMxc: string, shortcode: string) => void;
 
@@ -630,6 +631,7 @@ export type MessageProps = {
   canSendReaction?: boolean;
   imagePackRooms?: Room[];
   relations?: Relations;
+  dateTime: DateTime;
   messageLayout: MessageLayout;
   messageSpacing: MessageSpacing;
   onUserClick: MouseEventHandler<HTMLButtonElement>;
@@ -653,6 +655,7 @@ export const Message = as<'div', MessageProps>(
       canSendReaction,
       imagePackRooms,
       relations,
+      dateTime,
       messageLayout,
       messageSpacing,
       onUserClick,
@@ -709,7 +712,7 @@ export const Message = as<'div', MessageProps>(
               </Text>
             </>
           )}
-          <Time ts={mEvent.getTs()} compact={messageLayout === 1} />
+          <Time ts={mEvent.getTs()} compact={messageLayout === 1} dateTime={dateTime} />
         </Box>
       </Box>
     );
diff --git a/src/app/organisms/settings/DeviceManage.jsx b/src/app/organisms/settings/DeviceManage.jsx
index 9fa8273e77..646672a3ca 100644
--- a/src/app/organisms/settings/DeviceManage.jsx
+++ b/src/app/organisms/settings/DeviceManage.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import './DeviceManage.scss';
-import dateFormat from 'dateformat';
+import { useDateTime } from '../../utils/time';
 
 import { isCrossVerified } from '../../../util/matrixUtil';
 import { openReusableDialog, openEmojiVerification } from '../../../client/action/navigation';
@@ -71,6 +71,7 @@ function DeviceManage() {
   const mountStore = useStore();
   mountStore.setItem(true);
   const isMeVerified = isCrossVerified(mx, mx.deviceId);
+  const dateTime = useDateTime();
 
   useEffect(() => {
     setProcessing([]);
@@ -184,9 +185,9 @@ function DeviceManage() {
               <Text variant="b3">
                 Last activity
                 <span style={{ color: 'var(--tc-surface-normal)' }}>
-                  {dateFormat(new Date(lastTS), ' hh:MM TT, dd/mm/yyyy')}
+                  {` ${  dateTime.full(new Date(lastTS))}`}
                 </span>
-                {lastIP ? ` at ${lastIP}` : ''}
+                {lastIP ? ` from ${lastIP}` : ''}
               </Text>
             )}
             {isCurrentDevice && (
diff --git a/src/app/organisms/settings/Settings.jsx b/src/app/organisms/settings/Settings.jsx
index 6329a57fe0..95c064becf 100644
--- a/src/app/organisms/settings/Settings.jsx
+++ b/src/app/organisms/settings/Settings.jsx
@@ -69,6 +69,7 @@ function AppearanceSection() {
   const [urlPreview, setUrlPreview] = useSetting(settingsAtom, 'urlPreview');
   const [encUrlPreview, setEncUrlPreview] = useSetting(settingsAtom, 'encUrlPreview');
   const [showHiddenEvents, setShowHiddenEvents] = useSetting(settingsAtom, 'showHiddenEvents');
+  const [hour12, setHour12] = useSetting(settingsAtom, 'hour12');
   const spacings = ['0', '100', '200', '300', '400', '500'];
 
   const [currentZoom, setCurrentZoom] = useState(`${pageZoom}`);
@@ -266,6 +267,11 @@ function AppearanceSection() {
           }
           content={<Text variant="b3">Show hidden state and message events.</Text>}
         />
+        <SettingTile
+          title="12-hour time"
+          options={<Toggle isActive={hour12} onToggle={() => setHour12(!hour12)} />}
+          content={<Text variant="b3">Show timestamps in 12-hour format.</Text>}
+        />
       </div>
     </div>
   );
diff --git a/src/app/pages/client/inbox/Invites.tsx b/src/app/pages/client/inbox/Invites.tsx
index 06e5f6c6be..2b4c524ff3 100644
--- a/src/app/pages/client/inbox/Invites.tsx
+++ b/src/app/pages/client/inbox/Invites.tsx
@@ -39,17 +39,19 @@ import { RoomTopicViewer } from '../../../components/room-topic-viewer';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
 import { useRoomTopic } from '../../../hooks/useRoomMeta';
+import { DateTime, useDateTime } from '../../../utils/time';
 
 const COMPACT_CARD_WIDTH = 548;
 
 type InviteCardProps = {
   room: Room;
   userId: string;
+  dateTime: DateTime;
   direct?: boolean;
   compact?: boolean;
   onNavigate: (roomId: string) => void;
 };
-function InviteCard({ room, userId, direct, compact, onNavigate }: InviteCardProps) {
+function InviteCard({ room, userId, dateTime, direct, compact, onNavigate }: InviteCardProps) {
   const mx = useMatrixClient();
   const roomName = room.name || room.getCanonicalAlias() || room.roomId;
   const member = room.getMember(userId);
@@ -100,7 +102,7 @@ function InviteCard({ room, userId, direct, compact, onNavigate }: InviteCardPro
           </Text>
         </Box>
         <Box shrink="No">
-          <Time size="T200" ts={memberTs} priority="300" />
+          <Time size="T200" ts={memberTs} dateTime={dateTime} priority="300" />
         </Box>
       </Box>
       <Box gap="300">
@@ -200,6 +202,7 @@ export function Invites() {
   const spaceInvites = useSpaceInvites(mx, allInvitesAtom);
   const roomInvites = useRoomInvites(mx, allInvitesAtom, mDirects);
   const containerRef = useRef<HTMLDivElement>(null);
+  const dateTime = useDateTime();
   const [compact, setCompact] = useState(document.body.clientWidth <= COMPACT_CARD_WIDTH);
   useElementSizeObserver(
     useCallback(() => containerRef.current, []),
@@ -216,6 +219,7 @@ export function Invites() {
         key={roomId}
         room={room}
         userId={userId}
+        dateTime={dateTime}
         compact={compact}
         direct={direct}
         onNavigate={handleNavigate}
diff --git a/src/app/pages/client/inbox/Notifications.tsx b/src/app/pages/client/inbox/Notifications.tsx
index a01ecb8e05..e7567c35fc 100644
--- a/src/app/pages/client/inbox/Notifications.tsx
+++ b/src/app/pages/client/inbox/Notifications.tsx
@@ -70,6 +70,7 @@ import { ContainerColor } from '../../../styles/ContainerColor.css';
 import { VirtualTile } from '../../../components/virtualizer';
 import { UserAvatar } from '../../../components/user-avatar';
 import { EncryptedContent } from '../../../features/room/message';
+import { DateTime, useDateTime } from '../../../utils/time';
 
 type RoomNotificationsGroup = {
   roomId: string;
@@ -168,6 +169,7 @@ const useNotificationTimeline = (
 type RoomNotificationsGroupProps = {
   room: Room;
   notifications: INotification[];
+  dateTime: DateTime;
   mediaAutoLoad?: boolean;
   urlPreview?: boolean;
   onOpen: (roomId: string, eventId: string) => void;
@@ -175,6 +177,7 @@ type RoomNotificationsGroupProps = {
 function RoomNotificationsGroupComp({
   room,
   notifications,
+  dateTime,
   mediaAutoLoad,
   urlPreview,
   onOpen,
@@ -435,7 +438,7 @@ function RoomNotificationsGroupComp({
                         <b>{displayName}</b>
                       </Text>
                     </Username>
-                    <Time ts={event.origin_server_ts} />
+                    <Time ts={event.origin_server_ts} dateTime={dateTime} />
                   </Box>
                   <Box shrink="No" gap="200" alignItems="Center">
                     <Chip
@@ -482,6 +485,7 @@ const DEFAULT_REFRESH_MS = 7000;
 
 export function Notifications() {
   const mx = useMatrixClient();
+  const dateTime = useDateTime();
   const [mediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
   const [urlPreview] = useSetting(settingsAtom, 'urlPreview');
 
@@ -625,6 +629,7 @@ export function Notifications() {
                         <RoomNotificationsGroupComp
                           room={groupRoom}
                           notifications={group.notifications}
+                          dateTime={dateTime}
                           mediaAutoLoad={mediaAutoLoad}
                           urlPreview={urlPreview}
                           onOpen={navigateRoom}
diff --git a/src/app/state/settings.ts b/src/app/state/settings.ts
index e438024958..bcf625c481 100644
--- a/src/app/state/settings.ts
+++ b/src/app/state/settings.ts
@@ -23,6 +23,7 @@ export interface Settings {
   urlPreview: boolean;
   encUrlPreview: boolean;
   showHiddenEvents: boolean;
+  hour12: boolean;
 
   showNotifications: boolean;
   isNotificationSounds: boolean;
@@ -47,6 +48,7 @@ const defaultSettings: Settings = {
   urlPreview: true,
   encUrlPreview: false,
   showHiddenEvents: false,
+  hour12: false,
 
   showNotifications: true,
   isNotificationSounds: true,
diff --git a/src/app/utils/time.ts b/src/app/utils/time.ts
index 3ee6720c05..641c67dfbd 100644
--- a/src/app/utils/time.ts
+++ b/src/app/utils/time.ts
@@ -1,35 +1,111 @@
-import dayjs from 'dayjs';
-import isToday from 'dayjs/plugin/isToday';
-import isYesterday from 'dayjs/plugin/isYesterday';
+import { useEffect, useState } from 'react';
+import { settingsAtom } from '../state/settings';
+import { useSetting } from '../state/hooks/settings.js';
 
-dayjs.extend(isToday);
-dayjs.extend(isYesterday);
+// Potentially unsafe for astral codepoints.
+function capitalize(str: string) {
+  return str[0].toLocaleUpperCase() + str.slice(1);
+}
 
-export const today = (ts: number): boolean => dayjs(ts).isToday();
+export const isSameDay = (d1: Date, d2: Date): boolean => d2.toDateString() === d1.toDateString();
 
-export const yesterday = (ts: number): boolean => dayjs(ts).isYesterday();
+export const minuteDifference = (d1: Date, d2: Date): number => {
+  let diff = (d1.getTime() - d2.getTime()) / 1000;
+  diff /= 60;
+  return Math.abs(Math.round(diff));
+};
 
-export const timeHourMinute = (ts: number): string => dayjs(ts).format('hh:mm A');
+const locale = 'en-in';
 
-export const timeDayMonYear = (ts: number): string => dayjs(ts).format('D MMM YYYY');
+export class DateTime {
+  // eslint-disable-next-line no-use-before-define
+  private static instance: DateTime;
 
-export const timeDayMonthYear = (ts: number): string => dayjs(ts).format('D MMMM YYYY');
+  private static hour12: boolean;
 
-export const inSameDay = (ts1: number, ts2: number): boolean => {
-  const dt1 = new Date(ts1);
-  const dt2 = new Date(ts2);
-  return (
-    dt2.getFullYear() === dt1.getFullYear() &&
-    dt2.getMonth() === dt1.getMonth() &&
-    dt2.getDate() === dt1.getDate()
-  );
-};
+  private dateFormat: Intl.DateTimeFormat;
 
-export const minuteDifference = (ts1: number, ts2: number): number => {
-  const dt1 = new Date(ts1);
-  const dt2 = new Date(ts2);
+  private timeFormat: Intl.DateTimeFormat;
 
-  let diff = (dt2.getTime() - dt1.getTime()) / 1000;
-  diff /= 60;
-  return Math.abs(Math.round(diff));
-};
+  private dateTimeFormat: Intl.DateTimeFormat;
+
+  private fullFormat: Intl.DateTimeFormat;
+
+  private relativeFormat: Intl.RelativeTimeFormat;
+
+  private constructor(hour12: boolean) {
+    DateTime.hour12 = hour12;
+
+    this.dateFormat = new Intl.DateTimeFormat(locale, {
+      dateStyle: 'long',
+    });
+    this.timeFormat = new Intl.DateTimeFormat(locale, {
+      hour12,
+      timeStyle: 'short',
+    });
+    this.dateTimeFormat = new Intl.DateTimeFormat(locale, {
+      hour12,
+      dateStyle: 'medium',
+      timeStyle: 'short',
+    });
+    this.fullFormat = new Intl.DateTimeFormat(locale, {
+      hour12,
+      dateStyle: 'full',
+      timeStyle: 'medium',
+    });
+    this.relativeFormat = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });
+  }
+
+  static getInstance(hour12: boolean): DateTime {
+    if (hour12 !== DateTime.hour12) {
+      DateTime.instance = new DateTime(hour12);
+    }
+    return DateTime.instance;
+  }
+
+  date(date: Date | number): string {
+    return this.dateFormat.format(date);
+  }
+
+  time(date: Date | number): string {
+    return this.timeFormat.format(date);
+  }
+
+  dateTime(date: Date | number): string {
+    return this.dateTimeFormat.format(date);
+  }
+
+  full(date: Date | number): string {
+    return this.fullFormat.format(date);
+  }
+
+  relative(date: Date) {
+    const today = new Date();
+    const isToday = isSameDay(today, date);
+    let yesterday: Date;
+    let isYesterday: boolean;
+    let relativeTerm: string;
+    if (!isToday) {
+      yesterday = new Date();
+      yesterday.setDate(today.getDate() - 1);
+      isYesterday = isSameDay(yesterday, date);
+    } else {
+      isYesterday = false;
+    }
+    if (isToday) relativeTerm = this.relativeFormat.format(0, 'day');
+    else if (isYesterday) relativeTerm = this.relativeFormat.format(-1, 'day');
+    else relativeTerm = '';
+    if (relativeTerm) relativeTerm = capitalize(relativeTerm);
+
+    return { isToday, isYesterday, relativeTerm };
+  }
+}
+
+export function useDateTime() {
+  const [hour12] = useSetting(settingsAtom, 'hour12');
+  const [dateTime, setDateTime] = useState(() => DateTime.getInstance(hour12));
+  useEffect(() => {
+    setDateTime(DateTime.getInstance(hour12));
+  }, [hour12]);
+  return dateTime;
+}