diff --git a/web/src/hooks/flow-hooks.ts b/web/src/hooks/flow-hooks.ts
index e86560b25..754c6ca30 100644
--- a/web/src/hooks/flow-hooks.ts
+++ b/web/src/hooks/flow-hooks.ts
@@ -111,7 +111,12 @@ export const useSetFlow = () => {
     mutateAsync,
   } = useMutation({
     mutationKey: ['setFlow'],
-    mutationFn: async (params: { id?: string; title?: string; dsl?: DSL }) => {
+    mutationFn: async (params: {
+      id?: string;
+      title?: string;
+      dsl?: DSL;
+      avatar?: string;
+    }) => {
       const { data } = await flowService.setCanvas(params);
       if (data.retcode === 0) {
         message.success(
diff --git a/web/src/pages/flow/list/create-flow-modal.tsx b/web/src/pages/flow/list/create-flow-modal.tsx
index aeec7fefd..9b6f49241 100644
--- a/web/src/pages/flow/list/create-flow-modal.tsx
+++ b/web/src/pages/flow/list/create-flow-modal.tsx
@@ -1,20 +1,11 @@
-import { ReactComponent as NothingIcon } from '@/assets/svg/nothing.svg';
 import { IModalManagerChildrenProps } from '@/components/modal-manager';
 import { useTranslate } from '@/hooks/commonHooks';
 import { useFetchFlowTemplates } from '@/hooks/flow-hooks';
 import { useSelectItem } from '@/hooks/logicHooks';
-import {
-  Avatar,
-  Card,
-  Flex,
-  Form,
-  Input,
-  Modal,
-  Space,
-  Typography,
-} from 'antd';
+import { Card, Flex, Form, Input, Modal, Space, Typography } from 'antd';
 import classNames from 'classnames';
 import { useEffect } from 'react';
+import GraphAvatar from './graph-avatar';
 import styles from './index.less';
 
 const { Title } = Typography;
@@ -90,11 +81,7 @@ const CreateFlowModal = ({
             onClick={handleItemClick(x.id)}
           >
             <Space size={'middle'}>
-              {x.avatar ? (
-                <Avatar size={40} icon={<NothingIcon />} src={x.avatar} />
-              ) : (
-                <NothingIcon width={40} height={30} />
-              )}
+              <GraphAvatar avatar={x.avatar}></GraphAvatar>
               <b>{x.title}</b>
             </Space>
             <p>{x.description}</p>
diff --git a/web/src/pages/flow/list/flow-card/index.less b/web/src/pages/flow/list/flow-card/index.less
index 1c7d174e0..42aa0447a 100644
--- a/web/src/pages/flow/list/flow-card/index.less
+++ b/web/src/pages/flow/list/flow-card/index.less
@@ -1,5 +1,5 @@
 .container {
-  height: 251px;
+  height: 160px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
diff --git a/web/src/pages/flow/list/flow-card/index.tsx b/web/src/pages/flow/list/flow-card/index.tsx
index 89b861b4a..2158c35cb 100644
--- a/web/src/pages/flow/list/flow-card/index.tsx
+++ b/web/src/pages/flow/list/flow-card/index.tsx
@@ -1,12 +1,13 @@
 import { formatDate } from '@/utils/date';
-import { CalendarOutlined, UserOutlined } from '@ant-design/icons';
-import { Avatar, Card } from 'antd';
+import { CalendarOutlined } from '@ant-design/icons';
+import { Card, Typography } from 'antd';
 import { useNavigate } from 'umi';
 
 import OperateDropdown from '@/components/operate-dropdown';
 import { useDeleteFlow } from '@/hooks/flow-hooks';
 import { IFlow } from '@/interfaces/database/flow';
 import { useCallback } from 'react';
+import GraphAvatar from '../graph-avatar';
 import styles from './index.less';
 
 interface IProps {
@@ -29,11 +30,16 @@ const FlowCard = ({ item }: IProps) => {
     <Card className={styles.card} onClick={handleCardClick}>
       <div className={styles.container}>
         <div className={styles.content}>
-          <Avatar size={34} icon={<UserOutlined />} src={item.avatar} />
+          <GraphAvatar avatar={item.avatar}></GraphAvatar>
           <OperateDropdown deleteItem={removeFlow}></OperateDropdown>
         </div>
         <div className={styles.titleWrapper}>
-          <span className={styles.title}>{item.title}</span>
+          <Typography.Title
+            className={styles.title}
+            ellipsis={{ tooltip: item.title }}
+          >
+            {item.title}
+          </Typography.Title>
           <p>{item.description}</p>
         </div>
         <div className={styles.footer}>
diff --git a/web/src/pages/flow/list/graph-avatar.tsx b/web/src/pages/flow/list/graph-avatar.tsx
new file mode 100644
index 000000000..5d1dedecb
--- /dev/null
+++ b/web/src/pages/flow/list/graph-avatar.tsx
@@ -0,0 +1,16 @@
+import { ReactComponent as NothingIcon } from '@/assets/svg/nothing.svg';
+import { Avatar } from 'antd';
+
+const GraphAvatar = ({ avatar }: { avatar?: string | null }) => {
+  return (
+    <div>
+      {avatar ? (
+        <Avatar size={40} icon={<NothingIcon />} src={avatar} />
+      ) : (
+        <NothingIcon width={40} height={30} />
+      )}
+    </div>
+  );
+};
+
+export default GraphAvatar;
diff --git a/web/src/pages/flow/list/hooks.ts b/web/src/pages/flow/list/hooks.ts
index ea914a3c2..38f9cbbef 100644
--- a/web/src/pages/flow/list/hooks.ts
+++ b/web/src/pages/flow/list/hooks.ts
@@ -45,6 +45,7 @@ export const useSaveFlow = () => {
       const ret = await setFlow({
         title,
         dsl,
+        avatar: templateItem?.avatar,
         // dsl: dslJson,
         // dsl: {
         //   ...retrievalRelevantRewriteAndGenerateBase,