diff --git a/src/renderer/src/pages/home/Messages/Blocks/ImageBlock.tsx b/src/renderer/src/pages/home/Messages/Blocks/ImageBlock.tsx
index 5229b12304..8cecea1ad8 100644
--- a/src/renderer/src/pages/home/Messages/Blocks/ImageBlock.tsx
+++ b/src/renderer/src/pages/home/Messages/Blocks/ImageBlock.tsx
@@ -1,6 +1,6 @@
-import SvgSpinners180Ring from '@renderer/components/Icons/SvgSpinners180Ring'
 import ImageViewer from '@renderer/components/ImageViewer'
 import { type ImageMessageBlock, MessageBlockStatus } from '@renderer/types/newMessage'
+import { Skeleton } from 'antd'
 import React from 'react'
 import styled from 'styled-components'
 
@@ -10,7 +10,7 @@ interface Props {
 
 const ImageBlock: React.FC<Props> = ({ block }) => {
   if (block.status === MessageBlockStatus.STREAMING || block.status === MessageBlockStatus.PROCESSING)
-    return <SvgSpinners180Ring />
+    return <Skeleton.Image active style={{ width: 200, height: 200 }} />
   if (block.status === MessageBlockStatus.SUCCESS) {
     const images = block.metadata?.generateImageResponse?.images?.length
       ? block.metadata?.generateImageResponse?.images
@@ -28,9 +28,7 @@ const ImageBlock: React.FC<Props> = ({ block }) => {
         ))}
       </Container>
     )
-  } else {
-    return <></>
-  }
+  } else return null
 }
 const Container = styled.div`
   display: flex;
@@ -38,5 +36,4 @@ const Container = styled.div`
   gap: 10px;
   margin-top: 8px;
 `
-
 export default React.memo(ImageBlock)
diff --git a/src/renderer/src/pages/home/Messages/Blocks/index.tsx b/src/renderer/src/pages/home/Messages/Blocks/index.tsx
index 7949356b25..b469f03264 100644
--- a/src/renderer/src/pages/home/Messages/Blocks/index.tsx
+++ b/src/renderer/src/pages/home/Messages/Blocks/index.tsx
@@ -164,15 +164,14 @@ export default React.memo(MessageBlockRenderer)
 
 const ImageBlockGroup = styled.div`
   display: grid;
-  grid-template-columns: repeat(3, minmax(200px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 8px;
-  width: 100%;
   max-width: 960px;
-  > * {
+  /* > * {
     min-width: 200px;
-  }
+  } */
   @media (min-width: 1536px) {
-    grid-template-columns: repeat(4, minmax(250px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     max-width: 1280px;
     > * {
       min-width: 250px;