diff --git a/.vscode/tasks.json b/.vscode/tasks.json
index f2635e4ca5..1e06422ff3 100644
--- a/.vscode/tasks.json
+++ b/.vscode/tasks.json
@@ -341,6 +341,7 @@
               "localhost",
               "arbitrum",
               "arbitrum_sepolia",
+              "arbitrum_nova",
               "base",
               "blackfort_testnet",
               "celo",
diff --git a/configs/envs/.env.mega_eth b/configs/envs/.env.mega_eth
index 3960069047..52195da81e 100644
--- a/configs/envs/.env.mega_eth
+++ b/configs/envs/.env.mega_eth
@@ -33,6 +33,8 @@ NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL=https://raw.githubusercontent.com/blocksc
 NEXT_PUBLIC_MARKETPLACE_ENABLED=true
 NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://airtable.com/appiy5yijZpMMSKjT/shr6uMGPKjj1DK7NL
 NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM=https://airtable.com/appiy5yijZpMMSKjT/pag3t82DUCyhGRZZO/form
+NEXT_PUBLIC_MEGA_ETH_SOCKET_URL_METRICS=wss://testnetv2-dashboard.megaeth.com/metrics
+NEXT_PUBLIC_MEGA_ETH_SOCKET_URL_RPC=wss://megaeth-testnet-v2.blockscout.com/api/v2/proxy/3rdparty/ws_megaeth_testnet_2
 NEXT_PUBLIC_METADATA_SERVICE_API_HOST=https://metadata.services.blockscout.com
 NEXT_PUBLIC_MIXPANEL_CONFIG_OVERRIDES={"record_sessions_percent": 0.5,"record_heatmap_data": true}
 NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
diff --git a/lib/contexts/settings.tsx b/lib/contexts/settings.tsx
index 353ea50303..c59d5658bc 100644
--- a/lib/contexts/settings.tsx
+++ b/lib/contexts/settings.tsx
@@ -16,6 +16,8 @@ interface TSettingsContext {
   toggleAddressFormat: () => void;
   timeFormat: TimeFormat;
   toggleTimeFormat: () => void;
+  isLocalTime: boolean;
+  toggleIsLocalTime: () => void;
 }
 
 export const SettingsContext = React.createContext<TSettingsContext | null>(null);
@@ -32,6 +34,10 @@ export function SettingsContextProvider({ children }: SettingsProviderProps) {
     cookies.get(cookies.NAMES.TIME_FORMAT, appCookies) as TimeFormat || 'relative',
   );
 
