diff --git a/web/src/components/MemoContent/EmbeddedContent/EmbeddedMemo.tsx b/web/src/components/MemoContent/EmbeddedContent/EmbeddedMemo.tsx
index b0caf3ce1688d..8446a3652ff97 100644
--- a/web/src/components/MemoContent/EmbeddedContent/EmbeddedMemo.tsx
+++ b/web/src/components/MemoContent/EmbeddedContent/EmbeddedMemo.tsx
@@ -1,4 +1,5 @@
 import copy from "copy-to-clipboard";
+import i18n from "i18next";
 import { ArrowUpRightIcon } from "lucide-react";
 import { useContext, useEffect } from "react";
 import toast from "react-hot-toast";
@@ -22,6 +23,7 @@ const EmbeddedMemo = ({ resourceId: uid, params: paramsStr }: Props) => {
   const memoStore = useMemoStore();
   const memoName = `memos/${uid}`;
   const memo = memoStore.getMemoByName(memoName);
+  const isMemoOlderThan24Hours = Date.now() - memo.displayTime!.getTime() > 1000 * 60 * 60 * 24;
 
   useEffect(() => {
     memoStore.getOrFetchMemoByName(memoName).finally(() => loadingState.setFinish());
@@ -69,7 +71,17 @@ const EmbeddedMemo = ({ resourceId: uid, params: paramsStr }: Props) => {
     <div className="relative flex flex-col justify-start items-start w-full px-3 py-2 bg-zinc-50 dark:bg-zinc-900 rounded-lg border border-gray-200 dark:border-zinc-700 hover:shadow">
       <div className="w-full mb-1 flex flex-row justify-between items-center text-gray-400 dark:text-gray-500">
         <div className="text-sm leading-5 select-none">
-          <relative-time datetime={memo.displayTime?.toISOString()} format="datetime"></relative-time>
+          {isMemoOlderThan24Hours ? (
+            memo.displayTime?.toLocaleString(i18n.resolvedLanguage, {
+              weekday: "short",
+              day: "numeric",
+              month: "short",
+              hour: "numeric",
+              minute: "numeric",
+            })
+          ) : (
+            <relative-time datetime={memo.displayTime?.toISOString()} format="datetime"></relative-time>
+          )}
         </div>
         <div className="flex justify-end items-center gap-1">
           <span
diff --git a/web/src/components/MemoView.tsx b/web/src/components/MemoView.tsx
index 9420bb94cb0b4..346fe09fd6cbb 100644
--- a/web/src/components/MemoView.tsx
+++ b/web/src/components/MemoView.tsx
@@ -1,4 +1,5 @@
 import { Tooltip } from "@mui/joy";
+import i18n from "i18next";
 import { BookmarkIcon, EyeOffIcon, MessageCircleMoreIcon } from "lucide-react";
 import { memo, useCallback, useRef, useState } from "react";
 import { Link, useLocation } from "react-router-dom";
@@ -53,7 +54,8 @@ const MemoView: React.FC<Props> = (props: Props) => {
   const commentAmount = memo.relations.filter(
     (relation) => relation.type === MemoRelation_Type.COMMENT && relation.relatedMemo?.name === memo.name,
   ).length;
-  const relativeTimeFormat = Date.now() - memo.displayTime!.getTime() > 1000 * 60 * 60 * 24 ? "datetime" : "auto";
+  const isMemoOlderThan24Hours = Date.now() - memo.displayTime!.getTime() > 1000 * 60 * 60 * 24;
+  const relativeTimeFormat = isMemoOlderThan24Hours ? "datetime" : "auto";
   const isArchived = memo.state === State.ARCHIVED;
   const readonly = memo.creator !== user?.name && !isSuperUser(user);
   const isInMemoDetailPage = location.pathname.startsWith(`/${memo.name}`);
@@ -117,6 +119,14 @@ const MemoView: React.FC<Props> = (props: Props) => {
 
   const displayTime = isArchived ? (
     memo.displayTime?.toLocaleString()
+  ) : isMemoOlderThan24Hours ? (
+    memo.displayTime?.toLocaleString(i18n.resolvedLanguage, {
+      weekday: "short",
+      day: "numeric",
+      month: "short",
+      hour: "numeric",
+      minute: "numeric",
+    })
   ) : (
     <relative-time datetime={memo.displayTime?.toISOString()} format={relativeTimeFormat}></relative-time>
   );