diff --git a/web/src/components/chunk-method-dialog/dynamic-page-range.tsx b/web/src/components/chunk-method-dialog/dynamic-page-range.tsx
index d8890828f..0e9863b13 100644
--- a/web/src/components/chunk-method-dialog/dynamic-page-range.tsx
+++ b/web/src/components/chunk-method-dialog/dynamic-page-range.tsx
@@ -10,7 +10,7 @@ import {
   FormMessage,
 } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
-import { Plus, Trash2 } from 'lucide-react';
+import { Plus, X } from 'lucide-react';
 import { useFieldArray, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { Separator } from '../ui/separator';
@@ -70,10 +70,9 @@ export function DynamicPageRange() {
                 </FormItem>
               )}
             />
-            <Trash2
-              className="cursor-pointer mx-3 size-4 text-colors-text-functional-danger"
-              onClick={() => remove(index)}
-            />
+            <Button variant={'ghost'} onClick={() => remove(index)}>
+              <X />
+            </Button>
           </div>
         );
       })}
diff --git a/web/src/components/confirm-delete-dialog.tsx b/web/src/components/confirm-delete-dialog.tsx
index 979c7c377..1c7e4e7f3 100644
--- a/web/src/components/confirm-delete-dialog.tsx
+++ b/web/src/components/confirm-delete-dialog.tsx
@@ -8,7 +8,6 @@ import {
   AlertDialogTitle,
   AlertDialogTrigger,
 } from '@/components/ui/alert-dialog';
-import { Trash2 } from 'lucide-react';
 import { PropsWithChildren } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -53,10 +52,9 @@ export function ConfirmDeleteDialog({
             {t('common.cancel')}
           </AlertDialogCancel>
           <AlertDialogAction
-            className="bg-colors-background-functional-solid-danger text--colors-text-neutral-strong"
+            className="bg-text-delete-red text-text-title"
             onClick={onOk}
           >
-            <Trash2 />
             {t('common.ok')}
           </AlertDialogAction>
         </AlertDialogFooter>
diff --git a/web/src/hooks/use-chat-request.ts b/web/src/hooks/use-chat-request.ts
new file mode 100644
index 000000000..e212ef092
--- /dev/null
+++ b/web/src/hooks/use-chat-request.ts
@@ -0,0 +1,77 @@
+import { ChatSearchParams } from '@/constants/chat';
+import { IDialog } from '@/interfaces/database/chat';
+import chatService from '@/services/chat-service';
+import { useQuery } from '@tanstack/react-query';
+import { useCallback, useMemo } from 'react';
+import { history, useSearchParams } from 'umi';
+
+export const useGetChatSearchParams = () => {
+  const [currentQueryParameters] = useSearchParams();
+
+  return {
+    dialogId: currentQueryParameters.get(ChatSearchParams.DialogId) || '',
+    conversationId:
+      currentQueryParameters.get(ChatSearchParams.ConversationId) || '',
+    isNew: currentQueryParameters.get(ChatSearchParams.isNew) || '',
+  };
+};
+
+export const useClickDialogCard = () => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [_, setSearchParams] = useSearchParams();
+
+  const newQueryParameters: URLSearchParams = useMemo(() => {
+    return new URLSearchParams();
+  }, []);
+
+  const handleClickDialog = useCallback(
+    (dialogId: string) => {
+      newQueryParameters.set(ChatSearchParams.DialogId, dialogId);
+      // newQueryParameters.set(
+      //   ChatSearchParams.ConversationId,
+      //   EmptyConversationId,
+      // );
+      setSearchParams(newQueryParameters);
+    },
+    [newQueryParameters, setSearchParams],
+  );
+
+  return { handleClickDialog };
+};
+
+export const useFetchDialogList = (pureFetch = false) => {
+  const { handleClickDialog } = useClickDialogCard();
+  const { dialogId } = useGetChatSearchParams();
+
+  const {
+    data,
+    isFetching: loading,
+    refetch,
+  } = useQuery<IDialog[]>({
+    queryKey: ['fetchDialogList'],
+    initialData: [],
+    gcTime: 0,
+    refetchOnWindowFocus: false,
+    queryFn: async (...params) => {
+      console.log('🚀 ~ queryFn: ~ params:', params);
+      const { data } = await chatService.listDialog();
+
+      if (data.code === 0) {
+        const list: IDialog[] = data.data;
+        if (!pureFetch) {
+          if (list.length > 0) {
+            if (list.every((x) => x.id !== dialogId)) {
+              handleClickDialog(data.data[0].id);
+            }
+          } else {
+            history.push('/chat');
+          }
+        }
+      }
+
+      return data?.data ?? [];
+    },
+  });
+
+  return { data, loading, refetch };
+};
diff --git a/web/src/pages/home/chat-list.tsx b/web/src/pages/home/chat-list.tsx
index 937d5a079..2ef8e049e 100644
--- a/web/src/pages/home/chat-list.tsx
+++ b/web/src/pages/home/chat-list.tsx
@@ -1,8 +1,8 @@
-import { useFetchNextDialogList } from '@/hooks/chat-hooks';
+import { useFetchDialogList } from '@/hooks/use-chat-request';
 import { ApplicationCard } from './application-card';
 
 export function ChatList() {
-  const { data } = useFetchNextDialogList();
+  const { data } = useFetchDialogList(true);
 
   return data
     .slice(0, 10)