diff --git a/web/app/components/plugins/marketplace/home/home-creator-center.tsx b/web/app/components/plugins/marketplace/home/home-creator-center.tsx
new file mode 100644
index 00000000000..c60e7f22d3c
--- /dev/null
+++ b/web/app/components/plugins/marketplace/home/home-creator-center.tsx
@@ -0,0 +1,51 @@
+'use client'
+
+import { buttonVariants } from '@langgenius/dify-ui/button'
+import { cn } from '@langgenius/dify-ui/cn'
+import { useTranslation } from '#i18n'
+import { MARKETPLACE_URL_PREFIX } from '@/config'
+import Link from '@/next/link'
+
+const PUBLIC_CREATOR_CENTER_URL = 'https://creators.dify.ai/'
+
+const getCreatorCenterUrl = (marketplaceUrlPrefix: string) => {
+  if (!marketplaceUrlPrefix) return PUBLIC_CREATOR_CENTER_URL
+
+  try {
+    const marketplaceUrl = new URL(marketplaceUrlPrefix)
+    const [service, ...domain] = marketplaceUrl.hostname.split('.')
+    if (!service?.startsWith('marketplace') || domain.length === 0) return PUBLIC_CREATOR_CENTER_URL
+
+    marketplaceUrl.hostname = [service.replace(/^marketplace/, 'creators'), ...domain].join('.')
+    marketplaceUrl.pathname = '/'
+    marketplaceUrl.search = ''
+    marketplaceUrl.hash = ''
+    return marketplaceUrl.toString()
+  } catch {
+    return PUBLIC_CREATOR_CENTER_URL
+  }
+}
+
+export default function HomeCreatorCenter() {
+  const { t } = useTranslation('plugin')
+  const creatorCenterUrl = getCreatorCenterUrl(MARKETPLACE_URL_PREFIX)
+  const label = t(($) => $['marketplace.home.creatorCenter'])
+
+  return (
+    <Link
+      href={creatorCenterUrl}
+      target="_blank"
+      rel="noopener noreferrer"
+      // The visible text is hidden below the lg breakpoint, so the link needs
+      // an explicit accessible name to avoid becoming an icon-only mystery.
+      aria-label={label}
+      className={cn(
+        buttonVariants({ variant: 'ghost' }),
+        'flex items-center gap-1 px-3 py-2 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary [html[data-theme=dark]_&]:text-text-primary [html[data-theme=dark]_&]:hover:text-text-primary',
+      )}
+    >
+      <span aria-hidden className="i-ri-user-star-line size-4" />
+      <span className="hidden system-sm-medium lg:inline">{label}</span>
+    </Link>
+  )
+}
diff --git a/web/app/components/plugins/marketplace/home/home-header.tsx b/web/app/components/plugins/marketplace/home/home-header.tsx
index 3cfd564cfd9..bb065df4d6d 100644
--- a/web/app/components/plugins/marketplace/home/home-header.tsx
+++ b/web/app/components/plugins/marketplace/home/home-header.tsx
@@ -1,12 +1,12 @@
 import type { HomeCatalogTab, HomeCatalogTabLabels } from './home-catalog-tabs'
-import { buttonVariants } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
-import { useTranslation } from '#i18n'
-import { MARKETPLACE_URL_PREFIX } from '@/config'
 import Link from '@/next/link'
 import MarketplaceLogoDark from '@/public/marketplace/dify-marketplace-logo-dark.svg'
 import MarketplaceLogo from '@/public/marketplace/dify-marketplace-logo.svg'
 import HomeCatalogTabs from './home-catalog-tabs'
+// HomeCreatorCenter stays in its own client module: it derives styles via
+// buttonVariants(), which cannot be invoked inside this server component.
+import HomeCreatorCenter from './home-creator-center'
 import HomeGuide from './home-guide'
 import { HomeStickyCatalogTabs } from './home-sticky-state-provider'
 import styles from './home-sticky.module.css'
@@ -19,50 +19,6 @@ type HomeHeaderProps = {
   language?: string
 }
 
-const PUBLIC_CREATOR_CENTER_URL = 'https://creators.dify.ai/'
-
-const getCreatorCenterUrl = (marketplaceUrlPrefix: string) => {
-  if (!marketplaceUrlPrefix) return PUBLIC_CREATOR_CENTER_URL
-
-  try {
-    const marketplaceUrl = new URL(marketplaceUrlPrefix)
-    const [service, ...domain] = marketplaceUrl.hostname.split('.')
-    if (!service?.startsWith('marketplace') || domain.length === 0) return PUBLIC_CREATOR_CENTER_URL
-
-    marketplaceUrl.hostname = [service.replace(/^marketplace/, 'creators'), ...domain].join('.')
-    marketplaceUrl.pathname = '/'
-    marketplaceUrl.search = ''
-    marketplaceUrl.hash = ''
-    return marketplaceUrl.toString()
-  } catch {
-    return PUBLIC_CREATOR_CENTER_URL
-  }
-}
-
-const CreatorCenter = () => {
-  const { t } = useTranslation('plugin')
-  const creatorCenterUrl = getCreatorCenterUrl(MARKETPLACE_URL_PREFIX)
-  const label = t(($) => $['marketplace.home.creatorCenter'])
-
-  return (
-    <Link
-      href={creatorCenterUrl}
-      target="_blank"
-      rel="noopener noreferrer"
-      // The visible text is hidden below the lg breakpoint, so the link needs
-      // an explicit accessible name to avoid becoming an icon-only mystery.
-      aria-label={label}
-      className={cn(
-        buttonVariants({ variant: 'ghost' }),
-        'flex items-center gap-1 px-3 py-2 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary [html[data-theme=dark]_&]:text-text-primary [html[data-theme=dark]_&]:hover:text-text-primary',
-      )}
-    >
-      <span aria-hidden className="i-ri-user-star-line size-4" />
-      <span className="hidden system-sm-medium lg:inline">{label}</span>
-    </Link>
-  )
-}
-
 const HomeHeader = ({
   activeTab = 'plugins',
   actions,
@@ -118,7 +74,7 @@ const HomeHeader = ({
       </div>
 
       <div className="flex h-full min-w-0 flex-1 items-center justify-end gap-2.5">
-        <CreatorCenter />
+        <HomeCreatorCenter />
         <HomeGuide isMarketplacePlatform={isMarketplacePlatform} />
         {actions}
       </div>