diff --git a/components/SmartChatBox/MessageRenderer.tsx b/components/SmartChatBox/MessageRenderer.tsx
index de70028..cd99578 100644
--- a/components/SmartChatBox/MessageRenderer.tsx
+++ b/components/SmartChatBox/MessageRenderer.tsx
@@ -102,7 +102,17 @@ export function MessageRenderer({ msg, sendMessage }: MessageRendererProps) {
               case "image":
                 return (
                   <div key={idx} className="overflow-hidden rounded-xl border border-white/10">
-                    <Image src={b.url} alt={b.alt || "image"} className="max-h-72 object-contain w-full bg-black/10" />
+                    <Image 
+                      src={b.url} 
+                      alt={b.alt || "image"} 
+                      className="max-h-72 object-contain w-full bg-black/10"
+                      preview={{
+                        getContainer: () => document.querySelector('[data-alt="smart-chat-box"]') || document.body,
+                        mask: <div className="absolute inset-0 backdrop-blur-sm bg-black/60" />,
+                        maskClassName: "!bg-black/60",
+                        rootClassName: "!z-[1000]"
+                      }}
+                    />
                   </div>
                 );
               case "video":