From 74de0f3c78562403c36e03b07a8a95449f99dca8 Mon Sep 17 00:00:00 2001
From: Ruben van der Linde <ruben@conduction.nl>
Date: Thu, 15 Oct 2026 19:11:06 +0200
Subject: [PATCH 1/3] feat(applications): overview page to manage pages and
 menu

Inside Tables an application now opens on an overview to manage it: its
name, address, settings, pages and menu.

The header shows the icon, name, description and the application's
address with a copy button and "Open application"; the owner gets a menu
to edit name, icon and members, import a scheme, transfer ownership or
delete the application. The pages table lists the application's pages,
the start page first and named "Dashboard" while untitled, with what
each shows and a "Design" button for managers. "Add page" creates a grid
page, adds it to the menu straight away and opens it in edit mode;
"Table or view" and "Link" open the menu editor with a new entry. The
menu is previewed and edited in place; the editor offers the pages of
the application as targets.

Every page opens at /application/{id}/page/{pageId}, below a breadcrumb
back to the overview. Opening an application no longer collapses the
Tables navigation.

Assisted-by: ClaudeCode:claude-opus-5-5
---
 cypress/component/menuItems.cy.js             |  20 +
 playwright/e2e/application.spec.ts            |  84 ++-
 playwright/e2e/column-relation.spec.ts        |   5 +-
 playwright/e2e/context-grid-pages.spec.ts     |  17 +-
 playwright/e2e/context.spec.ts                |  46 +-
 .../main/sections/ApplicationOverview.vue     | 687 ++++++++++++++++++
 src/modules/modals/EditContext.vue            |   4 +-
 src/pages/Context.vue                         | 158 ++--
 .../ncContextResource/MenuItemsEditor.vue     |  33 +-
 src/shared/utils/menuItems.js                 |  31 +
 src/store/store.js                            |  27 +
 11 files changed, 994 insertions(+), 118 deletions(-)
 create mode 100644 src/modules/main/sections/ApplicationOverview.vue

diff --git a/cypress/component/menuItems.cy.js b/cypress/component/menuItems.cy.js
index e3ded0926d..cd18dcf42b 100644
--- a/cypress/component/menuItems.cy.js
+++ b/cypress/component/menuItems.cy.js
@@ -16,8 +16,10 @@ import {
 	moveItem,
 	newDashboardItem,
 	outdentItem,
+	pageTitle,
 	parentOfPosition,
 	removeItem,
+	toEditableMenuItems,
 	toMenuItemPayload,
 } from '../../src/shared/utils/menuItems.js'
 
@@ -175,6 +177,24 @@ describe('menu items', () => {
 		expect(menuItemErrors({ ...page, targetId: null }).target).to.equal(true)
 	})
 