+  const [ isLocalTime, setIsLocalTime ] = React.useState<boolean>(
+    (cookies.get(cookies.NAMES.LOCAL_TIME, appCookies) ?? 'true') === 'true',
+  );
+
   const toggleAddressFormat = React.useCallback(() => {
     setAddressFormat(prev => {
       const nextValue = prev === 'base16' ? 'bech32' : 'base16';
@@ -48,14 +54,24 @@ export function SettingsContextProvider({ children }: SettingsProviderProps) {
     });
   }, []);
 
+  const toggleIsLocalTime = React.useCallback(() => {
+    setIsLocalTime(prev => {
+      const nextValue = !prev;
+      cookies.set(cookies.NAMES.LOCAL_TIME, nextValue ? 'true' : 'false');
+      return nextValue;
+    });
+  }, []);
+
   const value = React.useMemo(() => {
     return {
       addressFormat,
       toggleAddressFormat,
       timeFormat,
       toggleTimeFormat,
+      isLocalTime,
+      toggleIsLocalTime,
     };
-  }, [ addressFormat, toggleAddressFormat, timeFormat, toggleTimeFormat ]);
+  }, [ addressFormat, toggleAddressFormat, timeFormat, toggleTimeFormat, isLocalTime, toggleIsLocalTime ]);
 
   return (
     <SettingsContext.Provider value={ value }>
diff --git a/lib/cookies.ts b/lib/cookies.ts
index 578d93bd43..781ef3d4cf 100644
--- a/lib/cookies.ts
+++ b/lib/cookies.ts
@@ -14,6 +14,7 @@ export enum NAMES {
   ADDRESS_IDENTICON_TYPE = 'address_identicon_type',
   ADDRESS_FORMAT = 'address_format',
   TIME_FORMAT = 'time_format',
+  LOCAL_TIME = 'local_time',
   INDEXING_ALERT = 'indexing_alert',
   ADBLOCK_DETECTED = 'adblock_detected',
   MIXPANEL_DEBUG = '_mixpanel_debug',
diff --git a/lib/date/dayjs.ts b/lib/date/dayjs.ts
index 70424c17f7..624cb0b74e 100644
--- a/lib/date/dayjs.ts
+++ b/lib/date/dayjs.ts
@@ -5,6 +5,7 @@ import localizedFormat from 'dayjs/plugin/localizedFormat';
 import minMax from 'dayjs/plugin/minMax';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import updateLocale from 'dayjs/plugin/updateLocale';
+import utc from 'dayjs/plugin/utc';
 import weekOfYear from 'dayjs/plugin/weekOfYear';
 
 import { nbsp } from 'toolkit/utils/htmlEntities';
@@ -34,6 +35,7 @@ dayjs.extend(localizedFormat);
 dayjs.extend(duration);
 dayjs.extend(weekOfYear);
 dayjs.extend(minMax);
+dayjs.extend(utc);
 
 dayjs.updateLocale('en', {
   formats: {
@@ -63,3 +65,8 @@ dayjs.updateLocale('en', {
 dayjs.locale('en');
 
 export default dayjs;
+
+export const FORMATS = {
+  // the "lll" format with seconds
+  lll_s: 'MMM D, YYYY h:mm:ss A',
+};
diff --git a/ui/address/__screenshots__/AddressTxs.pw.tsx_default_base-view-desktop-2.png b/ui/address/__screenshots__/AddressTxs.pw.tsx_default_base-view-desktop-2.png
index 3e4fb6baa1..cc7a1009bb 100644
Binary files a/ui/address/__screenshots__/AddressTxs.pw.tsx_default_base-view-desktop-2.png and b/ui/address/__screenshots__/AddressTxs.pw.tsx_default_base-view-desktop-2.png differ
diff --git a/ui/address/contract/__screenshots__/ContractDetails.pw.tsx_dark-color-mode_full-view-source-code-dark-mode-1.png b/ui/address/contract/__screenshots__/ContractDetails.pw.tsx_dark-color-mode_full-view-source-code-dark-mode-1.png
index 8beaab56d1..fac78df75f 100644
Binary files a/ui/address/contract/__screenshots__/ContractDetails.pw.tsx_dark-color-mode_full-view-source-code-dark-mode-1.png and b/ui/address/contract/__screenshots__/ContractDetails.pw.tsx_dark-color-mode_full-view-source-code-dark-mode-1.png differ
diff --git a/ui/address/contract/__screenshots__/ContractDetails.pw.tsx_default_full-view-abi-1.png b/ui/address/contract/__screenshots__/ContractDetails.pw.tsx_default_full-view-abi-1.png
index 507d8fa5ba..24e20cee84 100644
Binary files a/ui/address/contract/__screenshots__/ContractDetails.pw.tsx_default_full-view-abi-1.png and b/ui/address/contract/__screenshots__/ContractDetails.pw.tsx_default_full-view-abi-1.png differ
diff --git a/ui/address/contract/__screenshots__/ContractDetails.pw.tsx_default_full-view-bytecode-1.png b/ui/address/contract/__screenshots__/ContractDetails.pw.tsx_default_full-view-bytecode-1.png
index 7a959f4df9..2c33d6674b 100644
Binary files a/ui/address/contract/__screenshots__/ContractDetails.pw.tsx_default_full-view-bytecode-1.png and b/ui/address/contract/__screenshots__/ContractDetails.pw.tsx_default_full-view-bytecode-1.png differ
diff --git a/ui/address/contract/__screenshots__/ContractDetails.pw.tsx_default_full-view-compiler-1.png b/ui/address/contract/__screenshots__/ContractDetails.pw.tsx_default_full-view-compiler-1.png
index b8b77ff973..98148ac29e 100644
Binary files a/ui/address/contract/__screenshots__/ContractDetails.pw.tsx_default_full-view-compiler-1.png and b/ui/address/contract/__screenshots__/ContractDetails.pw.tsx_default_full-view-compiler-1.png differ
diff --git a/ui/address/contract/__screenshots__/ContractDetails.pw.tsx_default_full-view-source-code-dark-mode-1.png b/ui/address/contract/__screenshots__/ContractDetails.pw.tsx_default_full-view-source-code-dark-mode-1.png
index 6daeb8853f..1db074dd2a 100644
Binary files a/ui/address/contract/__screenshots__/ContractDetails.pw.tsx_default_full-view-source-code-dark-mode-1.png and b/ui/address/contract/__screenshots__/ContractDetails.pw.tsx_default_full-view-source-code-dark-mode-1.png differ
diff --git a/ui/address/contract/__screenshots__/ContractDetails.pw.tsx_default_mobile-view-source-code-1.png b/ui/address/contract/__screenshots__/ContractDetails.pw.tsx_default_mobile-view-source-code-1.png
index 96472621e8..2aa8037796 100644
Binary files a/ui/address/contract/__screenshots__/ContractDetails.pw.tsx_default_mobile-view-source-code-1.png and b/ui/address/contract/__screenshots__/ContractDetails.pw.tsx_default_mobile-view-source-code-1.png differ
diff --git a/ui/address/contract/info/ContractDetailsInfo.tsx b/ui/address/contract/info/ContractDetailsInfo.tsx
index e4c76421a0..4ce7fabd35 100644
--- a/ui/address/contract/info/ContractDetailsInfo.tsx
+++ b/ui/address/contract/info/ContractDetailsInfo.tsx
@@ -7,7 +7,6 @@ import type { SmartContract } from 'types/api/contract';
 import config from 'configs/app';
 import { useMultichainContext } from 'lib/contexts/multichain';
 import { CONTRACT_LICENSES } from 'lib/contracts/licenses';
-import dayjs from 'lib/date/dayjs';
 import { Link } from 'toolkit/chakra/link';
 import { getGitHubOwnerAndRepo } from 'ui/contractVerification/utils';
 import ContainerWithScrollY from 'ui/shared/ContainerWithScrollY';
@@ -15,6 +14,7 @@ import ContractCertifiedLabel from 'ui/shared/ContractCertifiedLabel';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import ContractCreationStatus from 'ui/shared/statusTag/ContractCreationStatus';
+import Time from 'ui/shared/time/Time';
 
 import ContractSecurityAudits from '../audits/ContractSecurityAudits';
 import ContractDetailsInfoItem from './ContractDetailsInfoItem';
@@ -187,7 +187,7 @@ const ContractDetailsInfo = ({ data, isLoading, addressData }: Props) => {
           wordBreak="break-word"
           isLoading={ isLoading }
         >
-          { dayjs(data.verified_at).format('llll') }
+          <Time timestamp={ data.verified_at } format="lll_s"/>
         </ContractDetailsInfoItem>
       ) }
       { data.file_path && !isStylusContract && (
diff --git a/ui/address/contract/info/__screenshots__/ContractDetailsInfo.pw.tsx_default_stylus-rust-contract-1.png b/ui/address/contract/info/__screenshots__/ContractDetailsInfo.pw.tsx_default_stylus-rust-contract-1.png
index 0a4290ab79..ea621ced30 100644
Binary files a/ui/address/contract/info/__screenshots__/ContractDetailsInfo.pw.tsx_default_stylus-rust-contract-1.png and b/ui/address/contract/info/__screenshots__/ContractDetailsInfo.pw.tsx_default_stylus-rust-contract-1.png differ
diff --git a/ui/address/contract/info/__screenshots__/ContractDetailsInfo.pw.tsx_default_with-audits-feature-has-audits-1.png b/ui/address/contract/info/__screenshots__/ContractDetailsInfo.pw.tsx_default_with-audits-feature-has-audits-1.png
index 7e625bfa46..ea0fe6244c 100644
Binary files a/ui/address/contract/info/__screenshots__/ContractDetailsInfo.pw.tsx_default_with-audits-feature-has-audits-1.png and b/ui/address/contract/info/__screenshots__/ContractDetailsInfo.pw.tsx_default_with-audits-feature-has-audits-1.png differ
diff --git a/ui/address/contract/info/__screenshots__/ContractDetailsInfo.pw.tsx_default_with-audits-feature-no-audits-1.png b/ui/address/contract/info/__screenshots__/ContractDetailsInfo.pw.tsx_default_with-audits-feature-no-audits-1.png
index 841ce65153..9908a565fa 100644
Binary files a/ui/address/contract/info/__screenshots__/ContractDetailsInfo.pw.tsx_default_with-audits-feature-no-audits-1.png and b/ui/address/contract/info/__screenshots__/ContractDetailsInfo.pw.tsx_default_with-audits-feature-no-audits-1.png differ
diff --git a/ui/address/contract/info/__screenshots__/ContractDetailsInfo.pw.tsx_default_with-certified-icon-1.png b/ui/address/contract/info/__screenshots__/ContractDetailsInfo.pw.tsx_default_with-certified-icon-1.png
index b0de6addf7..7773b4b975 100644
Binary files a/ui/address/contract/info/__screenshots__/ContractDetailsInfo.pw.tsx_default_with-certified-icon-1.png and b/ui/address/contract/info/__screenshots__/ContractDetailsInfo.pw.tsx_default_with-certified-icon-1.png differ
diff --git a/ui/address/contract/info/__screenshots__/ContractDetailsInfo.pw.tsx_default_zkSync-contract-1.png b/ui/address/contract/info/__screenshots__/ContractDetailsInfo.pw.tsx_default_zkSync-contract-1.png
index 42abc47ece..6315972af1 100644
Binary files a/ui/address/contract/info/__screenshots__/ContractDetailsInfo.pw.tsx_default_zkSync-contract-1.png and b/ui/address/contract/info/__screenshots__/ContractDetailsInfo.pw.tsx_default_zkSync-contract-1.png differ
diff --git a/ui/address/mud/AddressMudRecord.tsx b/ui/address/mud/AddressMudRecord.tsx
index 77e17a8eb3..465b2bd1da 100644
--- a/ui/address/mud/AddressMudRecord.tsx
+++ b/ui/address/mud/AddressMudRecord.tsx
@@ -3,12 +3,12 @@ import { useRouter } from 'next/router';
 import React from 'react';
 
 import useApiQuery from 'lib/api/useApiQuery';
-import dayjs from 'lib/date/dayjs';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import { TableRoot, TableRow, TableCell } from 'toolkit/chakra/table';
 import { ContentLoader } from 'toolkit/components/loaders/ContentLoader';
 import { TruncatedText } from 'toolkit/components/truncation/TruncatedText';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
+import Time from 'ui/shared/time/Time';
 
 import AddressMudBreadcrumbs from './AddressMudBreadcrumbs';
 import AddressMudRecordValues from './AddressMudRecordValues';
@@ -62,7 +62,7 @@ const AddressMudRecord = ({ tableId, recordId, isQueryEnabled = true }: Props) =
               <TableCell colSpan={ 2 } fontSize="sm">
                 <Flex justifyContent="space-between">
                   <TruncatedText text={ getValueString(data.record.decoded[keyName]) } mr={ 2 }/>
-                  { index === 0 && <Box color="text.secondary">{ dayjs(data.record.timestamp).format('lll') }</Box> }
+                  { index === 0 && <Time color="text.secondary" timestamp={ data.record.timestamp }/> }
                 </Flex>
               </TableCell>
             </TableRow>
@@ -79,7 +79,7 @@ const AddressMudRecord = ({ tableId, recordId, isQueryEnabled = true }: Props) =
                 { keyName } ({ data.schema.key_types[index] })
               </Text>
               <Text wordBreak="break-word">{ getValueString(data.record.decoded[keyName]) }</Text>
-              { index === 0 && <Box color="text.secondary">{ dayjs(data.record.timestamp).format('lll') }</Box> }
+              { index === 0 && <Time color="text.secondary" timestamp={ data.record.timestamp }/> }
             </VStack>
           )) }
           <TableRoot borderRadius="8px" style={{ tableLayout: 'auto' }} width="100%" mt={ 2 } overflow="hidden">
diff --git a/ui/address/mud/AddressMudRecordsTable.tsx b/ui/address/mud/AddressMudRecordsTable.tsx
index 138565f596..a68ac4dbf9 100644
--- a/ui/address/mud/AddressMudRecordsTable.tsx
+++ b/ui/address/mud/AddressMudRecordsTable.tsx
@@ -7,7 +7,6 @@ import type { AddressMudRecords, AddressMudRecordsFilter, AddressMudRecordsSorti
 import { route } from 'nextjs-routes';
 
 import capitalizeFirstLetter from 'lib/capitalizeFirstLetter';
-import dayjs from 'lib/date/dayjs';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import { Link } from 'toolkit/chakra/link';
 import { TableBody, TableCell, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
@@ -16,6 +15,7 @@ import { Tooltip } from 'toolkit/chakra/tooltip';
 import { middot } from 'toolkit/utils/htmlEntities';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import IconSvg from 'ui/shared/IconSvg';
+import Time from 'ui/shared/time/Time';
 
 import AddressMudRecordsKeyFilter from './AddressMudRecordsKeyFilter';
 import { getNameTypeText, getValueString } from './utils';
@@ -213,7 +213,7 @@ const AddressMudRecordsTable = ({
               { values.map((valName) =>
                 <TableCell key={ valName } { ...tdStyles }>{ getValueString(item.decoded[valName]) }</TableCell>) }
               { hasCut && !isOpened && <TableCell width={ `${ CUT_COL_WIDTH }px ` }></TableCell> }
-              <TableCell { ...tdStyles } color="text.secondary" w={ `${ colW }px` }>{ dayjs(item.timestamp).format('lll') }</TableCell>
+              <TableCell { ...tdStyles } color="text.secondary" w={ `${ colW }px` }><Time timestamp={ item.timestamp }/></TableCell>
               { hasCut && isOpened && <TableCell width={ `${ CUT_COL_WIDTH }px ` }></TableCell> }
             </TableRow>
           )) }
diff --git a/ui/block/__screenshots__/BlockDetails.pw.tsx_dark-color-mode_regular-block-mobile-dark-mode-1.png b/ui/block/__screenshots__/BlockDetails.pw.tsx_dark-color-mode_regular-block-mobile-dark-mode-1.png
index 5998026eac..d716e26f97 100644
Binary files a/ui/block/__screenshots__/BlockDetails.pw.tsx_dark-color-mode_regular-block-mobile-dark-mode-1.png and b/ui/block/__screenshots__/BlockDetails.pw.tsx_dark-color-mode_regular-block-mobile-dark-mode-1.png differ
diff --git a/ui/block/__screenshots__/BlockDetails.pw.tsx_default_genesis-block-1.png b/ui/block/__screenshots__/BlockDetails.pw.tsx_default_genesis-block-1.png
index 8dedeecbb8..92d7331dc9 100644
Binary files a/ui/block/__screenshots__/BlockDetails.pw.tsx_default_genesis-block-1.png and b/ui/block/__screenshots__/BlockDetails.pw.tsx_default_genesis-block-1.png differ
diff --git a/ui/block/__screenshots__/BlockDetails.pw.tsx_default_regular-block-mobile-dark-mode-1.png b/ui/block/__screenshots__/BlockDetails.pw.tsx_default_regular-block-mobile-dark-mode-1.png
index 2b0ef2f4a1..2a2dcde1e6 100644
Binary files a/ui/block/__screenshots__/BlockDetails.pw.tsx_default_regular-block-mobile-dark-mode-1.png and b/ui/block/__screenshots__/BlockDetails.pw.tsx_default_regular-block-mobile-dark-mode-1.png differ
diff --git a/ui/block/__screenshots__/BlockDetails.pw.tsx_default_rootstock-custom-fields-1.png b/ui/block/__screenshots__/BlockDetails.pw.tsx_default_rootstock-custom-fields-1.png
index 35a5364252..3c259d9999 100644
Binary files a/ui/block/__screenshots__/BlockDetails.pw.tsx_default_rootstock-custom-fields-1.png and b/ui/block/__screenshots__/BlockDetails.pw.tsx_default_rootstock-custom-fields-1.png differ
diff --git a/ui/block/__screenshots__/BlockDetails.pw.tsx_default_with-blob-txs-1.png b/ui/block/__screenshots__/BlockDetails.pw.tsx_default_with-blob-txs-1.png
index 3dd45bdaaf..79c3c0cc09 100644
Binary files a/ui/block/__screenshots__/BlockDetails.pw.tsx_default_with-blob-txs-1.png and b/ui/block/__screenshots__/BlockDetails.pw.tsx_default_with-blob-txs-1.png differ
diff --git a/ui/block/__screenshots__/BlockDetails.pw.tsx_mobile_regular-block-mobile-dark-mode-1.png b/ui/block/__screenshots__/BlockDetails.pw.tsx_mobile_regular-block-mobile-dark-mode-1.png
index ef7e339635..9d7d1f7089 100644
Binary files a/ui/block/__screenshots__/BlockDetails.pw.tsx_mobile_regular-block-mobile-dark-mode-1.png and b/ui/block/__screenshots__/BlockDetails.pw.tsx_mobile_regular-block-mobile-dark-mode-1.png differ
diff --git a/ui/blocks/flashblocks/FlashblocksListItem.tsx b/ui/blocks/flashblocks/FlashblocksListItem.tsx
index a1777b1513..f01b9d0006 100644
--- a/ui/blocks/flashblocks/FlashblocksListItem.tsx
+++ b/ui/blocks/flashblocks/FlashblocksListItem.tsx
@@ -5,10 +5,10 @@ import type { FlashblockItem } from 'types/client/flashblocks';
 
 import { route } from 'nextjs-routes';
 
-import dayjs from 'lib/date/dayjs';
 import { Link } from 'toolkit/chakra/link';
 import FlashblockEntity from 'ui/shared/entities/flashblock/FlashblockEntity';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
+import Time from 'ui/shared/time/Time';
 
 interface Props {
   data: FlashblockItem;
@@ -29,7 +29,7 @@ const FlashblocksListItem = ({ data }: Props) => {
       { data.timestamp && (
         <Flex columnGap={ 2 }>
           <Text fontWeight={ 500 }>Timestamp</Text>
-          <Text color="text.secondary">{ dayjs(data.timestamp).format('DD MMM, HH:mm:ss.SSS') }</Text>
+          <Time color="text.secondary" timestamp={ data.timestamp } format="DD MMM, HH:mm:ss.SSS"/>
         </Flex>
       ) }
       <Flex columnGap={ 2 }>
diff --git a/ui/blocks/flashblocks/FlashblocksTableItem.tsx b/ui/blocks/flashblocks/FlashblocksTableItem.tsx
index 73b97386a7..07fc863cd0 100644
--- a/ui/blocks/flashblocks/FlashblocksTableItem.tsx
+++ b/ui/blocks/flashblocks/FlashblocksTableItem.tsx
@@ -5,10 +5,10 @@ import type { FlashblockItem } from 'types/client/flashblocks';
 
 import { route } from 'nextjs-routes';
 
-import dayjs from 'lib/date/dayjs';
 import { Link } from 'toolkit/chakra/link';
 import { TableCell, TableRow } from 'toolkit/chakra/table';
 import FlashblockEntity from 'ui/shared/entities/flashblock/FlashblockEntity';
+import Time from 'ui/shared/time/Time';
 
 interface Props {
   data: FlashblockItem;
@@ -28,7 +28,7 @@ const FlashblocksTableItem = ({ data }: Props) => {
           ) : (
             <Text color="text.secondary">N/A</Text>
           ) }
-          { data.timestamp && <Text color="text.secondary">{ dayjs(data.timestamp).format('DD MMM, HH:mm:ss.SSS') }</Text> }
+          { data.timestamp && <Time color="text.secondary" timestamp={ data.timestamp } format="DD MMM, HH:mm:ss.SSS"/> }
         </HStack>
       </TableCell>
       <TableCell isNumeric>
diff --git a/ui/epochs/EpochsListItem.tsx b/ui/epochs/EpochsListItem.tsx
index 031cdad894..97bc326521 100644
--- a/ui/epochs/EpochsListItem.tsx
+++ b/ui/epochs/EpochsListItem.tsx
@@ -3,11 +3,13 @@ import React from 'react';
 
 import type { CeloEpochListItem } from 'types/api/epochs';
 
+import dayjs from 'lib/date/dayjs';
 import { Skeleton } from 'toolkit/chakra/skeleton';
-import DetailedInfoTimestamp from 'ui/shared/DetailedInfo/DetailedInfoTimestamp';
 import EpochEntity from 'ui/shared/entities/epoch/EpochEntity';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 import CeloEpochStatus from 'ui/shared/statusTag/CeloEpochStatus';
+import TextSeparator from 'ui/shared/TextSeparator';
+import Time from 'ui/shared/time/Time';
 import NativeCoinValue from 'ui/shared/value/NativeCoinValue';
 
 interface Props {
@@ -24,9 +26,11 @@ const EpochsListItem = ({ item, isLoading }: Props) => {
         <CeloEpochStatus isFinalized={ item.is_finalized } loading={ isLoading }/>
       </HStack>
       { item.timestamp && (
-        <HStack minH="30px" gap={ 0 } color="text.secondary" fontWeight={ 400 }>
-          <DetailedInfoTimestamp timestamp={ item.timestamp } isLoading={ isLoading } noIcon/>
-        </HStack>
+        <Skeleton loading={ isLoading } display="flex" alignItems="center" minH="30px" color="text.secondary">
+          <div>{ dayjs(item.timestamp).fromNow() }</div>
+          <TextSeparator/>
+          <Time timestamp={ item.timestamp } format="lll_s"/>
+        </Skeleton>
       ) }
       <HStack minH="30px">
         <Skeleton loading={ isLoading }>Block range</Skeleton>
diff --git a/ui/home/latestZetaChainCCTX/__screenshots__/LatestZetaChainCCTXs.pw.tsx_default_mobile-base-view-1.png b/ui/home/latestZetaChainCCTX/__screenshots__/LatestZetaChainCCTXs.pw.tsx_default_mobile-base-view-1.png
index eb66abd7ba..6ae1032bbc 100644
Binary files a/ui/home/latestZetaChainCCTX/__screenshots__/LatestZetaChainCCTXs.pw.tsx_default_mobile-base-view-1.png and b/ui/home/latestZetaChainCCTX/__screenshots__/LatestZetaChainCCTXs.pw.tsx_default_mobile-base-view-1.png differ
diff --git a/ui/marketplace/essentialDapps/revoke/components/ApprovalsListItem.tsx b/ui/marketplace/essentialDapps/revoke/components/ApprovalsListItem.tsx
index 1f36bc6722..a0286bc261 100644
--- a/ui/marketplace/essentialDapps/revoke/components/ApprovalsListItem.tsx
+++ b/ui/marketplace/essentialDapps/revoke/components/ApprovalsListItem.tsx
@@ -11,6 +11,7 @@ import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
 import NumberEntity from 'ui/shared/NumberEntity';
+import Time from 'ui/shared/time/Time';
 
 import useRevoke from '../hooks/useRevoke';
 import formatAllowance from '../lib/formatAllowance';
@@ -119,7 +120,7 @@ export default function ApprovalsListItem({
       <ListItemMobileGrid.Label isLoading={ isLoading }>Last updated</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value color="inherit">
         <Skeleton loading={ isLoading } display="flex" flexDir="column" rowGap={ 2 }>
-          <Text>{ dayjs(approval.timestamp).format('lll') }</Text>
+          <Time timestamp={ approval.timestamp }/>
           <Text>{ dayjs(approval.timestamp).fromNow() }</Text>
         </Skeleton>
       </ListItemMobileGrid.Value>
diff --git a/ui/megaEth/uptime/UptimeCharts.tsx b/ui/megaEth/uptime/UptimeCharts.tsx
index 80cb6e1f76..9e26d665c1 100644
--- a/ui/megaEth/uptime/UptimeCharts.tsx
+++ b/ui/megaEth/uptime/UptimeCharts.tsx
@@ -5,6 +5,7 @@ import React from 'react';
 import type { AxesConfigFn } from 'toolkit/components/charts/types';
 import type { UptimeHistoryFull, UptimeHistoryItem } from 'types/api/megaEth';
 
+import { useSettingsContext } from 'lib/contexts/settings';
 import { Heading } from 'toolkit/chakra/heading';
 import { ChartWidget } from 'toolkit/components/charts/ChartWidget';
 import { DAY, HOUR, SECOND } from 'toolkit/utils/consts';
@@ -21,14 +22,14 @@ type IntervalId = (typeof INTERVALS)[number]['id'];
 
 const TIME_FORMAT = '%e %b %Y, %H:%M:%S';
 
-const AXES_CONFIG_BASE: AxesConfigFn = ({ isEnlarged, isMobile }) => ({
+const AXES_CONFIG_BASE: (isLocalTime: boolean) => AxesConfigFn = (isLocalTime) => ({ isEnlarged, isMobile }) => ({
   y: {
     scale: { min: 0 },
   },
   x: {
     ticks: isEnlarged && !isMobile ? 8 : 5,
     tickFormatter: () => (d: d3.AxisDomain) => {
-      return d3.timeFormat('%H:%M')(d as Date);
+      return isLocalTime ? d3.timeFormat('%H:%M')(d as Date) : d3.utcFormat('%H:%M')(d as Date);
     },
   },
 });
@@ -80,15 +81,17 @@ const UptimeCharts = ({ historyData }: Props) => {
   const [ interval, setInterval ] = React.useState<IntervalId>('3h');
   const chartsConfig = useChartsConfig();
 
+  const { isLocalTime } = useSettingsContext() ?? { isLocalTime: true };
+
   const axesConfig = React.useMemo(() => {
     switch (interval) {
       case '3h':
       case '24h':
-        return AXES_CONFIG_BASE;
+        return AXES_CONFIG_BASE(isLocalTime);
       case '7d':
         return AXES_CONFIG_LONG;
     }
-  }, [ interval ]);
+  }, [ interval, isLocalTime ]);
 
   const tpsCharts = React.useMemo(() => {
     if (!historyData) {
@@ -111,11 +114,11 @@ const UptimeCharts = ({ historyData }: Props) => {
     const items = smoothedData
       .map(({ value, timestamp }) => {
         const date = new Date(timestamp * SECOND);
-        // Here and below,
-        // despite the other charts in the stats page, this one should display dates & time in the local timezone, not UTC.
-        // This is because it is a "time-based" chart not a "date-based" one.
-        // That is why we use d3.timeFormat() instead of dayjs.utcFormat() here.
-        return { date, value: Number(value.toFixed(0)), dateLabel: d3.timeFormat(TIME_FORMAT)(date) };
+        return {
+          date,
+          value: Number(value.toFixed(0)),
+          dateLabel: isLocalTime ? d3.timeFormat(TIME_FORMAT)(date) : d3.utcFormat(TIME_FORMAT)(date),
+        };
       })
       .filter(filterByInterval(interval, now));
 
@@ -127,7 +130,7 @@ const UptimeCharts = ({ historyData }: Props) => {
         charts: chartsConfig,
       },
     ];
-  }, [ chartsConfig, historyData, interval ]);
+  }, [ chartsConfig, historyData, interval, isLocalTime ]);
 
   const gasCharts = React.useMemo(() => {
     if (!historyData) {
@@ -152,7 +155,11 @@ const UptimeCharts = ({ historyData }: Props) => {
     const items = smoothedData
       .map(({ value, timestamp }) => {
         const date = new Date(timestamp * SECOND);
-        return { date, value: Number((value / 1_000_000).toFixed(2)), dateLabel: d3.timeFormat(TIME_FORMAT)(date) };
+        return {
+          date,
+          value: Number((value / 1_000_000).toFixed(2)),
+          dateLabel: isLocalTime ? d3.timeFormat(TIME_FORMAT)(date) : d3.utcFormat(TIME_FORMAT)(date),
+        };
       })
       .filter(filterByInterval(interval, now));
 
@@ -164,7 +171,7 @@ const UptimeCharts = ({ historyData }: Props) => {
         charts: chartsConfig,
       },
     ];
-  }, [ chartsConfig, historyData, interval ]);
+  }, [ chartsConfig, historyData, interval, isLocalTime ]);
 
   const blockIntervalCharts = React.useMemo(() => {
     if (!historyData) {
@@ -189,7 +196,11 @@ const UptimeCharts = ({ historyData }: Props) => {
     const items = smoothedData
       .map(({ value, timestamp }) => {
         const date = new Date(timestamp * SECOND);
-        return { date, value: Number(value.toFixed(1)), dateLabel: d3.timeFormat(TIME_FORMAT)(date) };
+        return {
+          date,
+          value: Number(value.toFixed(1)),
+          dateLabel: isLocalTime ? d3.timeFormat(TIME_FORMAT)(date) : d3.utcFormat(TIME_FORMAT)(date),
+        };
       })
       .filter(filterByInterval(interval, now));
 
@@ -201,7 +212,7 @@ const UptimeCharts = ({ historyData }: Props) => {
         charts: chartsConfig,
       },
     ];
-  }, [ chartsConfig, historyData, interval ]);
+  }, [ chartsConfig, historyData, interval, isLocalTime ]);
 
   const handleIntervalChange = React.useCallback((newInterval: IntervalId) => {
     setInterval(newInterval);
diff --git a/ui/nameDomain/NameDomainDetails.tsx b/ui/nameDomain/NameDomainDetails.tsx
index 3cf9f2bcde..f145131816 100644
--- a/ui/nameDomain/NameDomainDetails.tsx
+++ b/ui/nameDomain/NameDomainDetails.tsx
@@ -8,12 +8,12 @@ import { route } from 'nextjs-routes';
 
 import config from 'configs/app';
 import type { ResourceError } from 'lib/api/resources';
-import dayjs from 'lib/date/dayjs';
 import { Link } from 'toolkit/chakra/link';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import { Tooltip } from 'toolkit/chakra/tooltip';
 import { stripTrailingSlash } from 'toolkit/utils/url';
 import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
+import DetailedInfoTimestamp from 'ui/shared/DetailedInfo/DetailedInfoTimestamp';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import NftEntity from 'ui/shared/entities/nft/NftEntity';
 import IconSvg from 'ui/shared/IconSvg';
@@ -30,7 +30,6 @@ const NameDomainDetails = ({ query }: Props) => {
   const isLoading = query.isPlaceholderData;
 
   const otherAddresses = Object.entries(query.data?.other_addresses ?? {});
-  const hasExpired = query.data?.expiry_date && dayjs(query.data.expiry_date).isBefore(dayjs());
 
   return (
     <>
@@ -45,10 +44,7 @@ const NameDomainDetails = ({ query }: Props) => {
               Registration date
             </DetailedInfo.ItemLabel>
             <DetailedInfo.ItemValue>
-              <IconSvg name="clock" boxSize={ 5 } color="icon.primary" verticalAlign="middle" isLoading={ isLoading } mr={ 2 }/>
-              <Skeleton loading={ isLoading } display="inline" whiteSpace="pre-wrap" lineHeight="20px">
-                { dayjs(query.data.registration_date).format('llll') }
-              </Skeleton>
+              <DetailedInfoTimestamp timestamp={ query.data.registration_date } isLoading={ isLoading }/>
             </DetailedInfo.ItemValue>
           </>
         ) }
@@ -63,18 +59,7 @@ const NameDomainDetails = ({ query }: Props) => {
               Expiration date
             </DetailedInfo.ItemLabel>
             <DetailedInfo.ItemValue>
-              <IconSvg name="clock" boxSize={ 5 } color="icon.primary" verticalAlign="middle" isLoading={ isLoading } mr={ 2 } mt="-2px"/>
-              { hasExpired && (
-                <>
-                  <Skeleton loading={ isLoading } display="inline" whiteSpace="pre-wrap" lineHeight="24px">
-                    { dayjs(query.data.expiry_date).fromNow() }
-                  </Skeleton>
-                  <TextSeparator/>
-                </>
-              ) }
-              <Skeleton loading={ isLoading } display="inline" whiteSpace="pre-wrap" lineHeight="24px">
-                { dayjs(query.data.expiry_date).format('llll') }
-              </Skeleton>
+              <DetailedInfoTimestamp timestamp={ query.data?.expiry_date } isLoading={ isLoading } noRelativeTime/>
               <TextSeparator/>
               <Skeleton loading={ isLoading } color="text.secondary" display="inline">
                 <NameDomainExpiryStatus date={ query.data?.expiry_date }/>
@@ -236,6 +221,7 @@ const NameDomainDetails = ({ query }: Props) => {
             <DetailedInfo.ItemValue
               flexDir="column"
               alignItems="flex-start"
+              multiRow
             >
               { otherAddresses.map(([ type, address ]) => (
                 <Flex key={ type } columnGap={ 2 } minW="0" w="100%" overflow="hidden">
diff --git a/ui/nameServices/directories/ClustersDirectoryListItem.tsx b/ui/nameServices/directories/ClustersDirectoryListItem.tsx
index c807f499d3..44041c5683 100644
--- a/ui/nameServices/directories/ClustersDirectoryListItem.tsx
+++ b/ui/nameServices/directories/ClustersDirectoryListItem.tsx
@@ -8,6 +8,7 @@ import { Skeleton } from 'toolkit/chakra/skeleton';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import ClustersEntity from 'ui/shared/entities/clusters/ClustersEntity';
 import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
+import Time from 'ui/shared/time/Time';
 
 interface Props {
   item: ClustersDirectoryObject;
@@ -45,7 +46,7 @@ const ClustersDirectoryListItem = ({ item, isLoading, isClusterDetailsLoading }:
       </ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
         <Skeleton loading={ isLoading }>
-          <div>{ dayjs(item.createdAt).format('lll') }</div>
+          <Time timestamp={ item.createdAt } display="block"/>
           <div> { dayjs(item.createdAt).fromNow() }</div>
         </Skeleton>
       </ListItemMobileGrid.Value>
diff --git a/ui/nameServices/domains/NameDomainsListItem.tsx b/ui/nameServices/domains/NameDomainsListItem.tsx
index 9295a9827b..e8bf613d3e 100644
--- a/ui/nameServices/domains/NameDomainsListItem.tsx
+++ b/ui/nameServices/domains/NameDomainsListItem.tsx
@@ -8,6 +8,7 @@ import NameDomainExpiryStatus from 'ui/nameDomain/NameDomainExpiryStatus';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import EnsEntity from 'ui/shared/entities/ens/EnsEntity';
 import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
+import Time from 'ui/shared/time/Time';
 
 interface Props extends bens.Domain {
   isLoading: boolean;
@@ -42,7 +43,7 @@ const NameDomainsListItem = ({
           <ListItemMobileGrid.Label isLoading={ isLoading }>Registered on</ListItemMobileGrid.Label>
           <ListItemMobileGrid.Value>
             <Skeleton loading={ isLoading }>
-              <div>{ dayjs(registrationDate).format('lll') }</div>
+              <Time timestamp={ registrationDate }/>
               <div> { dayjs(registrationDate).fromNow() }</div>
             </Skeleton>
           </ListItemMobileGrid.Value>
@@ -54,7 +55,7 @@ const NameDomainsListItem = ({
           <ListItemMobileGrid.Label isLoading={ isLoading }>Expiration date</ListItemMobileGrid.Label>
           <ListItemMobileGrid.Value>
             <Skeleton loading={ isLoading } whiteSpace="pre-wrap">
-              <div>{ dayjs(expiryDate).format('lll') } </div>
+              <Time timestamp={ expiryDate } display="block"/>
               <NameDomainExpiryStatus date={ expiryDate }/>
             </Skeleton>
           </ListItemMobileGrid.Value>
diff --git a/ui/operation/tac/TacOperationLifecycleAccordionItemContent.tsx b/ui/operation/tac/TacOperationLifecycleAccordionItemContent.tsx
index 5263f3e6d5..1086d1dd8c 100644
--- a/ui/operation/tac/TacOperationLifecycleAccordionItemContent.tsx
+++ b/ui/operation/tac/TacOperationLifecycleAccordionItemContent.tsx
@@ -51,7 +51,7 @@ const TacOperationLifecycleAccordionItemContent = ({ isLast, data }: Props) => {
               alignItems="center"
               py="6px"
             >
-              <DetailedInfoTimestamp timestamp={ data.timestamp } noIcon isLoading={ false }/>
+              <DetailedInfoTimestamp timestamp={ data.timestamp } isLoading={ false } flexWrap={{ base: 'wrap', lg: 'nowrap' }}/>
             </GridItem>
           </>
         ) }
diff --git a/ui/pages/AdvancedFilter.tsx b/ui/pages/AdvancedFilter.tsx
index 755ba003ad..1ca8f9454a 100644
--- a/ui/pages/AdvancedFilter.tsx
+++ b/ui/pages/AdvancedFilter.tsx
@@ -163,7 +163,6 @@ const AdvancedFilter = () => {
                         { column.id === 'age' ? 'Timestamp' : column.name }
                       </chakra.span>
                     ) }
-                    { column.id === 'age' && <TimeFormatToggle ml={ 0 } mr={ 1 } verticalAlign="middle"/> }
                     <FilterByColumn
                       column={ column.id }
                       columnName={ column.name }
@@ -172,6 +171,7 @@ const AdvancedFilter = () => {
                       searchParams={ data?.search_params }
                       isLoading={ isPlaceholderData }
                     />
+                    { column.id === 'age' && <TimeFormatToggle ml={ 1 } verticalAlign="middle"/> }
                   </TableColumnHeader>
                 );
               }) }
diff --git a/ui/pages/BlockCountdown.pw.tsx b/ui/pages/BlockCountdown.pw.tsx
index bab5595e71..928314cc01 100644
--- a/ui/pages/BlockCountdown.pw.tsx
+++ b/ui/pages/BlockCountdown.pw.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
 
 import { test, expect } from 'playwright/lib';
+import * as pwConfig from 'playwright/utils/config';
 
 import BlockCountdown from './BlockCountdown';
 
-test('short period until the block +@mobile', async({ render, mockApiResponse }) => {
+test.describe('short period until the block', () => {
   const height = '1234567890';
   const hooksConfig = {
     router: {
@@ -12,25 +13,38 @@ test('short period until the block +@mobile', async({ render, mockApiResponse })
     },
   };
 
-  await mockApiResponse('general:block_countdown', {
-    result: {
-      CountdownBlock: height,
-      CurrentBlock: '1234567700',
-      RemainingBlock: '190',
-      EstimateTimeInSec: String(24 * 60 * 60 + 3 * 60 * 60 + 42 * 60 + 11),
-    },
-  }, {
-    queryParams: {
-      module: 'block',
-      action: 'getblockcountdown',
-      blockno: height,
-    },
+  test.beforeEach(async({ mockApiResponse }) => {
+    await mockApiResponse('general:block_countdown', {
+      result: {
+        CountdownBlock: height,
+        CurrentBlock: '1234567700',
+        RemainingBlock: '190',
+        EstimateTimeInSec: String(24 * 60 * 60 + 3 * 60 * 60 + 42 * 60 + 11),
+      },
+    }, {
+      queryParams: {
+        module: 'block',
+        action: 'getblockcountdown',
+        blockno: height,
+      },
+    });
+  });
+
+  test('desktop', async({ render }) => {
+    const component = await render(<BlockCountdown hideCapybaraRunner/>, { hooksConfig });
+    await expect(component).toHaveScreenshot();
+  });
+
+  test.describe('mobile', () => {
+    test.use({ viewport: pwConfig.viewport.mobile });
+    test('base view', async({ render }) => {
+      const component = await render(<BlockCountdown hideCapybaraRunner/>, { hooksConfig });
+      await expect(component).toHaveScreenshot();
+    });
   });
-  const component = await render(<BlockCountdown hideCapybaraRunner/>, { hooksConfig });
-  await expect(component).toHaveScreenshot();
 });
 
-test('long period until the block +@mobile', async({ render, mockApiResponse }) => {
+test.describe('long period until the block', () => {
   const height = '123456789012345678901234567890';
   const hooksConfig = {
     router: {
@@ -38,20 +52,33 @@ test('long period until the block +@mobile', async({ render, mockApiResponse })
     },
   };
 
-  await mockApiResponse('general:block_countdown', {
-    result: {
-      CountdownBlock: height,
-      CurrentBlock: '1234567700',
-      RemainingBlock: '123456789012345678900000000190',
-      EstimateTimeInSec: String(1234567890 * 24 * 60 * 60 + 3 * 60 * 60 + 42 * 60 + 11),
-    },
-  }, {
-    queryParams: {
-      module: 'block',
-      action: 'getblockcountdown',
-      blockno: height,
-    },
+  test.beforeEach(async({ mockApiResponse }) => {
+    await mockApiResponse('general:block_countdown', {
+      result: {
+        CountdownBlock: height,
+        CurrentBlock: '1234567700',
+        RemainingBlock: '123456789012345678900000000190',
+        EstimateTimeInSec: String(1234567890 * 24 * 60 * 60 + 3 * 60 * 60 + 42 * 60 + 11),
+      },
+    }, {
+      queryParams: {
+        module: 'block',
+        action: 'getblockcountdown',
+        blockno: height,
+      },
+    });
+  });
+
+  test('desktop', async({ render }) => {
+    const component = await render(<BlockCountdown hideCapybaraRunner/>, { hooksConfig });
+    await expect(component).toHaveScreenshot();
+  });
+
+  test.describe('mobile', () => {
+    test.use({ viewport: pwConfig.viewport.mobile });
+    test('base view', async({ render }) => {
+      const component = await render(<BlockCountdown hideCapybaraRunner/>, { hooksConfig });
+      await expect(component).toHaveScreenshot();
+    });
   });
-  const component = await render(<BlockCountdown hideCapybaraRunner/>, { hooksConfig });
-  await expect(component).toHaveScreenshot();
 });
diff --git a/ui/pages/BlockCountdown.tsx b/ui/pages/BlockCountdown.tsx
index ce2aa4a43a..406b1741b7 100644
--- a/ui/pages/BlockCountdown.tsx
+++ b/ui/pages/BlockCountdown.tsx
@@ -22,6 +22,7 @@ import createIcsFileBlob from 'ui/blockCountdown/createIcsFileBlob';
 import ChainIcon from 'ui/shared/externalChains/ChainIcon';
 import IconSvg from 'ui/shared/IconSvg';
 import StatsWidget from 'ui/shared/stats/StatsWidget';
+import Time from 'ui/shared/time/Time';
 
 import CapybaraRunner from '../games/CapybaraRunner';
 
@@ -80,7 +81,7 @@ const BlockCountdown = ({ hideCapybaraRunner }: Props) => {
             </Heading>
             <Box mt={ 2 } color="text.secondary">
               <Box fontWeight={ 600 }>Estimated target date</Box>
-              <Box>{ dayjs().add(Number(data.result.EstimateTimeInSec), 's').format('llll') }</Box>
+              <Time timestamp={ dayjs().add(Number(data.result.EstimateTimeInSec), 's').valueOf() }/>
             </Box>
             <Flex columnGap={ 2 } mt={ 3 }>
               <Link
diff --git a/ui/pages/GasTracker.tsx b/ui/pages/GasTracker.tsx
index 6fee2e92a7..26bd245ba1 100644
--- a/ui/pages/GasTracker.tsx
+++ b/ui/pages/GasTracker.tsx
@@ -7,7 +7,6 @@ import React from 'react';
 
 import config from 'configs/app';
 import useApiQuery from 'lib/api/useApiQuery';
-import dayjs from 'lib/date/dayjs';
 import { HOMEPAGE_STATS } from 'stubs/stats';
 import { Alert } from 'toolkit/chakra/alert';
 import { Heading } from 'toolkit/chakra/heading';
@@ -19,6 +18,7 @@ import GasTrackerPrices from 'ui/gasTracker/GasTrackerPrices';
 import GasInfoUpdateTimer from 'ui/shared/gas/GasInfoUpdateTimer';
 import NativeTokenIcon from 'ui/shared/NativeTokenIcon';
 import PageTitle from 'ui/shared/Page/PageTitle';
+import Time from 'ui/shared/time/Time';
 
 const GasTracker = () => {
   const { data, isPlaceholderData, isError, error, dataUpdatedAt } = useApiQuery('general:stats', {
@@ -50,7 +50,7 @@ const GasTracker = () => {
       { data?.gas_price_updated_at && (
         <Skeleton loading={ isLoading } whiteSpace="pre" display="flex" alignItems="center">
           <span>Last updated </span>
-          <chakra.span color="text.secondary">{ dayjs(data.gas_price_updated_at).format('DD MMM, HH:mm:ss') }</chakra.span>
+          <Time timestamp={ data.gas_price_updated_at } format="DD MMM, HH:mm:ss" color="text.secondary"/>
           { data.gas_prices_update_in !== 0 && (
             <GasInfoUpdateTimer
               key={ dataUpdatedAt }
diff --git a/ui/pages/SearchResults.pw.tsx b/ui/pages/SearchResults.pw.tsx
index 16d1f381ff..9f2e52c09a 100644
--- a/ui/pages/SearchResults.pw.tsx
+++ b/ui/pages/SearchResults.pw.tsx
@@ -60,7 +60,7 @@ test.describe('search by name', () => {
     const component = await render(<SearchResults/>, { hooksConfig });
     await resetScroll(page);
 
-    await expect(component.locator('main')).toHaveScreenshot();
+    await expect(component.locator('main')).toHaveScreenshot({ maxDiffPixels: 10 });
   });
 });
 
diff --git a/ui/pages/__screenshots__/AdvancedFilter.pw.tsx_dark-color-mode_base-view-dark-mode-1.png b/ui/pages/__screenshots__/AdvancedFilter.pw.tsx_dark-color-mode_base-view-dark-mode-1.png
index 5d61703db1..e2d10f4a0e 100644
Binary files a/ui/pages/__screenshots__/AdvancedFilter.pw.tsx_dark-color-mode_base-view-dark-mode-1.png and b/ui/pages/__screenshots__/AdvancedFilter.pw.tsx_dark-color-mode_base-view-dark-mode-1.png differ
diff --git a/ui/pages/__screenshots__/AdvancedFilter.pw.tsx_default_base-view-dark-mode-1.png b/ui/pages/__screenshots__/AdvancedFilter.pw.tsx_default_base-view-dark-mode-1.png
index 6078afef35..66dfda060f 100644
Binary files a/ui/pages/__screenshots__/AdvancedFilter.pw.tsx_default_base-view-dark-mode-1.png and b/ui/pages/__screenshots__/AdvancedFilter.pw.tsx_default_base-view-dark-mode-1.png differ
diff --git a/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_base-view-1.png b/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_base-view-1.png
index 0da236ae88..f0e181efa6 100644
Binary files a/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_base-view-1.png and b/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_base-view-1.png differ
diff --git a/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_mobile-base-view-1.png b/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_mobile-base-view-1.png
index 02ceab1638..339331f3a2 100644
Binary files a/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_mobile-base-view-1.png and b/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_mobile-base-view-1.png differ
diff --git a/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_mobile-with-anytrust-DA-1.png b/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_mobile-with-anytrust-DA-1.png
index ad1acf144d..904b6f2338 100644
Binary files a/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_mobile-with-anytrust-DA-1.png and b/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_mobile-with-anytrust-DA-1.png differ
diff --git a/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_mobile-with-celestia-DA-1.png b/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_mobile-with-celestia-DA-1.png
index 5182c39ef6..3cd60c4a6d 100644
Binary files a/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_mobile-with-celestia-DA-1.png and b/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_mobile-with-celestia-DA-1.png differ
diff --git a/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_with-anytrust-DA-1.png b/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_with-anytrust-DA-1.png
index f118691f10..c888817a5d 100644
Binary files a/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_with-anytrust-DA-1.png and b/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_with-anytrust-DA-1.png differ
diff --git a/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_with-celestia-DA-1.png b/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_with-celestia-DA-1.png
index 84ae107401..8e905b3395 100644
Binary files a/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_with-celestia-DA-1.png and b/ui/pages/__screenshots__/ArbitrumL2TxnBatch.pw.tsx_default_with-celestia-DA-1.png differ
diff --git a/ui/pages/__screenshots__/Block.pw.tsx_default_degradation-view-details-tab-1.png b/ui/pages/__screenshots__/Block.pw.tsx_default_degradation-view-details-tab-1.png
index 73d6abb472..98511e3147 100644
Binary files a/ui/pages/__screenshots__/Block.pw.tsx_default_degradation-view-details-tab-1.png and b/ui/pages/__screenshots__/Block.pw.tsx_default_degradation-view-details-tab-1.png differ
diff --git a/ui/pages/__screenshots__/BlockCountdown.pw.tsx_default_long-period-until-the-block-mobile-1.png b/ui/pages/__screenshots__/BlockCountdown.pw.tsx_default_long-period-until-the-block-desktop-1.png
similarity index 100%
rename from ui/pages/__screenshots__/BlockCountdown.pw.tsx_default_long-period-until-the-block-mobile-1.png
rename to ui/pages/__screenshots__/BlockCountdown.pw.tsx_default_long-period-until-the-block-desktop-1.png
diff --git a/ui/pages/__screenshots__/BlockCountdown.pw.tsx_default_long-period-until-the-block-mobile-base-view-1.png b/ui/pages/__screenshots__/BlockCountdown.pw.tsx_default_long-period-until-the-block-mobile-base-view-1.png
new file mode 100644
index 0000000000..f528224436
Binary files /dev/null and b/ui/pages/__screenshots__/BlockCountdown.pw.tsx_default_long-period-until-the-block-mobile-base-view-1.png differ
diff --git a/ui/pages/__screenshots__/BlockCountdown.pw.tsx_default_short-period-until-the-block-desktop-1.png b/ui/pages/__screenshots__/BlockCountdown.pw.tsx_default_short-period-until-the-block-desktop-1.png
new file mode 100644
index 0000000000..e99fe8e2ed
Binary files /dev/null and b/ui/pages/__screenshots__/BlockCountdown.pw.tsx_default_short-period-until-the-block-desktop-1.png differ
diff --git a/ui/pages/__screenshots__/BlockCountdown.pw.tsx_default_short-period-until-the-block-mobile-1.png b/ui/pages/__screenshots__/BlockCountdown.pw.tsx_default_short-period-until-the-block-mobile-1.png
deleted file mode 100644
index 5c856ea8f2..0000000000
Binary files a/ui/pages/__screenshots__/BlockCountdown.pw.tsx_default_short-period-until-the-block-mobile-1.png and /dev/null differ
diff --git a/ui/pages/__screenshots__/BlockCountdown.pw.tsx_default_short-period-until-the-block-mobile-base-view-1.png b/ui/pages/__screenshots__/BlockCountdown.pw.tsx_default_short-period-until-the-block-mobile-base-view-1.png
new file mode 100644
index 0000000000..85c39692c4
Binary files /dev/null and b/ui/pages/__screenshots__/BlockCountdown.pw.tsx_default_short-period-until-the-block-mobile-base-view-1.png differ
diff --git a/ui/pages/__screenshots__/BlockCountdown.pw.tsx_mobile_long-period-until-the-block-mobile-1.png b/ui/pages/__screenshots__/BlockCountdown.pw.tsx_mobile_long-period-until-the-block-mobile-1.png
deleted file mode 100644
index 8a2aa78cbb..0000000000
Binary files a/ui/pages/__screenshots__/BlockCountdown.pw.tsx_mobile_long-period-until-the-block-mobile-1.png and /dev/null differ
diff --git a/ui/pages/__screenshots__/BlockCountdown.pw.tsx_mobile_short-period-until-the-block-mobile-1.png b/ui/pages/__screenshots__/BlockCountdown.pw.tsx_mobile_short-period-until-the-block-mobile-1.png
deleted file mode 100644
index ec1388f59f..0000000000
Binary files a/ui/pages/__screenshots__/BlockCountdown.pw.tsx_mobile_short-period-until-the-block-mobile-1.png and /dev/null differ
diff --git a/ui/pages/__screenshots__/Cluster.pw.tsx_default_Cluster-Details-Page-mainnet-cluster-details-mobile-1.png b/ui/pages/__screenshots__/Cluster.pw.tsx_default_Cluster-Details-Page-mainnet-cluster-details-mobile-1.png
index e0a49db64e..e3427f0781 100644
Binary files a/ui/pages/__screenshots__/Cluster.pw.tsx_default_Cluster-Details-Page-mainnet-cluster-details-mobile-1.png and b/ui/pages/__screenshots__/Cluster.pw.tsx_default_Cluster-Details-Page-mainnet-cluster-details-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/Cluster.pw.tsx_default_Cluster-Details-Page-testnet-cluster-details-mobile-1.png b/ui/pages/__screenshots__/Cluster.pw.tsx_default_Cluster-Details-Page-testnet-cluster-details-mobile-1.png
index bc3be577ec..524a1ed921 100644
Binary files a/ui/pages/__screenshots__/Cluster.pw.tsx_default_Cluster-Details-Page-testnet-cluster-details-mobile-1.png and b/ui/pages/__screenshots__/Cluster.pw.tsx_default_Cluster-Details-Page-testnet-cluster-details-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/Cluster.pw.tsx_mobile_Cluster-Details-Page-mainnet-cluster-details-mobile-1.png b/ui/pages/__screenshots__/Cluster.pw.tsx_mobile_Cluster-Details-Page-mainnet-cluster-details-mobile-1.png
index f02f50eca6..64817b4055 100644
Binary files a/ui/pages/__screenshots__/Cluster.pw.tsx_mobile_Cluster-Details-Page-mainnet-cluster-details-mobile-1.png and b/ui/pages/__screenshots__/Cluster.pw.tsx_mobile_Cluster-Details-Page-mainnet-cluster-details-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/Cluster.pw.tsx_mobile_Cluster-Details-Page-testnet-cluster-details-mobile-1.png b/ui/pages/__screenshots__/Cluster.pw.tsx_mobile_Cluster-Details-Page-testnet-cluster-details-mobile-1.png
index d1592da46e..1faac7de92 100644
Binary files a/ui/pages/__screenshots__/Cluster.pw.tsx_mobile_Cluster-Details-Page-testnet-cluster-details-mobile-1.png and b/ui/pages/__screenshots__/Cluster.pw.tsx_mobile_Cluster-Details-Page-testnet-cluster-details-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/Epoch.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/Epoch.pw.tsx_default_base-view-mobile-1.png
index 04d99b53c8..bee12630a9 100644
Binary files a/ui/pages/__screenshots__/Epoch.pw.tsx_default_base-view-mobile-1.png and b/ui/pages/__screenshots__/Epoch.pw.tsx_default_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/Epoch.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/Epoch.pw.tsx_mobile_base-view-mobile-1.png
index 395b959b03..dbc41f5486 100644
Binary files a/ui/pages/__screenshots__/Epoch.pw.tsx_mobile_base-view-mobile-1.png and b/ui/pages/__screenshots__/Epoch.pw.tsx_mobile_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/Epochs.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/Epochs.pw.tsx_mobile_base-view-mobile-1.png
index a1ad743475..bd7b0e3402 100644
Binary files a/ui/pages/__screenshots__/Epochs.pw.tsx_mobile_base-view-mobile-1.png and b/ui/pages/__screenshots__/Epochs.pw.tsx_mobile_base-view-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/NameDomain.pw.tsx_default_details-tab-1.png b/ui/pages/__screenshots__/NameDomain.pw.tsx_default_details-tab-1.png
index 58b33949c2..bb746ac0d3 100644
Binary files a/ui/pages/__screenshots__/NameDomain.pw.tsx_default_details-tab-1.png and b/ui/pages/__screenshots__/NameDomain.pw.tsx_default_details-tab-1.png differ
diff --git a/ui/pages/__screenshots__/ScrollL2TxnBatch.pw.tsx_default_base-view-1.png b/ui/pages/__screenshots__/ScrollL2TxnBatch.pw.tsx_default_base-view-1.png
index 572a1ab5f3..bb3136d82f 100644
Binary files a/ui/pages/__screenshots__/ScrollL2TxnBatch.pw.tsx_default_base-view-1.png and b/ui/pages/__screenshots__/ScrollL2TxnBatch.pw.tsx_default_base-view-1.png differ
diff --git a/ui/pages/__screenshots__/ScrollL2TxnBatch.pw.tsx_default_mobile-base-view-1.png b/ui/pages/__screenshots__/ScrollL2TxnBatch.pw.tsx_default_mobile-base-view-1.png
index 3d8a1c1ac0..58f9070da8 100644
Binary files a/ui/pages/__screenshots__/ScrollL2TxnBatch.pw.tsx_default_mobile-base-view-1.png and b/ui/pages/__screenshots__/ScrollL2TxnBatch.pw.tsx_default_mobile-base-view-1.png differ
diff --git a/ui/pages/__screenshots__/SearchResults.pw.tsx_dark-color-mode_search-by-name-mobile-dark-mode-1.png b/ui/pages/__screenshots__/SearchResults.pw.tsx_dark-color-mode_search-by-name-mobile-dark-mode-1.png
index 319bed50ba..6e471747d8 100644
Binary files a/ui/pages/__screenshots__/SearchResults.pw.tsx_dark-color-mode_search-by-name-mobile-dark-mode-1.png and b/ui/pages/__screenshots__/SearchResults.pw.tsx_dark-color-mode_search-by-name-mobile-dark-mode-1.png differ
diff --git a/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-block-hash-mobile-1.png b/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-block-hash-mobile-1.png
index 6f3d6e7634..5c98d990e0 100644
Binary files a/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-block-hash-mobile-1.png and b/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-block-hash-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-block-number-mobile-1.png b/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-block-number-mobile-1.png
index 0da89d170c..6fdc2cb52b 100644
Binary files a/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-block-number-mobile-1.png and b/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-block-number-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-tac-operation-hash-mobile-1.png b/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-tac-operation-hash-mobile-1.png
index 30df0924da..1842f4b731 100644
Binary files a/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-tac-operation-hash-mobile-1.png and b/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-tac-operation-hash-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-tx-hash-mobile-1.png b/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-tx-hash-mobile-1.png
index b1eaf35d91..1b38a8854b 100644
Binary files a/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-tx-hash-mobile-1.png and b/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-tx-hash-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-user-op-hash-mobile-1.png b/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-user-op-hash-mobile-1.png
index 86a5d6f42b..7afacf35ec 100644
Binary files a/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-user-op-hash-mobile-1.png and b/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-user-op-hash-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-block-hash-mobile-1.png b/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-block-hash-mobile-1.png
index d810339bd4..c06665f185 100644
Binary files a/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-block-hash-mobile-1.png and b/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-block-hash-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-block-number-mobile-1.png b/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-block-number-mobile-1.png
index 4900371787..ad4540497e 100644
Binary files a/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-block-number-mobile-1.png and b/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-block-number-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-tac-operation-hash-mobile-1.png b/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-tac-operation-hash-mobile-1.png
index e80ecff1b1..6ad85d2ec5 100644
Binary files a/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-tac-operation-hash-mobile-1.png and b/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-tac-operation-hash-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-tx-hash-mobile-1.png b/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-tx-hash-mobile-1.png
index 16c2eec20c..66bae03e3a 100644
Binary files a/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-tx-hash-mobile-1.png and b/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-tx-hash-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-user-op-hash-mobile-1.png b/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-user-op-hash-mobile-1.png
index 8f0eae2067..3bf33685f1 100644
Binary files a/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-user-op-hash-mobile-1.png and b/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-user-op-hash-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/TacOperation.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png b/ui/pages/__screenshots__/TacOperation.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png
index 1ec094770d..0e4eebe87a 100644
Binary files a/ui/pages/__screenshots__/TacOperation.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png and b/ui/pages/__screenshots__/TacOperation.pw.tsx_dark-color-mode_base-view-dark-mode-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/TacOperation.pw.tsx_default_base-view-dark-mode-mobile-1.png b/ui/pages/__screenshots__/TacOperation.pw.tsx_default_base-view-dark-mode-mobile-1.png
index 693e8f7b5d..6ef558bfb9 100644
Binary files a/ui/pages/__screenshots__/TacOperation.pw.tsx_default_base-view-dark-mode-mobile-1.png and b/ui/pages/__screenshots__/TacOperation.pw.tsx_default_base-view-dark-mode-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/TacOperation.pw.tsx_default_pending-operation-1.png b/ui/pages/__screenshots__/TacOperation.pw.tsx_default_pending-operation-1.png
index da7829a8a2..f3330f3f96 100644
Binary files a/ui/pages/__screenshots__/TacOperation.pw.tsx_default_pending-operation-1.png and b/ui/pages/__screenshots__/TacOperation.pw.tsx_default_pending-operation-1.png differ
diff --git a/ui/pages/__screenshots__/TacOperation.pw.tsx_mobile_base-view-dark-mode-mobile-1.png b/ui/pages/__screenshots__/TacOperation.pw.tsx_mobile_base-view-dark-mode-mobile-1.png
index 7f1ae475a7..70731fd1eb 100644
Binary files a/ui/pages/__screenshots__/TacOperation.pw.tsx_mobile_base-view-dark-mode-mobile-1.png and b/ui/pages/__screenshots__/TacOperation.pw.tsx_mobile_base-view-dark-mode-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/UserOp.pw.tsx_default_base-view-1.png b/ui/pages/__screenshots__/UserOp.pw.tsx_default_base-view-1.png
index 16ea232a5f..225f747ed3 100644
Binary files a/ui/pages/__screenshots__/UserOp.pw.tsx_default_base-view-1.png and b/ui/pages/__screenshots__/UserOp.pw.tsx_default_base-view-1.png differ
diff --git a/ui/pages/__screenshots__/UserOp.pw.tsx_default_mobile-base-view-1.png b/ui/pages/__screenshots__/UserOp.pw.tsx_default_mobile-base-view-1.png
index 580f88d7d3..ceaebc0fc9 100644
Binary files a/ui/pages/__screenshots__/UserOp.pw.tsx_default_mobile-base-view-1.png and b/ui/pages/__screenshots__/UserOp.pw.tsx_default_mobile-base-view-1.png differ
diff --git a/ui/pages/__screenshots__/ZetaChainCCTX.pw.tsx_dark-color-mode_failed-transaction-dark-mode-mobile-1.png b/ui/pages/__screenshots__/ZetaChainCCTX.pw.tsx_dark-color-mode_failed-transaction-dark-mode-mobile-1.png
index 5f95978d8d..9967ab7161 100644
Binary files a/ui/pages/__screenshots__/ZetaChainCCTX.pw.tsx_dark-color-mode_failed-transaction-dark-mode-mobile-1.png and b/ui/pages/__screenshots__/ZetaChainCCTX.pw.tsx_dark-color-mode_failed-transaction-dark-mode-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/ZetaChainCCTX.pw.tsx_dark-color-mode_successful-transaction-dark-mode-mobile-1.png b/ui/pages/__screenshots__/ZetaChainCCTX.pw.tsx_dark-color-mode_successful-transaction-dark-mode-mobile-1.png
index 6dfefacbc5..17249a8803 100644
Binary files a/ui/pages/__screenshots__/ZetaChainCCTX.pw.tsx_dark-color-mode_successful-transaction-dark-mode-mobile-1.png and b/ui/pages/__screenshots__/ZetaChainCCTX.pw.tsx_dark-color-mode_successful-transaction-dark-mode-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/ZetaChainCCTX.pw.tsx_default_failed-transaction-dark-mode-mobile-1.png b/ui/pages/__screenshots__/ZetaChainCCTX.pw.tsx_default_failed-transaction-dark-mode-mobile-1.png
index e43173b3cf..7b221bb887 100644
Binary files a/ui/pages/__screenshots__/ZetaChainCCTX.pw.tsx_default_failed-transaction-dark-mode-mobile-1.png and b/ui/pages/__screenshots__/ZetaChainCCTX.pw.tsx_default_failed-transaction-dark-mode-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/ZetaChainCCTX.pw.tsx_default_successful-transaction-dark-mode-mobile-1.png b/ui/pages/__screenshots__/ZetaChainCCTX.pw.tsx_default_successful-transaction-dark-mode-mobile-1.png
index 6ad28b965d..034dc4d36a 100644
Binary files a/ui/pages/__screenshots__/ZetaChainCCTX.pw.tsx_default_successful-transaction-dark-mode-mobile-1.png and b/ui/pages/__screenshots__/ZetaChainCCTX.pw.tsx_default_successful-transaction-dark-mode-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/ZetaChainCCTX.pw.tsx_mobile_failed-transaction-dark-mode-mobile-1.png b/ui/pages/__screenshots__/ZetaChainCCTX.pw.tsx_mobile_failed-transaction-dark-mode-mobile-1.png
index eeb8d4d192..ddfd8d5a0c 100644
Binary files a/ui/pages/__screenshots__/ZetaChainCCTX.pw.tsx_mobile_failed-transaction-dark-mode-mobile-1.png and b/ui/pages/__screenshots__/ZetaChainCCTX.pw.tsx_mobile_failed-transaction-dark-mode-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/ZetaChainCCTX.pw.tsx_mobile_successful-transaction-dark-mode-mobile-1.png b/ui/pages/__screenshots__/ZetaChainCCTX.pw.tsx_mobile_successful-transaction-dark-mode-mobile-1.png
index 79be7044c1..2be3845b22 100644
Binary files a/ui/pages/__screenshots__/ZetaChainCCTX.pw.tsx_mobile_successful-transaction-dark-mode-mobile-1.png and b/ui/pages/__screenshots__/ZetaChainCCTX.pw.tsx_mobile_successful-transaction-dark-mode-mobile-1.png differ
diff --git a/ui/pages/__screenshots__/ZkEvmL2TxnBatch.pw.tsx_default_base-view-1.png b/ui/pages/__screenshots__/ZkEvmL2TxnBatch.pw.tsx_default_base-view-1.png
index d217ecbe71..a937590065 100644
Binary files a/ui/pages/__screenshots__/ZkEvmL2TxnBatch.pw.tsx_default_base-view-1.png and b/ui/pages/__screenshots__/ZkEvmL2TxnBatch.pw.tsx_default_base-view-1.png differ
diff --git a/ui/pages/__screenshots__/ZkEvmL2TxnBatch.pw.tsx_default_mobile-base-view-1.png b/ui/pages/__screenshots__/ZkEvmL2TxnBatch.pw.tsx_default_mobile-base-view-1.png
index 2eeb8a4479..6c632f6200 100644
Binary files a/ui/pages/__screenshots__/ZkEvmL2TxnBatch.pw.tsx_default_mobile-base-view-1.png and b/ui/pages/__screenshots__/ZkEvmL2TxnBatch.pw.tsx_default_mobile-base-view-1.png differ
diff --git a/ui/pages/__screenshots__/ZkSyncL2TxnBatch.pw.tsx_default_base-view-1.png b/ui/pages/__screenshots__/ZkSyncL2TxnBatch.pw.tsx_default_base-view-1.png
index f25b093d72..0ed465f704 100644
Binary files a/ui/pages/__screenshots__/ZkSyncL2TxnBatch.pw.tsx_default_base-view-1.png and b/ui/pages/__screenshots__/ZkSyncL2TxnBatch.pw.tsx_default_base-view-1.png differ
diff --git a/ui/pages/__screenshots__/ZkSyncL2TxnBatch.pw.tsx_default_mobile-base-view-1.png b/ui/pages/__screenshots__/ZkSyncL2TxnBatch.pw.tsx_default_mobile-base-view-1.png
index 656ef8bd6b..dd4f0ee300 100644
Binary files a/ui/pages/__screenshots__/ZkSyncL2TxnBatch.pw.tsx_default_mobile-base-view-1.png and b/ui/pages/__screenshots__/ZkSyncL2TxnBatch.pw.tsx_default_mobile-base-view-1.png differ
diff --git a/ui/searchResults/SearchResultListItem.tsx b/ui/searchResults/SearchResultListItem.tsx
index a9196aa591..24a289c2ec 100644
--- a/ui/searchResults/SearchResultListItem.tsx
+++ b/ui/searchResults/SearchResultListItem.tsx
@@ -34,6 +34,7 @@ import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 import type { SearchResultAppItem } from 'ui/shared/search/utils';
 import { getItemCategory, searchItemTitles } from 'ui/shared/search/utils';
 import TacOperationStatus from 'ui/shared/statusTag/TacOperationStatus';
+import Time from 'ui/shared/time/Time';
 
 import SearchResultEntityTag from './SearchResultEntityTag';
 
@@ -362,30 +363,30 @@ const SearchResultListItem = ({ data, searchTerm, isLoading, addressFormat }: Pr
               <HashStringShortenDynamic hash={ data.block_hash } as={ shouldHighlightHash ? 'mark' : 'span' }/>
             </Skeleton>
             <Skeleton loading={ isLoading } color="text.secondary" mr={ 2 }>
-              <span>{ dayjs(data.timestamp).format('llll') }</span>
+              <Time timestamp={ data.timestamp } format="lll_s"/>
             </Skeleton>
           </>
         );
       }
       case 'transaction': {
         return (
-          <Text color="text.secondary">{ dayjs(data.timestamp).format('llll') }</Text>
+          <Time timestamp={ data.timestamp } color="text.secondary" format="lll_s"/>
         );
       }
       case 'zetaChainCCTX': {
         return (
-          <Text color="text.secondary">{ dayjs(Number(data.cctx.last_update_timestamp) * SECOND).format('llll') }</Text>
+          <Time timestamp={ Number(data.cctx.last_update_timestamp) * SECOND } color="text.secondary" format="lll_s"/>
         );
       }
       case 'tac_operation': {
         return (
-          <Text color="text.secondary">{ dayjs(data.tac_operation.timestamp).format('llll') }</Text>
+          <Time timestamp={ data.tac_operation.timestamp } color="text.secondary" format="lll_s"/>
         );
       }
       case 'user_operation': {
 
         return (
-          <Text color="text.secondary">{ dayjs(data.timestamp).format('llll') }</Text>
+          <Time timestamp={ data.timestamp } color="text.secondary" format="lll_s"/>
         );
       }
       case 'label': {
diff --git a/ui/searchResults/SearchResultTableItem.tsx b/ui/searchResults/SearchResultTableItem.tsx
index d974536680..a0c8a88f64 100644
--- a/ui/searchResults/SearchResultTableItem.tsx
+++ b/ui/searchResults/SearchResultTableItem.tsx
@@ -34,6 +34,7 @@ import IconSvg from 'ui/shared/IconSvg';
 import type { SearchResultAppItem } from 'ui/shared/search/utils';
 import { getItemCategory, searchItemTitles } from 'ui/shared/search/utils';
 import TacOperationStatus from 'ui/shared/statusTag/TacOperationStatus';
+import Time from 'ui/shared/time/Time';
 
 import SearchResultEntityTag from './SearchResultEntityTag';
 
@@ -290,10 +291,10 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading, addressFormat }: P
                 </Flex>
               ) }
             </TableCell>
-            { !isFutureBlock && (
+            { !isFutureBlock && data.timestamp && (
               <TableCell fontSize="sm" verticalAlign="middle" isNumeric>
                 <Skeleton loading={ isLoading } color="text.secondary">
-                  <span>{ dayjs(data.timestamp).format('llll') }</span>
+                  <Time timestamp={ data.timestamp } format="lll_s"/>
                 </Skeleton>
               </TableCell>
             ) }
@@ -322,7 +323,7 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading, addressFormat }: P
               </TxEntity.Container>
             </TableCell>
             <TableCell fontSize="sm" verticalAlign="middle" isNumeric>
-              <Text color="text.secondary">{ dayjs(data.timestamp).format('llll') }</Text>
+              <Time timestamp={ data.timestamp } color="text.secondary" format="lll_s"/>
             </TableCell>
           </>
         );
@@ -350,7 +351,7 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading, addressFormat }: P
               </TxEntity.Container>
             </TableCell>
             <TableCell fontSize="sm" verticalAlign="middle" isNumeric>
-              <Text color="text.secondary">{ dayjs(Number(data.cctx.last_update_timestamp) * SECOND).format('llll') }</Text>
+              <Time timestamp={ Number(data.cctx.last_update_timestamp) * SECOND } color="text.secondary" format="lll_s"/>
             </TableCell>
           </>
         );
@@ -379,7 +380,7 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading, addressFormat }: P
               </OperationEntity.Container>
             </TableCell>
             <TableCell fontSize="sm" verticalAlign="middle" isNumeric>
-              <Text color="text.secondary">{ dayjs(data.tac_operation.timestamp).format('llll') }</Text>
+              <Time timestamp={ data.tac_operation.timestamp } color="text.secondary" format="lll_s"/>
             </TableCell>
           </>
         );
@@ -428,7 +429,7 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading, addressFormat }: P
               </UserOpEntity.Container>
             </TableCell>
             <TableCell fontSize="sm" verticalAlign="middle" isNumeric>
-              <Text color="text.secondary">{ dayjs(data.timestamp).format('llll') }</Text>
+              <Time timestamp={ data.timestamp } color="text.secondary" format="lll_s"/>
             </TableCell>
           </>
         );
diff --git a/ui/shared/DetailedInfo/DetailedInfoTimestamp.tsx b/ui/shared/DetailedInfo/DetailedInfoTimestamp.tsx
index 879814ece5..a3f47bed3d 100644
--- a/ui/shared/DetailedInfo/DetailedInfoTimestamp.tsx
+++ b/ui/shared/DetailedInfo/DetailedInfoTimestamp.tsx
@@ -1,31 +1,107 @@
+import type { StackProps } from '@chakra-ui/react';
+import { createListCollection, HStack } from '@chakra-ui/react';
 import React from 'react';
 
+import { useSettingsContext } from 'lib/contexts/settings';
 import dayjs from 'lib/date/dayjs';
+import { IconButton } from 'toolkit/chakra/icon-button';
+import type { SelectOption } from 'toolkit/chakra/select';
+import { SelectContent, SelectItem, SelectRoot, SelectControl } from 'toolkit/chakra/select';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import { TruncatedText } from 'toolkit/components/truncation/TruncatedText';
 import IconSvg from 'ui/shared/IconSvg';
 import TextSeparator from 'ui/shared/TextSeparator';
 
-type Props = {
-  // should be string, will be fixed on the back-end
+const FORMAT_OPTIONS = [
+  { label: 'Local', value: 'local' as const },
+  { label: 'UTC', value: 'utc' as const },
+  { label: 'Unix', value: 'unix' as const },
+];
+
+const collection = createListCollection<SelectOption>({
+  items: FORMAT_OPTIONS,
+});
+
+type Format = (typeof FORMAT_OPTIONS)[number]['value'];
+
+interface Props extends StackProps {
   timestamp: string | number;
   isLoading?: boolean;
-  noIcon?: boolean;
+  noRelativeTime?: boolean;
 };
 
-const DetailedInfoTimestamp = ({ timestamp, isLoading, noIcon }: Props) => {
+const DetailedInfoTimestamp = ({ timestamp, isLoading, noRelativeTime, ...rest }: Props) => {
+
+  const settings = useSettingsContext();
+
+  const [ format, setFormat ] = React.useState<Array<Format>>(settings?.isLocalTime === false ? [ 'utc' ] : [ 'local' ]);
+
+  const handleFormatChange = React.useCallback(({ value }: { value: Array<string> }) => {
+    setFormat(value as Array<Format>);
+  }, []);
+
+  const timeText = (() => {
+    if (format.includes('local')) {
+      return dayjs(timestamp).format('llll');
+    }
+
+    if (format.includes('utc')) {
+      return dayjs(timestamp).utc().format('MMM DD YYYY HH:mm:ss A');
+    }
+
+    return dayjs(timestamp).unix().toString();
+  })();
+
   return (
-    <>
-      { !noIcon && <IconSvg name="clock" boxSize={ 5 } color="icon.primary" isLoading={ isLoading } mr={{ base: 1, lg: 2 }}/> }
-      <Skeleton loading={ isLoading }>
-        { dayjs(timestamp).fromNow() }
-      </Skeleton>
-      <TextSeparator mx={ 2 }/>
-      <TruncatedText
-        text={ dayjs(timestamp).format('llll') }
-        loading={ isLoading }
-      />
-    </>
+    <HStack maxW="100%" minW="0" { ...rest }>
+      { !noRelativeTime && (
+        <>
+          <Skeleton loading={ isLoading } flexShrink={ 0 }>
+            { dayjs(timestamp).fromNow() }
+          </Skeleton>
+          <TextSeparator mx={ 0 }/>
+        </>
+      ) }
+      <HStack gap={ 1 } minW="0">
+        <SelectRoot
+          name="time_format"
+          collection={ collection }
+          defaultValue={ format }
+          onValueChange={ handleFormatChange }
+          variant="plain"
+          w="fit-content"
+        >
+          <SelectControl
+            triggerProps={{ asChild: true, minH: 'auto', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+            noIndicator
+            defaultValue={ format }
+          >
+            <IconButton
+              aria-label="Toggle time format"
+              variant="icon_secondary"
+              boxSize={ 5 }
+              borderRadius="sm"
+              selected={ !isLoading }
+              loadingSkeleton={ isLoading }
+            >
+              <IconSvg name="clock-light" boxSize="14px"/>
+            </IconButton>
+          </SelectControl>
+          <SelectContent>
+            { collection.items.map((item) => (
+              <SelectItem item={ item } key={ item.value }>
+                { item.label }
+              </SelectItem>
+            )) }
+          </SelectContent>
+        </SelectRoot>
+        <TruncatedText
+          text={ timeText }
+          loading={ isLoading }
+          minW="0"
+        />
+      </HStack>
+    </HStack>
   );
 };
 
diff --git a/ui/shared/gas/GasInfoTooltip.tsx b/ui/shared/gas/GasInfoTooltip.tsx
index 9b85dc3e48..e0246421f1 100644
--- a/ui/shared/gas/GasInfoTooltip.tsx
+++ b/ui/shared/gas/GasInfoTooltip.tsx
@@ -11,10 +11,10 @@ import type { ExcludeUndefined } from 'types/utils';
 import { route } from 'nextjs-routes';
 
 import config from 'configs/app';
-import dayjs from 'lib/date/dayjs';
 import { Link } from 'toolkit/chakra/link';
 import type { TooltipProps } from 'toolkit/chakra/tooltip';
 import { Tooltip } from 'toolkit/chakra/tooltip';
+import Time from 'ui/shared/time/Time';
 
 import GasInfoTooltipRow from './GasInfoTooltipRow';
 import GasInfoUpdateTimer from './GasInfoUpdateTimer';
@@ -45,7 +45,7 @@ const GasInfoTooltip = ({ children, data, dataUpdatedAt, placement }: Props) =>
         <Flex justifyContent="space-between" alignItems="center">
           <Box color="text.secondary">Last update</Box>
           <Flex color="text.secondary" justifyContent="flex-end" alignItems="center" columnGap={ 2 } ml={ 3 }>
-            { dayjs(data.gas_price_updated_at).format('MMM DD, HH:mm:ss') }
+            <Time timestamp={ data.gas_price_updated_at } format="MMM DD, HH:mm:ss"/>
             { data.gas_prices_update_in !== 0 &&
               <GasInfoUpdateTimer key={ dataUpdatedAt } startTime={ dataUpdatedAt } duration={ data.gas_prices_update_in }/> }
           </Flex>
diff --git a/ui/shared/time/Time.tsx b/ui/shared/time/Time.tsx
new file mode 100644
index 0000000000..28afda6724
--- /dev/null
+++ b/ui/shared/time/Time.tsx
@@ -0,0 +1,19 @@
+import type { BoxProps } from '@chakra-ui/react';
+import { chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import { useSettingsContext } from 'lib/contexts/settings';
+import dayjs, { FORMATS } from 'lib/date/dayjs';
+
+interface Props extends BoxProps {
+  timestamp: string | number;
+  format?: string;
+}
+
+const Time = ({ timestamp, format = 'lll', ...rest }: Props) => {
+  const settings = useSettingsContext();
+  const formatStr = FORMATS[format as keyof typeof FORMATS] || format;
+  return <chakra.span { ...rest }>{ dayjs(timestamp).utc(settings?.isLocalTime).format(formatStr) }</chakra.span>;
+};
+
+export default React.memo(Time);
diff --git a/ui/shared/time/TimeFormatToggle.tsx b/ui/shared/time/TimeFormatToggle.tsx
index 6c7207331f..0f1de5cf98 100644
--- a/ui/shared/time/TimeFormatToggle.tsx
+++ b/ui/shared/time/TimeFormatToggle.tsx
@@ -1,13 +1,14 @@
+import type { StackProps } from '@chakra-ui/react';
+import { chakra, HStack } from '@chakra-ui/react';
 import React from 'react';
 
 import { useSettingsContext } from 'lib/contexts/settings';
 import * as mixpanel from 'lib/mixpanel/index';
 import { IconButton } from 'toolkit/chakra/icon-button';
-import type { IconButtonProps } from 'toolkit/chakra/icon-button';
 import { Tooltip } from 'toolkit/chakra/tooltip';
 import IconSvg from 'ui/shared/IconSvg';
 
-interface Props extends IconButtonProps {}
+interface Props extends StackProps {}
 
 const TimeFormatToggle = (props: Props) => {
   const settings = useSettingsContext();
@@ -18,22 +19,31 @@ const TimeFormatToggle = (props: Props) => {
     mixpanel.logEvent(mixpanel.EventTypes.BUTTON_CLICK, { Content: 'Switch time format', Source: 'Table header' });
   }, [ settings ]);
 
+  const text = (() => {
+    if (timeFormat === 'relative') {
+      return null;
+    }
+
+    return <chakra.span color="icon.secondary">{ settings?.isLocalTime ? 'Local' : 'UTC' }</chakra.span>;
+  })();
+
   return (
-    <Tooltip content="Toggle time format">
-      <IconButton
-        aria-label="Toggle time format"
-        variant="icon_secondary"
-        onClick={ handleClick }
-        boxSize={ 5 }
-        selected={ timeFormat === 'absolute' }
-        borderRadius="sm"
-        ml={ 2 }
-        verticalAlign="bottom"
-        { ...props }
-      >
-        <IconSvg name="clock-light" boxSize="14px"/>
-      </IconButton>
-    </Tooltip>
+    <HStack display="inline-flex" gap={ 1 } ml={ 2 } verticalAlign="bottom" { ...props }>
+      <Tooltip content="Toggle time format">
+        <IconButton
+          aria-label="Toggle time format"
+          variant="icon_secondary"
+          onClick={ handleClick }
+          boxSize={ 5 }
+          selected={ timeFormat === 'absolute' }
+          borderRadius="sm"
+          verticalAlign="bottom"
+        >
+          <IconSvg name="clock-light" boxSize="14px"/>
+        </IconButton>
+      </Tooltip>
+      { text }
+    </HStack>
   );
 };
 
diff --git a/ui/shared/time/TimeWithTooltip.tsx b/ui/shared/time/TimeWithTooltip.tsx
index e8453c30c2..3ce9ac9fd9 100644
--- a/ui/shared/time/TimeWithTooltip.tsx
+++ b/ui/shared/time/TimeWithTooltip.tsx
@@ -34,10 +34,11 @@ const TimeWithTooltip = ({ timestamp, fallbackText, isLoading, enableIncrement,
     }
 
     if (timeFormat === 'relative') {
-      return <Tooltip content={ dayjs(timestamp).format('llll') }><span>{ timeAgo }</span></Tooltip>;
+      const content = settings?.isLocalTime ? dayjs(timestamp).format('llll') : dayjs(timestamp).utc().format('llll');
+      return <Tooltip content={ content }><span>{ timeAgo }</span></Tooltip>;
     }
 
-    return <Tooltip content={ timeAgo }><span>{ dayjs(timestamp).format('lll') }</span></Tooltip>;
+    return <Tooltip content={ timeAgo }><span>{ dayjs(timestamp).utc(settings?.isLocalTime).format('lll') }</span></Tooltip>;
   })();
 
   return (
diff --git a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestBlock.tsx b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestBlock.tsx
index 1688ef9536..a62155b0e2 100644
--- a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestBlock.tsx
+++ b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestBlock.tsx
@@ -5,11 +5,11 @@ import type { ItemsProps } from './types';
 import type * as multichain from 'types/client/multichain-aggregator';
 import type { SearchResultBlock } from 'types/client/search';
 
-import dayjs from 'lib/date/dayjs';
 import highlightText from 'lib/highlightText';
 import { Tag } from 'toolkit/chakra/tag';
 import * as BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
+import Time from 'ui/shared/time/Time';
 
 const SearchBarSuggestBlock = ({ data, isMobile, searchTerm, chainInfo }: ItemsProps<SearchResultBlock | multichain.QuickSearchResultBlock>) => {
   const icon = <BlockEntity.Icon chain={ chainInfo }/>;
@@ -57,7 +57,7 @@ const SearchBarSuggestBlock = ({ data, isMobile, searchTerm, chainInfo }: ItemsP
       <HashStringShortenDynamic hash={ data.block_hash } noTooltip/>
     </Text>
   ) : null;
-  const date = 'timestamp' in data && data.timestamp && !isFutureBlock ? dayjs(data.timestamp).format('llll') : undefined;
+  const date = 'timestamp' in data && data.timestamp && !isFutureBlock ? <Time timestamp={ data.timestamp } color="text.secondary" format="lll_s"/> : undefined;
   const futureBlockText = <Text color="text.secondary">Learn estimated time for this block to be created.</Text>;
   const blockType = 'block_type' in data ? data.block_type : undefined;
 
@@ -71,7 +71,7 @@ const SearchBarSuggestBlock = ({ data, isMobile, searchTerm, chainInfo }: ItemsP
           { blockType === 'uncle' && <Tag ml="auto">Uncle</Tag> }
         </Flex>
         { hash }
-        { isFutureBlock ? futureBlockText : <Text color="text.secondary">{ date }</Text> }
+        { isFutureBlock ? futureBlockText : date }
       </>
     );
   }
diff --git a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestTacOperation.tsx b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestTacOperation.tsx
index 4ebca19ac6..b362965c00 100644
--- a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestTacOperation.tsx
+++ b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestTacOperation.tsx
@@ -1,13 +1,13 @@
-import { Text, Flex, chakra } from '@chakra-ui/react';
+import { Flex, chakra } from '@chakra-ui/react';
 import React from 'react';
 
 import type { ItemsProps } from './types';
 import type { SearchResultTacOperation } from 'types/api/search';
 
-import dayjs from 'lib/date/dayjs';
 import * as OperationEntity from 'ui/shared/entities/operation/OperationEntity';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 import TacOperationStatus from 'ui/shared/statusTag/TacOperationStatus';
+import Time from 'ui/shared/time/Time';
 
 const SearchBarSuggestTacOperation = ({ data, isMobile }: ItemsProps<SearchResultTacOperation>) => {
   const icon = <OperationEntity.Icon type={ data.tac_operation.type }/>;
@@ -17,7 +17,6 @@ const SearchBarSuggestTacOperation = ({ data, isMobile }: ItemsProps<SearchResul
     </chakra.mark>
   );
   const status = <TacOperationStatus status={ data.tac_operation.type }/>;
-  const date = dayjs(data.tac_operation.timestamp).format('llll');
 
   if (isMobile) {
     return (
@@ -27,7 +26,7 @@ const SearchBarSuggestTacOperation = ({ data, isMobile }: ItemsProps<SearchResul
           { hash }
           { status }
         </Flex>
-        <Text color="text.secondary">{ date }</Text>
+        <Time timestamp={ data.tac_operation.timestamp } color="text.secondary" format="lll_s"/>
       </>
     );
   }
@@ -39,7 +38,7 @@ const SearchBarSuggestTacOperation = ({ data, isMobile }: ItemsProps<SearchResul
         { hash }
         { status }
       </Flex>
-      <Text color="text.secondary" textAlign="end" flexShrink={ 0 } ml="auto">{ date }</Text>
+      <Time timestamp={ data.tac_operation.timestamp } color="text.secondary" textAlign="end" flexShrink={ 0 } ml="auto" format="lll_s"/>
     </Flex>
   );
 };
diff --git a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestTx.tsx b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestTx.tsx
index d39720ec94..4f24fb9f77 100644
--- a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestTx.tsx
+++ b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestTx.tsx
@@ -5,9 +5,9 @@ import type { ItemsProps } from './types';
 import type { SearchResultTx } from 'types/api/search';
 import type * as multichain from 'types/client/multichain-aggregator';
 
-import dayjs from 'lib/date/dayjs';
 import * as TxEntity from 'ui/shared/entities/tx/TxEntity';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
+import Time from 'ui/shared/time/Time';
 
 const SearchBarSuggestTx = ({ data, isMobile, chainInfo }: ItemsProps<SearchResultTx | multichain.QuickSearchResultTransaction>) => {
   const icon = <TxEntity.Icon chain={ chainInfo }/>;
@@ -16,7 +16,7 @@ const SearchBarSuggestTx = ({ data, isMobile, chainInfo }: ItemsProps<SearchResu
       <HashStringShortenDynamic hash={ data.transaction_hash } noTooltip/>
     </chakra.mark>
   );
-  const date = 'timestamp' in data && data.timestamp ? dayjs(data.timestamp).format('llll') : undefined;
+  const date = 'timestamp' in data && data.timestamp ? <Time timestamp={ data.timestamp } format="lll_s"/> : undefined;
 
   if (isMobile) {
     return (
diff --git a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestUserOp.tsx b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestUserOp.tsx
index cdc1ed5576..11c56a01b3 100644
--- a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestUserOp.tsx
+++ b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestUserOp.tsx
@@ -1,12 +1,12 @@
-import { chakra, Text, Flex } from '@chakra-ui/react';
+import { chakra, Flex } from '@chakra-ui/react';
 import React from 'react';
 
 import type { ItemsProps } from './types';
 import type { SearchResultUserOp } from 'types/api/search';
 
-import dayjs from 'lib/date/dayjs';
 import * as UserOpEntity from 'ui/shared/entities/userOp/UserOpEntity';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
+import Time from 'ui/shared/time/Time';
 
 const SearchBarSuggestUserOp = ({ data, isMobile }: ItemsProps<SearchResultUserOp>) => {
   const icon = <UserOpEntity.Icon/>;
@@ -15,7 +15,6 @@ const SearchBarSuggestUserOp = ({ data, isMobile }: ItemsProps<SearchResultUserO
       <HashStringShortenDynamic hash={ data.user_operation_hash } noTooltip/>
     </chakra.mark>
   );
-  const date = dayjs(data.timestamp).format('llll');
 
   if (isMobile) {
     return (
@@ -24,7 +23,7 @@ const SearchBarSuggestUserOp = ({ data, isMobile }: ItemsProps<SearchResultUserO
           { icon }
           { hash }
         </Flex>
-        <Text color="text.secondary">{ date }</Text>
+        <Time timestamp={ data.timestamp } color="text.secondary" format="lll_s"/>
       </>
     );
   }
@@ -35,7 +34,7 @@ const SearchBarSuggestUserOp = ({ data, isMobile }: ItemsProps<SearchResultUserO
         { icon }
         { hash }
       </Flex>
-      <Text color="text.secondary" textAlign="end" flexShrink={ 0 } ml="auto">{ date }</Text>
+      <Time timestamp={ data.timestamp } color="text.secondary" textAlign="end" flexShrink={ 0 } ml="auto" format="lll_s"/>
     </Flex>
   );
 };
diff --git a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestZetaChainCCTX.tsx b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestZetaChainCCTX.tsx
index 3f9b994986..5a0e8f5ad0 100644
--- a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestZetaChainCCTX.tsx
+++ b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestZetaChainCCTX.tsx
@@ -1,14 +1,14 @@
-import { Flex, Text, chakra } from '@chakra-ui/react';
+import { Flex, chakra } from '@chakra-ui/react';
 import React from 'react';
 
 import type { CctxListItem } from '@blockscout/zetachain-cctx-types';
 
 import { route } from 'nextjs/routes';
 
-import dayjs from 'lib/date/dayjs';
 import { SECOND } from 'toolkit/utils/consts';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 import IconSvg from 'ui/shared/IconSvg';
+import Time from 'ui/shared/time/Time';
 
 import SearchBarSuggestItemLink from './SearchBarSuggestItemLink';
 
@@ -29,8 +29,6 @@ const SearchBarSuggestZetaChainCCTX = ({ data, isMobile, searchTerm, onClick }:
     </chakra.span>
   );
 
-  const date = dayjs(Number(data.last_update_timestamp) * SECOND).format('llll');
-
   let content;
 
   if (isMobile) {
@@ -40,7 +38,7 @@ const SearchBarSuggestZetaChainCCTX = ({ data, isMobile, searchTerm, onClick }:
           { icon }
           { hash }
         </Flex>
-        <Text color="text.secondary">{ date }</Text>
+        <Time timestamp={ Number(data.last_update_timestamp) * SECOND } color="text.secondary" format="lll_s"/>
       </>
     );
   } else {
@@ -50,7 +48,7 @@ const SearchBarSuggestZetaChainCCTX = ({ data, isMobile, searchTerm, onClick }:
           { icon }
           { hash }
         </Flex>
-        <Text color="text.secondary" textAlign="end" flexShrink={ 0 } ml="auto">{ date }</Text>
+        <Time timestamp={ Number(data.last_update_timestamp) * SECOND } color="text.secondary" textAlign="end" flexShrink={ 0 } ml="auto" format="lll_s"/>
       </Flex>
     );
   }
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBarDesktop.pw.tsx_default_search-by-block-hash-1.png b/ui/snippets/searchBar/__screenshots__/SearchBarDesktop.pw.tsx_default_search-by-block-hash-1.png
index 9c1616bdca..0ef90eee4f 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBarDesktop.pw.tsx_default_search-by-block-hash-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBarDesktop.pw.tsx_default_search-by-block-hash-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBarDesktop.pw.tsx_default_search-by-block-number-1.png b/ui/snippets/searchBar/__screenshots__/SearchBarDesktop.pw.tsx_default_search-by-block-number-1.png
index b4c7335c7c..58646ace11 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBarDesktop.pw.tsx_default_search-by-block-number-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBarDesktop.pw.tsx_default_search-by-block-number-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBarDesktop.pw.tsx_default_search-by-tac-operation-hash-1.png b/ui/snippets/searchBar/__screenshots__/SearchBarDesktop.pw.tsx_default_search-by-tac-operation-hash-1.png
index 8996e62d01..425887e53f 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBarDesktop.pw.tsx_default_search-by-tac-operation-hash-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBarDesktop.pw.tsx_default_search-by-tac-operation-hash-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBarDesktop.pw.tsx_default_search-by-tx-hash-1.png b/ui/snippets/searchBar/__screenshots__/SearchBarDesktop.pw.tsx_default_search-by-tx-hash-1.png
index a5b8dda3de..7875441640 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBarDesktop.pw.tsx_default_search-by-tx-hash-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBarDesktop.pw.tsx_default_search-by-tx-hash-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBarDesktop.pw.tsx_default_search-by-user-op-hash-1.png b/ui/snippets/searchBar/__screenshots__/SearchBarDesktop.pw.tsx_default_search-by-user-op-hash-1.png
index ae0d249da9..6a044a99e6 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBarDesktop.pw.tsx_default_search-by-user-op-hash-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBarDesktop.pw.tsx_default_search-by-user-op-hash-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBarMobile.pw.tsx_default_search-by-block-hash-1.png b/ui/snippets/searchBar/__screenshots__/SearchBarMobile.pw.tsx_default_search-by-block-hash-1.png
index 6a030e0efd..a1c237c85d 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBarMobile.pw.tsx_default_search-by-block-hash-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBarMobile.pw.tsx_default_search-by-block-hash-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBarMobile.pw.tsx_default_search-by-block-number-1.png b/ui/snippets/searchBar/__screenshots__/SearchBarMobile.pw.tsx_default_search-by-block-number-1.png
index 964932d6fb..900b49fbaf 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBarMobile.pw.tsx_default_search-by-block-number-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBarMobile.pw.tsx_default_search-by-block-number-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBarMobile.pw.tsx_default_search-by-tac-operation-hash-1.png b/ui/snippets/searchBar/__screenshots__/SearchBarMobile.pw.tsx_default_search-by-tac-operation-hash-1.png
index 4faaf13827..9389719d6e 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBarMobile.pw.tsx_default_search-by-tac-operation-hash-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBarMobile.pw.tsx_default_search-by-tac-operation-hash-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBarMobile.pw.tsx_default_search-by-tx-hash-1.png b/ui/snippets/searchBar/__screenshots__/SearchBarMobile.pw.tsx_default_search-by-tx-hash-1.png
index dd9ebfe927..4ecd978d4c 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBarMobile.pw.tsx_default_search-by-tx-hash-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBarMobile.pw.tsx_default_search-by-tx-hash-1.png differ
diff --git a/ui/snippets/searchBar/__screenshots__/SearchBarMobile.pw.tsx_default_search-by-user-op-hash-1.png b/ui/snippets/searchBar/__screenshots__/SearchBarMobile.pw.tsx_default_search-by-user-op-hash-1.png
index d0b293ceda..15ea663d9b 100644
Binary files a/ui/snippets/searchBar/__screenshots__/SearchBarMobile.pw.tsx_default_search-by-user-op-hash-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBarMobile.pw.tsx_default_search-by-user-op-hash-1.png differ
diff --git a/ui/snippets/topBar/TopBar.pw.tsx b/ui/snippets/topBar/TopBar.pw.tsx
index 940df534b3..5c9c1dad00 100644
--- a/ui/snippets/topBar/TopBar.pw.tsx
+++ b/ui/snippets/topBar/TopBar.pw.tsx
@@ -25,7 +25,7 @@ test('default view +@dark-mode', async({ render, mockApiResponse, page, injectMe
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1500, height: 220 } });
 
   await component.getByLabel('User settings').click();
-  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1500, height: 400 } });
+  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1500, height: 450 } });
 });
 
 test('default view +@mobile -@default', async({ render, mockApiResponse, page, injectMetaMaskProvider }) => {
@@ -34,7 +34,7 @@ test('default view +@mobile -@default', async({ render, mockApiResponse, page, i
   const component = await render(<TopBar/>);
 
   await component.getByLabel('User settings').click();
-  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1500, height: 400 } });
+  await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1500, height: 450 } });
 });
 
 test('with secondary coin price +@mobile', async({ render, mockApiResponse }) => {
diff --git a/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_dark-color-mode_default-view-dark-mode-2.png b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_dark-color-mode_default-view-dark-mode-2.png
index f5d51f5bba..831c450f8f 100644
Binary files a/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_dark-color-mode_default-view-dark-mode-2.png and b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_dark-color-mode_default-view-dark-mode-2.png differ
diff --git a/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_default_default-view-dark-mode-2.png b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_default_default-view-dark-mode-2.png
index e40c308c20..3465a82402 100644
Binary files a/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_default_default-view-dark-mode-2.png and b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_default_default-view-dark-mode-2.png differ
diff --git a/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_mobile_default-view-mobile---default-1.png b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_mobile_default-view-mobile---default-1.png
index 4d377df5b9..d725da3c92 100644
Binary files a/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_mobile_default-view-mobile---default-1.png and b/ui/snippets/topBar/__screenshots__/TopBar.pw.tsx_mobile_default-view-mobile---default-1.png differ
diff --git a/ui/snippets/topBar/settings/Settings.tsx b/ui/snippets/topBar/settings/Settings.tsx
index 2ff9821a6a..ef7125bd9f 100644
--- a/ui/snippets/topBar/settings/Settings.tsx
+++ b/ui/snippets/topBar/settings/Settings.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex } from '@chakra-ui/react';
+import { Flex, Separator, VStack } from '@chakra-ui/react';
 import React from 'react';
 
 import { IconButton } from 'toolkit/chakra/icon-button';
@@ -10,6 +10,7 @@ import IconSvg from 'ui/shared/IconSvg';
 import SettingsAddressFormat from './SettingsAddressFormat';
 import SettingsColorTheme from './SettingsColorTheme';
 import SettingsIdentIcon from './SettingsIdentIcon';
+import SettingsLocalTime from './SettingsLocalTime';
 import SettingsScamTokens from './SettingsScamTokens';
 
 const Settings = () => {
@@ -52,10 +53,14 @@ const Settings = () => {
       <PopoverContent overflowY="hidden" w="auto" fontSize="sm">
         <PopoverBody>
           <SettingsColorTheme onSelect={ popover.onClose }/>
-          <Box borderColor="border.divider" borderTopWidth="1px" my={ 3 }/>
+          <Separator my={ 3 }/>
           <SettingsIdentIcon/>
           <SettingsAddressFormat/>
-          <SettingsScamTokens/>
+          <Separator my={ 3 }/>
+          <VStack gap={ 1 }>
+            <SettingsScamTokens/>
+            <SettingsLocalTime/>
+          </VStack>
         </PopoverBody>
       </PopoverContent>
     </PopoverRoot>
diff --git a/ui/snippets/topBar/settings/SettingsAddressFormat.tsx b/ui/snippets/topBar/settings/SettingsAddressFormat.tsx
index 9ee63a3403..150052e288 100644
--- a/ui/snippets/topBar/settings/SettingsAddressFormat.tsx
+++ b/ui/snippets/topBar/settings/SettingsAddressFormat.tsx
@@ -18,7 +18,8 @@ const SettingsAddressFormat = () => {
     <Switch
       id="address-format"
       defaultChecked={ addressFormat === 'bech32' }
-      onChange={ toggleAddressFormat } mt={ 4 }
+      onChange={ toggleAddressFormat }
+      mt={ 4 }
       direction="rtl"
       justifyContent="space-between"
       w="100%"
diff --git a/ui/snippets/topBar/settings/SettingsLocalTime.tsx b/ui/snippets/topBar/settings/SettingsLocalTime.tsx
new file mode 100644
index 0000000000..3fbe2f38db
--- /dev/null
+++ b/ui/snippets/topBar/settings/SettingsLocalTime.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+
+import { useSettingsContext } from 'lib/contexts/settings';
+import { Switch } from 'toolkit/chakra/switch';
+
+const SettingsLocalTime = () => {
+  const settingsContext = useSettingsContext();
+
+  if (!settingsContext) {
+    return null;
+  }
+
+  const { isLocalTime, toggleIsLocalTime } = settingsContext;
+
+  return (
+    <Switch
+      id="local-time"
+      defaultChecked={ isLocalTime }
+      onChange={ toggleIsLocalTime }
+      direction="rtl"
+      justifyContent="space-between"
+      w="100%"
+      minH="34px"
+    >
+      Local time format
+    </Switch>
+  );
+};
+
+export default React.memo(SettingsLocalTime);
diff --git a/ui/snippets/topBar/settings/SettingsScamTokens.tsx b/ui/snippets/topBar/settings/SettingsScamTokens.tsx
index e22cab0717..404c36e486 100644
--- a/ui/snippets/topBar/settings/SettingsScamTokens.tsx
+++ b/ui/snippets/topBar/settings/SettingsScamTokens.tsx
@@ -1,4 +1,3 @@
-import { Box } from '@chakra-ui/react';
 import React from 'react';
 
 import config from 'configs/app';
@@ -27,19 +26,17 @@ const SettingsScamTokens = () => {
   }
 
   return (
-    <>
-      <Box borderColor="divider" borderTopWidth="1px" my={ 3 }/>
-      <Switch
-        id="scam-tokens"
-        checked={ isChecked }
-        onChange={ handleChange }
-        direction="rtl"
-        justifyContent="space-between"
-        w="100%"
-      >
-        Hide scam tokens
-      </Switch>
-    </>
+    <Switch
+      id="scam-tokens"
+      checked={ isChecked }
+      onChange={ handleChange }
+      direction="rtl"
+      justifyContent="space-between"
+      w="100%"
+      minH="34px"
+    >
+      Hide scam tokens
+    </Switch>
   );
 };
 
diff --git a/ui/tx/details/TxInfo.tsx b/ui/tx/details/TxInfo.tsx
index e43371804f..f12fdbddf5 100644
--- a/ui/tx/details/TxInfo.tsx
+++ b/ui/tx/details/TxInfo.tsx
@@ -393,9 +393,7 @@ const TxInfo = ({ data, tacOperations, isLoading, socketStatus }: Props) => {
             Timestamp
           </DetailedInfo.ItemLabel>
           <DetailedInfo.ItemValue multiRow>
-            <Flex alignItems="center" maxW="100%">
-              <DetailedInfoTimestamp timestamp={ data.timestamp } isLoading={ isLoading }/>
-            </Flex>
+            <DetailedInfoTimestamp timestamp={ data.timestamp } isLoading={ isLoading }/>
             { data.confirmation_duration && (
               <Flex alignItems="center">
                 <TextSeparator hideBelow="lg"/>
diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_dark-color-mode_between-addresses-mobile-dark-mode-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_dark-color-mode_between-addresses-mobile-dark-mode-1.png
index 143698c111..61153bfaf8 100644
Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_dark-color-mode_between-addresses-mobile-dark-mode-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_dark-color-mode_between-addresses-mobile-dark-mode-1.png differ
diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_dark-color-mode_with-actions-uniswap-mobile-dark-mode-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_dark-color-mode_with-actions-uniswap-mobile-dark-mode-1.png
index e80c0eeabd..18180d0b4c 100644
Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_dark-color-mode_with-actions-uniswap-mobile-dark-mode-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_dark-color-mode_with-actions-uniswap-mobile-dark-mode-1.png differ
diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_between-addresses-mobile-dark-mode-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_between-addresses-mobile-dark-mode-1.png
index 6a18bc25cf..d3f103949d 100644
Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_between-addresses-mobile-dark-mode-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_between-addresses-mobile-dark-mode-1.png differ
diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_creating-contact-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_creating-contact-1.png
index 6fc2444cac..826bd763d9 100644
Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_creating-contact-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_creating-contact-1.png differ
diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_l2-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_l2-1.png
index 2ff0f8fc04..17ed9da84a 100644
Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_l2-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_l2-1.png differ
diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_stability-customization-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_stability-customization-1.png
index 604d1bc782..6579e9f15f 100644
Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_stability-customization-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_stability-customization-1.png differ
diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-actions-uniswap-mobile-dark-mode-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-actions-uniswap-mobile-dark-mode-1.png
index 911b5bbecc..eb669324e3 100644
Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-actions-uniswap-mobile-dark-mode-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-actions-uniswap-mobile-dark-mode-1.png differ
diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-blob-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-blob-1.png
index 393a16d4b6..870555c249 100644
Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-blob-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-blob-1.png differ
diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-decoded-raw-reason-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-decoded-raw-reason-1.png
index 483460407f..65fe79f5b5 100644
Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-decoded-raw-reason-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-decoded-raw-reason-1.png differ
diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-decoded-revert-reason-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-decoded-revert-reason-1.png
index 6af2ba136b..48fa8acd7c 100644
Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-decoded-revert-reason-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-decoded-revert-reason-1.png differ
diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-external-txs-mobile-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-external-txs-mobile-1.png
index 25b5d6f066..e92fba0565 100644
Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-external-txs-mobile-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-external-txs-mobile-1.png differ
diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-grouped-fees-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-grouped-fees-1.png
index 987c9722cb..7d654d8f6e 100644
Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-grouped-fees-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-grouped-fees-1.png differ
diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-interop-message-in-mobile-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-interop-message-in-mobile-1.png
index 506c773419..f86d062fd9 100644
Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-interop-message-in-mobile-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-interop-message-in-mobile-1.png differ
diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-interop-message-out-mobile-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-interop-message-out-mobile-1.png
index 82e53f7922..cb880f9d88 100644
Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-interop-message-out-mobile-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-interop-message-out-mobile-1.png differ
diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-token-transfer-mobile-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-token-transfer-mobile-1.png
index e28f10e543..f18feca260 100644
Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-token-transfer-mobile-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_with-token-transfer-mobile-1.png differ
diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_without-testnet-warning-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_without-testnet-warning-1.png
index 589cd5df4b..f663acae64 100644
Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_without-testnet-warning-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_default_without-testnet-warning-1.png differ
diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_between-addresses-mobile-dark-mode-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_between-addresses-mobile-dark-mode-1.png
index 1469321b54..164fa5b504 100644
Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_between-addresses-mobile-dark-mode-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_between-addresses-mobile-dark-mode-1.png differ
diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_with-actions-uniswap-mobile-dark-mode-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_with-actions-uniswap-mobile-dark-mode-1.png
index 398a8eb360..54f1cffceb 100644
Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_with-actions-uniswap-mobile-dark-mode-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_with-actions-uniswap-mobile-dark-mode-1.png differ
diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_with-external-txs-mobile-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_with-external-txs-mobile-1.png
index ee087a410a..c836431d9e 100644
Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_with-external-txs-mobile-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_with-external-txs-mobile-1.png differ
diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_with-interop-message-in-mobile-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_with-interop-message-in-mobile-1.png
index 16507b4bd0..f7e2b5f087 100644
Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_with-interop-message-in-mobile-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_with-interop-message-in-mobile-1.png differ
diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_with-interop-message-out-mobile-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_with-interop-message-out-mobile-1.png
index c3e707338d..32317dd5ad 100644
Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_with-interop-message-out-mobile-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_with-interop-message-out-mobile-1.png differ
diff --git a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_with-token-transfer-mobile-1.png b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_with-token-transfer-mobile-1.png
index ad01ecafd3..7ab0bdc1d6 100644
Binary files a/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_with-token-transfer-mobile-1.png and b/ui/tx/details/__screenshots__/TxInfo.pw.tsx_mobile_with-token-transfer-mobile-1.png differ
diff --git a/ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchDetailsAnyTrustDA.tsx b/ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchDetailsAnyTrustDA.tsx
index 210cce4841..6dc7841379 100644
--- a/ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchDetailsAnyTrustDA.tsx
+++ b/ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchDetailsAnyTrustDA.tsx
@@ -42,7 +42,7 @@ const ArbitrumL2TxnBatchDetailsAnyTrustDA = ({ data }: Props) => {
           <DetailsTimestamp timestamp={ data.timeout }/> :
           (
             <>
-              <Text>{ dayjs(data.timeout).format('llll') }</Text>
+              <DetailsTimestamp timestamp={ data.timeout } noRelativeTime/>
               <TextSeparator/>
               <Text color="red.500">{ dayjs(data.timeout).diff(dayjs(), 'day') } days left</Text>
             </>
diff --git a/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchBlobCallData.tsx b/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchBlobCallData.tsx
index dcd20301f8..cc054f9dec 100644
--- a/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchBlobCallData.tsx
+++ b/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchBlobCallData.tsx
@@ -1,7 +1,7 @@
 import { GridItem } from '@chakra-ui/react';
 import React from 'react';
 
-import dayjs from 'lib/date/dayjs';
+import DetailedInfoTimestamp from 'ui/shared/DetailedInfo/DetailedInfoTimestamp';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
 
 import OptimisticL2TxnBatchBlobWrapper from './OptimisticL2TxnBatchBlobWrapper';
@@ -16,8 +16,8 @@ const OptimisticL2TxnBatchBlobCallData = ({ l1TxHashes, l1Timestamp, isLoading }
   return (
     <OptimisticL2TxnBatchBlobWrapper isLoading={ isLoading }>
       <GridItem fontWeight={ 600 }>Timestamp</GridItem>
-      <GridItem whiteSpace="normal">
-        { dayjs(l1Timestamp).fromNow() } | { dayjs(l1Timestamp).format('llll') }
+      <GridItem overflow="hidden">
+        <DetailedInfoTimestamp timestamp={ l1Timestamp } isLoading={ isLoading } flexWrap={{ base: 'wrap', lg: 'nowrap' }}/>
       </GridItem>
       <GridItem fontWeight={ 600 }>L1 txn hash{ l1TxHashes.length > 1 ? 'es' : '' }</GridItem>
       <GridItem overflow="hidden" display="flex" flexDir="column" rowGap={ 2 }>
diff --git a/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchBlobCelestia.tsx b/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchBlobCelestia.tsx
index 23bd0cf0fd..efae78cb96 100644
--- a/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchBlobCelestia.tsx
+++ b/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchBlobCelestia.tsx
@@ -3,9 +3,9 @@ import React from 'react';
 
 import type { OptimisticL2BlobTypeCelestia } from 'types/api/optimisticL2';
 
-import dayjs from 'lib/date/dayjs';
 import CeleniumLink from 'ui/shared/batch/CeleniumLink';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import DetailedInfoTimestamp from 'ui/shared/DetailedInfo/DetailedInfoTimestamp';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 
@@ -35,8 +35,8 @@ const OptimisticL2TxnBatchBlobCelestia = ({ blobs, isLoading }: Props) => {
               { blob.height }
             </GridItem>
             <GridItem fontWeight={ 600 }>Timestamp</GridItem>
-            <GridItem whiteSpace="normal" colSpan={ 2 }>
-              { dayjs(blob.l1_timestamp).fromNow() } | { dayjs(blob.l1_timestamp).format('llll') }
+            <GridItem overflow="hidden" colSpan={ 2 }>
+              <DetailedInfoTimestamp timestamp={ blob.l1_timestamp } isLoading={ isLoading } flexWrap={{ base: 'wrap', lg: 'nowrap' }}/>
             </GridItem>
             <GridItem fontWeight={ 600 }>L1 txn hash</GridItem>
             <GridItem overflow="hidden" colSpan={ 2 }>
diff --git a/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchBlobEip4844.tsx b/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchBlobEip4844.tsx
index d3e4b8e459..090ab5b50f 100644
--- a/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchBlobEip4844.tsx
+++ b/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchBlobEip4844.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 
 import type { OptimisticL2BlobTypeEip4844 } from 'types/api/optimisticL2';
 
-import dayjs from 'lib/date/dayjs';
+import DetailedInfoTimestamp from 'ui/shared/DetailedInfo/DetailedInfoTimestamp';
 import BlobEntityL1 from 'ui/shared/entities/blob/BlobEntityL1';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
 
@@ -25,8 +25,8 @@ const OptimisticL2TxnBatchBlobEip4844 = ({ blobs, isLoading }: Props) => {
               <BlobEntityL1 hash={ blob.hash }/>
             </GridItem>
             <GridItem fontWeight={ 600 }>Timestamp</GridItem>
-            <GridItem whiteSpace="normal">
-              { dayjs(blob.l1_timestamp).fromNow() } | { dayjs(blob.l1_timestamp).format('llll') }
+            <GridItem overflow="hidden">
+              <DetailedInfoTimestamp timestamp={ blob.l1_timestamp } isLoading={ isLoading } flexWrap={{ base: 'wrap', lg: 'nowrap' }}/>
             </GridItem>
             <GridItem fontWeight={ 600 }>L1 txn hash</GridItem>
             <GridItem overflow="hidden">
diff --git a/ui/txnBatches/optimisticL2/__screenshots__/OptimisticL2TxnBatchDetails.pw.tsx_default_EIP-4844-blob-container-mobile-1.png b/ui/txnBatches/optimisticL2/__screenshots__/OptimisticL2TxnBatchDetails.pw.tsx_default_EIP-4844-blob-container-mobile-1.png
index 03acc45bb5..0f14c3e7e8 100644
Binary files a/ui/txnBatches/optimisticL2/__screenshots__/OptimisticL2TxnBatchDetails.pw.tsx_default_EIP-4844-blob-container-mobile-1.png and b/ui/txnBatches/optimisticL2/__screenshots__/OptimisticL2TxnBatchDetails.pw.tsx_default_EIP-4844-blob-container-mobile-1.png differ
diff --git a/ui/txnBatches/optimisticL2/__screenshots__/OptimisticL2TxnBatchDetails.pw.tsx_default_call-data-blob-container-mobile-1.png b/ui/txnBatches/optimisticL2/__screenshots__/OptimisticL2TxnBatchDetails.pw.tsx_default_call-data-blob-container-mobile-1.png
index cb4971b960..080cf05f4a 100644
Binary files a/ui/txnBatches/optimisticL2/__screenshots__/OptimisticL2TxnBatchDetails.pw.tsx_default_call-data-blob-container-mobile-1.png and b/ui/txnBatches/optimisticL2/__screenshots__/OptimisticL2TxnBatchDetails.pw.tsx_default_call-data-blob-container-mobile-1.png differ
diff --git a/ui/txnBatches/optimisticL2/__screenshots__/OptimisticL2TxnBatchDetails.pw.tsx_default_celestia-blob-container-mobile-1.png b/ui/txnBatches/optimisticL2/__screenshots__/OptimisticL2TxnBatchDetails.pw.tsx_default_celestia-blob-container-mobile-1.png
index aadc3f44d7..5c12c37d9f 100644
Binary files a/ui/txnBatches/optimisticL2/__screenshots__/OptimisticL2TxnBatchDetails.pw.tsx_default_celestia-blob-container-mobile-1.png and b/ui/txnBatches/optimisticL2/__screenshots__/OptimisticL2TxnBatchDetails.pw.tsx_default_celestia-blob-container-mobile-1.png differ
diff --git a/ui/txnBatches/optimisticL2/__screenshots__/OptimisticL2TxnBatchDetails.pw.tsx_mobile_EIP-4844-blob-container-mobile-1.png b/ui/txnBatches/optimisticL2/__screenshots__/OptimisticL2TxnBatchDetails.pw.tsx_mobile_EIP-4844-blob-container-mobile-1.png
index 4bbeacbdad..556f12fdd9 100644
Binary files a/ui/txnBatches/optimisticL2/__screenshots__/OptimisticL2TxnBatchDetails.pw.tsx_mobile_EIP-4844-blob-container-mobile-1.png and b/ui/txnBatches/optimisticL2/__screenshots__/OptimisticL2TxnBatchDetails.pw.tsx_mobile_EIP-4844-blob-container-mobile-1.png differ
diff --git a/ui/txnBatches/optimisticL2/__screenshots__/OptimisticL2TxnBatchDetails.pw.tsx_mobile_call-data-blob-container-mobile-1.png b/ui/txnBatches/optimisticL2/__screenshots__/OptimisticL2TxnBatchDetails.pw.tsx_mobile_call-data-blob-container-mobile-1.png
index 1ff6164529..c8618b97cf 100644
Binary files a/ui/txnBatches/optimisticL2/__screenshots__/OptimisticL2TxnBatchDetails.pw.tsx_mobile_call-data-blob-container-mobile-1.png and b/ui/txnBatches/optimisticL2/__screenshots__/OptimisticL2TxnBatchDetails.pw.tsx_mobile_call-data-blob-container-mobile-1.png differ
diff --git a/ui/txnBatches/optimisticL2/__screenshots__/OptimisticL2TxnBatchDetails.pw.tsx_mobile_celestia-blob-container-mobile-1.png b/ui/txnBatches/optimisticL2/__screenshots__/OptimisticL2TxnBatchDetails.pw.tsx_mobile_celestia-blob-container-mobile-1.png
index 7e740e1dc7..8c6b55623d 100644
Binary files a/ui/txnBatches/optimisticL2/__screenshots__/OptimisticL2TxnBatchDetails.pw.tsx_mobile_celestia-blob-container-mobile-1.png and b/ui/txnBatches/optimisticL2/__screenshots__/OptimisticL2TxnBatchDetails.pw.tsx_mobile_celestia-blob-container-mobile-1.png differ
diff --git a/ui/txnBatches/zkSyncL2/ZkSyncL2TxnBatchHashesInfo.tsx b/ui/txnBatches/zkSyncL2/ZkSyncL2TxnBatchHashesInfo.tsx
index 0dddb1dedf..bd63a77e62 100644
--- a/ui/txnBatches/zkSyncL2/ZkSyncL2TxnBatchHashesInfo.tsx
+++ b/ui/txnBatches/zkSyncL2/ZkSyncL2TxnBatchHashesInfo.tsx
@@ -1,4 +1,3 @@
-import { Flex } from '@chakra-ui/react';
 import React from 'react';
 
 import type { ZkSyncBatch } from 'types/api/zkSyncL2';
@@ -39,9 +38,7 @@ const ZkSyncL2TxnBatchHashesInfo = ({ isLoading, data }: Props) => {
               maxW="100%"
             />
             { data.commit_transaction_timestamp && (
-              <Flex alignItems="center" maxW="100%">
-                <DetailedInfoTimestamp timestamp={ data.commit_transaction_timestamp } isLoading={ isLoading }/>
-              </Flex>
+              <DetailedInfoTimestamp timestamp={ data.commit_transaction_timestamp } isLoading={ isLoading }/>
             ) }
           </>
         ) : <Skeleton loading={ isLoading }>Pending</Skeleton> }
@@ -62,9 +59,7 @@ const ZkSyncL2TxnBatchHashesInfo = ({ isLoading, data }: Props) => {
               maxW="100%"
             />
             { data.prove_transaction_timestamp && (
-              <Flex alignItems="center" maxW="100%">
-                <DetailedInfoTimestamp timestamp={ data.prove_transaction_timestamp } isLoading={ isLoading }/>
-              </Flex>
+              <DetailedInfoTimestamp timestamp={ data.prove_transaction_timestamp } isLoading={ isLoading }/>
             ) }
           </>
         ) : <Skeleton loading={ isLoading }>Pending</Skeleton> }
@@ -85,9 +80,7 @@ const ZkSyncL2TxnBatchHashesInfo = ({ isLoading, data }: Props) => {
               maxW="100%"
             />
             { data.execute_transaction_timestamp && (
-              <Flex alignItems="center" maxW="100%">
-                <DetailedInfoTimestamp timestamp={ data.execute_transaction_timestamp } isLoading={ isLoading }/>
-              </Flex>
+              <DetailedInfoTimestamp timestamp={ data.execute_transaction_timestamp } isLoading={ isLoading }/>
             ) }
           </>
         ) : <Skeleton loading={ isLoading }>Pending</Skeleton> }
diff --git a/ui/zetaChain/__screenshots__/ZetaChainCCTXsTab.pw.tsx_dark-color-mode_base-view-dark-mode-1.png b/ui/zetaChain/__screenshots__/ZetaChainCCTXsTab.pw.tsx_dark-color-mode_base-view-dark-mode-1.png
index 584596bb01..22be9bd365 100644
Binary files a/ui/zetaChain/__screenshots__/ZetaChainCCTXsTab.pw.tsx_dark-color-mode_base-view-dark-mode-1.png and b/ui/zetaChain/__screenshots__/ZetaChainCCTXsTab.pw.tsx_dark-color-mode_base-view-dark-mode-1.png differ
diff --git a/ui/zetaChain/__screenshots__/ZetaChainCCTXsTab.pw.tsx_dark-color-mode_mobile-base-view-dark-mode-1.png b/ui/zetaChain/__screenshots__/ZetaChainCCTXsTab.pw.tsx_dark-color-mode_mobile-base-view-dark-mode-1.png
index 59a89c3455..a3a1c88420 100644
Binary files a/ui/zetaChain/__screenshots__/ZetaChainCCTXsTab.pw.tsx_dark-color-mode_mobile-base-view-dark-mode-1.png and b/ui/zetaChain/__screenshots__/ZetaChainCCTXsTab.pw.tsx_dark-color-mode_mobile-base-view-dark-mode-1.png differ
diff --git a/ui/zetaChain/__screenshots__/ZetaChainCCTXsTab.pw.tsx_default_base-view-dark-mode-1.png b/ui/zetaChain/__screenshots__/ZetaChainCCTXsTab.pw.tsx_default_base-view-dark-mode-1.png
index 445cf08c42..30859ef191 100644
Binary files a/ui/zetaChain/__screenshots__/ZetaChainCCTXsTab.pw.tsx_default_base-view-dark-mode-1.png and b/ui/zetaChain/__screenshots__/ZetaChainCCTXsTab.pw.tsx_default_base-view-dark-mode-1.png differ
diff --git a/ui/zetaChain/__screenshots__/ZetaChainCCTXsTab.pw.tsx_default_mobile-base-view-dark-mode-1.png b/ui/zetaChain/__screenshots__/ZetaChainCCTXsTab.pw.tsx_default_mobile-base-view-dark-mode-1.png
index be88fc8684..028cba3d4d 100644
Binary files a/ui/zetaChain/__screenshots__/ZetaChainCCTXsTab.pw.tsx_default_mobile-base-view-dark-mode-1.png and b/ui/zetaChain/__screenshots__/ZetaChainCCTXsTab.pw.tsx_default_mobile-base-view-dark-mode-1.png differ
diff --git a/ui/zetaChain/cctxs/ZetaChainCCTXListItem.tsx b/ui/zetaChain/cctxs/ZetaChainCCTXListItem.tsx
index 7a8de21f81..ca4039f5cd 100644
--- a/ui/zetaChain/cctxs/ZetaChainCCTXListItem.tsx
+++ b/ui/zetaChain/cctxs/ZetaChainCCTXListItem.tsx
@@ -9,6 +9,7 @@ import { SECOND } from 'toolkit/utils/consts';
 import AddressEntityZetaChain from 'ui/shared/entities/address/AddressEntityZetaChain';
 import TxEntityZetaChainCC from 'ui/shared/entities/tx/TxEntityZetaChainCC';
 import TextSeparator from 'ui/shared/TextSeparator';
+import Time from 'ui/shared/time/Time';
 import ZetaChainCCTXReducedStatus from 'ui/shared/zetaChain/ZetaChainCCTXReducedStatus';
 import ZetaChainCCTXValue from 'ui/shared/zetaChain/ZetaChainCCTXValue';
 
@@ -35,9 +36,7 @@ const LatestZetaChainCCTXItem = ({ tx, isLoading, animation }: Props) => {
       <Skeleton loading={ isLoading } display="flex" color="text.secondary" gap={ 2 } justifyContent="start">
         { dayjs(Number(tx.last_update_timestamp) * SECOND).fromNow() }
         <TextSeparator mx={ 0 }/>
-        <Text flex={ 1 } minWidth={ 0 } truncate>
-          { dayjs(Number(tx.last_update_timestamp) * SECOND).format('llll') }
-        </Text>
+        <Time timestamp={ Number(tx.last_update_timestamp) * SECOND } format="lll_s"/>
       </Skeleton>
       <Grid gridTemplateColumns="100px 1fr" gap={ 2 }>
         <Text>Sender</Text>
diff --git a/ui/zetaChain/cctxs/ZetaChainCCTxsTable.tsx b/ui/zetaChain/cctxs/ZetaChainCCTxsTable.tsx
index 485b506018..c47801a76e 100644
--- a/ui/zetaChain/cctxs/ZetaChainCCTxsTable.tsx
+++ b/ui/zetaChain/cctxs/ZetaChainCCTxsTable.tsx
@@ -52,11 +52,10 @@ const ZetaChainCCTxsTable = ({
         <TableHeaderSticky top={ top }>
           <TableRow>
             <TableColumnHeader width="300px">
-              <Flex alignItems="center">
+              <Flex alignItems="center" columnGap={ 2 }>
                 <chakra.span lineHeight="24px" verticalAlign="middle">
                   CCTx hash
                 </chakra.span>
-                <TimeFormatToggle mr={ 2 }/>
                 <ZetaChainFilterByColumn
                   column="age"
                   columnName="Age"
@@ -64,6 +63,7 @@ const ZetaChainCCTxsTable = ({
                   handleFilterChange={ onFilterChange }
                   isLoading={ isPlaceholderData }
                 />
+                <TimeFormatToggle ml={ 0 }/>
               </Flex>
             </TableColumnHeader>
             <TableColumnHeader width="105px">