diff --git a/web/app/components/plugins/marketplace/list/card-wrapper.tsx b/web/app/components/plugins/marketplace/list/card-wrapper.tsx
index c9d83f32ac..4ef5dccb65 100644
--- a/web/app/components/plugins/marketplace/list/card-wrapper.tsx
+++ b/web/app/components/plugins/marketplace/list/card-wrapper.tsx
@@ -1,5 +1,6 @@
 'use client'
 import { RiArrowRightUpLine } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
 import Card from '@/app/components/plugins/card'
 import CardMoreInfo from '@/app/components/plugins/card/card-more-info'
 import type { Plugin } from '@/app/components/plugins/types'
@@ -14,6 +15,7 @@ const CardWrapper = ({
   plugin,
   showInstallButton,
 }: CardWrapperProps) => {
+  const { t } = useTranslation()
   return (
     <div className='group relative rounded-xl cursor-pointer'>
       <Card
@@ -33,14 +35,15 @@ const CardWrapper = ({
               variant='primary'
               className='flex-1'
             >
-              Install
+              {t('plugin.detailPanel.operation.install')}
             </Button>
             <Button
               className='flex-1'
             >
-              <a href={`${MARKETPLACE_URL_PREFIX}/plugin/${plugin.org}/${plugin.name}`} target='_blank' className='flex items-center gap-0.5'></a>
-              Details
-              <RiArrowRightUpLine className='ml-1 w-4 h-4' />
+              <a href={`${MARKETPLACE_URL_PREFIX}/plugin/${plugin.org}/${plugin.name}`} target='_blank' className='flex items-center gap-0.5'>
+                {t('plugin.detailPanel.operation.detail')}
+                <RiArrowRightUpLine className='ml-1 w-4 h-4' />
+              </a>
             </Button>
           </div>
         )
diff --git a/web/app/components/plugins/provider-card.tsx b/web/app/components/plugins/provider-card.tsx
index 2ced311100..15b78acd82 100644
--- a/web/app/components/plugins/provider-card.tsx
+++ b/web/app/components/plugins/provider-card.tsx
@@ -1,6 +1,7 @@
 'use client'
 import React from 'react'
 import type { FC } from 'react'
+import { useTranslation } from 'react-i18next'
 import { RiArrowRightUpLine, RiVerifiedBadgeLine } from '@remixicon/react'
 import Badge from '../base/badge'
 import type { Plugin } from './types'
@@ -22,6 +23,7 @@ const ProviderCard: FC<Props> = ({
   className,
   payload,
 }) => {
+  const { t } = useTranslation()
   const language = useGetLanguage()
   const { org, label } = payload
 
@@ -57,14 +59,14 @@ const ProviderCard: FC<Props> = ({
           className='flex-grow'
           variant='primary'
         >
-          Install
+          {t('plugin.detailPanel.operation.install')}
         </Button>
         <Button
           className='flex-grow'
           variant='secondary'
         >
           <a href={`${MARKETPLACE_URL_PREFIX}/plugin/${payload.org}/${payload.name}`} target='_blank' className='flex items-center gap-0.5'>
-            Details
+            {t('plugin.detailPanel.operation.detail')}
             <RiArrowRightUpLine className='w-4 h-4' />
           </a>
         </Button>
diff --git a/web/i18n/en-US/plugin.ts b/web/i18n/en-US/plugin.ts
index dc615d3a94..0801ee21b6 100644
--- a/web/i18n/en-US/plugin.ts
+++ b/web/i18n/en-US/plugin.ts
@@ -13,7 +13,7 @@ const translation = {
     },
     operation: {
       install: 'Install',
-      detail: 'Detail',
+      detail: 'Details',
       update: 'Update',
       info: 'Plugin Info',
       checkUpdate: 'Check Update',