diff --git a/src/components/FileMessage/AudioMessage.tsx b/src/components/FileMessage/AudioMessage.tsx
index 34377e5c..da914e88 100644
--- a/src/components/FileMessage/AudioMessage.tsx
+++ b/src/components/FileMessage/AudioMessage.tsx
@@ -4,7 +4,7 @@ import clsx from "clsx";
 import IconDownload from "@/assets/icons/download.svg";
 import IconAudio from "@/assets/icons/file.audio.svg";
 import { formatBytes } from "../../utils";
-import { ExpireTip } from "./OtherFileMessage";
+import ExpiredMessage from "./ExpiredMessage";
 
 type Props = {
   url: string;
@@ -23,40 +23,34 @@ const AudioMessage = ({ url, name, size, download }: Props) => {
     setError(true);
   };
   const _size = formatBytes(size);
+  if (error) return <ExpiredMessage type="audio" />;
   return (
     <div
       className={clsx(
         "md:w-96 flex flex-col gap-2 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-500 overflow-hidden bg-stone-100 dark:bg-stone-900"
-        // error ? "border-red-100 dark:border-red-900/50" : "border-gray-300 dark:border-gray-500"
       )}
     >
       <div className="flex justify-between z-30 overflow-hidden">
         <div className="flex gap-2 ">
-          <IconAudio className={clsx("w-9 h-auto", error && "grayscale")} />
+          <IconAudio className={clsx("w-9 h-auto")} />
           <div className="flex flex-col gap-1 text-sm text-gray-900 dark:text-gray-100">
             <span title={name} className={clsx("font-bold truncate w-[240px]")}>
-              {error ? "File not Found" : name}
+              {name}
             </span>
-            <span className="text-gray-400">{error ? "File expired or deleted" : _size}</span>
+            <span className="text-gray-400">{_size}</span>
           </div>
         </div>
-        {error ? (
-          <ExpireTip />
-        ) : (
-          <a href={download} className="mt-2 hidden md:block">
-            <IconDownload className="fill-gray-500 dark:fill-gray-400" />
-          </a>
-        )}
+        <a href={download} className="mt-2 hidden md:block">
+          <IconDownload className="fill-gray-500 dark:fill-gray-400" />
+        </a>
       </div>
-      {!error && (
-        <audio
-          onError={handleError}
-          src={url}
-          onCanPlay={handleCanPlay}
-          controls
-          className={clsx("w-full object-cover z-10", canPlay ? "visible" : "invisible")}
-        />
-      )}
+      <audio
+        onError={handleError}
+        src={url}
+        onCanPlay={handleCanPlay}
+        controls
+        className={clsx("w-full object-cover z-10", canPlay ? "visible" : "invisible")}
+      />
     </div>
   );
 };
