diff --git a/web/src/pages/home/agent-list.tsx b/web/src/pages/home/agent-list.tsx
index 60e1a3c66..0f0d6d08f 100644
--- a/web/src/pages/home/agent-list.tsx
+++ b/web/src/pages/home/agent-list.tsx
@@ -1,18 +1,48 @@
+import { MoreButton } from '@/components/more-button';
+import { RenameDialog } from '@/components/rename-dialog';
 import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
 import { useFetchAgentListByPage } from '@/hooks/use-agent-request';
+import { AgentDropdown } from '../agents/agent-dropdown';
+import { useRenameAgent } from '../agents/use-rename-agent';
 import { ApplicationCard } from './application-card';
 
 export function Agents() {
   const { data } = useFetchAgentListByPage();
   const { navigateToAgent } = useNavigatePage();
+  const {
+    agentRenameLoading,
+    initialAgentName,
+    onAgentRenameOk,
+    agentRenameVisible,
+    hideAgentRenameModal,
+    showAgentRenameModal,
+  } = useRenameAgent();
 
-  return data
-    .slice(0, 10)
-    .map((x) => (
-      <ApplicationCard
-        key={x.id}
-        app={x}
-        onClick={navigateToAgent(x.id)}
-      ></ApplicationCard>
-    ));
+  return (
+    <>
+      {data.slice(0, 10).map((x) => (
+        <ApplicationCard
+          key={x.id}
+          app={x}
+          onClick={navigateToAgent(x.id)}
+          moreDropdown={
+            <AgentDropdown
+              showAgentRenameModal={showAgentRenameModal}
+              agent={x}
+            >
+              <MoreButton></MoreButton>
+            </AgentDropdown>
+          }
+        ></ApplicationCard>
+      ))}
+      {agentRenameVisible && (
+        <RenameDialog
+          hideModal={hideAgentRenameModal}
+          onOk={onAgentRenameOk}
+          initialName={initialAgentName}
+          loading={agentRenameLoading}
+        ></RenameDialog>
+      )}
+    </>
+  );
 }
diff --git a/web/src/pages/home/application-card.tsx b/web/src/pages/home/application-card.tsx
index 96aaed609..82f0c214a 100644
--- a/web/src/pages/home/application-card.tsx
+++ b/web/src/pages/home/application-card.tsx
@@ -1,4 +1,3 @@
-import { MoreButton } from '@/components/more-button';
 import { RAGFlowAvatar } from '@/components/ragflow-avatar';
 import { Card, CardContent } from '@/components/ui/card';
 import { formatDate } from '@/utils/date';
@@ -11,9 +10,14 @@ type ApplicationCardProps = {
     update_time: number;
   };
   onClick?(): void;
+  moreDropdown: React.ReactNode;
 };
 
-export function ApplicationCard({ app, onClick }: ApplicationCardProps) {
+export function ApplicationCard({
+  app,
+  onClick,
+  moreDropdown,
+}: ApplicationCardProps) {
   return (
     <Card className="w-[264px]" onClick={onClick}>
       <CardContent className="p-2.5  group flex justify-between">
@@ -32,8 +36,7 @@ export function ApplicationCard({ app, onClick }: ApplicationCardProps) {
             </p>
           </div>
         </div>
-
-        <MoreButton className=""></MoreButton>
+        {moreDropdown}
       </CardContent>
     </Card>
   );
diff --git a/web/src/pages/home/chat-list.tsx b/web/src/pages/home/chat-list.tsx
index 616bec9e8..93e1c3de9 100644
--- a/web/src/pages/home/chat-list.tsx
+++ b/web/src/pages/home/chat-list.tsx
@@ -1,20 +1,53 @@
+import { MoreButton } from '@/components/more-button';
+import { RenameDialog } from '@/components/rename-dialog';
 import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
 import { useFetchDialogList } from '@/hooks/use-chat-request';
+import { useTranslation } from 'react-i18next';
+import { ChatDropdown } from '../next-chats/chat-dropdown';
+import { useRenameChat } from '../next-chats/hooks/use-rename-chat';
 import { ApplicationCard } from './application-card';
 
 export function ChatList() {
+  const { t } = useTranslation();
   const { data } = useFetchDialogList();
   const { navigateToChat } = useNavigatePage();
 
-  return data.dialogs.slice(0, 10).map((x) => (
-    <ApplicationCard
-      key={x.id}
-      app={{
-        avatar: x.icon,
-        title: x.name,
-        update_time: x.update_time,
-      }}
-      onClick={navigateToChat(x.id)}
-    ></ApplicationCard>
-  ));
+  const {
+    initialChatName,
+    chatRenameVisible,
+    showChatRenameModal,
+    hideChatRenameModal,
+    onChatRenameOk,
+    chatRenameLoading,
+  } = useRenameChat();
+
+  return (
+    <>
+      {data.dialogs.slice(0, 10).map((x) => (
+        <ApplicationCard
+          key={x.id}
+          app={{
+            avatar: x.icon,
+            title: x.name,
+            update_time: x.update_time,
+          }}
+          onClick={navigateToChat(x.id)}
+          moreDropdown={
+            <ChatDropdown chat={x} showChatRenameModal={showChatRenameModal}>
+              <MoreButton></MoreButton>
+            </ChatDropdown>
+          }
+        ></ApplicationCard>
+      ))}
+      {chatRenameVisible && (
+        <RenameDialog
+          hideModal={hideChatRenameModal}
+          onOk={onChatRenameOk}
+          initialName={initialChatName}
+          loading={chatRenameLoading}
+          title={initialChatName || t('chat.createChat')}
+        ></RenameDialog>
+      )}
+    </>
+  );
 }