diff --git a/web/src/components/MemoDetailSidebar/MemoDetailSidebar.tsx b/web/src/components/MemoDetailSidebar/MemoDetailSidebar.tsx
index 6605e82e2..3c13361a2 100644
--- a/web/src/components/MemoDetailSidebar/MemoDetailSidebar.tsx
+++ b/web/src/components/MemoDetailSidebar/MemoDetailSidebar.tsx
@@ -1,4 +1,5 @@
 import { create } from "@bufbuild/protobuf";
+import { timestampDate } from "@bufbuild/protobuf/wkt";
 import { isEqual } from "lodash-es";
 import { CheckCircleIcon, Code2Icon, HashIcon, LinkIcon } from "lucide-react";
 import { cn } from "@/lib/utils";
@@ -36,14 +37,14 @@ const MemoDetailSidebar = ({ memo, className, parentPage }: Props) => {
           <p className="flex flex-row justify-start items-center w-full gap-1 mb-1 text-sm leading-6 text-muted-foreground select-none">
             <span>{t("common.created-at")}</span>
           </p>
-          <p className="text-sm text-muted-foreground">{memo.createTime?.toLocaleString()}</p>
+          <p className="text-sm text-muted-foreground">{memo.createTime && timestampDate(memo.createTime).toLocaleString()}</p>
         </div>
         {!isEqual(memo.createTime, memo.updateTime) && (
           <div className="w-full flex flex-col">
             <p className="flex flex-row justify-start items-center w-full gap-1 mb-1 text-sm leading-6 text-muted-foreground select-none">
               <span>{t("common.last-updated-at")}</span>
             </p>
-            <p className="text-sm text-muted-foreground">{memo.updateTime?.toLocaleString()}</p>
+            <p className="text-sm text-muted-foreground">{memo.updateTime && timestampDate(memo.updateTime).toLocaleString()}</p>
           </div>
         )}
         {hasSpecialProperty && (
diff --git a/web/src/components/MemoEditor/components/LinkMemoDialog.tsx b/web/src/components/MemoEditor/components/LinkMemoDialog.tsx
index d0dc25118..0b6875dec 100644
--- a/web/src/components/MemoEditor/components/LinkMemoDialog.tsx
+++ b/web/src/components/MemoEditor/components/LinkMemoDialog.tsx
@@ -1,3 +1,4 @@
+import { timestampDate } from "@bufbuild/protobuf/wkt";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Memo } from "@/types/proto/api/v1/memo_service_pb";
@@ -75,7 +76,9 @@ export const LinkMemoDialog = ({
                   onClick={() => onSelectMemo(memo)}
                 >
                   <div className="w-full flex flex-col justify-start items-start">
-                    <p className="text-xs text-muted-foreground select-none">{memo.displayTime?.toLocaleString()}</p>
+                    <p className="text-xs text-muted-foreground select-none">
+                      {memo.displayTime && timestampDate(memo.displayTime).toLocaleString()}
+                    </p>
                     <p className="mt-0.5 text-sm leading-5 line-clamp-2">
                       {searchText ? highlightSearchText(memo.content, searchText) : memo.snippet}
                     </p>