diff --git a/web/app/(commonLayout)/plugins/test/card/page.tsx b/web/app/(commonLayout)/plugins/test/card/page.tsx
index f0a77f24c1..7621404dba 100644
--- a/web/app/(commonLayout)/plugins/test/card/page.tsx
+++ b/web/app/(commonLayout)/plugins/test/card/page.tsx
@@ -4,7 +4,7 @@ import Card from '@/app/components/plugins/card'
 import { extensionDallE, modelGPT4, toolNotion } from '@/app/components/plugins/card/card-mock'
 import PluginItem from '@/app/components/plugins/plugin-item'
 import CardMoreInfo from '@/app/components/plugins/card/card-more-info'
-import InstallModelItem from '@/app/components/plugins/install-model-item'
+import ProviderCard from '@/app/components/plugins/provider-card'
 import { getLocaleOnServer, useTranslation as translate } from '@/i18n/server'
 import Badge from '@/app/components/base/badge'
 const PluginList = async () => {
@@ -53,7 +53,7 @@ const PluginList = async () => {
         <h3 className='my-1'>Install model provide</h3>
         <div className='grid grid-cols-2 gap-3'>
           {pluginList.map((plugin, index) => (
-            <InstallModelItem key={index} locale={locale} payload={plugin as any} />
+            <ProviderCard key={index} locale={locale} payload={plugin as any} />
           ))}
         </div>
 
diff --git a/web/app/components/plugins/install-model-item.tsx b/web/app/components/plugins/install-model-item.tsx
deleted file mode 100644
index a053cd7671..0000000000
--- a/web/app/components/plugins/install-model-item.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import React from 'react'
-import type { FC } from 'react'
-import { RiVerifiedBadgeLine } from '@remixicon/react'
-import Badge from '../base/badge'
-import type { Plugin } from './types'
-import Description from './card/base/description'
-import Icon from './card/base/card-icon'
-import Title from './card/base/title'
-import DownloadCount from './card/base/download-count'
-import type { Locale } from '@/i18n'
-import cn from '@/utils/classnames'
-
-type Props = {
-  className?: string
-  locale: Locale // The component is used in both client and server side, so we can't get the locale from both side(getLocaleOnServer and useContext)
-  payload: Plugin
-}
-
-const PluginItem: FC<Props> = ({
-  className,
-  locale,
-  payload,
-}) => {
-  const { org, label } = payload
-
-  return (
-    <div className='p-1 bg-background-section-burn rounded-xl'>
-      <div className={cn('relative p-4 pb-3 border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg hover-bg-components-panel-on-panel-item-bg rounded-xl shadow-xs', className)}>
-        {/* Header */}
-        <div className="flex">
-          <Icon src={payload.icon} />
-          <div className="ml-3 w-0 grow">
-            <div className="flex items-center h-5">
-              <Title title={label[locale]} />
-              <RiVerifiedBadgeLine className="shrink-0 ml-0.5 w-4 h-4 text-text-accent" />
-            </div>
-            <div className='mb-1 flex justify-between items-center h-4'>
-              <div className='flex items-center'>
-                <div className='text-text-tertiary system/xs-regular'>{org}</div>
-                <div className='mx-2 text-text-quaternary system-xs-regular'>·</div>
-                <DownloadCount downloadCount={payload.install_count || 0} />
-              </div>
-            </div>
-          </div>
-        </div>
-        <Description className='mt-3' text={payload.brief[locale]} descriptionLineRows={2}></Description>
-        <div className='mt-3 flex space-x-0.5'>
-          {['LLM', 'text embedding', 'speech2text'].map(tag => (
-            <Badge key={tag} text={tag} />
-          ))}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default PluginItem