diff --git a/src/components/FileMessage/ExpiredMessage.tsx b/src/components/FileMessage/ExpiredMessage.tsx
new file mode 100644
index 00000000..9e38309c
--- /dev/null
+++ b/src/components/FileMessage/ExpiredMessage.tsx
@@ -0,0 +1,66 @@
+import React from "react";
+import clsx from "clsx";
+
+import IconAudio from "@/assets/icons/file.audio.svg";
+import IconImage from "@/assets/icons/file.image.svg";
+import IconUnknown from "@/assets/icons/file.unknown.svg";
+import IconVideo from "@/assets/icons/file.video.svg";
+import IconInfo from "@/assets/icons/info.svg";
+
+type Props = {
+  type?: "file" | "audio" | "image" | "video";
+};
+const InfoMap = {
+  file: {
+    title: "File not Found",
+    desc: "File expired or deleted",
+    icon: <IconUnknown className="w-9 shrink-0 h-auto grayscale" />
+  },
+  audio: {
+    title: "Audio not Found",
+    desc: "Audio expired or deleted",
+    icon: <IconAudio className="w-9 shrink-0 h-auto grayscale" />
+  },
+  image: {
+    title: "Image not Found",
+    desc: "Image expired or deleted",
+    icon: <IconImage className="w-9 shrink-0 h-auto grayscale" />
+  },
+  video: {
+    title: "Video not Found",
+    desc: "Video expired or deleted",
+    icon: <IconVideo className="w-9 shrink-0 h-auto grayscale" />
+  }
+};
+const ExpiredMessage = ({ type = "file" }: Props) => {
+  const { title, desc, icon } = InfoMap[type];
+  return (
+    <div
+      className={clsx(
+        `bg-stone-100 dark:bg-stone-900 border box-border md:w-96 rounded-md border-gray-300 dark:border-gray-500`
+      )}
+    >
+      <div className="px-3 py-2 flex items-center justify-between gap-2">
+        {icon}
+        <div className="flex flex-col gap-1 w-full overflow-hidden">
+          <span
+            className={clsx(
+              "font-semibold text-sm truncate text-gray-800 dark:text-gray-100"
+              // error ? "text-red-500" : "text-gray-800 dark:text-gray-100"
+            )}
+          >
+            {title}
+          </span>
+          <span className="hidden md:flex whitespace-nowrap text-xs text-gray-500 dark:text-gray-300 gap-4">
+            <strong>{desc}</strong>
+          </span>
+        </div>
+        <span className="text-red-500 text-xs whitespace-nowrap flex items-center gap-1">
+          <IconInfo className="stroke-gray-600 w-6 h-6" />
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default ExpiredMessage;
diff --git a/src/components/FileMessage/ImageMessage.tsx b/src/components/FileMessage/ImageMessage.tsx
index 63b87fee..ebc688fb 100644
--- a/src/components/FileMessage/ImageMessage.tsx
+++ b/src/components/FileMessage/ImageMessage.tsx
@@ -2,6 +2,7 @@ import { FC, useEffect, useState } from "react";
 import { LineWobble, Ping } from "@uiball/loaders";
 
 import { getDefaultSize, isMobile } from "@/utils";
+import ExpiredMessage from "./ExpiredMessage";
 
 type Props = {
   uploading: boolean;
@@ -36,7 +37,7 @@ const ImageMessage: FC<Props> = ({
     };
     img.src = url;
   }, [url]);
-
+  if (status == "error") return <ExpiredMessage type="image" />;
   return (
     <div
       className={`relative overflow-hidden`}
@@ -51,11 +52,7 @@ const ImageMessage: FC<Props> = ({
           <span className="text-xs text-gray-500">{progress}%</span>
         </div>
       )}
-      {status == "error" ? (
-        <p className="w-full h-full flex-center text-lg text-red-800 bg-red-100">
-          Image expired or removed
-        </p>
-      ) : status == "loading" ? (
+      {status == "loading" ? (
         <p className="w-full h-full flex-center bg-primary-50/80 dark:bg-primary-900/70">
           <LineWobble />
         </p>
diff --git a/src/components/FileMessage/OtherFileMessage.tsx b/src/components/FileMessage/OtherFileMessage.tsx
index 6a595b37..1f23ac9b 100644
--- a/src/components/FileMessage/OtherFileMessage.tsx
+++ b/src/components/FileMessage/OtherFileMessage.tsx
@@ -1,23 +1,13 @@
 import { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
 import clsx from "clsx";
 
 import { User } from "@/types/user";
 import { formatBytes, fromNowTime, getFileIcon } from "@/utils";
 import IconClose from "@/assets/icons/close.circle.svg";
 import IconDownload from "@/assets/icons/download.svg";
-import IconInfo from "@/assets/icons/info.svg";
+import ExpiredMessage from "./ExpiredMessage";
 import Progress from "./Progress";
 
-const ExpireTip = () => {
-  const { t } = useTranslation("chat");
-  return (
-    <span className="text-red-500 text-xs whitespace-nowrap flex items-center gap-1">
-      <IconInfo className="stroke-gray-600 w-6 h-6" />
-    </span>
-  );
-};
-
 type Props = {
   content: string;
   sending: boolean;
@@ -42,7 +32,7 @@ const OtherFileMessage = ({
   handleCancel
 }: Props) => {
   const [error, setError] = useState(false);
-  const icon = getFileIcon(content_type, name, `w-9 shrink-0 h-auto ${error ? "grayscale" : ""}`);
+  const icon = getFileIcon(content_type, name, `w-9 shrink-0 h-auto`);
   useEffect(() => {
     if (content) {
       fetch(content)
@@ -58,7 +48,7 @@ const OtherFileMessage = ({
         });
     }
   }, [content]);
-
+  if (error) return <ExpiredMessage />;
   return (
     <div
       className={clsx(
@@ -76,13 +66,11 @@ const OtherFileMessage = ({
               // error ? "text-red-500" : "text-gray-800 dark:text-gray-100"
             )}
           >
-            {error ? "File not Found" : name}
+            {name}
           </span>
           <span className="hidden md:flex whitespace-nowrap text-xs text-gray-500 dark:text-gray-300 gap-4">
             {sending ? (
               <Progress value={progress} width={"80%"} />
-            ) : error ? (
-              <strong>File expired or deleted</strong>
             ) : (
               <>
                 <strong>{formatBytes(size)}</strong>
@@ -98,8 +86,6 @@ const OtherFileMessage = ({
         </div>
         {sending ? (
           <IconClose className="cursor-pointer" onClick={handleCancel} />
-        ) : error ? (
-          <ExpireTip />
         ) : (
           <a
             className="hidden md:block whitespace-nowrap"
@@ -115,4 +101,3 @@ const OtherFileMessage = ({
 };
 
 export default OtherFileMessage;
-export { ExpireTip };
diff --git a/src/components/FileMessage/VideoMessage.tsx b/src/components/FileMessage/VideoMessage.tsx
index 5094ba93..0277005e 100644
--- a/src/components/FileMessage/VideoMessage.tsx
+++ b/src/components/FileMessage/VideoMessage.tsx
@@ -5,9 +5,7 @@ import clsx from "clsx";
 import IconDownload from "@/assets/icons/download.svg";
 import IconVideo from "@/assets/icons/file.video.svg";
 import { formatBytes } from "../../utils";
-import { ExpireTip } from "./OtherFileMessage";
-
-// import clsx from 'clsx';
+import ExpiredMessage from "./ExpiredMessage";
 
 type Props = {
   url: string;
@@ -40,24 +38,21 @@ const VideoMessage = ({ url, name, size, download }: Props) => {
     setError(true);
   };
   const tipClass = "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2";
+  if (error) return <ExpiredMessage type="video" />;
   return (
     <div
       className={clsx(
-        "w-60 md:w-96 relative rounded-md border overflow-hidden group border-gray-300 dark:border-gray-500",
-        error ? "bg-stone-100 dark:bg-stone-900" : "h-32 md:h-52"
+        "w-60 md:w-96 relative rounded-md border overflow-hidden group border-gray-300 dark:border-gray-500 h-32 md:h-52"
       )}
     >
-      {!error && (
-        <div className="absolute top-0 left-0 w-full h-full bg-black/40 z-20 group-hover:hidden"></div>
-      )}
+      <div className="absolute top-0 left-0 w-full h-full bg-black/40 z-20 group-hover:hidden"></div>
       <div
         className={clsx(
-          "w-full flex justify-between z-30 px-3 py-2 overflow-hidden",
-          error ? "" : "absolute top-0 left-0 "
+          "w-full flex justify-between z-30 px-3 py-2 overflow-hidden absolute top-0 left-0"
         )}
       >
         <div className="flex gap-2 ">
-          <IconVideo className={clsx("hidden md:block w-9 h-auto", error && "grayscale")} />
+          <IconVideo className={clsx("hidden md:block w-9 h-auto")} />
           <div className="flex flex-col gap-1 text-sm dark:text-white text-gray-900">
             <span
               title={name}
@@ -66,36 +61,30 @@ const VideoMessage = ({ url, name, size, download }: Props) => {
                 // error ? "w-56 text-red-500" : "w-56 md:w-[240px]"
               )}
             >
-              {error ? "File not Found" : name}
+              {name}
             </span>
-            <span className="text-gray-400">{error ? "File expired or deleted" : _size}</span>
+            <span className="text-gray-400">{_size}</span>
           </div>
         </div>
-        {error ? (
-          <ExpireTip />
-        ) : (
-          <a href={download} className="hidden md:block mt-2">
-            <IconDownload className="fill-white" />
-          </a>
-        )}
+        <a href={download} className="hidden md:block mt-2">
+          <IconDownload className="fill-white" />
+        </a>
       </div>
       {!canPlay && !error ? (
         <div className={tipClass}>
           <Orbit color="#fff" />
         </div>
       ) : null}
-      {!error && (
-        <video
-          onPlay={handlePlay}
-          onError={handleError}
-          onCanPlay={handleCanPlay}
-          onPause={handlePause}
-          controls={canPlay}
-          className="absolute left-0 top-0 w-full h-full object-cover z-10"
-        >
-          <source src={url} type="video/mp4"></source>
-        </video>
-      )}
+      <video
+        onPlay={handlePlay}
+        onError={handleError}
+        onCanPlay={handleCanPlay}
+        onPause={handlePause}
+        controls={canPlay}
+        className="absolute left-0 top-0 w-full h-full object-contain z-10"
+      >
+        <source src={url} type="video/mp4"></source>
+      </video>
     </div>
   );
 };
diff --git a/src/components/VoiceMessage.tsx b/src/components/VoiceMessage.tsx
index 5794121f..11df93d7 100644
--- a/src/components/VoiceMessage.tsx
+++ b/src/components/VoiceMessage.tsx
@@ -5,8 +5,9 @@ import WaveSurfer from "wavesurfer.js";
 
 import IconPause from "@/assets/icons/pause.svg";
 import IconPlay from "@/assets/icons/play.circle.svg";
-import IconRefresh from "@/assets/icons/refresh.svg";
+// import IconRefresh from "@/assets/icons/refresh.svg";
 import BASE_URL from "../app/config";
+import ExpiredMessage from "./FileMessage/ExpiredMessage";
 
 export type VoiceMessageProps = {
   type: string;
@@ -103,15 +104,16 @@ const VoiceMessage = ({ file_path }: { file_path: string }) => {
       current.playPause();
     }
   };
-  const handleReload = () => {
-    initWave(file_path);
-  };
+  // const handleReload = () => {
+  //   initWave(file_path);
+  // };
   const notReady = status !== "ready";
+  if (status == "error") return <ExpiredMessage type="audio" />;
   return (
     <div
       className={clsx(
         "relative whitespace-nowrap select-none flex items-center gap-2 p-2 rounded-lg max-w-sm",
-        status === "error" ? "bg-red-200" : "bg-primary-100 dark:bg-primary-900"
+        "bg-primary-100 dark:bg-primary-900"
       )}
     >
       <button className="disabled:opacity-60" onClick={handleClick} disabled={notReady}>
@@ -121,22 +123,17 @@ const VoiceMessage = ({ file_path }: { file_path: string }) => {
           <IconPlay className="stroke-primary-500" />
         )}
       </button>
-      <div ref={containerRef} className={clsx("flex-1 h-8 min-w-[100px] flex items-center")}>
+      <div ref={containerRef} className={clsx("flex-1 h-8 min-w-[100px]")}>
         {status == "loading" && <span className="text-xs">Loading voice message...</span>}
-        {status == "error" && (
-          <span className="text-xs text-red-800">Load voice message error</span>
-        )}
       </div>
-      {status !== "error" && (
-        <time className="text-primary-500 text-xs whitespace-nowrap text-left">{duration}</time>
-      )}
-      {status === "error" && (
+      <time className="text-primary-500 text-xs whitespace-nowrap text-left">{duration}</time>
+      {/* {status === "error" && (
         <IconRefresh
           role="button"
           className="absolute -right-6 top-1/2 -translate-y-1/2 w-4 h-4 stroke-primary-600"
           onClick={handleReload}
         />
-      )}
+      )} */}
     </div>
   );
 };