diff --git a/web/app/(commonLayout)/plugins/test/card/page.tsx b/web/app/(commonLayout)/plugins/test/card/page.tsx
index bd1169cd91..e7ba6849bb 100644
--- a/web/app/(commonLayout)/plugins/test/card/page.tsx
+++ b/web/app/(commonLayout)/plugins/test/card/page.tsx
@@ -4,8 +4,11 @@ import { extensionDallE, modelGPT4, toolNotion } from '@/app/components/plugins/
 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'
 
 const PluginList = async () => {
+  const locale = getLocaleOnServer()
+
   const pluginList = [toolNotion, extensionDallE, modelGPT4]
 
   return (
@@ -22,6 +25,7 @@ const PluginList = async () => {
         <div className='w-[512px] rounded-2xl bg-background-section-burn p-2'>
           <Card
             payload={toolNotion as any}
+            locale={locale}
             descriptionLineRows={1}
             showVersion
           />
@@ -30,6 +34,7 @@ const PluginList = async () => {
         <div className='w-[512px] rounded-2xl bg-background-section-burn p-2'>
           <Card
             payload={toolNotion as any}
+            locale={locale}
             descriptionLineRows={1}
             installed
           />
@@ -49,6 +54,7 @@ const PluginList = async () => {
             <Card
               key={index}
               payload={plugin as any}
+              locale={locale}
               footer={
                 <CardMoreInfo downloadCount={index % 2 === 0 ? 1234 : 6} tags={index % 2 === 0 ? ['Search', 'Productivity'] : []} />
               }
diff --git a/web/app/components/plugins/card/index.tsx b/web/app/components/plugins/card/index.tsx
index 0936541b88..b67c68c7e4 100644
--- a/web/app/components/plugins/card/index.tsx
+++ b/web/app/components/plugins/card/index.tsx
@@ -8,17 +8,16 @@ import Title from './base/title'
 import OrgInfo from './base/org-info'
 import Description from './base/description'
 import cn from '@/utils/classnames'
-// import { getLocaleOnServer } from '@/i18n/server'
 import type { Locale } from '@/i18n'
 
 type Props = {
   className?: string
   payload: Plugin
+  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)
   showVersion?: boolean
   installed?: boolean
   descriptionLineRows?: number
   footer?: React.ReactNode
-  clientLocale?: Locale
   serverLocale?: Locale
 }
 
@@ -29,10 +28,8 @@ const Card = ({
   installed,
   descriptionLineRows = 2,
   footer,
-  clientLocale,
-  serverLocale,
+  locale,
 }: Props) => {
-  const locale = clientLocale || serverLocale || 'en'
   const { type, name, org, label } = payload
 
   return (
diff --git a/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx b/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx
index dd80fcce55..36e813bf68 100644
--- a/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx
@@ -39,7 +39,7 @@ const InstallFromMarketplace: React.FC<InstallFromMarketplaceProps> = ({ onClose
             <Card
               key={index}
               payload={plugin as any}
-              clientLocale={locale}
+              locale={locale}
             />
           ))}
         </div>