diff --git a/web/app/components/header/account-setting/model-provider-page/model-badge/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-badge/index.tsx
index 29da08dc22..cb641ec0fb 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-badge/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-badge/index.tsx
@@ -10,7 +10,7 @@ const ModelBadge: FC<ModelBadgeProps> = ({
   children,
 }) => {
   return (
-    <div className={cn('system-2xs-medium-uppercase flex h-[18px] cursor-default items-center rounded-[5px] border border-divider-deep px-1 text-text-tertiary', className)}>
+    <div className={cn('inline-flex h-[18px] shrink-0 items-center justify-center whitespace-nowrap rounded-[5px] border border-divider-deep bg-components-badge-bg-dimm px-[5px] text-text-tertiary system-2xs-medium-uppercase', className)}>
       {children}
     </div>
   )
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/add-model-button.spec.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/add-model-button.spec.tsx
deleted file mode 100644
index c0c5daece1..0000000000
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/add-model-button.spec.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react'
-import AddModelButton from './add-model-button'
-
-describe('AddModelButton', () => {
-  it('should render button with text', () => {
-    render(<AddModelButton onClick={vi.fn()} />)
-    expect(screen.getByText('common.modelProvider.addModel')).toBeInTheDocument()
-  })
-
-  it('should call onClick when clicked', () => {
-    const handleClick = vi.fn()
-    render(<AddModelButton onClick={handleClick} />)
-    const button = screen.getByText('common.modelProvider.addModel')
-    fireEvent.click(button)
-    expect(handleClick).toHaveBeenCalledTimes(1)
-  })
-})
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/add-model-button.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/add-model-button.tsx
deleted file mode 100644
index eac6567ac8..0000000000
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/add-model-button.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import type { FC } from 'react'
-import { useTranslation } from 'react-i18next'
-import { PlusCircle } from '@/app/components/base/icons/src/vender/solid/general'
-import { cn } from '@/utils/classnames'
-
-type AddModelButtonProps = {
-  className?: string
-  onClick: () => void
-}
-const AddModelButton: FC<AddModelButtonProps> = ({
-  className,
-  onClick,
-}) => {
-  const { t } = useTranslation()
-
-  return (
-    <span
-      className={cn('system-xs-medium flex h-6 shrink-0 cursor-pointer items-center rounded-md px-1.5 text-text-tertiary hover:bg-components-button-ghost-bg-hover hover:text-components-button-ghost-text', className)}
-      onClick={onClick}
-    >
-      <PlusCircle className="mr-1 h-3 w-3" />
-      {t('modelProvider.addModel', { ns: 'common' })}
-    </span>
-  )
-}
-
-export default AddModelButton
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/provider-card-actions.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/provider-card-actions.tsx
index d58c96b5aa..32ed348b47 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/provider-card-actions.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/provider-card-actions.tsx
@@ -1,6 +1,8 @@
 import type { FC } from 'react'
 import type { PluginDetail } from '@/app/components/plugins/types'
 import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import Button from '@/app/components/base/button'
 import { HeaderModals } from '@/app/components/plugins/plugin-detail-panel/detail-header/components'
 import { useDetailHeaderState, usePluginOperations } from '@/app/components/plugins/plugin-detail-panel/detail-header/hooks'
 import OperationDropdown from '@/app/components/plugins/plugin-detail-panel/operation-dropdown'
@@ -17,10 +19,11 @@ type Props = {
 }
 
 const ProviderCardActions: FC<Props> = ({ detail, onUpdate }) => {
+  const { t } = useTranslation()
   const { theme } = useTheme()
   const locale = useLocale()
 
-  const { source, version, meta } = detail
+  const { source, version, latest_version, latest_unique_identifier, meta } = detail
   const author = detail.declaration?.author ?? ''
   const name = detail.declaration?.name ?? detail.name
 
@@ -30,6 +33,7 @@ const ProviderCardActions: FC<Props> = ({ detail, onUpdate }) => {
     hasNewVersion,
     isAutoUpgradeEnabled,
     isFromMarketplace,
+    isFromGitHub,
   } = useDetailHeaderState(detail)
 
   const {
@@ -49,6 +53,16 @@ const ProviderCardActions: FC<Props> = ({ detail, onUpdate }) => {
     handleUpdate(state.isDowngrade)
   }
 
+  const handleTriggerLatestUpdate = () => {
+    if (isFromMarketplace) {
+      versionPicker.setTargetVersion({
+        version: latest_version,
+        unique_identifier: latest_unique_identifier,
+      })
+    }
+    handleUpdate()
+  }
+
   const detailUrl = useMemo(() => {
     if (source === PluginSource.github)
       return meta?.repo ? `https://github.com/${meta.repo}` : ''
@@ -69,23 +83,35 @@ const ProviderCardActions: FC<Props> = ({ detail, onUpdate }) => {
           onSelect={handleVersionSelect}
           offset={{ mainAxis: 4, crossAxis: 0 }}
           trigger={(
-            <div
+            <button
+              type="button"
+              disabled={!isFromMarketplace}
               className={cn(
-                'relative inline-flex min-w-5 items-center justify-center gap-[3px] rounded-md border border-divider-deep px-[5px] py-[2px] text-text-tertiary system-xs-medium-uppercase',
-                versionPicker.isShow && 'bg-state-base-hover',
-                isFromMarketplace && 'cursor-pointer hover:bg-state-base-hover',
+                'relative inline-flex min-w-5 items-center justify-center gap-[3px] rounded-md border border-divider-deep bg-state-base-hover px-[5px] py-[2px] text-text-tertiary system-xs-medium-uppercase',
+                isFromMarketplace && 'cursor-pointer hover:bg-state-base-hover-alt',
               )}
             >
               <span>{version}</span>
-              {isFromMarketplace && <span className="i-ri-arrow-left-right-line h-3 w-3" />}
+              {isFromMarketplace && <span aria-hidden className="i-ri-arrow-left-right-line h-3 w-3" />}
               {hasNewVersion && (
                 <span className="absolute -right-0.5 -top-0.5 h-1.5 w-1.5 rounded-full bg-state-destructive-solid" />
               )}
-            </div>
+            </button>
           )}
         />
       )}
 
+      {(hasNewVersion || isFromGitHub) && (
+        <Button
+          variant="secondary-accent"
+          size="small"
+          className="!h-5"
+          onClick={handleTriggerLatestUpdate}
+        >
+          {t('detailPanel.operation.update', { ns: 'plugin' })}
+        </Button>
+      )}
+
       <OperationDropdown
         source={source}
         onInfo={modalStates.showPluginInfo}
diff --git a/web/eslint-suppressions.json b/web/eslint-suppressions.json
index e548cea291..0cb621822a 100644
--- a/web/eslint-suppressions.json
+++ b/web/eslint-suppressions.json
@@ -4723,11 +4723,6 @@
       "count": 3
     }
   },
-  "app/components/header/account-setting/model-provider-page/model-badge/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/header/account-setting/model-provider-page/model-modal/Form.tsx": {
     "no-restricted-imports": {
       "count": 2
@@ -4854,11 +4849,6 @@
       "count": 1
     }
   },
-  "app/components/header/account-setting/model-provider-page/provider-added-card/add-model-button.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
   "app/components/header/account-setting/model-provider-page/provider-added-card/cooldown-timer.tsx": {
     "no-restricted-imports": {
       "count": 1