diff --git a/web/features/deployments/detail/access-tab/channels-section.tsx b/web/features/deployments/detail/access-tab/channels-section.tsx
index 21078b37aa..842ee329cd 100644
--- a/web/features/deployments/detail/access-tab/channels-section.tsx
+++ b/web/features/deployments/detail/access-tab/channels-section.tsx
@@ -16,6 +16,25 @@ type AccessChannelsSectionProps = {
   cliDocsUrl?: string
 }
 
+function AccessChannelsSwitch({ appId, checked }: {
+  appId: string
+  checked: boolean
+}) {
+  const toggleAccessChannel = useMutation(consoleQuery.enterprise.appDeploy.updateAccessChannels.mutationOptions())
+
+  return (
+    <Switch
+      checked={checked}
+      onCheckedChange={(enabled) => {
+        toggleAccessChannel.mutate({
+          params: { appInstanceId: appId },
+          body: { enabled },
+        })
+      }}
+    />
+  )
+}
+
 export function AccessChannelsSection({
   appId,
   runEnabled,
@@ -24,23 +43,15 @@ export function AccessChannelsSection({
   cliDocsUrl,
 }: AccessChannelsSectionProps) {
   const { t } = useTranslation('deployments')
-  const toggleAccessChannel = useMutation(consoleQuery.enterprise.appDeploy.updateAccessChannels.mutationOptions())
-
-  function handleToggle(enabled: boolean) {
-    toggleAccessChannel.mutate({
-      params: { appInstanceId: appId },
-      body: { enabled },
-    })
-  }
 
   return (
     <Section
       title={t('access.channels.title')}
       description={t('access.channels.description')}
       action={(
-        <Switch
+        <AccessChannelsSwitch
+          appId={appId}
           checked={runEnabled}
-          onCheckedChange={handleToggle}
         />
       )}
     >
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 ed262d7dea..a0a44a7943 100644
--- a/web/features/deployments/detail/access-tab/developer-api-section.tsx
+++ b/web/features/deployments/detail/access-tab/developer-api-section.tsx
@@ -18,6 +18,66 @@ type DeveloperApiSectionProps = {
   apiKeys: DeveloperApiKeyRow[]
 }
 
+function DeveloperApiSwitch({ appId, checked }: {
+  appId: string
+  checked: boolean
+}) {
+  const toggleDeveloperAPI = useMutation(consoleQuery.enterprise.appDeploy.updateDeveloperApi.mutationOptions())
+
+  return (
+    <Switch
+      checked={checked}
+      onCheckedChange={(enabled) => {
+        toggleDeveloperAPI.mutate({
+          params: { appInstanceId: appId },
+          body: { enabled },
+        })
+      }}
+    />
+  )
+}
+
+function CreatedApiTokenCard({ appId }: {
+  appId: string
+}) {
+  const { t } = useTranslation('deployments')
+  const createdApiToken = useAtomValue(createdDeveloperApiTokenAtom)
+  const setCreatedApiToken = useSetAtom(createdDeveloperApiTokenAtom)
+  const visibleCreatedApiToken = createdApiToken?.appId === appId
+    ? createdApiToken.token
+    : undefined
+
+  if (!visibleCreatedApiToken)
+    return null
+
+  return (
+    <div className="flex flex-col gap-2 rounded-lg border border-components-panel-border bg-components-panel-bg-blur p-3">
+      <div className="flex items-start justify-between gap-3">
+        <div className="flex min-w-0 flex-col">
+          <span className="system-sm-medium text-text-primary">
+            {t('access.api.newTokenTitle')}
+          </span>
+          <span className="system-xs-regular text-text-tertiary">
+            {t('access.api.newTokenDescription')}
+          </span>
+        </div>
+        <button
+          type="button"
+          onClick={() => setCreatedApiToken(undefined)}
+          aria-label={t('access.api.dismissToken')}
+          className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary"
+        >
+          <span className="i-ri-close-line h-3.5 w-3.5" />
+        </button>
+      </div>
+      <CopyPill
+        label={t('access.api.newTokenLabel')}
+        value={visibleCreatedApiToken}
+      />
+    </div>
+  )
+}
+
 export function DeveloperApiSection({
   appId,
   apiEnabled,
@@ -26,29 +86,15 @@ export function DeveloperApiSection({
   apiKeys,
 }: DeveloperApiSectionProps) {
   const { t } = useTranslation('deployments')
-  const createdApiToken = useAtomValue(createdDeveloperApiTokenAtom)
-  const setCreatedApiToken = useSetAtom(createdDeveloperApiTokenAtom)
-  const toggleDeveloperAPI = useMutation(consoleQuery.enterprise.appDeploy.updateDeveloperApi.mutationOptions())
-
-  function handleToggle(enabled: boolean) {
-    toggleDeveloperAPI.mutate({
-      params: { appInstanceId: appId },
-      body: { enabled },
-    })
-  }
-
-  const visibleCreatedApiToken = createdApiToken?.appId === appId
-    ? createdApiToken.token
-    : undefined
 
   return (
     <Section
       title={t('access.api.developerTitle')}
       description={t('access.api.description')}
       action={(
-        <Switch
+        <DeveloperApiSwitch
+          appId={appId}
           checked={apiEnabled}
-          onCheckedChange={handleToggle}
         />
       )}
     >
@@ -76,32 +122,7 @@ export function DeveloperApiSection({
                   apiKeys={apiKeys}
                 />
               </div>
-              {visibleCreatedApiToken && (
-                <div className="flex flex-col gap-2 rounded-lg border border-components-panel-border bg-components-panel-bg-blur p-3">
-                  <div className="flex items-start justify-between gap-3">
-                    <div className="flex min-w-0 flex-col">
-                      <span className="system-sm-medium text-text-primary">
-                        {t('access.api.newTokenTitle')}
-                      </span>
-                      <span className="system-xs-regular text-text-tertiary">
-                        {t('access.api.newTokenDescription')}
-                      </span>
-                    </div>
-                    <button
-                      type="button"
-                      onClick={() => setCreatedApiToken(undefined)}
-                      aria-label={t('access.api.dismissToken')}
-                      className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary"
-                    >
-                      <span className="i-ri-close-line h-3.5 w-3.5" />
-                    </button>
-                  </div>
-                  <CopyPill
-                    label={t('access.api.newTokenLabel')}
-                    value={visibleCreatedApiToken}
-                  />
-                </div>
-              )}
+              <CreatedApiTokenCard appId={appId} />
               {apiKeys.length === 0
                 ? (
                     <div className="rounded-lg border border-dashed border-components-panel-border bg-components-panel-bg-blur px-4 py-6 text-center system-sm-regular text-text-tertiary">
diff --git a/web/features/deployments/detail/deploy-tab.tsx b/web/features/deployments/detail/deploy-tab.tsx
index 93c177ab91..dd3b457ef5 100644
--- a/web/features/deployments/detail/deploy-tab.tsx
+++ b/web/features/deployments/detail/deploy-tab.tsx
@@ -1,8 +1,5 @@
 'use client'
-import type { RuntimeInstanceRow } from '@dify/contracts/enterprise/types.gen'
-import type { KeyboardEvent } from 'react'
 import type { EnvironmentOption } from '../types'
-import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import {
   DropdownMenu,
@@ -10,30 +7,19 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@langgenius/dify-ui/dropdown-menu'
-import { useMutation, useQuery } from '@tanstack/react-query'
+import { useQuery } from '@tanstack/react-query'
 import { useSetAtom } from 'jotai'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { consoleQuery } from '@/service/client'
 import { openDeployDrawerAtom } from '../store'
 import {
-  activeRelease,
   deployedRows,
-  deploymentId,
-  deploymentStatus,
-  environmentBackend,
   environmentId,
-  environmentMode,
   environmentName,
   environmentOptionsFromOptionsReply,
-  isUndeployedDeploymentRow,
-  releaseCommit,
-  releaseLabel,
 } from '../utils'
-import { DeploymentPanel } from './deploy-tab/deployment-panel'
-import { DeploymentStatusSummary } from './deploy-tab/deployment-status-summary'
-
-const GRID_TEMPLATE = 'lg:grid-cols-[minmax(180px,1fr)_minmax(140px,0.75fr)_minmax(180px,0.85fr)_240px]'
+import { DeploymentEnvironmentList } from './deploy-tab/deployment-environment-list'
 
 function NewDeploymentMenu({ appInstanceId, availableEnvs }: {
   appInstanceId: string
@@ -95,90 +81,6 @@ function NewDeploymentMenu({ appInstanceId, availableEnvs }: {
   )
 }
 
-function DeploymentRowActions({ appInstanceId, envId, row }: {
-  appInstanceId: string
-  envId: string
-  row: RuntimeInstanceRow
-}) {
-  const { t } = useTranslation('deployments')
-  const [menuOpen, setMenuOpen] = useState(false)
-  const openDeployDrawer = useSetAtom(openDeployDrawerAtom)
-  const cancelDeployment = useMutation(consoleQuery.enterprise.appDeploy.cancelRuntimeDeployment.mutationOptions())
-  const undeployDeployment = useMutation(consoleQuery.enterprise.appDeploy.undeployRuntimeInstance.mutationOptions())
-  const isUndeployed = isUndeployedDeploymentRow(row)
-  const status = deploymentStatus(row)
-
-  function handleRuntimeAction() {
-    const runtimeInstanceId = deploymentId(row)
-    setMenuOpen(false)
-
-    if (status === 'deploying') {
-      cancelDeployment.mutate({
-        params: {
-          appInstanceId,
-          runtimeInstanceId,
-        },
-        body: {
-          appInstanceId,
-          runtimeInstanceId,
-        },
-      })
-      return
-    }
-
-    undeployDeployment.mutate({
-      params: {
-        appInstanceId,
-        runtimeInstanceId,
-      },
-      body: {
-        appInstanceId,
-        runtimeInstanceId,
-      },
-    })
-  }
-
-  return (
-    <div
-      className="flex shrink-0 items-center gap-1"
-      onClick={e => e.stopPropagation()}
-      onKeyDown={e => e.stopPropagation()}
-    >
-      <Button size="small" variant="secondary" onClick={() => openDeployDrawer({ appInstanceId, environmentId: envId })}>
-        {isUndeployed
-          ? t('deployDrawer.deploy')
-          : status === 'ready'
-            ? t('deployTab.deployOtherVersion')
-            : status === 'deploying'
-              ? t('deployTab.viewProgress')
-              : t('deployTab.viewError')}
-      </Button>
-      {!isUndeployed && (
-        <DropdownMenu modal={false} open={menuOpen} onOpenChange={setMenuOpen}>
-          <DropdownMenuTrigger
-            aria-label={t('deployTab.moreActions')}
-            className="flex h-7 w-7 items-center justify-center rounded-md text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary"
-          >
-            <span className="i-ri-more-line h-4 w-4" />
-          </DropdownMenuTrigger>
-          {menuOpen && (
-            <DropdownMenuContent placement="bottom-end" sideOffset={4} popupClassName="w-[200px]">
-              <DropdownMenuItem
-                className="gap-2 px-3"
-                onClick={handleRuntimeAction}
-              >
-                <span className="system-sm-regular text-text-destructive">
-                  {status === 'deploying' ? t('deployTab.cancelDeployment') : t('deployTab.undeploy')}
-                </span>
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          )}
-        </DropdownMenu>
-      )}
-    </div>
-  )
-}
-
 export function DeployTab({ instanceId: appInstanceId }: {
   instanceId: string
 }) {
@@ -195,19 +97,6 @@ export function DeployTab({ instanceId: appInstanceId }: {
 
   const deployedEnvIds = new Set(deployedRuntimeRows.map(row => environmentId(row.environment)))
   const availableEnvs = environmentOptions.filter(env => env.id && !deployedEnvIds.has(env.id))
-  const expandableEnvIds = rows.filter(row => !isUndeployedDeploymentRow(row)).map(row => environmentId(row.environment))
-  const [expanded, setExpanded] = useState<string | null>()
-  const activeExpanded = expanded === undefined
-    ? expandableEnvIds[0] ?? null
-    : expanded !== null && expandableEnvIds.includes(expanded)
-      ? expanded
-      : null
-  const toggle = (id: string) => {
-    setExpanded((prev) => {
-      const current = prev === undefined ? expandableEnvIds[0] ?? null : prev
-      return current === id ? null : id
-    })
-  }
 
   return (
     <div className="flex w-full max-w-[960px] flex-col gap-4 p-6">
@@ -231,90 +120,7 @@ export function DeployTab({ instanceId: appInstanceId }: {
             </div>
           )
         : (
-            <div className="overflow-hidden rounded-xl border border-components-panel-border bg-components-panel-bg">
-              <div className={cn(
-                'hidden items-center gap-4 border-b border-divider-subtle px-4 py-3 system-xs-medium-uppercase text-text-tertiary lg:grid',
-                GRID_TEMPLATE,
-              )}
-              >
-                <div>{t('deployTab.col.environment')}</div>
-                <div>{t('deployTab.col.currentRelease')}</div>
-                <div>{t('deployTab.col.status')}</div>
-                <div className="text-right">{t('deployTab.col.actions')}</div>
-              </div>
-              {rows.map((row) => {
-                const envId = environmentId(row.environment)
-                const isUndeployed = isUndeployedDeploymentRow(row)
-                const isExpanded = !isUndeployed && activeExpanded === envId
-                const release = activeRelease(row)
-                const chevron = !isUndeployed && (
-                  <span
-                    className={cn(
-                      'i-ri-arrow-down-s-line h-4 w-4 shrink-0 text-text-tertiary transition-transform',
-                      isExpanded && 'rotate-180',
-                    )}
-                  />
-                )
-                const handleRowToggle = () => {
-                  if (!isUndeployed)
-                    toggle(envId)
-                }
-                const handleRowKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
-                  if (isUndeployed)
-                    return
-
-                  if (event.key === 'Enter' || event.key === ' ') {
-                    event.preventDefault()
-                    toggle(envId)
-                  }
-                }
-                return (
-                  <div key={envId} className="border-b border-divider-subtle last:border-b-0">
-                    <div
-                      role={isUndeployed ? undefined : 'button'}
-                      tabIndex={isUndeployed ? undefined : 0}
-                      onClick={handleRowToggle}
-                      onKeyDown={handleRowKeyDown}
-                      className={cn(
-                        'flex w-full flex-col gap-2 px-4 py-3 text-left',
-                        !isUndeployed && 'cursor-pointer hover:bg-state-base-hover',
-                        'lg:grid lg:items-center lg:gap-4',
-                        GRID_TEMPLATE,
-                      )}
-                    >
-                      <div className="flex min-w-0 items-start justify-between gap-3 lg:block">
-                        <div className="flex min-w-0 flex-col gap-0.5">
-                          <span className="truncate system-sm-semibold text-text-primary">{environmentName(row.environment)}</span>
-                          <div className="flex items-center gap-1.5 system-xs-regular text-text-tertiary">
-                            <span className="uppercase">{environmentBackend(row.environment)}</span>
-                            <span>·</span>
-                            <span>{t(environmentMode(row.environment) === 'isolated' ? 'mode.isolated' : 'mode.shared')}</span>
-                          </div>
-                        </div>
-                        <div className="flex shrink-0 items-center gap-1 lg:hidden">
-                          <DeploymentRowActions appInstanceId={appInstanceId} envId={envId} row={row} />
-                          {chevron}
-                        </div>
-                      </div>
-                      <div className="flex min-w-0 items-center gap-2">
-                        <span className="min-w-0 truncate font-mono system-sm-medium text-text-primary">{isUndeployed ? '—' : releaseLabel(release)}</span>
-                        {!isUndeployed && (
-                          <span className="shrink-0 font-mono system-xs-regular text-text-tertiary">{releaseCommit(release)}</span>
-                        )}
-                      </div>
-                      <div className="min-w-0">
-                        <DeploymentStatusSummary row={row} />
-                      </div>
-                      <div className="hidden min-w-0 items-center justify-end gap-1 lg:flex">
-                        <DeploymentRowActions appInstanceId={appInstanceId} envId={envId} row={row} />
-                        {chevron}
-                      </div>
-                    </div>
-                    {isExpanded && <DeploymentPanel row={row} />}
-                  </div>
-                )
-              })}
-            </div>
+            <DeploymentEnvironmentList appInstanceId={appInstanceId} rows={rows} />
           )}
     </div>
   )
diff --git a/web/features/deployments/detail/deploy-tab/deployment-environment-list.tsx b/web/features/deployments/detail/deploy-tab/deployment-environment-list.tsx
new file mode 100644
index 0000000000..8d7beb4b87
--- /dev/null
+++ b/web/features/deployments/detail/deploy-tab/deployment-environment-list.tsx
@@ -0,0 +1,248 @@
+'use client'
+
+import type { RuntimeInstanceRow } from '@dify/contracts/enterprise/types.gen'
+import type { KeyboardEvent } from 'react'
+import { Button } from '@langgenius/dify-ui/button'
+import { cn } from '@langgenius/dify-ui/cn'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@langgenius/dify-ui/dropdown-menu'
+import { useMutation } from '@tanstack/react-query'
+import { useSetAtom } from 'jotai'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { consoleQuery } from '@/service/client'
+import { openDeployDrawerAtom } from '../../store'
+import {
+  activeRelease,
+  deploymentId,
+  deploymentStatus,
+  environmentBackend,
+  environmentId,
+  environmentMode,
+  environmentName,
+  isUndeployedDeploymentRow,
+  releaseCommit,
+  releaseLabel,
+} from '../../utils'
+import { DeploymentPanel } from './deployment-panel'
+import { DeploymentStatusSummary } from './deployment-status-summary'
+
+const GRID_TEMPLATE = 'lg:grid-cols-[minmax(180px,1fr)_minmax(140px,0.75fr)_minmax(180px,0.85fr)_240px]'
+
+function DeploymentRowActions({ appInstanceId, envId, row }: {
+  appInstanceId: string
+  envId: string
+  row: RuntimeInstanceRow
+}) {
+  const { t } = useTranslation('deployments')
+  const [menuOpen, setMenuOpen] = useState(false)
+  const openDeployDrawer = useSetAtom(openDeployDrawerAtom)
+  const cancelDeployment = useMutation(consoleQuery.enterprise.appDeploy.cancelRuntimeDeployment.mutationOptions())
+  const undeployDeployment = useMutation(consoleQuery.enterprise.appDeploy.undeployRuntimeInstance.mutationOptions())
+  const isUndeployed = isUndeployedDeploymentRow(row)
+  const status = deploymentStatus(row)
+
+  function handleRuntimeAction() {
+    const runtimeInstanceId = deploymentId(row)
+    setMenuOpen(false)
+
+    if (status === 'deploying') {
+      cancelDeployment.mutate({
+        params: {
+          appInstanceId,
+          runtimeInstanceId,
+        },
+        body: {
+          appInstanceId,
+          runtimeInstanceId,
+        },
+      })
+      return
+    }
+
+    undeployDeployment.mutate({
+      params: {
+        appInstanceId,
+        runtimeInstanceId,
+      },
+      body: {
+        appInstanceId,
+        runtimeInstanceId,
+      },
+    })
+  }
+
+  return (
+    <div
+      className="flex shrink-0 items-center gap-1"
+      onClick={e => e.stopPropagation()}
+      onKeyDown={e => e.stopPropagation()}
+    >
+      <Button size="small" variant="secondary" onClick={() => openDeployDrawer({ appInstanceId, environmentId: envId })}>
+        {isUndeployed
+          ? t('deployDrawer.deploy')
+          : status === 'ready'
+            ? t('deployTab.deployOtherVersion')
+            : status === 'deploying'
+              ? t('deployTab.viewProgress')
+              : t('deployTab.viewError')}
+      </Button>
+      {!isUndeployed && (
+        <DropdownMenu modal={false} open={menuOpen} onOpenChange={setMenuOpen}>
+          <DropdownMenuTrigger
+            aria-label={t('deployTab.moreActions')}
+            className="flex h-7 w-7 items-center justify-center rounded-md text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary"
+          >
+            <span className="i-ri-more-line h-4 w-4" />
+          </DropdownMenuTrigger>
+          {menuOpen && (
+            <DropdownMenuContent placement="bottom-end" sideOffset={4} popupClassName="w-[200px]">
+              <DropdownMenuItem
+                className="gap-2 px-3"
+                onClick={handleRuntimeAction}
+              >
+                <span className="system-sm-regular text-text-destructive">
+                  {status === 'deploying' ? t('deployTab.cancelDeployment') : t('deployTab.undeploy')}
+                </span>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          )}
+        </DropdownMenu>
+      )}
+    </div>
+  )
+}
+
+function DeploymentEnvironmentRow({ appInstanceId, row, isExpanded, onToggle }: {
+  appInstanceId: string
+  row: RuntimeInstanceRow
+  isExpanded: boolean
+  onToggle: (envId: string) => void
+}) {
+  const { t } = useTranslation('deployments')
+  const envId = environmentId(row.environment)
+  const isUndeployed = isUndeployedDeploymentRow(row)
+  const release = activeRelease(row)
+  const chevron = !isUndeployed && (
+    <span
+      className={cn(
+        'i-ri-arrow-down-s-line h-4 w-4 shrink-0 text-text-tertiary transition-transform',
+        isExpanded && 'rotate-180',
+      )}
+    />
+  )
+
+  function handleRowToggle() {
+    if (!isUndeployed)
+      onToggle(envId)
+  }
+
+  function handleRowKeyDown(event: KeyboardEvent<HTMLDivElement>) {
+    if (isUndeployed)
+      return
+
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault()
+      onToggle(envId)
+    }
+  }
+
+  return (
+    <div className="border-b border-divider-subtle last:border-b-0">
+      <div
+        role={isUndeployed ? undefined : 'button'}
+        tabIndex={isUndeployed ? undefined : 0}
+        onClick={handleRowToggle}
+        onKeyDown={handleRowKeyDown}
+        className={cn(
+          'flex w-full flex-col gap-2 px-4 py-3 text-left',
+          !isUndeployed && 'cursor-pointer hover:bg-state-base-hover',
+          'lg:grid lg:items-center lg:gap-4',
+          GRID_TEMPLATE,
+        )}
+      >
+        <div className="flex min-w-0 items-start justify-between gap-3 lg:block">
+          <div className="flex min-w-0 flex-col gap-0.5">
+            <span className="truncate system-sm-semibold text-text-primary">{environmentName(row.environment)}</span>
+            <div className="flex items-center gap-1.5 system-xs-regular text-text-tertiary">
+              <span className="uppercase">{environmentBackend(row.environment)}</span>
+              <span>·</span>
+              <span>{t(environmentMode(row.environment) === 'isolated' ? 'mode.isolated' : 'mode.shared')}</span>
+            </div>
+          </div>
+          <div className="flex shrink-0 items-center gap-1 lg:hidden">
+            <DeploymentRowActions appInstanceId={appInstanceId} envId={envId} row={row} />
+            {chevron}
+          </div>
+        </div>
+        <div className="flex min-w-0 items-center gap-2">
+          <span className="min-w-0 truncate font-mono system-sm-medium text-text-primary">{isUndeployed ? '—' : releaseLabel(release)}</span>
+          {!isUndeployed && (
+            <span className="shrink-0 font-mono system-xs-regular text-text-tertiary">{releaseCommit(release)}</span>
+          )}
+        </div>
+        <div className="min-w-0">
+          <DeploymentStatusSummary row={row} />
+        </div>
+        <div className="hidden min-w-0 items-center justify-end gap-1 lg:flex">
+          <DeploymentRowActions appInstanceId={appInstanceId} envId={envId} row={row} />
+          {chevron}
+        </div>
+      </div>
+      {isExpanded && <DeploymentPanel row={row} />}
+    </div>
+  )
+}
+
+export function DeploymentEnvironmentList({ appInstanceId, rows }: {
+  appInstanceId: string
+  rows: RuntimeInstanceRow[]
+}) {
+  const { t } = useTranslation('deployments')
+  const expandableEnvIds = rows.filter(row => !isUndeployedDeploymentRow(row)).map(row => environmentId(row.environment))
+  const [expanded, setExpanded] = useState<string | null>()
+  const activeExpanded = expanded === undefined
+    ? expandableEnvIds[0] ?? null
+    : expanded !== null && expandableEnvIds.includes(expanded)
+      ? expanded
+      : null
+
+  function toggleExpandedEnv(envId: string) {
+    setExpanded((prev) => {
+      const current = prev === undefined ? expandableEnvIds[0] ?? null : prev
+      return current === envId ? null : envId
+    })
+  }
+
+  return (
+    <div className="overflow-hidden rounded-xl border border-components-panel-border bg-components-panel-bg">
+      <div className={cn(
+        'hidden items-center gap-4 border-b border-divider-subtle px-4 py-3 system-xs-medium-uppercase text-text-tertiary lg:grid',
+        GRID_TEMPLATE,
+      )}
+      >
+        <div>{t('deployTab.col.environment')}</div>
+        <div>{t('deployTab.col.currentRelease')}</div>
+        <div>{t('deployTab.col.status')}</div>
+        <div className="text-right">{t('deployTab.col.actions')}</div>
+      </div>
+      {rows.map((row) => {
+        const envId = environmentId(row.environment)
+        const isExpanded = !isUndeployedDeploymentRow(row) && activeExpanded === envId
+        return (
+          <DeploymentEnvironmentRow
+            key={envId}
+            appInstanceId={appInstanceId}
+            row={row}
+            isExpanded={isExpanded}
+            onToggle={toggleExpandedEnv}
+          />
+        )
+      })}
+    </div>
+  )
+}
diff --git a/web/features/deployments/detail/overview-tab.tsx b/web/features/deployments/detail/overview-tab.tsx
index 47e6b30d20..25e9a722e6 100644
--- a/web/features/deployments/detail/overview-tab.tsx
+++ b/web/features/deployments/detail/overview-tab.tsx
@@ -88,6 +88,19 @@ function overviewDeploymentStatus(status?: string): 'deploying' | 'deploy_failed
   return 'ready'
 }
 
+function DeployFromOverviewButton({ appId }: {
+  appId: string
+}) {
+  const { t } = useTranslation('deployments')
+  const openDeployDrawer = useSetAtom(openDeployDrawerAtom)
+
+  return (
+    <Button size="small" variant="primary" onClick={() => openDeployDrawer({ appInstanceId: appId })}>
+      {t('overview.deploy')}
+    </Button>
+  )
+}
+
 export function OverviewTab({ instanceId }: {
   instanceId: string
 }) {
@@ -109,7 +122,6 @@ export function OverviewTab({ instanceId }: {
   const { data: accessConfig } = useQuery(consoleQuery.enterprise.appDeploy.getAppInstanceAccess.queryOptions({
     input,
   }))
-  const openDeployDrawer = useSetAtom(openDeployDrawerAtom)
   const overviewApp = overview?.instance
   const deployments = overview?.deployments?.filter(row => row.environment?.id && row.status?.toLowerCase() !== 'undeployed') ?? []
   const releaseRows = releaseHistory?.data?.filter(row => row.id) ?? []
@@ -168,9 +180,7 @@ export function OverviewTab({ instanceId }: {
                         </Button>
                       )
                   : (
-                      <Button size="small" variant="primary" onClick={() => openDeployDrawer({ appInstanceId: appId })}>
-                        {t('overview.deploy')}
-                      </Button>
+                      <DeployFromOverviewButton appId={appId} />
                     )}
               </div>
             )
diff --git a/web/features/deployments/detail/settings-tab.tsx b/web/features/deployments/detail/settings-tab.tsx
index 52ca4926d8..d87552d781 100644
--- a/web/features/deployments/detail/settings-tab.tsx
+++ b/web/features/deployments/detail/settings-tab.tsx
@@ -29,7 +29,7 @@ type DeleteInstanceControlProps = {
   hasDeployments: boolean
 }
 
-function DeleteInstanceControl({
+function DeleteInstanceButton({
   app,
   settings,
   hasDeployments,
@@ -70,27 +70,14 @@ function DeleteInstanceControl({
 
   return (
     <>
-      <div className="flex flex-col gap-3 rounded-xl border border-util-colors-red-red-200 bg-util-colors-red-red-50 p-4">
-        <div className="system-sm-semibold text-util-colors-red-red-700">{t('settings.danger')}</div>
-        <div className="system-xs-regular text-util-colors-red-red-600">
-          {t('settings.dangerDesc')}
-        </div>
-        <div className="flex items-center justify-between gap-2">
-          <div className="system-xs-regular text-text-tertiary">
-            {hasDeployments
-              ? t('settings.undeployFirst')
-              : settings?.deleteGuard?.disabledReason || t('settings.safeToDelete')}
-          </div>
-          <Button
-            variant="primary"
-            tone="destructive"
-            disabled={!canDelete || isDeleting}
-            onClick={() => setShowDeleteConfirm(true)}
-          >
-            {t('settings.delete')}
-          </Button>
-        </div>
-      </div>
+      <Button
+        variant="primary"
+        tone="destructive"
+        disabled={!canDelete || isDeleting}
+        onClick={() => setShowDeleteConfirm(true)}
+      >
+        {t('settings.delete')}
+      </Button>
 
       <AlertDialog open={showDeleteConfirm} onOpenChange={open => !open && setShowDeleteConfirm(false)}>
         <AlertDialogContent className="w-[520px]">
@@ -116,6 +103,35 @@ function DeleteInstanceControl({
   )
 }
 
+function DeleteInstanceControl({
+  app,
+  settings,
+  hasDeployments,
+}: DeleteInstanceControlProps) {
+  const { t } = useTranslation('deployments')
+
+  return (
+    <div className="flex flex-col gap-3 rounded-xl border border-util-colors-red-red-200 bg-util-colors-red-red-50 p-4">
+      <div className="system-sm-semibold text-util-colors-red-red-700">{t('settings.danger')}</div>
+      <div className="system-xs-regular text-util-colors-red-red-600">
+        {t('settings.dangerDesc')}
+      </div>
+      <div className="flex items-center justify-between gap-2">
+        <div className="system-xs-regular text-text-tertiary">
+          {hasDeployments
+            ? t('settings.undeployFirst')
+            : settings?.deleteGuard?.disabledReason || t('settings.safeToDelete')}
+        </div>
+        <DeleteInstanceButton
+          app={app}
+          settings={settings}
+          hasDeployments={hasDeployments}
+        />
+      </div>
+    </div>
+  )
+}
+
 function SettingsForm({ app, settings }: SettingsFormProps) {
   const { t } = useTranslation('deployments')
   const updateInstance = useMutation(consoleQuery.enterprise.appDeploy.updateAppInstance.mutationOptions())
diff --git a/web/features/deployments/list/new-instance-card.tsx b/web/features/deployments/list/new-instance-card.tsx
index 3e08e155cd..e11a1a6469 100644
--- a/web/features/deployments/list/new-instance-card.tsx
+++ b/web/features/deployments/list/new-instance-card.tsx
@@ -39,21 +39,29 @@ function NewInstanceAction({ icon, label, disabled, onClick }: NewInstanceAction
   )
 }
 
-export function NewInstanceCard() {
+function CreateFromStudioAction() {
   const { t } = useTranslation('deployments')
   const openCreateInstanceModal = useSetAtom(openCreateInstanceModalAtom)
 
+  return (
+    <NewInstanceAction
+      icon="i-ri-stack-line"
+      label={t('newInstance.fromStudio')}
+      onClick={openCreateInstanceModal}
+    />
+  )
+}
+
+export function NewInstanceCard() {
+  const { t } = useTranslation('deployments')
+
   return (
     <div className="relative col-span-1 inline-flex h-[160px] flex-col justify-between rounded-xl border-[0.5px] border-components-card-border bg-components-card-bg">
       <div className="grow rounded-t-xl p-2">
         <div className="px-6 pt-2 pb-1 text-xs leading-[18px] font-medium text-text-tertiary">
           {t('newInstance.title')}
         </div>
-        <NewInstanceAction
-          icon="i-ri-stack-line"
-          label={t('newInstance.fromStudio')}
-          onClick={openCreateInstanceModal}
-        />
+        <CreateFromStudioAction />
         <NewInstanceAction
           icon="i-ri-file-code-line"
           label={t('newInstance.importDSL')}