diff --git a/e2e/features/apps/app-detail-navigation.feature b/e2e/features/apps/app-detail-navigation.feature
new file mode 100644
index 0000000000..7ac32039ec
--- /dev/null
+++ b/e2e/features/apps/app-detail-navigation.feature
@@ -0,0 +1,26 @@
+@apps @authenticated @core
+Feature: App detail navigation
+
+  Scenario: Opening a workflow app navigates to the workflow editor
+    Given I am signed in as the default E2E admin
+    And a "workflow" app has been created via API
+    When I open the app from the app list
+    Then I should land on the workflow editor
+
+  Scenario: Opening a chatbot app navigates to the configuration page
+    Given I am signed in as the default E2E admin
+    And a "chat" app has been created via API
+    When I open the app from the app list
+    Then I should land on the app configuration page
+
+  Scenario: The develop tab is accessible from a workflow app
+    Given I am signed in as the default E2E admin
+    And a "workflow" app has been created via API
+    When I navigate to the app develop page
+    Then I should be on the app develop page
+
+  Scenario: The overview tab is accessible from a workflow app
+    Given I am signed in as the default E2E admin
+    And a "workflow" app has been created via API
+    When I navigate to the app overview page
+    Then I should be on the app overview page
diff --git a/e2e/features/step-definitions/apps/app-detail-navigation.steps.ts b/e2e/features/step-definitions/apps/app-detail-navigation.steps.ts
new file mode 100644
index 0000000000..c7f30b3e1b
--- /dev/null
+++ b/e2e/features/step-definitions/apps/app-detail-navigation.steps.ts
@@ -0,0 +1,21 @@
+import type { DifyWorld } from '../../support/world'
+import { Then, When } from '@cucumber/cucumber'
+import { expect } from '@playwright/test'
+
+When('I navigate to the app develop page', async function (this: DifyWorld) {
+  const appId = this.createdAppIds.at(-1)
+  await this.getPage().goto(`/app/${appId}/develop`)
+})
+
+When('I navigate to the app overview page', async function (this: DifyWorld) {
+  const appId = this.createdAppIds.at(-1)
+  await this.getPage().goto(`/app/${appId}/overview`)
+})
+
+Then('I should be on the app develop page', async function (this: DifyWorld) {
+  await expect(this.getPage()).toHaveURL(/\/app\/[^/]+\/develop(?:\?.*)?$/, { timeout: 30_000 })
+})
+
+Then('I should be on the app overview page', async function (this: DifyWorld) {
+  await expect(this.getPage()).toHaveURL(/\/app\/[^/]+\/overview(?:\?.*)?$/, { timeout: 30_000 })
+})