diff --git a/web/app/(commonLayout)/plugins/test/card/page.tsx b/web/app/(commonLayout)/plugins/test/card/page.tsx
index 0b76e183f9..83643873e3 100644
--- a/web/app/(commonLayout)/plugins/test/card/page.tsx
+++ b/web/app/(commonLayout)/plugins/test/card/page.tsx
@@ -1,25 +1,32 @@
 import { handleDelete } from './actions'
+import TestClientPlugin from './test-client-plugin'
 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 { getLocaleOnServer } from '@/i18n/server'
-
+import { getLocaleOnServer, useTranslation as translate } from '@/i18n/server'
 const PluginList = async () => {
   const locale = getLocaleOnServer()
-
   const pluginList = [toolNotion, extensionDallE, modelGPT4]
-
+  const { t: pluginI8n } = await translate(locale, 'plugin')
   return (
     <div className='pb-3 bg-white'>
       <div className='mx-3 '>
         <h2 className='my-3'>Dify Plugin list</h2>
         <div className='grid grid-cols-2 gap-3'>
           {pluginList.map((plugin, index) => (
-            <PluginItem key={index} payload={plugin as any} onDelete={handleDelete} />
+            <PluginItem
+              key={index}
+              payload={plugin as any}
+              onDelete={handleDelete}
+              pluginI8n={pluginI8n}
+              locale={locale}
+            />
           ))}
         </div>
+        <h2>Client plugin item</h2>
+        <TestClientPlugin />
 
         <h2 className='my-3'>Install Plugin / Package under bundle</h2>
         <div className='w-[512px] rounded-2xl bg-background-section-burn p-2'>
diff --git a/web/app/(commonLayout)/plugins/test/card/test-client-plugin.tsx b/web/app/(commonLayout)/plugins/test/card/test-client-plugin.tsx
new file mode 100644
index 0000000000..8187428d9c
--- /dev/null
+++ b/web/app/(commonLayout)/plugins/test/card/test-client-plugin.tsx
@@ -0,0 +1,21 @@
+'use client'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { useContext } from 'use-context-selector'
+import { extensionDallE } from '@/app/components/plugins/card/card-mock'
+import PluginItem from '@/app/components/plugins/plugin-item'
+import I18n from '@/context/i18n'
+
+const TestClientPlugin = () => {
+  const { locale } = useContext(I18n)
+  const { t } = useTranslation()
+  return (
+    <PluginItem
+      payload={extensionDallE as any}
+      onDelete={() => { }}
+      pluginI8n={t}
+      locale={locale}
+    />
+  )
+}
+export default React.memo(TestClientPlugin)
diff --git a/web/app/components/plugins/plugin-item/index.tsx b/web/app/components/plugins/plugin-item/index.tsx
index 3c07383274..d4f4159af5 100644
--- a/web/app/components/plugins/plugin-item/index.tsx
+++ b/web/app/components/plugins/plugin-item/index.tsx
@@ -10,22 +10,27 @@ import Icon from '../card/base/card-icon'
 import OrgInfo from '../card/base/org-info'
 import Title from '../card/base/title'
 import Action from './action'
-import { getLocaleOnServer, useTranslation as translate } from '@/i18n/server'
 import cn from '@/utils/classnames'
+import type { Locale } from '@/i18n'
 
 type Props = {
   className?: string
   payload: Plugin
+  locale: Locale
   onDelete: () => void
+  pluginI8n: any
+  isClient?: boolean
 }
 
-const PluginItem: FC<Props> = async ({
+const PluginItem: FC<Props> = ({
   className,
   payload,
   onDelete,
+  locale,
+  pluginI8n,
+  isClient,
 }) => {
-  const locale = getLocaleOnServer()
-  const { t: pluginI8n } = await translate(locale, 'plugin')
+  const t = (key: string, param?: object) => pluginI8n(`${isClient ? 'plugin.' : ''}${key}`, param)
 
   const { type, name, org, label } = payload
   const hasNewVersion = payload.latest_version !== payload.version
@@ -67,12 +72,12 @@ const PluginItem: FC<Props> = async ({
           <div className='mx-2 text-text-quaternary system-xs-regular'>·</div>
           <div className='flex text-text-tertiary system-xs-regular space-x-1'>
             <RiLoginCircleLine className='w-4 h-4' />
-            <span>{pluginI8n('endpointsEnabled', { num: 2 })}</span>
+            <span>{t('endpointsEnabled', { num: 2 })}</span>
           </div>
         </div>
 
         <div className='flex items-center'>
-          <a href='' target='_blank' className='mr-1 text-text-tertiary system-2xs-medium-uppercase'>{pluginI8n('from')}</a>
+          <a href='' target='_blank' className='mr-1 text-text-tertiary system-2xs-medium-uppercase'>{t('from')}</a>
           <div className='flex items-center space-x-0.5 text-text-secondary'>
             <Github className='ml-1 w-3 h-3' />
             <div className='system-2xs-semibold-uppercase'>GitHub</div>