diff --git a/app/components/exporter.tsx b/app/components/exporter.tsx
index 2e3cd84a..ba82c285 100644
--- a/app/components/exporter.tsx
+++ b/app/components/exporter.tsx
@@ -383,7 +383,7 @@ export function PreviewActions(props: {
 function ExportAvatar(props: { avatar: string }) {
   if (props.avatar === DEFAULT_MASK_AVATAR) {
     return (
-      <NextImage
+      <img
         src={BotIcon.src}
         width={30}
         height={30}
@@ -393,7 +393,7 @@ function ExportAvatar(props: { avatar: string }) {
     );
   }
 
-  return <Avatar avatar={props.avatar}></Avatar>;
+  return <Avatar avatar={props.avatar} />;
 }
 
 export function ImagePreviewer(props: {
@@ -422,6 +422,7 @@ export function ImagePreviewer(props: {
           ])
           .then(() => {
             showToast(Locale.Copy.Success);
+            refreshPreview();
           });
       } catch (e) {
         console.error("[Copy Image] ", e);
@@ -447,11 +448,19 @@ export function ImagePreviewer(props: {
           link.download = `${props.topic}.png`;
           link.href = blob;
           link.click();
+          refreshPreview();
         }
       })
       .catch((e) => console.log("[Export Image] ", e));
   };
 
+  const refreshPreview = () => {
+    const dom = previewRef.current;
+    if (dom) {
+      dom.innerHTML = dom.innerHTML; // Refresh the content of the preview by resetting its HTML for fix a bug glitching
+    }
+  };
+
   return (
     <div className={styles["image-previewer"]}>
       <PreviewActions