+	it('names a page by its title, an untitled start page as the dashboard', () => {
+		expect(pageTitle({ title: 'Intake', page_type: 'grid' })).to.equal('Intake')
+		expect(pageTitle({ title: null, page_type: 'startpage' })).to.equal('Dashboard')
+		expect(pageTitle({ title: 'Home', page_type: 'startpage' })).to.equal('Home')
+	})
+
+	it('turns the stored menu into editor items that keep their parent', () => {
+		const editable = toEditableMenuItems([
+			{ id: 1, label: 'Cases', icon: 'star', targetType: 'table', targetId: 4, url: null, technicalName: 'cases', parentId: null },
+			{ id: 2, label: 'Docs', targetType: 'url', url: 'https://example.org', technicalName: 'docs', parentId: 1 },
+		])
+
+		expect(editable.map(entry => entry.key)).to.deep.equal(['item-1', 'item-2'])
+		expect(editable[0]).to.deep.include({ label: 'Cases', icon: 'star', targetType: 'table', targetId: 4, url: '', parentKey: null })
+		expect(editable[1]).to.deep.include({ icon: null, targetId: null, url: 'https://example.org', parentKey: 'item-1' })
+		expect(toEditableMenuItems(null)).to.deep.equal([])
+	})
+
 	it('routes a page, view or table entry inside the app and leaves a link outside it', () => {
 		expect(menuItemRoute({ targetType: 'page', targetId: 12, technicalName: 'dashboard' }, 7)).to.equal('/application/7/menu/dashboard')
 		expect(menuItemRoute({ targetType: 'view', technicalName: 'home' }, 7)).to.equal('/application/7/menu/home')
diff --git a/playwright/e2e/application.spec.ts b/playwright/e2e/application.spec.ts
index cb2f97634d..ea5753c9f0 100644
--- a/playwright/e2e/application.spec.ts
+++ b/playwright/e2e/application.spec.ts
@@ -6,6 +6,7 @@
 import type { APIRequestContext } from '@playwright/test'
 import { test, expect } from '../support/fixtures'
 import { ocsRequest, type TestUser } from '../support/api'
+import { createContext, loadContext } from '../support/commands'
 
 test.use({ viewport: { width: 1600, height: 1000 } })
 
@@ -93,7 +94,7 @@ test.describe('Applications', () => {
 
 		await page.locator('[data-cy="context-menu-overview"]').click()
 		await expect(page).toHaveURL(new RegExp(`/application/${contextId}$`))
-		await expect(page.locator('[data-cy="contextPageLink"]', { hasText: 'Front page' })).toBeVisible()
+		await expect(page.locator('[data-cy="page-card"]').filter({ hasText: 'Front page' })).toBeVisible()
 	})
 
 	test('A menu item whose page is gone shows as broken', async ({ userPage: { page, user } }) => {
@@ -122,4 +123,85 @@ test.describe('Applications', () => {
 		await expect(startPage).toContainText('Dashboard')
 		await expect(page.locator('h1', { hasText: tableTitle })).toBeVisible({ timeout: 30000 })
 	})
+
+	test('A page with widgets added on the overview gets a menu entry and opens in edit mode', async ({ userPage: { page } }) => {
+		await page.goto('/index.php/apps/tables')
+		await createContext(page, 'overview application')
+		await loadContext(page, 'overview application')
+
+		await expect(page.locator('[data-cy="page-card"]')).toHaveCount(1)
+		await expect(page.locator('[data-cy="page-card"]').first()).toContainText('Dashboard')
+
+		await page.locator('[data-cy="context-add-page"]').getByRole('button').first().click()
+		await page.getByRole('menuitem', { name: 'Page with widgets' }).click()
+		const form = page.getByRole('dialog', { name: 'New page' })
+		await form.getByRole('textbox', { name: 'Title' }).fill('Intake home')
+		await page.locator('[data-cy="contextPageSubmit"]').click()
+
+		await expect(page).toHaveURL(/\/application\/\d+\/page\/\d+\?edit=1$/)
+		await expect(page.locator('[data-cy="context-breadcrumb"]')).toContainText('Intake home')
+		await expect(page.locator('[data-cy="gridPageSave"]')).toBeVisible()
+
+		await page.locator('[data-cy="gridPageCancel"]').click()
+		await page.locator('[data-cy="context-menu-overview"]').click()
+		const intake = page.locator('[data-cy="page-card"]').filter({ hasText: 'Intake home' })
+		await expect(intake).toContainText('Page with widgets')
+		await expect(page.locator('[data-cy="context-menu-preview-item"]').filter({ hasText: 'Intake home' })).toBeVisible()
+	})
+
+	test('A menu entry is reordered with its buttons, sits under another one and keeps its place after a reload', async ({ userPage: { page } }) => {
+		await page.goto('/index.php/apps/tables')
+		await createContext(page, 'nested menu application')
+		await loadContext(page, 'nested menu application')
+
+		await page.locator('[data-cy="context-menu-edit"]').click()
+		for (const [label, url] of [['Handbook', 'https://docs.nextcloud.com'], ['Forum', 'https://help.nextcloud.com']]) {
+			await page.locator('[data-cy="menuItemAdd"]').click()
+			const row = page.locator('[data-cy="menuItemRow"]').last()
+			await row.getByRole('textbox', { name: 'Label' }).fill(label)
+			await row.getByRole('textbox', { name: 'Link' }).fill(url)
+		}
+
+		// Without a pointer: move Forum above Handbook, then put Handbook under it
+		const rows = page.locator('[data-cy="menuItemRow"]')
+		await rows.nth(2).locator('[data-cy="menuItemMoveUp"]').click()
+		await expect(rows.nth(1).getByRole('textbox', { name: 'Label' })).toHaveValue('Forum')
+		await rows.nth(2).locator('[data-cy="menuItemIndent"]').click()
+		await expect(rows.nth(2).locator('[data-cy="menuItemOutdent"]')).toBeVisible()
+
+		const saveResponse = page.waitForResponse(response => response.url().includes('/apps/tables/api/2/contexts/') && response.request().method() === 'PUT')
+		await page.locator('[data-cy="context-menu-save"]').click()
+		expect((await saveResponse).status()).toBe(200)
+
+		await page.reload()
+		const items = page.locator('[data-cy="context-menu-preview-item"]')
+		await expect(items).toHaveCount(3)
+		await expect(items.nth(0)).toContainText('Dashboard')
+		await expect(items.nth(1)).toContainText('Forum')
+		await expect(items.nth(2)).toContainText('2.1')
+		await expect(items.nth(2)).toContainText('Handbook')
+	})
+
+	test('A menu entry can be pointed at a page of the application', async ({ userPage: { page, user } }) => {
+		const { contextId } = await createApplicationWithMenu(page.request, user, 'page target application')
+		await ocsRequest(page.request, user, { method: 'POST', url: `${API}/contexts/${contextId}/pages?format=json`, data: { title: 'Reports' } })
+
+		await page.goto(`/index.php/apps/tables/#/application/${contextId}`)
+		await page.locator('[data-cy="context-menu-edit"]').click()
+		await page.locator('[data-cy="menuItemAdd"]').click()
+		const row = page.locator('[data-cy="menuItemRow"]').last()
+		await row.locator('[data-cy="menuItemTarget"] input').click()
+		await page.locator('.vs__dropdown-menu li').filter({ hasText: 'Reports (page)' }).click()
+		await expect(row.getByRole('textbox', { name: 'Label' })).toHaveValue('Reports')
+
+		const saveResponse = page.waitForResponse(response => response.url().includes('/apps/tables/api/2/contexts/') && response.request().method() === 'PUT')
+		await page.locator('[data-cy="context-menu-save"]').click()
+		expect((await saveResponse).status()).toBe(200)
+		await expect(page.locator('[data-cy="context-menu-preview-item"]').filter({ hasText: 'Reports' }).last()).toBeVisible()
+
+		await page.goto(`/index.php/apps/tables/app/${contextId}`)
+		await page.locator('[data-cy="application-nav-item"]').filter({ hasText: 'Reports' }).getByRole('link').click()
+		await expect(page).toHaveURL(/\/menu\/reports$/)
+		await expect(page.locator('[data-cy="gridPage"]')).toBeVisible()
+	})
 })
diff --git a/playwright/e2e/column-relation.spec.ts b/playwright/e2e/column-relation.spec.ts
index ab0e6f32d6..d7e2dc9dcc 100644
--- a/playwright/e2e/column-relation.spec.ts
+++ b/playwright/e2e/column-relation.spec.ts
@@ -158,8 +158,11 @@ test.describe('Test column relation', () => {
 
 		await page.locator('[data-cy="editContextSubmitBtn"]').click()
 
-		// load the context and verify the relation label is rendered without crashing
+		// the tables of an application render in the application itself, opened on its own
 		await loadContext(page, contextTitle)
+		const contextId = page.url().match(/\/application\/(\d+)/)?.[1]
+		await page.goto(`/index.php/apps/tables/app/${contextId}`)
+		// verify the relation label is rendered without crashing
 		await expect(
 			page.locator('[data-cy="ncTable"] [data-cy="customTableRow"]').filter({ hasText: 'Bob' }),
 		).toBeVisible()
diff --git a/playwright/e2e/context-grid-pages.spec.ts b/playwright/e2e/context-grid-pages.spec.ts
index 1a4aae2bde..4c99361555 100644
--- a/playwright/e2e/context-grid-pages.spec.ts
+++ b/playwright/e2e/context-grid-pages.spec.ts
@@ -32,8 +32,13 @@ async function getApplication(request: APIRequestContext, user: TestUser, contex
 	return (await res.json()).ocs.data
 }
 
-async function openApplication(page: Page, contextId: number, path = '') {
-	await page.goto(`/index.php/apps/tables/#/application/${contextId}${path}`)
+/**
+ * Opens the start page of an application inside Tables; the application itself opens on its overview.
+ */
+async function openApplication(page: Page, user: TestUser, contextId: number) {
+	const application = await getApplication(page.request, user, contextId)
+	const startPage = Object.values(application.pages as Record<string, { id: number, page_type: string }>).find(entry => entry.page_type === 'startpage')
+	await page.goto(`/index.php/apps/tables/#/application/${contextId}/page/${startPage!.id}`)
 	await expect(page.locator('[data-cy="gridPage"]')).toBeVisible({ timeout: 30000 })
 }
 
@@ -48,7 +53,7 @@ test.describe('Application pages on the grid', () => {
 		const second = await createTableViaApi(page.request, user, 'grid second table')
 		const contextId = await createApplicationViaApi(page.request, user, 'grid existing app', [first, second])
 
-		await openApplication(page, contextId)
+		await openApplication(page, user, contextId)
 
 		const items = page.locator('[data-cy="gridItem"]')
 		await expect(items).toHaveCount(2)
@@ -67,7 +72,7 @@ test.describe('Application pages on the grid', () => {
 	test('A header added to the start page is saved with the order filled in', async ({ userPage: { page, user } }) => {
 		const table = await createTableViaApi(page.request, user, 'grid header table')
 		const contextId = await createApplicationViaApi(page.request, user, 'grid header app', [table])
-		await openApplication(page, contextId)
+		await openApplication(page, user, contextId)
 
 		await page.locator('[data-cy="gridPageEdit"]').click()
 		await page.locator('[data-cy="gridPageAddWidget"]').click()
@@ -96,7 +101,7 @@ test.describe('Application pages on the grid', () => {
 		const inApp = await createTableViaApi(page.request, user, 'grid table in app')
 		const notInApp = await createTableViaApi(page.request, user, 'grid table not in app')
 		const contextId = await createApplicationViaApi(page.request, user, 'grid new page app', [inApp])
-		await openApplication(page, contextId)
+		await openApplication(page, user, contextId)
 
 		await page.locator('[data-cy="contextPageCreate"]').click()
 		const pageForm = page.getByRole('dialog', { name: 'New page' })
@@ -149,7 +154,7 @@ test.describe('Application pages on the grid', () => {
 		const shareeContext = await browser.newContext({ baseURL, viewport: { width: 1600, height: 1000 } })
 		const shareePage = await shareeContext.newPage()
 		await login(shareePage, sharee)
-		await openApplication(shareePage, contextId)
+		await openApplication(shareePage, sharee, contextId)
 
 		await expect(shareePage.locator('h1', { hasText: 'grid shared table' })).toBeVisible()
 		await expect(shareePage.locator('[data-cy="contextPageLink"]', { hasText: 'Shared overview' })).toBeVisible()
diff --git a/playwright/e2e/context.spec.ts b/playwright/e2e/context.spec.ts
index 76fae80ef5..8afce5a67d 100644
--- a/playwright/e2e/context.spec.ts
+++ b/playwright/e2e/context.spec.ts
@@ -27,6 +27,20 @@ async function setupContextAndNavigate(page: Page, contextTitle: string) {
 	await loadContext(page, contextTitle)
 }
 
+/**
+ * Inside Tables the application page is where an application is configured; its tables and
+ * views render in the application itself.
+ */
+async function openApplication(page: Page, contextTitle: string) {
+	await loadContext(page, contextTitle)
+	const contextId = page.url().match(/\/application\/(\d+)/)?.[1]
+	if (!contextId) {
+		throw new Error(`Could not find the id of application ${contextTitle}`)
+	}
+	await page.goto(`/index.php/apps/tables/app/${contextId}`)
+	await expect(page.locator('[data-cy="application-nav-header"]')).toContainText(contextTitle, { timeout: 10000 })
+}
+
 async function selectFromVueDropdown(page: Page, inputSelector: string, value: string) {
 	const input = page.locator(inputSelector).first()
 	await input.click()
@@ -92,11 +106,10 @@ test.describe('Manage a context', () => {
 		await expect(page.getByRole('dialog', { name: 'Edit application' })).toBeHidden({ timeout: 10000 })
 
 		await expect(page.locator('[data-cy="navigationContextItem"]').filter({ hasText: `updated ${contextTitle}` })).toBeVisible()
-		await loadContext(page, `updated ${contextTitle}`)
+		await openApplication(page, `updated ${contextTitle}`)
 
-		await expect(page.locator('h1', { hasText: `updated ${contextTitle}` })).toBeVisible()
-		await expect(page.locator('h1', { hasText: tableTitle })).toBeVisible()
-		await expect(page.locator('h1', { hasText: viewTitle })).toBeVisible()
+		await expect(page.locator('h1', { hasText: tableTitle })).toBeVisible({ timeout: 10000 })
+		await expect(page.locator('h1', { hasText: viewTitle })).toBeVisible({ timeout: 10000 })
 	})
 
 	test('Share context with resources', async ({ userPage: { page }, request }) => {
@@ -119,8 +132,7 @@ test.describe('Manage a context', () => {
 		await updateResponse
 		await expect(page.locator('[class*="toast_success"]').first()).toBeVisible({ timeout: 10000 })
 
-		await loadContext(page, contextTitle)
-		await expect(page.locator('h1', { hasText: contextTitle })).toBeVisible({ timeout: 10000 })
+		await openApplication(page, contextTitle)
 		await expect(page.locator('h1', { hasText: tableTitle })).toBeVisible({ timeout: 10000 })
 
 		// verify context was shared properly
@@ -128,9 +140,8 @@ test.describe('Manage a context', () => {
 		await login(page, nonLocalUser)
 		await page.goto('/index.php/apps/tables')
 
-		await loadContext(page, contextTitle)
-		await expect(page.locator('h1', { hasText: contextTitle })).toBeVisible()
-		await expect(page.locator('h1', { hasText: tableTitle })).toBeVisible()
+		await openApplication(page, contextTitle)
+		await expect(page.locator('h1', { hasText: tableTitle })).toBeVisible({ timeout: 10000 })
 	})
 
 	test('Transfer context', async ({ userPage: { page }, request }) => {
@@ -221,8 +232,11 @@ test.describe('Manage a context', () => {
 		await page.locator('[data-cy="editContextSubmitBtn"]').click()
 
 		await expect(page.locator('h1', { hasText: contextTitle })).toBeVisible()
-		await expect(page.locator('h1', { hasText: tableTitle })).toBeVisible()
+		await openApplication(page, contextTitle)
+		await expect(page.locator('h1', { hasText: tableTitle })).toBeVisible({ timeout: 10000 })
 
+		await page.goto('/index.php/apps/tables')
+		await loadContext(page, contextTitle)
 		await openContextEditModal(page, contextTitle)
 		await page.locator('[data-cy="contextResourceList"] button').filter({ hasText: 'Delete' }).click({ force: true })
 
@@ -230,6 +244,9 @@ test.describe('Manage a context', () => {
 		await page.locator('[data-cy="editContextSubmitBtn"]').click()
 
 		await expect(page.locator('h1', { hasText: contextTitle })).toBeVisible()
+		await openApplication(page, contextTitle)
+		// The application has loaded once its loading icon is gone; only then does a missing table mean anything
+		await expect(page.locator('.main-context-view > .icon-loading')).toHaveCount(0, { timeout: 10000 })
 		await expect(page.locator('h1', { hasText: tableTitle })).toBeHidden()
 	})
 
@@ -248,7 +265,10 @@ test.describe('Manage a context', () => {
 		await expect(page.locator('[data-cy="contextResourceList"]')).toContainText(tableTitle)
 		await expect(page.locator('[data-cy="contextResourcePerms"]')).toContainText(tableTitle)
 		await page.locator('[data-cy="editContextSubmitBtn"]').click()
+		await expect(page.getByRole('dialog', { name: 'Edit application' })).toBeHidden({ timeout: 10000 })
 
+		await openApplication(page, contextTitle)
+		await expect(page.locator('h1', { hasText: tableTitle })).toBeVisible({ timeout: 10000 })
 		await createTextLineColumn(page, 'title', '', '', true)
 		await page.locator('button').filter({ hasText: 'Create row' }).first().click()
 		await fillInValueTextLine(page, 'title', 'first row')
@@ -293,6 +313,7 @@ test.describe('Manage a context', () => {
 		await updatePermsResponse
 
 		await expect(page.locator('h1', { hasText: contextTitle })).toBeVisible({ timeout: 10000 })
+		await openApplication(page, contextTitle)
 		await expect(page.locator('h1', { hasText: tableTitle })).toBeVisible({ timeout: 10000 })
 
 		// verify that shared user can modify and delete data in the resource
@@ -300,9 +321,8 @@ test.describe('Manage a context', () => {
 		await login(page, nonLocalUser)
 		await page.goto('/index.php/apps/tables')
 
-		await loadContext(page, contextTitle)
-		await expect(page.locator('h1', { hasText: contextTitle })).toBeVisible()
-		await expect(page.locator('h1', { hasText: tableTitle })).toBeVisible()
+		await openApplication(page, contextTitle)
+		await expect(page.locator('h1', { hasText: tableTitle })).toBeVisible({ timeout: 10000 })
 
 		await page.locator('button').filter({ hasText: 'Create row' }).first().click()
 		await fillInValueTextLine(page, 'title', 'first row')
diff --git a/src/modules/main/sections/ApplicationOverview.vue b/src/modules/main/sections/ApplicationOverview.vue
new file mode 100644
index 0000000000..0ba04585cf
--- /dev/null
+++ b/src/modules/main/sections/ApplicationOverview.vue
@@ -0,0 +1,687 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<div class="overview">
+		<header class="overview__header" data-cy="context-header">
+			<div class="overview__identity">
+				<NcIconSvgWrapper :svg="icon" :size="40" class="overview__icon" />
+				<div class="overview__identity-text">
+					<h1 class="overview__title" data-cy="context-title">
+						{{ context.name }}
+					</h1>
+					<p v-if="context.description" class="overview__description">
+						{{ context.description }}
+					</p>
+					<div class="overview__address-row">
+						<a :href="applicationUrl"
+							target="_blank"
+							rel="noopener"
+							class="overview__address"
+							data-cy="context-address">{{ applicationUrl }}</a>
+						<NcButton variant="tertiary"
+							:aria-label="t('tables', 'Copy the address')"
+							:title="t('tables', 'Copy the address')"
+							data-cy="context-copy-address"
+							@click="copyAddress">
+							<template #icon>
+								<ContentCopy :size="18" />
+							</template>
+						</NcButton>
+					</div>
+				</div>
+			</div>
+			<div class="overview__header-actions">
+				<NcButton variant="primary"
+					:href="applicationUrl"
+					target="_blank"
+					rel="noopener"
+					data-cy="context-open-application">
+					<template #icon>
+						<OpenInNew :size="20" />
+					</template>
+					{{ t('tables', 'Open application') }}
+				</NcButton>
+				<NcActions v-if="canManage" :aria-label="t('tables', 'Application settings')" data-cy="context-actions">
+					<NcActionButton data-cy="context-edit-application" @click="emitEvent('tables:context:edit', context.id)">
+						<template #icon>
+							<PencilOutline :size="20" />
+						</template>
+						{{ t('tables', 'Edit name, icon and members') }}
+					</NcActionButton>
+					<NcActionButton data-cy="context-import-scheme" @click="emitEvent('tables:context:import-scheme', context.id)">
+						<template #icon>
+							<TrayArrowDown :size="20" />
+						</template>
+						{{ t('tables', 'Import a scheme') }}
+					</NcActionButton>
+					<NcActionButton data-cy="context-transfer" @click="emitEvent('tables:context:transfer', context)">
+						<template #icon>
+							<SwapHorizontal :size="20" />
+						</template>
+						{{ t('tables', 'Transfer ownership') }}
+					</NcActionButton>
+					<NcActionSeparator />
+					<NcActionButton class="action--error" data-cy="context-delete" @click="emitEvent('tables:context:delete', context)">
+						<template #icon>
+							<DeleteOutline :size="20" />
+						</template>
+						{{ t('tables', 'Delete application') }}
+					</NcActionButton>
+				</NcActions>
+			</div>
+		</header>
+
+		<section class="overview__section" data-cy="context-pages">
+			<div class="overview__section-header">
+				<h2>{{ t('tables', 'Pages') }}</h2>
+				<div class="overview__section-actions">
+					<NcActions v-if="canManage" :menu-name="t('tables', 'Add page')" data-cy="context-add-page">
+						<template #icon>
+							<Plus :size="20" />
+						</template>
+						<NcActionButton data-cy="context-add-grid-page" @click="pageFormOpen = true">
+							<template #icon>
+								<ViewDashboardOutline :size="20" />
+							</template>
+							{{ t('tables', 'Page with widgets') }}
+						</NcActionButton>
+						<NcActionButton data-cy="context-add-table-page" @click="editMenu('table')">
+							<template #icon>
+								<TableIcon :size="20" />
+							</template>
+							{{ t('tables', 'Table or view') }}
+						</NcActionButton>
+						<NcActionButton data-cy="context-add-link" @click="editMenu('url')">
+							<template #icon>
+								<LinkVariant :size="20" />
+							</template>
+							{{ t('tables', 'Link') }}
+						</NcActionButton>
+					</NcActions>
+				</div>
+			</div>
+			<div class="overview__table-wrap">
+				<table class="overview__table" data-cy="context-pages-table">
+					<thead>
+						<tr>
+							<th scope="col" class="overview__col-position">
+								<span aria-hidden="true">#</span>
+								<span class="hidden-visually">{{ t('tables', 'Position') }}</span>
+							</th>
+							<th scope="col">
+								{{ t('tables', 'Page') }}
+							</th>
+							<th scope="col">
+								{{ t('tables', 'Type') }}
+							</th>
+							<th scope="col">
+								{{ t('tables', 'Shows') }}
+							</th>
+							<th scope="col" class="overview__col-actions">
+								<span class="hidden-visually">{{ t('tables', 'Actions') }}</span>
+							</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr v-for="(row, index) in pageRows"
+							:key="row.page.id"
+							class="page-row"
+							data-cy="page-card">
+							<td class="overview__col-position">
+								{{ index + 1 }}
+							</td>
+							<td>
+								<div class="page-row__name">
+									<ViewDashboardOutline :size="20" class="page-row__icon" />
+									<router-link :to="row.route" class="page-row__link" data-cy="page-card-open">
+										{{ row.title }}
+									</router-link>
+								</div>
+							</td>
+							<td>{{ row.typeLabel }}</td>
+							<td class="page-row__shows">
+								{{ row.description }}
+							</td>
+							<td class="overview__col-actions">
+								<NcButton v-if="canManage"
+									variant="tertiary"
+									:href="routeHref(row.route + '?edit=1')"
+									data-cy="page-card-design">
+									<template #icon>
+										<PencilOutline :size="20" />
+									</template>
+									{{ t('tables', 'Design') }}
+								</NcButton>
+								<NcButton v-else variant="tertiary" :href="routeHref(row.route)">
+									{{ t('tables', 'Open') }}
+								</NcButton>
+							</td>
+						</tr>
+					</tbody>
+				</table>
+			</div>
+		</section>
+
+		<section v-if="canManage" class="overview__section" data-cy="context-menu-editor">
+			<div class="overview__section-header">
+				<h2>{{ t('tables', 'Menu') }}</h2>
+				<div class="overview__section-actions">
+					<NcButton v-if="menuDraft !== null" variant="tertiary" data-cy="context-menu-cancel" @click="menuDraft = null">
+						{{ t('tables', 'Cancel') }}
+					</NcButton>
+					<NcButton v-if="menuDraft !== null"
+						variant="primary"
+						:disabled="menuSaving"
+						data-cy="context-menu-save"
+						@click="saveMenu">
+						<template #icon>
+							<ContentSaveOutline :size="20" />
+						</template>
+						{{ t('tables', 'Save menu') }}
+					</NcButton>
+					<NcButton v-else variant="secondary" data-cy="context-menu-edit" @click="editMenu()">
+						<template #icon>
+							<PencilOutline :size="20" />
+						</template>
+						{{ t('tables', 'Edit menu') }}
+					</NcButton>
+				</div>
+			</div>
+			<p class="overview__section-help">
+				{{ t('tables', 'The menu is what people see on the left when they open the application. Order it the way they work.') }}
+			</p>
+			<MenuItemsEditor v-if="menuDraft !== null"
+				ref="menuItemsEditor"
+				v-model:items="menuDraft"
+				:pages="pages" />
+			<ol v-else-if="menuRows.length > 0" class="overview__menu-preview" data-cy="context-menu-preview">
+				<li v-for="row in menuRows"
+					:key="row.item.id"
+					class="overview__menu-preview-item"
+					:class="{ 'overview__menu-preview-item--child': row.level === 1 }"
+					data-cy="context-menu-preview-item">
+					<span class="overview__menu-preview-position">{{ row.position }}</span>
+					<MenuItemIcon :item="row.item" :size="18" />
+					<span>{{ row.item.label }}</span>
+					<span class="overview__menu-preview-target">{{ row.description }}</span>
+				</li>
+			</ol>
+			<p v-else class="overview__hint">
+				{{ t('tables', 'The menu is empty. Add a page, or edit the menu to link pages, tables and external links.') }}
+			</p>
+		</section>
+
+		<ContextPageForm :show-modal="pageFormOpen"
+			:page="null"
+			@close="pageFormOpen = false"
+			@submit="createPage" />
+	</div>
+</template>
+
+<script>
+import { NcActionButton, NcActionSeparator, NcActions, NcButton, NcIconSvgWrapper } from '@nextcloud/vue'
+import { emit } from '@nextcloud/event-bus'
+import { showError, showSuccess } from '@nextcloud/dialogs'
+import { generateUrl } from '@nextcloud/router'
+import { mapActions, mapState } from 'pinia'
+import ContentCopy from 'vue-material-design-icons/ContentCopy.vue'
+import ContentSaveOutline from 'vue-material-design-icons/ContentSaveOutline.vue'
+import DeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
+import LinkVariant from 'vue-material-design-icons/LinkVariant.vue'
+import OpenInNew from 'vue-material-design-icons/OpenInNew.vue'
+import PencilOutline from 'vue-material-design-icons/PencilOutline.vue'
+import Plus from 'vue-material-design-icons/Plus.vue'
+import SwapHorizontal from 'vue-material-design-icons/SwapHorizontal.vue'
+import TableIcon from 'vue-material-design-icons/Table.vue'
+import TrayArrowDown from 'vue-material-design-icons/TrayArrowDown.vue'
+import ViewDashboardOutline from 'vue-material-design-icons/ViewDashboardOutline.vue'
+import ContextPageForm from '../../modals/ContextPageForm.vue'
+import MenuItemIcon from '../../../shared/components/MenuItemIcon.vue'
+import MenuItemsEditor from '../../../shared/components/ncContextResource/MenuItemsEditor.vue'
+import { areMenuItemsValid, menuTree, pageTitle, toEditableMenuItems, toMenuItemPayload } from '../../../shared/utils/menuItems.js'
+import { useTablesStore } from '../../../store/store.js'
+
+/**
+ * Where an application is managed inside Tables: its name and address, its pages and its menu.
+ */
+export default {
+	name: 'ApplicationOverview',
+	components: {
+		NcActionButton,
+		NcActionSeparator,
+		NcActions,
+		NcButton,
+		NcIconSvgWrapper,
+		ContentCopy,
+		ContentSaveOutline,
+		DeleteOutline,
+		LinkVariant,
+		OpenInNew,
+		PencilOutline,
+		Plus,
+		SwapHorizontal,
+		TableIcon,
+		TrayArrowDown,
+		ViewDashboardOutline,
+		ContextPageForm,
+		MenuItemIcon,
+		MenuItemsEditor,
+	},
+	props: {
+		context: {
+			type: Object,
+			required: true,
+		},
+		// The pages of the application, as the page API returns them
+		pages: {
+			type: Array,
+			default: () => [],
+		},
+		icon: {
+			type: String,
+			default: '',
+		},
+		canManage: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	emits: ['page-created'],
+	data() {
+		return {
+			menuDraft: null,
+			menuSaving: false,
+			pageFormOpen: false,
+		}
+	},
+	computed: {
+		...mapState(useTablesStore, ['tables', 'views']),
+		applicationUrl() {
+			return window.location.origin + generateUrl('/apps/tables/app/' + this.context.id)
+		},
+		menuItems() {
+			return [...(this.context.menuItems ?? [])].sort((a, b) => a.order - b.order)
+		},
+		/**
+		 * The pages of the application, the start page first, each with what it shows.
+		 *
+		 * @return {Array<object>}
+		 */
+		pageRows() {
+			const ordered = [...this.pages].sort((a, b) => (a.page_type === 'startpage' ? 0 : 1) - (b.page_type === 'startpage' ? 0 : 1) || a.id - b.id)
+			return ordered.map(page => ({
+				page,
+				title: pageTitle(page),
+				route: this.pageRoute(page),
+				typeLabel: page.page_type === 'startpage' ? t('tables', 'Dashboard') : t('tables', 'Page with widgets'),
+				description: n('tables', '%n widget', '%n widgets', page.content?.length ?? 0),
+			}))
+		},
+		/**
+		 * The menu items in menu order, each with what it opens, for the menu preview.
+		 *
+		 * @return {Array<object>}
+		 */
+		menuRows() {
+			const ordered = []
+			menuTree(this.menuItems).forEach((branch, rootIndex) => {
+				ordered.push({ item: branch.item, position: String(rootIndex + 1), level: 0 })
+				branch.children.forEach((child, childIndex) => ordered.push({ item: child, position: (rootIndex + 1) + '.' + (childIndex + 1), level: 1 }))
+			})
+			return ordered.map(row => ({ ...row, description: this.menuItemDescription(row.item) }))
+		},
+	},
+	methods: {
+		...mapActions(useTablesStore, ['createContextPage', 'updateContextMenuItems']),
+		emitEvent(name, payload) {
+			emit(name, payload)
+		},
+		/**
+		 * @param {object} page a page of the application
+		 * @return {string} its route inside Tables
+		 */
+		pageRoute(page) {
+			return '/application/' + this.context.id + '/page/' + page.id
+		},
+		/**
+		 * The address of a route inside Tables, so a button can be a real link: it opens in a new tab and
+		 * can be copied. The router keeps its routes in the hash, so following it stays within the app.
+		 *
+		 * @param {string} route the route inside Tables
+		 * @return {string}
+		 */
+		routeHref(route) {
+			return generateUrl('/apps/tables/') + '#' + route
+		},
+		/**
+		 * @param {object} item a menu item
+		 * @return {string} what the item opens, for the menu preview
+		 */
+		menuItemDescription(item) {
+			if (item.targetType === 'url') {
+				return item.url
+			}
+			if (item.broken) {
+				return t('tables', 'The page, view or table this entry opened no longer exists')
+			}
+			if (item.targetType === 'page') {
+				const page = this.pages.find(page => page.id === item.targetId)
+				return page ? pageTitle(page) : ''
+			}
+			if (item.targetType === 'table') {
+				const table = this.tables.find(table => table.id === item.targetId)
+				return table ? n('tables', '%n row', '%n rows', table.rowsCount ?? 0) : t('tables', 'Not accessible to you')
+			}
+			const view = this.views.find(view => view.id === item.targetId)
+			const table = view ? this.tables.find(table => table.id === view.tableId) : null
+			if (!view) {
+				return t('tables', 'Not accessible to you')
+			}
+			return table ? t('tables', 'View of {table}', { table: table.title }, undefined, { escape: false }) : view.title
+		},
+		async copyAddress() {
+			try {
+				await navigator.clipboard.writeText(this.applicationUrl)
+				showSuccess(t('tables', 'Address copied'))
+			} catch (e) {
+				showError(t('tables', 'The address could not be copied. Select it and copy it yourself.'))
+			}
+		},
+		/**
+		 * Opens the menu editor, with a fresh item of the given kind appended when asked for.
+		 *
+		 * @param {string|null} appendKind 'table' or 'url' to start a new entry of that kind
+		 */
+		editMenu(appendKind = null) {
+			const items = this.menuDraft ?? toEditableMenuItems(this.menuItems)
+			if (appendKind !== null) {
+				items.push({ key: 'new-' + Date.now(), label: '', icon: null, targetType: appendKind, targetId: null, url: '', technicalName: null, parentKey: null })
+			}
+			this.menuDraft = items
+			this.$nextTick(() => this.$el.querySelector('[data-cy="context-menu-editor"]')?.scrollIntoView({ behavior: 'smooth', block: 'start' }))
+		},
+		async saveMenu() {
+			// Show every error now, and never send a menu the server would refuse
+			this.$refs.menuItemsEditor?.touchAll()
+			if (this.menuDraft === null || !areMenuItemsValid(this.menuDraft)) {
+				return
+			}
+			this.menuSaving = true
+			const context = await this.updateContextMenuItems({ id: this.context.id, menuItems: this.menuDraft.map(item => toMenuItemPayload(item, this.menuDraft)) })
+			this.menuSaving = false
+			if (context) {
+				this.menuDraft = null
+				showSuccess(t('tables', 'Menu saved'))
+			}
+		},
+		/**
+		 * Creates a page with widgets, gives it a menu item right away and opens it. A menu being
+		 * edited gets the new item too, so saving it later keeps the item.
+		 *
+		 * @param {{title: string, technicalName: string}} data what the page form collected
+		 */
+		async createPage({ title, technicalName }) {
+			const page = await this.createContextPage({ contextId: this.context.id, title, technicalName: technicalName || null })
+			if (!page) {
+				return
+			}
+			this.pageFormOpen = false
+			this.$emit('page-created', page)
+			const items = toEditableMenuItems(this.menuItems)
+			items.push({ key: 'new-' + page.id, label: page.title, icon: null, targetType: 'page', targetId: page.id, url: '', technicalName: page.technical_name ?? null, parentKey: null })
+			const context = await this.updateContextMenuItems({ id: this.context.id, menuItems: items.map(item => toMenuItemPayload(item, items)) })
+			const added = context?.menuItems?.find(item => item.targetType === 'page' && item.targetId === page.id)
+			if (!added) {
+				// The page exists already; it only misses its entry in the menu
+				showError(t('tables', 'The page "{title}" was created, but could not be added to the menu.', { title: page.title }, undefined, { escape: false }))
+			} else if (this.menuDraft !== null) {
+				this.menuDraft = [...this.menuDraft, ...toEditableMenuItems([added])]
+			}
+			await this.$router.push({ path: this.pageRoute(page), query: { edit: '1' } }).catch(err => err)
+		},
+	},
+}
+</script>
+
+<style scoped lang="scss">
+.overview {
+	width: var(--app-content-width, 100%);
+
+	// The header stays put while the sections scroll
+	&__header {
+		position: sticky;
+		top: 0;
+		z-index: 15;
+		display: flex;
+		flex-wrap: wrap;
+		align-items: flex-start;
+		justify-content: space-between;
+		gap: calc(3 * var(--default-grid-baseline));
+		padding-block: calc(4 * var(--default-grid-baseline)) calc(2 * var(--default-grid-baseline));
+		padding-inline: calc(var(--default-clickable-area) + 4 * var(--default-grid-baseline)) calc(4 * var(--default-grid-baseline));
+		border-bottom: 1px solid var(--color-border);
+		background-color: var(--color-main-background);
+	}
+
+	&__identity {
+		display: flex;
+		flex: 1 1 320px;
+		align-items: flex-start;
+		gap: calc(3 * var(--default-grid-baseline));
+		min-width: 0;
+	}
+
+	&__icon {
+		flex-shrink: 0;
+		margin-top: var(--default-grid-baseline);
+	}
+
+	&__identity-text {
+		min-width: 0;
+	}
+
+	&__title {
+		margin: 0;
+		font-size: 1.5em;
+		font-weight: bold;
+		line-height: 1.3;
+		overflow-wrap: anywhere;
+	}
+
+	&__description {
+		max-width: 70ch;
+		margin: var(--default-grid-baseline) 0 0;
+	}
+
+	&__address-row {
+		display: flex;
+		align-items: center;
+		gap: var(--default-grid-baseline);
+		min-width: 0;
+		margin-top: var(--default-grid-baseline);
+	}
+
+	&__address {
+		overflow: hidden;
+		min-width: 0;
+		color: var(--color-text-maxcontrast);
+		font-family: monospace;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+
+		&:hover,
+		&:focus-visible {
+			text-decoration: underline;
+		}
+	}
+
+	&__header-actions {
+		display: flex;
+		flex-shrink: 0;
+		align-items: center;
+		gap: calc(2 * var(--default-grid-baseline));
+	}
+
+	&__section {
+		max-width: 1100px;
+		padding-block: calc(5 * var(--default-grid-baseline)) calc(2 * var(--default-grid-baseline));
+		padding-inline: calc(var(--default-clickable-area) + 4 * var(--default-grid-baseline)) calc(4 * var(--default-grid-baseline));
+	}
+
+	&__section-header {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		justify-content: space-between;
+		gap: calc(2 * var(--default-grid-baseline));
+
+		h2 {
+			margin: 0;
+		}
+	}
+
+	&__section-actions {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: calc(2 * var(--default-grid-baseline));
+	}
+
+	&__section-help {
+		max-width: 70ch;
+		margin: var(--default-grid-baseline) 0 calc(3 * var(--default-grid-baseline));
+		color: var(--color-text-maxcontrast);
+	}
+
+	&__hint {
+		color: var(--color-text-maxcontrast);
+	}
+
+	&__table-wrap {
+		overflow-x: auto;
+		margin-top: calc(2 * var(--default-grid-baseline));
+		border: 1px solid var(--color-border);
+		border-radius: var(--border-radius-large);
+	}
+
+	&__table {
+		width: 100%;
+		border-collapse: collapse;
+
+		th,
+		td {
+			padding: calc(2 * var(--default-grid-baseline)) calc(3 * var(--default-grid-baseline));
+			text-align: start;
+			vertical-align: middle;
+		}
+
+		thead th {
+			background-color: var(--color-background-dark);
+			color: var(--color-text-maxcontrast);
+			font-weight: 500;
+			white-space: nowrap;
+		}
+
+		tbody tr {
+			border-top: 1px solid var(--color-border);
+
+			&:hover {
+				background-color: var(--color-background-hover);
+			}
+		}
+	}
+
+	&__col-position {
+		width: 1%;
+		color: var(--color-text-maxcontrast);
+		font-variant-numeric: tabular-nums;
+		text-align: end;
+	}
+
+	&__col-actions {
+		width: 1%;
+		text-align: end;
+		white-space: nowrap;
+	}
+
+	&__menu-preview {
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+
+	&__menu-preview-item {
+		display: flex;
+		align-items: center;
+		gap: calc(2 * var(--default-grid-baseline));
+		padding-block: var(--default-grid-baseline);
+
+		&--child {
+			margin-inline-start: calc(6 * var(--default-grid-baseline));
+		}
+	}
+
+	&__menu-preview-position {
+		min-width: 3ch;
+		color: var(--color-text-maxcontrast);
+		font-variant-numeric: tabular-nums;
+	}
+
+	&__menu-preview-target {
+		color: var(--color-text-maxcontrast);
+	}
+}
+
+.page-row {
+	&__name {
+		display: flex;
+		align-items: center;
+		gap: calc(2 * var(--default-grid-baseline));
+		min-width: 180px;
+	}
+
+	&__icon {
+		flex-shrink: 0;
+		color: var(--color-primary-element);
+	}
+
+	&__link {
+		color: inherit;
+		font-weight: bold;
+
+		&:hover,
+		&:focus-visible {
+			text-decoration: underline;
+		}
+	}
+
+	&__shows {
+		overflow: hidden;
+		max-width: 36ch;
+		color: var(--color-text-maxcontrast);
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+}
+
+@media (max-width: 700px) {
+	// The header keeps clear of the navigation toggle that floats at the top left
+	.overview__section {
+		padding-inline-start: calc(4 * var(--default-grid-baseline));
+	}
+
+	.overview__header-actions {
+		justify-content: flex-start;
+		width: 100%;
+	}
+}
+
+// The same rule Tables uses for its destructive navigation actions
+.action--error {
+	:deep(.action-button) {
+		color: var(--color-text-error);
+	}
+}
+</style>
diff --git a/src/modules/modals/EditContext.vue b/src/modules/modals/EditContext.vue
index cdc15acfa0..24640d4f94 100644
--- a/src/modules/modals/EditContext.vue
+++ b/src/modules/modals/EditContext.vue
@@ -287,8 +287,10 @@ export default {
 		 */
 		async arrangeStartPage() {
 			const contextId = this.contextId
+			const startPage = Object.values(this.getContext(contextId)?.pages ?? {}).find(page => page.page_type === 'startpage')
 			this.actionCancel()
-			await this.$router.push({ path: '/application/' + contextId, query: { edit: '1' } }).catch(err => err)
+			const path = '/application/' + contextId + (startPage ? '/page/' + startPage.id : '')
+			await this.$router.push({ path, query: { edit: '1' } }).catch(err => err)
 		},
 		async actionDeleteContext() {
 			this.prepareDeleteContext = false
diff --git a/src/pages/Context.vue b/src/pages/Context.vue
index 2475e7c9dd..fe08fac54e 100644
--- a/src/pages/Context.vue
+++ b/src/pages/Context.vue
@@ -7,7 +7,14 @@
 		<div v-if="loading" class="icon-loading" />
 
 		<div v-else-if="activeContext && context" :class="{ 'context--standalone': isStandalone }">
-			<div v-if="isMenuRoute && !isStandalone" class="context__breadcrumb" data-cy="context-breadcrumb">
+			<ApplicationOverview v-if="isOverview"
+				:context="activeContext"
+				:pages="pages"
+				:icon="icon"
+				:can-manage="canManage"
+				@page-created="onPageCreated" />
+
+			<div v-if="!isOverview && !isStandalone" class="context__breadcrumb" data-cy="context-breadcrumb">
 				<NcButton variant="tertiary" data-cy="context-menu-overview" @click="openRoute('/application/' + context.id)">
 					<template #icon>
 						<ChevronLeft :size="20" />
@@ -15,7 +22,7 @@
 					{{ activeContext.name }}
 				</NcButton>
 				<span class="context__breadcrumb-separator" aria-hidden="true">/</span>
-				<span class="context__breadcrumb-current">{{ selectedMenuItem ? selectedMenuItem.label : $route.params.itemName }}</span>
+				<span class="context__breadcrumb-current">{{ breadcrumbLabel }}</span>
 				<NcButton variant="secondary"
 					:href="applicationUrl"
 					target="_blank"
@@ -29,49 +36,41 @@
 				</NcButton>
 			</div>
 
-			<div v-if="!isMenuRoute && !isStandalone" class="content context">
-				<div class="row first-row">
-					<h1 class="context__title" data-cy="context-title">
-						<NcIconSvgWrapper :svg="icon" :size="32" style="display: inline-block;" />&nbsp; {{
-							activeContext.name }}
-					</h1>
-				</div>
-				<div class="row space-L context__description">
-					{{ activeContext.description }}
-				</div>
-				<nav v-if="pages.length > 1 || canManage" class="context__pages" :aria-label="t('tables', 'Pages')" data-cy="contextPages">
-					<NcButton v-for="page in pages"
-						:key="page.id"
-						:variant="activePage && page.id === activePage.id ? 'primary' : 'tertiary'"
-						:to="pageRoute(page)"
-						:aria-current="activePage && page.id === activePage.id ? 'page' : undefined"
-						data-cy="contextPageLink">
-						{{ pageTitle(page) }}
-					</NcButton>
-					<NcButton v-if="canManage" variant="tertiary" data-cy="contextPageCreate" @click="openPageForm(null)">
+			<nav v-if="!isOverview && !isMenuRoute && !isStandalone && (pages.length > 1 || canManage)"
+				class="context__pages"
+				:aria-label="t('tables', 'Pages')"
+				data-cy="contextPages">
+				<NcButton v-for="page in pages"
+					:key="page.id"
+					:variant="activePage && page.id === activePage.id ? 'primary' : 'tertiary'"
+					:to="pageRoute(page)"
+					:aria-current="activePage && page.id === activePage.id ? 'page' : undefined"
+					data-cy="contextPageLink">
+					{{ pageTitle(page) }}
+				</NcButton>
+				<NcButton v-if="canManage" variant="tertiary" data-cy="contextPageCreate" @click="openPageForm(null)">
+					<template #icon>
+						<Plus :size="20" />
+					</template>
+					{{ t('tables', 'New page') }}
+				</NcButton>
+				<NcActions v-if="canManage && activePage && activePage.page_type !== 'startpage'"
+					:aria-label="t('tables', 'Page actions')"
+					data-cy="contextPageActions">
+					<NcActionButton :close-after-click="true" data-cy="contextPageRename" @click="openPageForm(activePage)">
 						<template #icon>
-							<Plus :size="20" />
+							<PencilOutline :size="20" />
 						</template>
-						{{ t('tables', 'New page') }}
-					</NcButton>
-					<NcActions v-if="canManage && activePage && activePage.page_type !== 'startpage'"
-						:aria-label="t('tables', 'Page actions')"
-						data-cy="contextPageActions">
-						<NcActionButton :close-after-click="true" data-cy="contextPageRename" @click="openPageForm(activePage)">
-							<template #icon>
-								<PencilOutline :size="20" />
-							</template>
-							{{ t('tables', 'Rename page') }}
-						</NcActionButton>
-						<NcActionButton :close-after-click="true" data-cy="contextPageDelete" @click="deletePage(activePage)">
-							<template #icon>
-								<TrashCanOutline :size="20" />
-							</template>
-							{{ t('tables', 'Delete page') }}
-						</NcActionButton>
-					</NcActions>
-				</nav>
-			</div>
+						{{ t('tables', 'Rename page') }}
+					</NcActionButton>
+					<NcActionButton :close-after-click="true" data-cy="contextPageDelete" @click="deletePage(activePage)">
+						<template #icon>
+							<TrashCanOutline :size="20" />
+						</template>
+						{{ t('tables', 'Delete page') }}
+					</NcActionButton>
+				</NcActions>
+			</nav>
 
 			<div v-if="isMenuRoute" class="context__menu-target" data-cy="context-menu-target">
 				<NcEmptyContent v-if="!menuTarget"
@@ -86,7 +85,7 @@
 					@saved="onPageSaved" />
 				<DataWidget v-else :key="menuTarget.data.type + '-' + menuTarget.data.id" :target="menuTarget.data" />
 			</div>
-			<template v-else>
+			<template v-else-if="!isOverview">
 				<GridPage v-if="activePage"
 					:key="activePage.id"
 					:context="context"
@@ -112,7 +111,7 @@
 <script>
 import MainModals from '../modules/modals/Modals.vue'
 import { mapState, mapActions } from 'pinia'
-import { NcActionButton, NcActions, NcButton, NcEmptyContent, NcIconSvgWrapper } from '@nextcloud/vue'
+import { NcActionButton, NcActions, NcButton, NcEmptyContent } from '@nextcloud/vue'
 import { showConfirmation } from '@nextcloud/dialogs'
 import { loadState } from '@nextcloud/initial-state'
 import { generateUrl } from '@nextcloud/router'
@@ -121,7 +120,6 @@ import OpenInNew from 'vue-material-design-icons/OpenInNew.vue'
 import PencilOutline from 'vue-material-design-icons/PencilOutline.vue'
 import Plus from 'vue-material-design-icons/Plus.vue'
 import TrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
-import { emit } from '@nextcloud/event-bus'
 import svgHelper from '../shared/components/ncIconPicker/mixins/svgHelper.js'
 import permissionsMixin from '../shared/components/ncTable/mixins/permissionsMixin.js'
 import { useTablesStore } from '../store/store.js'
@@ -129,8 +127,9 @@ import ErrorMessage from '../modules/main/partials/ErrorMessage.vue'
 import GridPage from '../modules/grid/GridPage.vue'
 import DataWidget from '../modules/grid/widgets/DataWidget.vue'
 import ContextPageForm from '../modules/modals/ContextPageForm.vue'
+import ApplicationOverview from '../modules/main/sections/ApplicationOverview.vue'
 import displayError, { getNotFoundError, getGenericLoadError } from '../shared/utils/displayError.js'
-import { menuItemRoute } from '../shared/utils/menuItems.js'
+import { menuItemRoute, pageTitle } from '../shared/utils/menuItems.js'
 
 /**
  * An application: its title and description, and its pages. The start page is the
@@ -145,7 +144,6 @@ export default {
 		NcActions,
 		NcButton,
 		NcEmptyContent,
-		NcIconSvgWrapper,
 		ChevronLeft,
 		OpenInNew,
 		PencilOutline,
@@ -155,6 +153,7 @@ export default {
 		GridPage,
 		DataWidget,
 		ContextPageForm,
+		ApplicationOverview,
 	},
 
 	mixins: [svgHelper, permissionsMixin],
@@ -197,6 +196,20 @@ export default {
 		isMenuRoute() {
 			return !!this.$route.params.itemName
 		},
+		/**
+		 * Inside Tables the application opens on its overview, where it is managed.
+		 *
+		 * @return {boolean}
+		 */
+		isOverview() {
+			return !this.isStandalone && !this.isMenuRoute && this.$route.params.pageId === undefined
+		},
+		breadcrumbLabel() {
+			if (this.isMenuRoute) {
+				return this.selectedMenuItem ? this.selectedMenuItem.label : this.$route.params.itemName
+			}
+			return this.activePage ? pageTitle(this.activePage) : ''
+		},
 		selectedMenuItem() {
 			const technicalName = this.$route.params.itemName
 			if (!technicalName) {
@@ -268,12 +281,6 @@ export default {
 	},
 
 	async mounted() {
-		// An application opened on its own shows its menu in the navigation, which must stay open
-		if (!this.isStandalone) {
-			emit('toggle-navigation', {
-				open: false,
-			})
-		}
 		await this.reload()
 		this.openFirstPageWhenStandalone()
 	},
@@ -340,19 +347,19 @@ export default {
 		},
 		/**
 		 * @param {object} page a page of the application
-		 * @return {string} the route of the page; the start page is the application itself
+		 * @return {string} the route of the page
 		 */
 		pageRoute(page) {
-			return page.page_type === 'startpage'
-				? '/application/' + this.context.id
-				: '/application/' + this.context.id + '/page/' + page.id
+			return '/application/' + this.context.id + '/page/' + page.id
 		},
+		pageTitle,
 		/**
-		 * @param {object} page a page of the application
-		 * @return {string} its title; the start page is the dashboard unless it was named
+		 * Takes over a page created on the overview.
+		 *
+		 * @param {object} page the new page
 		 */
-		pageTitle(page) {
-			return page.title || (page.page_type === 'startpage' ? t('tables', 'Dashboard') : t('tables', 'Untitled page'))
+		onPageCreated(page) {
+			this.pages = [...this.pages, page]
 		},
 		/**
 		 * Takes over a saved page. Saving can add tables or views to the application, which the
@@ -428,25 +435,6 @@ export default {
 
 <style scoped lang="scss">
 .context {
-	.row.first-row {
-		position: sticky;
-		inset-inline-start: 0;
-		top: 0;
-		z-index: 15;
-		background-color: var(--color-main-background);
-		width: var(--app-content-width, 100%);
-	}
-
-	&__title {
-		display: inline-flex;
-	}
-
-	&__description {
-		margin: calc(3 * var(--default-grid-baseline, 4px));
-		max-width: 790px;
-		margin-inline-start: 32px;
-	}
-
 	&__breadcrumb {
 		position: sticky;
 		top: 0;
@@ -483,12 +471,8 @@ export default {
 		flex-wrap: wrap;
 		align-items: center;
 		gap: var(--default-grid-baseline);
-		margin-inline-start: calc(8 * var(--default-grid-baseline));
-	}
-
-	&:deep(.icon-vue) {
-		min-width: 32px;
-		min-height: 32px;
+		padding-block: calc(2 * var(--default-grid-baseline));
+		padding-inline: calc(var(--default-clickable-area) + 4 * var(--default-grid-baseline)) calc(4 * var(--default-grid-baseline));
 	}
 }
 
diff --git a/src/shared/components/ncContextResource/MenuItemsEditor.vue b/src/shared/components/ncContextResource/MenuItemsEditor.vue
index 23bc28bd45..b6d7b19b2a 100644
--- a/src/shared/components/ncContextResource/MenuItemsEditor.vue
+++ b/src/shared/components/ncContextResource/MenuItemsEditor.vue
@@ -48,8 +48,8 @@
 				<NcSelect :model-value="targetOption(item)"
 					class="menu-items-editor__target"
 					:input-label="t('tables', 'Opens')"
-					:options="item.targetType === 'page' ? [targetOption(item)] : targetOptions"
-					:disabled="item.targetType === 'page'"
+					:options="isFixedItem(item) ? [targetOption(item)] : targetOptions"
+					:disabled="isFixedItem(item)"
 					:clearable="false"
 					:searchable="true"
 					:error="shownErrors[index].target"
@@ -159,6 +159,7 @@ import {
 	moveItem,
 	newMenuItem,
 	outdentItem,
+	pageTitle,
 	removeItem,
 } from '../../utils/menuItems.js'
 
@@ -193,6 +194,11 @@ export default {
 			type: Array,
 			default: () => ([]),
 		},
+		// The pages of the application an item can open; an application being created has none yet
+		pages: {
+			type: Array,
+			default: () => ([]),
+		},
 	},
 	emits: ['update:items'],
 	data() {
@@ -207,12 +213,23 @@ export default {
 	computed: {
 		...mapState(useTablesStore, ['tables', 'views']),
 		/**
-		 * The tables and views the menu can open: only those the user can manage, because the server
-		 * adds them to the application as resources, like the resource picker in the same dialog.
+		 * The pages of the application, and the tables and views the menu can open: only those the
+		 * user can manage, because the server adds them to the application as resources, like the
+		 * resource picker in the same dialog.
 		 *
 		 * @return {Array<object>} the options of the target select
 		 */
 		targetOptions() {
+			const pages = this.pages.map(page => {
+				const title = pageTitle(page)
+				return {
+					id: 'page-' + page.id,
+					targetType: 'page',
+					targetId: page.id,
+					title,
+					label: t('tables', '{title} (page)', { title }, undefined, { escape: false }),
+				}
+			})
 			const views = this.views.filter(view => this.canManageElement(view)).map(view => {
 				const title = (view.emoji ? view.emoji + ' ' : '') + view.title
 				return {
@@ -220,9 +237,7 @@ export default {
 					targetType: 'view',
 					targetId: view.id,
 					title,
-					label: view.type === 'grid'
-						? t('tables', '{title} (page with widgets)', { title }, undefined, { escape: false })
-						: t('tables', '{title} (view)', { title }, undefined, { escape: false }),
+					label: t('tables', '{title} (view)', { title }, undefined, { escape: false }),
 				}
 			})
 			const tables = this.tables.filter(table => this.canManageTable(table)).map(table => {
@@ -235,7 +250,7 @@ export default {
 					label: t('tables', '{title} (table)', { title }, undefined, { escape: false }),
 				}
 			})
-			return [...views, ...tables, { id: URL_OPTION_ID, targetType: 'url', targetId: null, title: '', label: t('tables', 'External link') }]
+			return [...pages, ...views, ...tables, { id: URL_OPTION_ID, targetType: 'url', targetId: null, title: '', label: t('tables', 'External link') }]
 		},
 		/**
 		 * What is missing or wrong in every item, by position.
@@ -280,7 +295,7 @@ export default {
 		 * @return {object|null} the selected option, or null when its target is not offered
 		 */
 		targetOption(item) {
-			if (item.targetType === 'page') {
+			if (item.targetType === 'page' && (isFixedItem(item) || !this.pages.some(page => page.id === item.targetId))) {
 				return {
 					id: 'page-' + (item.targetId ?? 'start'),
 					targetType: 'page',
diff --git a/src/shared/utils/menuItems.js b/src/shared/utils/menuItems.js
index 22a6f55a60..30f7e2eb6c 100644
--- a/src/shared/utils/menuItems.js
+++ b/src/shared/utils/menuItems.js
@@ -3,6 +3,8 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
+import { translate as t } from '@nextcloud/l10n'
+
 /*
  * The menu of an application as the editor holds it: a flat, ordered list where a child carries
  * the key of its parent. A parent always precedes its children, there is one level of nesting,
@@ -47,6 +49,25 @@ export function isFixedItem(item) {
 	return item?.fixed === true
 }
 
+/**
+ * Menu items as the API stores them, as items for the editor, with a stable key for list rendering.
+ *
+ * @param {Array|undefined|null} menuItems items from the application
+ * @return {Array<object>} the items for the editor
+ */
+export function toEditableMenuItems(menuItems) {
+	return (menuItems ?? []).map((item, index) => ({
+		key: 'item-' + (item.id ?? index),
+		label: item.label ?? '',
+		icon: item.icon ?? null,
+		targetType: item.targetType ?? 'url',
+		targetId: item.targetId ?? null,
+		url: item.url ?? '',
+		technicalName: item.technicalName ?? null,
+		parentKey: item.parentId != null ? 'item-' + item.parentId : null,
+	}))
+}
+
 /**
  * The payload the API expects for one menu item.
  *
@@ -366,3 +387,13 @@ export function menuTree(menuItems) {
 	const roots = sorted.filter(item => item.parentId == null)
 	return roots.map(item => ({ item, children: sorted.filter(child => child.parentId === item.id) }))
 }
+
+/**
+ * The name of a page of an application: its title, or "Dashboard" for an untitled start page.
+ *
+ * @param {object} page a page as the page API returns it
+ * @return {string}
+ */
+export function pageTitle(page) {
+	return page.title || (page.page_type === 'startpage' ? t('tables', 'Dashboard') : t('tables', 'Untitled page'))
+}
diff --git a/src/store/store.js b/src/store/store.js
index 0cdb4c7cca..f5c7d6fdf1 100644
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -236,6 +236,33 @@ export const useTablesStore = defineStore('store', {
 			return res.data.id
 		},
 
+		/**
+		 * Replaces the menu of an application.
+		 *
+		 * @param {object} payload the application and its new menu
+		 * @param {number} payload.id the id of the application
+		 * @param {Array<object>} payload.menuItems the menu as the API takes it
+		 * @return {Promise<object|false>} the updated application, or false when it could not be saved
+		 */
+		async updateContextMenuItems({ id, menuItems }) {
+			let res = null
+			try {
+				res = await axios.put(generateOcsUrl('/apps/tables/api/2/contexts/' + id), { menuItems })
+			} catch (e) {
+				displayError(e, t('tables', 'Could not update application.'))
+				return false
+			}
+
+			// The update answers with the application as stored; the read endpoint shapes its pages
+			// the way the rest of the app reads them
+			try {
+				await this.loadContext({ id })
+			} catch {
+				// loadContext reported the error; the menu itself was saved
+			}
+			return this.contexts.find(c => c.id === id) ?? res.data.ocs.data
+		},
+
 		async updateView({ id, data }) {
 			let res = null
 

From b264253be41db27b46b7ed9d674ebeff9748426e Mon Sep 17 00:00:00 2001
From: Ruben van der Linde <ruben@conduction.nl>
Date: Thu, 15 Oct 2026 23:17:20 +0200
Subject: [PATCH 2/3] test(pages): open the start page in the technical name
 test the way the other grid tests do

Assisted-by: ClaudeCode:claude-opus-5-5
---
 playwright/e2e/context-grid-pages.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/playwright/e2e/context-grid-pages.spec.ts b/playwright/e2e/context-grid-pages.spec.ts
index 06adb44bd1..9dae65056b 100644
--- a/playwright/e2e/context-grid-pages.spec.ts
+++ b/playwright/e2e/context-grid-pages.spec.ts
@@ -139,7 +139,7 @@ test.describe('Application pages on the grid', () => {
 	test('A page created without a technical name gets one from its title, and keeps one on rename', async ({ userPage: { page, user } }) => {
 		const table = await createTableViaApi(page.request, user, 'grid name table')
 		const contextId = await createApplicationViaApi(page.request, user, 'grid name app', [table])
-		await openApplication(page, contextId)
+		await openApplication(page, user, contextId)
 
 		await page.locator('[data-cy="contextPageCreate"]').click()
 		const pageForm = page.getByRole('dialog', { name: 'New page' })

From 1375d8701a3610e07c9f0148f9226ae358b1fba5 Mon Sep 17 00:00:00 2001
From: Ruben van der Linde <ruben@conduction.nl>
Date: Thu, 15 Oct 2026 23:21:09 +0200
Subject: [PATCH 3/3] test(pages): wait for the created page before reading its
 technical name

Assisted-by: ClaudeCode:claude-opus-5-5
---
 playwright/e2e/context-grid-pages.spec.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/playwright/e2e/context-grid-pages.spec.ts b/playwright/e2e/context-grid-pages.spec.ts
index 9dae65056b..277448e1ee 100644
--- a/playwright/e2e/context-grid-pages.spec.ts
+++ b/playwright/e2e/context-grid-pages.spec.ts
@@ -144,8 +144,11 @@ test.describe('Application pages on the grid', () => {
 		await page.locator('[data-cy="contextPageCreate"]').click()
 		const pageForm = page.getByRole('dialog', { name: 'New page' })
 		await pageForm.getByRole('textbox', { name: 'Title' }).fill('Open cases')
+		const created = page.waitForResponse(r => r.url().includes('/pages') && r.request().method() === 'POST')
 		await page.locator('[data-cy="contextPageSubmit"]').click()
-		await expect(page).toHaveURL(/\/application\/\d+\/page\/\d+/)
+		const createdPage = (await (await created).json()).ocs.data
+		expect(createdPage.technical_name).toBe('open_cases')
+		await expect(page).toHaveURL(new RegExp(`/page/${createdPage.id}$`))
 
 		const pages = Object.values((await getApplication(page.request, user, contextId)).pages as Record<string, { page_type: string, technical_name: string }>)
 		expect(pages.map(entry => entry.technical_name).sort()).toEqual(['dashboard', 'open_cases'])