diff --git a/web/src/pages/user-setting/setting-model/components/modal-card.tsx b/web/src/pages/user-setting/setting-model/components/modal-card.tsx
index 5273d893aa..3e76f999fb 100644
--- a/web/src/pages/user-setting/setting-model/components/modal-card.tsx
+++ b/web/src/pages/user-setting/setting-model/components/modal-card.tsx
@@ -13,7 +13,11 @@ import { EditOutlined, SettingOutlined } from '@ant-design/icons';
 import { ChevronsDown, ChevronsUp, Trash2 } from 'lucide-react';
 import { FC } from 'react';
 import { isLocalLlmFactory } from '../../utils';
-import { useHandleDeleteFactory, useHandleEnableLlm } from '../hooks';
+import {
+  useHandleDeleteFactory,
+  useHandleDeleteLlm,
+  useHandleEnableLlm,
+} from '../hooks';
 import { mapModelKey } from './un-add-model';
 
 interface IModelCardProps {
@@ -60,6 +64,7 @@ export const ModelProviderCard: FC<IModelCardProps> = ({
   const { t } = useTranslate('setting');
   const { handleEnableLlm } = useHandleEnableLlm(item.name);
   const { deleteFactory } = useHandleDeleteFactory(item.name);
+  const { handleDeleteLlm } = useHandleDeleteLlm(item.name);
 
   const handleApiKeyClick = () => {
     clickApiKey(item.name);
@@ -183,6 +188,16 @@ export const ModelProviderCard: FC<IModelCardProps> = ({
                         handleEnableLlm(model.name, value);
                       }}
                     />
+                    <Button
+                      variant={'ghost'}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleDeleteLlm(model.name);
+                      }}
+                      className="p-1 hover:text-state-error hover:bg-state-error-5 transition-colors border-none"
+                    >
+                      <Trash2 size={16} />
+                    </Button>
                   </div>
                 </div>
               ))}