diff --git a/playwright/e2e/grid-view-page.spec.ts b/playwright/e2e/grid-view-page.spec.ts
new file mode 100644
index 0000000000..8223dac118
--- /dev/null
+++ b/playwright/e2e/grid-view-page.spec.ts
@@ -0,0 +1,131 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { Page } from '@playwright/test'
+import { test, expect } from '../support/fixtures'
+import { ocsRequest, type TestUser } from '../support/api'
+
+/**
+ * Creates a grid view through the API and opens its page.
+ *
+ * @param page the page of the test user
+ * @param user the test user
+ * @param title title of the grid view
+ */
+async function openNewGridView(page: Page, user: TestUser, title: string) {
+	const response = await ocsRequest(page.request, user, {
+		method: 'POST',
+		url: '/ocs/v2.php/apps/tables/api/2/views?format=json',
+		data: { title },
+	})
+	const view = (await response.json()).ocs.data
+	await page.goto(`/index.php/apps/tables/#/view/${view.id}`)
+	await expect(page.locator('[data-cy="gridViewHeading"]')).toContainText(title)
+	return view
+}
+
+/**
+ * Adds a header widget with the given heading through the widget dialog.
+ *
+ * @param page the page of the test user
+ * @param heading the heading of the header widget
+ */
+async function addHeaderWidget(page: Page, heading: string) {
+	await page.locator('[data-cy="gridViewAddWidget"]').click()
+	const dialog = page.locator('[data-cy="addWidgetModal"]')
+	await dialog.getByRole('textbox', { name: 'Heading', exact: true }).fill(heading)
+	await dialog.locator('[data-cy="addWidgetSubmit"]').click()
+	await expect(dialog).toBeHidden()
+}
+
+/**
+ * Saves the grid and waits for the server to store it.
+ *
+ * @param page the page of the test user
+ * @param viewId the id of the grid view
+ */
+async function saveGrid(page: Page, viewId: number) {
+	const saved = page.waitForResponse(response => response.url().includes(`/apps/tables/view/${viewId}`) && response.request().method() === 'PUT')
+	await page.locator('[data-cy="gridViewSave"]').click()
+	expect((await saved).status()).toBe(200)
+}
+
+test.describe('Grid view page', () => {
+	test('A grid view created from the navigation opens its page and is listed', async ({ userPage: { page } }) => {
+		await page.goto('/index.php/apps/tables')
+		await page.locator('[data-cy="navigationCreateGridViewIcon"]').click({ force: true })
+
+		const dialog = page.locator('[data-cy="gridViewSettingsModal"]')
+		await dialog.getByRole('textbox', { name: 'Title', exact: true }).fill('Team page')
+		await dialog.locator('[data-cy="gridViewSubmit"]').click()
+
+		await expect(page).toHaveURL(/#\/view\/\d+$/)
+		await expect(page.locator('[data-cy="gridViewHeading"]')).toContainText('Team page')
+		await expect(page.locator('[data-cy="navigationViewItem"]').filter({ hasText: 'Team page' })).toBeVisible()
+	})
+
+	test('Widgets are added, configured without losing their content, and kept after a reload', async ({ userPage: { page, user } }) => {
+		const view = await openNewGridView(page, user, 'Intake home')
+
+		await page.locator('[data-cy="gridViewEdit"]').click()
+		await addHeaderWidget(page, 'Welcome')
+		await saveGrid(page, view.id)
+
+		await page.reload()
+		await expect(page.locator('[data-cy="gridWidget"]')).toContainText('Welcome')
+
+		// Configuring the widget opens it with its own content, even after another type was picked before
+		await page.locator('[data-cy="gridViewEdit"]').click()
+		await page.locator('[data-cy="gridViewAddWidget"]').click()
+		const dialog = page.locator('[data-cy="addWidgetModal"]')
+		// An NcSelect opens from its indicator, like in the other specs
+		await dialog.locator('[data-cy="addWidgetType"] .vs__open-indicator').click()
+		await page.locator('.vs__dropdown-menu li').filter({ hasText: 'Description' }).first().click()
+		// Escape would only leave the select, which keeps the focus after the pick
+		await dialog.getByRole('button', { name: 'Close', exact: true }).click()
+		await expect(dialog).toBeHidden()
+
+		await page.locator('[data-cy="gridWidget"]').getByRole('button', { name: 'Widget actions' }).click()
+		await page.getByRole('menuitem', { name: 'Configure widget' }).click()
+		const heading = dialog.getByRole('textbox', { name: 'Heading', exact: true })
+		await expect(heading).toHaveValue('Welcome')
+		await heading.fill('Hello')
+		await dialog.locator('[data-cy="addWidgetSubmit"]').click()
+		await saveGrid(page, view.id)
+
+		await page.reload()
+		await expect(page.locator('[data-cy="gridWidget"]')).toContainText('Hello')
+	})
+
+	test('The title of a grid view is edited from the navigation', async ({ userPage: { page, user } }) => {
+		const view = await openNewGridView(page, user, 'Old title')
+
+		const item = page.locator('[data-cy="navigationViewItem"]').filter({ hasText: 'Old title' })
+		await item.hover()
+		await item.getByRole('button', { name: /Actions|Open menu/ }).first().click({ force: true })
+		await page.getByRole('menuitem', { name: 'View settings' }).click()
+
+		const dialog = page.locator('[data-cy="gridViewSettingsModal"]')
+		await dialog.getByRole('textbox', { name: 'Title', exact: true }).fill('New title')
+		const saved = page.waitForResponse(response => response.url().includes(`/apps/tables/view/${view.id}`) && response.request().method() === 'PUT')
+		await dialog.locator('[data-cy="gridViewSubmit"]').click()
+		expect((await saved).status()).toBe(200)
+
+		await page.reload()
+		await expect(page.locator('[data-cy="gridViewHeading"]')).toContainText('New title')
+	})
+
+	test('Leaving a page with unsaved changes asks first', async ({ userPage: { page, user } }) => {
+		await openNewGridView(page, user, 'Draft page')
+
+		await page.locator('[data-cy="gridViewEdit"]').click()
+		await addHeaderWidget(page, 'Not saved')
+		await page.goto('/index.php/apps/tables/#/')
+
+		await expect(page.getByRole('dialog', { name: 'Discard unsaved changes?' })).toBeVisible()
+		await page.getByRole('button', { name: 'Keep editing' }).click()
+		await expect(page.locator('[data-cy="gridWidget"]')).toContainText('Not saved')
+	})
+})
diff --git a/src/modules/grid/GridView.vue b/src/modules/grid/GridView.vue
new file mode 100644
index 0000000000..47e9ca33b4
--- /dev/null
+++ b/src/modules/grid/GridView.vue
@@ -0,0 +1,369 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<div class="grid-view" data-cy="gridView">
+		<div class="grid-view__header">
+			<div class="grid-view__heading">
+				<h1 v-if="showTitle" class="grid-view__title" data-cy="gridViewHeading">
+					{{ view.emoji }} {{ view.title }}
+				</h1>
+				<p v-if="showTitle && view.description" class="grid-view__description">
+					{{ view.description }}
+				</p>
+			</div>
+			<div v-if="canEdit" class="grid-view__actions">
+				<template v-if="isEditing">
+					<NcButton variant="secondary" data-cy="gridViewAddWidget" @click="openAddWidget">
+						<template #icon>
+							<Plus :size="20" />
+						</template>
+						{{ t('tables', 'Add widget') }}
+					</NcButton>
+					<NcButton variant="tertiary" data-cy="gridViewCancel" @click="cancelEditing">
+						{{ t('tables', 'Cancel') }}
+					</NcButton>
+					<NcButton variant="primary" :disabled="saving" data-cy="gridViewSave" @click="save">
+						<template #icon>
+							<ContentSaveOutline :size="20" />
+						</template>
+						{{ t('tables', 'Save') }}
+					</NcButton>
+				</template>
+				<NcButton v-else variant="secondary" data-cy="gridViewEdit" @click="startEditing">
+					<template #icon>
+						<PencilOutline :size="20" />
+					</template>
+					{{ t('tables', 'Edit page') }}
+				</NcButton>
+			</div>
+		</div>
+
+		<NcEmptyContent v-if="activeGrid.layout.length === 0"
+			class="grid-view__empty"
+			:name="t('tables', 'This page is empty')"
+			:description="isEditing ? t('tables', 'Add a header, a description or a table.') : t('tables', 'Edit the page to add widgets.')">
+			<template #icon>
+				<ViewDashboardOutline />
+			</template>
+			<template v-if="isEditing" #action>
+				<NcButton variant="primary" @click="openAddWidget">
+					{{ t('tables', 'Add widget') }}
+				</NcButton>
+			</template>
+		</NcEmptyContent>
+
+		<GridCanvas :layout="activeGrid.layout" :editable="isEditing" @layout-change="onLayoutChange">
+			<template #widget="{ item, narrow }">
+				<GridWidget v-if="widgetsById[item.widgetId]"
+					:widget="widgetsById[item.widgetId]"
+					:layout-item="item"
+					:editable="isEditing"
+					:arrangeable="!narrow"
+					@configure="configureWidget"
+					@remove="removeWidget"
+					@move="moveWidget" />
+			</template>
+		</GridCanvas>
+
+		<AddWidget :show-modal="addWidgetOpen"
+			:editing-widget="widgetBeingConfigured"
+			@close="closeAddWidget"
+			@submit="onWidgetSubmit" />
+	</div>
+</template>
+
+<script>
+import { NcButton, NcEmptyContent } from '@nextcloud/vue'
+import { showConfirmation, showSuccess } from '@nextcloud/dialogs'
+import ContentSaveOutline from 'vue-material-design-icons/ContentSaveOutline.vue'
+import PencilOutline from 'vue-material-design-icons/PencilOutline.vue'
+import Plus from 'vue-material-design-icons/Plus.vue'
+import ViewDashboardOutline from 'vue-material-design-icons/ViewDashboardOutline.vue'
+import { computed, ref } from 'vue'
+import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
+import { mapActions, mapState } from 'pinia'
+import GridCanvas from './GridCanvas.vue'
+import GridWidget from './GridWidget.vue'
+import AddWidget from '../modals/AddWidget.vue'
+import { useTablesStore } from '../../store/store.js'
+import { GRID_COLUMNS, GRID_MIN_WIDTH, cloneGrid, emptyGrid, findWidgetType, nextFreeRow } from './gridLayout.js'
+
+/**
+ * A grid view: its widgets on a grid, with an edit mode that saves the whole grid at once.
+ */
+export default {
+	name: 'GridView',
+	components: {
+		NcButton,
+		NcEmptyContent,
+		ContentSaveOutline,
+		PencilOutline,
+		Plus,
+		ViewDashboardOutline,
+		GridCanvas,
+		GridWidget,
+		AddWidget,
+	},
+	props: {
+		view: {
+			type: Object,
+			required: true,
+		},
+		canEdit: {
+			type: Boolean,
+			default: false,
+		},
+		showTitle: {
+			type: Boolean,
+			default: true,
+		},
+	},
+	setup(props) {
+		// The draft lives here, so the route guards and the component share one implementation
+		const draftGrid = ref(null)
+		const storedGrid = computed(() => props.view.grid?.layout ? props.view.grid : emptyGrid())
+		const hasUnsavedChanges = computed(() => draftGrid.value !== null && JSON.stringify(draftGrid.value) !== JSON.stringify(cloneGrid(storedGrid.value)))
+
+		/**
+		 * Asks whether unsaved changes may be discarded.
+		 *
+		 * @return {Promise<boolean>} true when there is nothing to lose or the user agrees
+		 */
+		const confirmDiscard = async () => {
+			if (!hasUnsavedChanges.value) {
+				return true
+			}
+			try {
+				return await showConfirmation({
+					name: t('tables', 'Discard unsaved changes?'),
+					text: t('tables', 'This page has changes that are not saved yet.'),
+					labelConfirm: t('tables', 'Discard changes'),
+					labelReject: t('tables', 'Keep editing'),
+				})
+			} catch {
+				// Closing the dialog keeps the changes
+				return false
+			}
+		}
+
+		// Leaving the page, or switching to another view, asks first while the grid has unsaved changes
+		onBeforeRouteLeave(confirmDiscard)
+		onBeforeRouteUpdate(confirmDiscard)
+
+		return { draftGrid, storedGrid, hasUnsavedChanges, confirmDiscard }
+	},
+	data() {
+		return {
+			saving: false,
+			addWidgetOpen: false,
+			widgetBeingConfigured: null,
+		}
+	},
+	computed: {
+		...mapState(useTablesStore, ['widgetTypes']),
+		activeGrid() {
+			return this.draftGrid ?? this.storedGrid
+		},
+		isEditing() {
+			return this.draftGrid !== null
+		},
+		widgetsById() {
+			return Object.fromEntries(this.activeGrid.widgets.map(widget => [widget.id, widget]))
+		},
+	},
+	watch: {
+		'view.id'() {
+			this.draftGrid = null
+		},
+	},
+	mounted() {
+		window.addEventListener('beforeunload', this.warnBeforeUnload)
+	},
+	beforeUnmount() {
+		window.removeEventListener('beforeunload', this.warnBeforeUnload)
+	},
+	methods: {
+		...mapActions(useTablesStore, ['updateView']),
+		/**
+		 * Lets the browser warn before the tab closes or reloads with unsaved changes.
+		 *
+		 * @param {BeforeUnloadEvent} event the unload event
+		 */
+		warnBeforeUnload(event) {
+			if (this.hasUnsavedChanges) {
+				event.preventDefault()
+			}
+		},
+		/**
+		 * Starts editing on a copy of the stored grid.
+		 */
+		startEditing() {
+			this.draftGrid = cloneGrid(this.storedGrid)
+		},
+		/**
+		 * Leaves edit mode and drops the draft.
+		 */
+		cancelEditing() {
+			this.draftGrid = null
+		},
+		/**
+		 * Takes over the layout after a drag or resize.
+		 *
+		 * @param {Array} layout the new layout
+		 */
+		onLayoutChange(layout) {
+			if (!this.isEditing) {
+				return
+			}
+			this.draftGrid = { ...this.draftGrid, layout }
+		},
+		/**
+		 * Opens the dialog for a new widget.
+		 */
+		openAddWidget() {
+			this.widgetBeingConfigured = null
+			this.addWidgetOpen = true
+		},
+		/**
+		 * Closes the widget dialog.
+		 */
+		closeAddWidget() {
+			this.addWidgetOpen = false
+			this.widgetBeingConfigured = null
+		},
+		/**
+		 * Opens the dialog for a widget on the grid.
+		 *
+		 * @param {object} widget the widget to configure
+		 */
+		configureWidget(widget) {
+			this.widgetBeingConfigured = widget
+			this.addWidgetOpen = true
+		},
+		/**
+		 * Updates the configured widget, or places a new one below the others.
+		 *
+		 * @param {{type: string, configuration: object, content: object}} payload the widget from the dialog
+		 */
+		onWidgetSubmit(payload) {
+			if (this.widgetBeingConfigured) {
+				this.draftGrid = {
+					...this.draftGrid,
+					widgets: this.draftGrid.widgets.map(widget => widget.id === this.widgetBeingConfigured.id
+						? { ...widget, configuration: payload.configuration, content: payload.content }
+						: widget),
+				}
+				this.closeAddWidget()
+				return
+			}
+			const id = 'w-' + payload.type + '-' + Date.now()
+			const widgetType = findWidgetType(this.widgetTypes, payload.type)
+			const size = { gridWidth: widgetType?.defaultWidth ?? 6, gridHeight: widgetType?.defaultHeight ?? 3 }
+			this.draftGrid = {
+				widgets: [...this.draftGrid.widgets, { id, type: payload.type, configuration: payload.configuration, content: payload.content }],
+				layout: [...this.draftGrid.layout, {
+					id,
+					widgetId: id,
+					gridX: 0,
+					gridY: nextFreeRow(this.draftGrid.layout),
+					gridWidth: size.gridWidth,
+					gridHeight: size.gridHeight,
+				}],
+			}
+			this.closeAddWidget()
+		},
+		/**
+		 * Moves or resizes a widget by one step, kept inside the grid.
+		 *
+		 * @param {object} widget the widget to change
+		 * @param {{gridX?: number, gridY?: number, gridWidth?: number, gridHeight?: number}} change the steps to apply
+		 */
+		moveWidget(widget, change) {
+			this.draftGrid = {
+				...this.draftGrid,
+				layout: this.draftGrid.layout.map(item => {
+					if (item.widgetId !== widget.id) {
+						return item
+					}
+					const gridWidth = Math.min(GRID_COLUMNS, Math.max(GRID_MIN_WIDTH, item.gridWidth + (change.gridWidth ?? 0)))
+					return {
+						...item,
+						gridWidth,
+						gridHeight: Math.max(1, item.gridHeight + (change.gridHeight ?? 0)),
+						gridX: Math.min(GRID_COLUMNS - gridWidth, Math.max(0, item.gridX + (change.gridX ?? 0))),
+						gridY: Math.max(0, item.gridY + (change.gridY ?? 0)),
+					}
+				}),
+			}
+		},
+		/**
+		 * Removes a widget and its place on the grid.
+		 *
+		 * @param {object} widget the widget to remove
+		 */
+		removeWidget(widget) {
+			this.draftGrid = {
+				widgets: this.draftGrid.widgets.filter(item => item.id !== widget.id),
+				layout: this.draftGrid.layout.filter(item => item.widgetId !== widget.id),
+			}
+		},
+		/**
+		 * Saves the whole grid at once.
+		 */
+		async save() {
+			if (!this.isEditing) {
+				return
+			}
+			this.saving = true
+			const grid = cloneGrid(this.draftGrid)
+			const success = await this.updateView({
+				id: this.view.id,
+				data: { data: { grid: JSON.stringify(grid) } },
+			})
+			this.saving = false
+			// A failed save is already reported by the store
+			if (success) {
+				this.draftGrid = null
+				showSuccess(t('tables', 'Page saved'))
+			}
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.grid-view {
+	width: 100%;
+	padding: calc(4 * var(--default-grid-baseline));
+
+	&__header {
+		display: flex;
+		align-items: flex-start;
+		justify-content: space-between;
+		gap: calc(4 * var(--default-grid-baseline));
+		margin-bottom: calc(4 * var(--default-grid-baseline));
+	}
+
+	&__title {
+		margin: 0;
+	}
+
+	&__description {
+		margin: var(--default-grid-baseline) 0 0;
+		color: var(--color-text-maxcontrast);
+	}
+
+	&__actions {
+		display: flex;
+		align-items: center;
+		gap: calc(2 * var(--default-grid-baseline));
+		flex-shrink: 0;
+	}
+
+	&__empty {
+		margin-block: 4vh;
+	}
+}
+</style>
diff --git a/src/modules/modals/GridViewSettings.vue b/src/modules/modals/GridViewSettings.vue
new file mode 100644
index 0000000000..9b83bb5f25
--- /dev/null
+++ b/src/modules/modals/GridViewSettings.vue
@@ -0,0 +1,144 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<NcDialog v-if="showModal"
+		:name="view ? t('tables', 'Edit grid view') : t('tables', 'Create grid view')"
+		size="normal"
+		data-cy="gridViewSettingsModal"
+		@closing="$emit('close')">
+		<div class="grid-view-settings">
+			<div class="grid-view-settings__title-row">
+				<NcEmojiPicker :close-on-select="true" @select="emoji => icon = emoji">
+					<NcButton variant="tertiary"
+						:aria-label="t('tables', 'Select emoji for view')"
+						:title="t('tables', 'Select emoji')"
+						@click.prevent>
+						{{ icon }}
+					</NcButton>
+				</NcEmojiPicker>
+				<NcTextField v-model="title"
+					class="grid-view-settings__field"
+					:label="t('tables', 'Title')"
+					:error="errorTitle"
+					:helper-text="errorTitle ? t('tables', 'A grid view needs a title') : ''"
+					required
+					data-cy="gridViewTitle" />
+			</div>
+			<NcTextField v-model="description"
+				class="grid-view-settings__field"
+				:label="t('tables', 'Description')"
+				:placeholder="t('tables', 'What this page is for')"
+				data-cy="gridViewDescription" />
+		</div>
+		<template #actions>
+			<NcButton variant="primary" :disabled="saving" data-cy="gridViewSubmit" @click="submit">
+				{{ view ? t('tables', 'Save') : t('tables', 'Create grid view') }}
+			</NcButton>
+		</template>
+	</NcDialog>
+</template>
+
+<script>
+import { NcButton, NcDialog, NcEmojiPicker, NcTextField } from '@nextcloud/vue'
+import { mapActions } from 'pinia'
+import { useTablesStore } from '../../store/store.js'
+
+/**
+ * Creates a grid view, or edits the title, emoji and description of one. A grid view is
+ * named by its id, so it has no technical name to set here.
+ */
+export default {
+	name: 'GridViewSettings',
+	components: {
+		NcButton,
+		NcDialog,
+		NcEmojiPicker,
+		NcTextField,
+	},
+	props: {
+		showModal: {
+			type: Boolean,
+			default: false,
+		},
+		view: {
+			type: Object,
+			default: null,
+		},
+	},
+	emits: ['close'],
+	data() {
+		return {
+			title: '',
+			description: '',
+			icon: '',
+			errorTitle: false,
+			saving: false,
+		}
+	},
+	watch: {
+		showModal(open) {
+			if (open) {
+				this.reset()
+			}
+		},
+	},
+	methods: {
+		...mapActions(useTablesStore, ['insertStandaloneView', 'updateView']),
+		/**
+		 * Fills the form with the view being edited, or empty for a new one.
+		 */
+		reset() {
+			this.title = this.view?.title ?? ''
+			this.description = this.view?.description ?? ''
+			this.icon = this.view?.emoji || '🧩'
+			this.errorTitle = false
+			this.saving = false
+		},
+		/**
+		 * Saves the view, or creates it and opens it.
+		 */
+		async submit() {
+			this.errorTitle = this.title.trim() === ''
+			if (this.errorTitle || this.saving) {
+				return
+			}
+			this.saving = true
+			const data = { title: this.title.trim(), description: this.description, emoji: this.icon }
+			if (this.view) {
+				const success = await this.updateView({ id: this.view.id, data: { data } })
+				this.saving = false
+				if (success) {
+					this.$emit('close')
+				}
+				return
+			}
+			const created = await this.insertStandaloneView({ data })
+			this.saving = false
+			if (created) {
+				this.$emit('close')
+				await this.$router.push('/view/' + created.id).catch(err => err)
+			}
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.grid-view-settings {
+	display: flex;
+	flex-direction: column;
+	gap: calc(2 * var(--default-grid-baseline));
+
+	&__title-row {
+		display: flex;
+		align-items: flex-end;
+		gap: var(--default-grid-baseline);
+	}
+
+	&__field {
+		flex: 1;
+	}
+}
+</style>
diff --git a/src/modules/modals/Modals.vue b/src/modules/modals/Modals.vue
index 2738943b84..8edae596c7 100644
--- a/src/modules/modals/Modals.vue
+++ b/src/modules/modals/Modals.vue
@@ -35,6 +35,10 @@
 			:view-setting="viewToEdit?.viewSetting"
 			@close="viewToEdit = null" />
 		<DeleteView :show-modal="viewToDelete !== null" :view="viewToDelete" @cancel="viewToDelete = null" />
+		<GridViewSettings
+			:show-modal="gridView !== null"
+			:view="gridView?.view ?? null"
+			@close="gridView = null" />
 
 		<Import
 			:show-modal="importToElement !== null"
@@ -76,6 +80,7 @@ import CreateTable from './CreateTable.vue'
 import DeleteView from './DeleteView.vue'
 import EditTable from './EditTable.vue'
 import EditContext from './EditContext.vue'
+import GridViewSettings from './GridViewSettings.vue'
 import TransferTable from './TransferTable.vue'
 import CreateContext from './CreateContext.vue'
 import TransferContext from './TransferContext.vue'
@@ -85,6 +90,7 @@ import ImportContextScheme from './ImportContextScheme.vue';
 export default {
 	components: {
 		EditTable,
+		GridViewSettings,
 		DeleteView,
 		CreateTable,
 		Import,
@@ -118,6 +124,7 @@ export default {
 			editRow: null,
 			rowsToDelete: null,
 			viewToEdit: null,
+			gridView: null,
 			showModalCreateTable: false,
 			showModalCreateContext: false,
 			importToElement: null,
@@ -145,7 +152,14 @@ export default {
 
 		// views
 		this.subscribeToEventBus('tables:view:reload', () => { this.reload(true) })
-		this.subscribeToEventBus('tables:view:edit', view => { this.viewToEdit = { ...view, createView: false } })
+		this.subscribeToEventBus('tables:view:edit', view => {
+			if (view?.view?.type === 'grid') {
+				this.gridView = { view: view.view }
+				return
+			}
+			this.viewToEdit = { ...view, createView: false }
+		})
+		this.subscribeToEventBus('tables:view:create-grid', () => { this.gridView = { view: null } })
 		this.subscribeToEventBus('tables:view:create', tableInfos => {
 			this.viewToEdit = {
 				view: { tableId: tableInfos.tableId, sort: [], filter: [] },
diff --git a/src/modules/navigation/partials/NavigationViewItem.vue b/src/modules/navigation/partials/NavigationViewItem.vue
index 0d3b7d2333..a922be8cc3 100644
--- a/src/modules/navigation/partials/NavigationViewItem.vue
+++ b/src/modules/navigation/partials/NavigationViewItem.vue
@@ -13,13 +13,16 @@
 			<template v-if="view.emoji">
 				{{ view.emoji }}
 			</template>
+			<template v-else-if="view.type === 'grid'">
+				<ViewDashboardOutline :size="20" />
+			</template>
 			<template v-else>
 				<Table :size="20" />
 			</template>
 		</template>
 		<template #counter>
 			<IconCloudOutline v-if="view.isFederated" :size="20" decorative style="margin-right: 8px;" />
-			<NcCounterBubble v-else-if="canReadData(view)" :count="view.rowsCount" />
+			<NcCounterBubble v-else-if="view.type !== 'grid' && canReadData(view)" :count="view.rowsCount" />
 			<NcActionButton v-if="view.hasShares" icon="icon-share" :class="{'margin-right': !(activeView && view.id === activeView.id)}" @click="actionShowShare" />
 			<div v-if="view.isShared && view.ownership !== userId && !canManageTable(view) && showShareSender" class="margin-left">
 				<NcAvatar :user="view.ownership" :show-user-status="false" />
@@ -37,7 +40,7 @@
 			</NcActionButton>
 
 			<!-- DUPLICATE -->
-			<NcActionButton v-if="canManageTable(view)"
+			<NcActionButton v-if="view.type !== 'grid' && canManageTable(view)"
 				:close-after-click="true"
 				@click="cloneView">
 				<template #icon>
@@ -55,7 +58,7 @@
 			</NcActionButton>
 
 			<!-- IMPORT -->
-			<NcActionButton v-if="canCreateRowInElement(view)"
+			<NcActionButton v-if="view.type !== 'grid' && canCreateRowInElement(view)"
 				:close-after-click="true"
 				@click="actionShowImport(view)">
 				{{ t('tables', 'Import') }}
@@ -117,6 +120,7 @@
 </template>
 <script>
 import { NcAppNavigationItem, NcActionButton, NcCounterBubble, NcAvatar } from '@nextcloud/vue'
+import ViewDashboardOutline from 'vue-material-design-icons/ViewDashboardOutline.vue'
 import '@nextcloud/dialogs/style.css'
 import { getCurrentUser } from '@nextcloud/auth'
 import { mapState, mapActions } from 'pinia'
@@ -140,6 +144,7 @@ export default {
 	name: 'NavigationViewItem',
 
 	components: {
+		ViewDashboardOutline,
 		IconCloudOutline,
 		ActivityIcon,
 		PlaylistEdit,
diff --git a/src/modules/navigation/sections/Navigation.vue b/src/modules/navigation/sections/Navigation.vue
index 8eb153920a..bdc1d6ac64 100644
--- a/src/modules/navigation/sections/Navigation.vue
+++ b/src/modules/navigation/sections/Navigation.vue
@@ -70,6 +70,19 @@
 					<NavigationContextItem :context="node" />
 				</template>
 			</ul>
+			<!-- After the applications, which tests address as the second list -->
+			<ul v-if="!isLoadingSomething">
+				<NcAppNavigationCaption :name="t('tables', 'Grid views')">
+					<template #actions>
+						<NcActionButton :aria-label="t('tables', 'Create grid view')" icon="icon-add"
+							data-cy="navigationCreateGridViewIcon" @click.prevent="createGridView" />
+					</template>
+				</NcAppNavigationCaption>
+
+				<template v-for="view in getGridViews" :key="'grid-view-' + view.id">
+					<NavigationViewItem :view="view" />
+				</template>
+			</ul>
 
 			<div v-if="filterString !== ''" class="search-info">
 				<NcEmptyContent :description="t('tables', 'Your results are filtered.')">
@@ -148,14 +161,20 @@ export default {
 			const sharedTableIds = this.getFilteredTables.map(table => table.id)
 
 			return this.views.filter(view => {
-				return !view.isShared && view.ownership === getCurrentUser().uid && sharedTableIds.includes(view.tableId)
+				return view.type !== 'grid' && !view.isShared && view.ownership === getCurrentUser().uid && sharedTableIds.includes(view.tableId)
 			}).filter(view => view.title.toLowerCase().includes(this.filterString.toLowerCase()))
 		},
 		getSharedViews() {
 			return this.views.filter(view => {
-				return view.isShared && view.ownership !== getCurrentUser().uid
+				return view.type !== 'grid' && view.isShared && view.ownership !== getCurrentUser().uid
 			}).filter(view => view.title.toLowerCase().includes(this.filterString.toLowerCase()))
 		},
+		// Grid views are pages, not data, so they get their own list instead of sitting among the tables
+		getGridViews() {
+			return this.views
+				.filter(view => view.type === 'grid' && view.title.toLowerCase().includes(this.filterString.toLowerCase()))
+				.sort((a, b) => a.title.localeCompare(b.title))
+		},
 		getFavoriteTables() {
 			return this.getAllNodes.filter(node => !node.tableId && node.favorite)
 		},
@@ -206,6 +225,9 @@ export default {
 		createContext() {
 			emit('tables:context:create')
 		},
+		createGridView() {
+			emit('tables:view:create-grid')
+		},
 		closeNav() {
 			if (window.innerWidth < 960) {
 				emit('toggle-navigation', {
diff --git a/src/pages/View.vue b/src/pages/View.vue
index fbfc5763d7..fc4fd483c0 100644
--- a/src/pages/View.vue
+++ b/src/pages/View.vue
@@ -8,6 +8,10 @@
 			<div class="icon-loading" />
 		</div>
 
+		<div v-else-if="activeView && activeView.type === 'grid'" class="main-view-view__grid">
+			<GridView :view="activeView" :can-edit="canManageElement(activeView)" />
+		</div>
+
 		<div v-else-if="activeView">
 			<MainWrapper :element="activeView" :is-view="true" @update:layout="localLayout = $event" />
 		</div>
@@ -22,6 +26,8 @@
 import { mapState, mapActions } from 'pinia'
 import { useTablesStore } from '../store/store.js'
 import MainWrapper from '../modules/main/sections/MainWrapper.vue'
+import GridView from '../modules/grid/GridView.vue'
+import permissionsMixin from '../shared/components/ncTable/mixins/permissionsMixin.js'
 import MainModals from '../modules/modals/Modals.vue'
 import ErrorMessage from '../modules/main/partials/ErrorMessage.vue'
 import displayError, { getNotFoundError, getGenericLoadError } from '../shared/utils/displayError.js'
@@ -31,10 +37,13 @@ export default {
 
 	components: {
 		MainWrapper,
+		GridView,
 		MainModals,
 		ErrorMessage,
 	},
 
+	mixins: [permissionsMixin],
+
 	data() {
 		return {
 			errorMessage: null,
@@ -86,6 +95,12 @@ export default {
 .main-view-view {
 	width: max-content;
 	min-width: var(--app-content-width, 100%);
+
+	&__grid {
+		width: var(--app-content-width, 100%);
+		// leave room for the navigation toggle that floats over the top left corner of the content
+		padding-inline-start: var(--default-clickable-area, 44px);
+	}
 }
 
 .main-view-view--cards {
diff --git a/src/store/store.js b/src/store/store.js
index e7c7a416cf..16a3dfea1b 100644
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -250,6 +250,19 @@ export const useTablesStore = defineStore('store', {
 			await widgetTypesRequest
 		},
 
+		async insertStandaloneView({ data }) {
+			let res = null
+			try {
+				res = (await axios.post(generateOcsUrl('/apps/tables/api/2/views'), data)).data.ocs.data
+			} catch (e) {
+				displayError(e, t('tables', 'Could not insert view.'))
+				return false
+			}
+
+			this.setViews([...this.views, res])
+			return res
+		},
+
 		async updateView({ id, data }) {
 			let res = null