diff --git a/web/features/deployments/detail/access-tab/channels-section.tsx b/web/features/deployments/detail/access-tab/channels-section.tsx
index ab0b8a141f..af03937854 100644
--- a/web/features/deployments/detail/access-tab/channels-section.tsx
+++ b/web/features/deployments/detail/access-tab/channels-section.tsx
@@ -5,7 +5,8 @@ import { useMutation, useQuery } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
 import { consoleQuery } from '@/service/client'
 import { environmentName, webappUrl } from '../../utils'
-import { CopyPill, EndpointRow, Section } from './common'
+import { Section } from '../common'
+import { CopyPill, EndpointRow } from './common'
 import { getUrlOrigin } from './url'
 
 type AccessChannelsSectionProps = {
diff --git a/web/features/deployments/detail/access-tab/common.tsx b/web/features/deployments/detail/access-tab/common.tsx
index 17dc5c4d98..ca2ed269dd 100644
--- a/web/features/deployments/detail/access-tab/common.tsx
+++ b/web/features/deployments/detail/access-tab/common.tsx
@@ -6,30 +6,6 @@ import { toast } from '@langgenius/dify-ui/toast'
 import { useTranslation } from 'react-i18next'
 import { useClipboard } from '@/hooks/use-clipboard'
 
-type SectionProps = {
-  title: string
-  description?: string
-  action?: ReactNode
-  children: ReactNode
-}
-
-export function Section({ title, description, action, children }: SectionProps) {
-  return (
-    <div className="flex flex-col gap-3 rounded-xl border border-components-panel-border bg-components-panel-bg p-4">
-      <div className="flex items-start justify-between gap-3">
-        <div>
-          <div className="system-sm-semibold text-text-primary">{title}</div>
-          {description && (
-            <p className="mt-1 max-w-xl system-xs-regular text-text-tertiary">{description}</p>
-          )}
-        </div>
-        {action}
-      </div>
-      {children}
-    </div>
-  )
-}
-
 type CopyPillProps = {
   label: string
   value: string
diff --git a/web/features/deployments/detail/access-tab/developer-api-section.tsx b/web/features/deployments/detail/access-tab/developer-api-section.tsx
index 670b06ca21..51f5b58ec0 100644
--- a/web/features/deployments/detail/access-tab/developer-api-section.tsx
+++ b/web/features/deployments/detail/access-tab/developer-api-section.tsx
@@ -10,8 +10,9 @@ import { useAtomValue, useSetAtom } from 'jotai'
 import { useTranslation } from 'react-i18next'
 import { consoleQuery } from '@/service/client'
 import { createdDeveloperApiTokenAtom } from '../../store'
+import { Section } from '../common'
 import { ApiKeyGenerateMenu, ApiKeyList } from './api-keys'
-import { CopyPill, Section } from './common'
+import { CopyPill } from './common'
 
 type DeveloperApiSectionProps = {
   appInstanceId: string
diff --git a/web/features/deployments/detail/access-tab/permissions-section.tsx b/web/features/deployments/detail/access-tab/permissions-section.tsx
index ed9d12bce6..b968ae9b8a 100644
--- a/web/features/deployments/detail/access-tab/permissions-section.tsx
+++ b/web/features/deployments/detail/access-tab/permissions-section.tsx
@@ -6,7 +6,7 @@ import type {
 import { useQuery } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
 import { consoleQuery } from '@/service/client'
-import { Section } from './common'
+import { Section } from '../common'
 import { EnvironmentPermissionRow } from './permissions'
 
 type AccessPermissionsSectionProps = {
diff --git a/web/features/deployments/detail/common.tsx b/web/features/deployments/detail/common.tsx
new file mode 100644
index 0000000000..37b9a2fa26
--- /dev/null
+++ b/web/features/deployments/detail/common.tsx
@@ -0,0 +1,27 @@
+'use client'
+
+import type { ReactNode } from 'react'
+
+type SectionProps = {
+  title: string
+  description?: string
+  action?: ReactNode
+  children: ReactNode
+}
+
+export function Section({ title, description, action, children }: SectionProps) {
+  return (
+    <div className="flex flex-col gap-3 rounded-xl border border-components-panel-border bg-components-panel-bg p-4">
+      <div className="flex items-start justify-between gap-3">
+        <div>
+          <div className="system-sm-semibold text-text-primary">{title}</div>
+          {description && (
+            <p className="mt-1 max-w-xl system-xs-regular text-text-tertiary">{description}</p>
+          )}
+        </div>
+        {action}
+      </div>
+      {children}
+    </div>
+  )
+}
diff --git a/web/features/deployments/detail/overview-tab.tsx b/web/features/deployments/detail/overview-tab.tsx
index 884f87f02a..2abdc5bdc1 100644
--- a/web/features/deployments/detail/overview-tab.tsx
+++ b/web/features/deployments/detail/overview-tab.tsx
@@ -16,22 +16,7 @@ import {
   toAppMode,
   webappUrl,
 } from '../utils'
-
-function Section({ title, action, children }: {
-  title: string
-  action?: ReactNode
-  children: ReactNode
-}) {
-  return (
-    <div className="flex flex-col gap-3 rounded-xl border border-components-panel-border bg-components-panel-bg p-4">
-      <div className="flex items-center justify-between">
-        <div className="system-sm-semibold text-text-primary">{title}</div>
-        {action}
-      </div>
-      {children}
-    </div>
-  )
-}
+import { Section } from './common'
 
 function InfoRow({ label, value, mono }: {
   label: string