diff --git a/appinfo/routes.php b/appinfo/routes.php
index 6646968513..a51d67e3b2 100644
--- a/appinfo/routes.php
+++ b/appinfo/routes.php
@@ -51,6 +51,7 @@
 			],
 		],
 		['name' => 'settings#generateIframeToken', 'url' => 'settings/generateToken/{type}', 'verb' => 'GET'],
+		['name' => 'settings#setOverviewGridView', 'url' => 'settings/overview/grid_view', 'verb' => 'PUT'],
 
 		// Direct Editing: Webview
 		['name' => 'directView#show', 'url' => '/direct/{token}', 'verb' => 'GET'],
diff --git a/lib/Controller/OverviewController.php b/lib/Controller/OverviewController.php
index a6d1e14708..3da2eac761 100644
--- a/lib/Controller/OverviewController.php
+++ b/lib/Controller/OverviewController.php
@@ -15,6 +15,7 @@
 use OCP\AppFramework\Http\TemplateResponse;
 use OCP\AppFramework\Services\IInitialState;
 use OCP\EventDispatcher\IEventDispatcher;
+use OCP\IConfig;
 use OCP\IPreview;
 use OCP\IRequest;
 use OCP\Util;
@@ -27,6 +28,8 @@ public function __construct(
 		private IEventDispatcher $eventDispatcher,
 		private IInitialState $initialState,
 		private IPreview $preview,
+		private IConfig $config,
+		private ?string $userId,
 	) {
 		parent::__construct($appName, $request);
 	}
@@ -40,6 +43,10 @@ public function index(): TemplateResponse {
 		Util::addScript('richdocuments', 'richdocuments-overview');
 
 		$this->initialState->provideInitialState('previewEnabled', $this->preview->isMimeSupported('application/vnd.oasis.opendocument.text'));
+		$this->initialState->provideInitialState('overview_config', [
+			'overview_grid_view' => $this->userId !== null
+				&& $this->config->getUserValue($this->userId, 'richdocuments', 'overview_grid_view', '0') === '1',
+		]);
 
 		// Viewer is pre-installed in production but may not be available in other environments
 		if (class_exists(LoadViewer::class)) {
diff --git a/lib/Controller/SettingsController.php b/lib/Controller/SettingsController.php
index d633f192ae..e822d33c54 100644
--- a/lib/Controller/SettingsController.php
+++ b/lib/Controller/SettingsController.php
@@ -320,6 +320,15 @@ public function setPersonalSettings($templateFolder,
 		return new JSONResponse($response);
 	}
 
+	#[NoAdminRequired]
+	public function setOverviewGridView(bool $value): JSONResponse {
+		if ($this->userId === null) {
+			return new JSONResponse([], Http::STATUS_UNAUTHORIZED);
+		}
+		$this->config->setUserValue($this->userId, 'richdocuments', 'overview_grid_view', $value ? '1' : '0');
+		return new JSONResponse(['message' => 'ok']);
+	}
+
 	/**
 	 * @NoAdminRequired
 	 * @PublicPage
diff --git a/src/components/FileCard.vue b/src/components/FileCard.vue
index 32ee2a608f..86a856d9d6 100644
--- a/src/components/FileCard.vue
+++ b/src/components/FileCard.vue
@@ -4,7 +4,7 @@
 -->
 
 <template>
-	<div class="file-card" @click="$emit('click', $event)">
+	<button type="button" class="file-card" @click="$emit('click', $event)">
 		<div class="file-card__preview">
 			<slot name="preview" />
 		</div>
@@ -16,7 +16,7 @@
 				<slot name="subname" />
 			</div>
 		</div>
-	</div>
+	</button>
 </template>
 
 <script>
@@ -26,14 +26,6 @@ export default {
 </script>
 
 <style scoped>
-/* Nextcloud's global reset sets cursor:default on div, img and span explicitly,
-   which prevents inheritance. Override for all slotted content. */
-.file-card ::v-deep div,
-.file-card ::v-deep img,
-.file-card ::v-deep span {
-	cursor: pointer;
-}
-
 .file-card {
 	display: flex;
 	flex-direction: column;
@@ -44,7 +36,14 @@ export default {
 	padding: calc(var(--default-grid-baseline) * 3);
 	cursor: pointer;
 	box-sizing: border-box;
+	background: none;
+	text-align: left;
 	transition: box-shadow 0.2s ease, transform 0.2s ease;
+
+	&:focus-visible {
+		outline: 2px solid var(--color-primary-element);
+		outline-offset: 2px;
+	}
 }
 
 .file-card:hover {
diff --git a/src/components/TemplateSection.vue b/src/components/TemplateSection.vue
index fbb5e389fb..5a784f318a 100644
--- a/src/components/TemplateSection.vue
+++ b/src/components/TemplateSection.vue
@@ -3,17 +3,16 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<section class="template-section">
-		<h3 class="template-section__heading">
+	<section class="template-section" aria-labelledby="template-section-heading">
+		<h2 id="template-section-heading" class="template-section__heading">
 			{{ t('richdocuments', 'Create new') }}
-		</h3>
+		</h2>
 
 		<ul class="template-section__list">
 			<!-- Blank file card -->
 			<li class="template-section__item">
 				<button class="template-card" @click="$emit('select', creator, null)">
-					<span class="template-card__preview template-card__preview--blank"
-						:style="previewStyle">
+					<span class="template-card__preview template-card__preview--blank">
 						<!-- eslint-disable-next-line vue/no-v-html -->
 						<span class="template-card__icon" v-html="creator.iconSvgInline" />
 					</span>
@@ -26,12 +25,14 @@
 				:key="template.fileid"
 				class="template-section__item">
 				<button class="template-card" @click="$emit('select', creator, template)">
-					<span class="template-card__preview" :style="previewStyle">
-						<img v-if="template.hasPreview"
-							:src="template.previewUrl"
+					<span class="template-card__preview">
+						<img v-if="template.hasPreview && !failedPreviews[template.fileid]"
+							:src="templatePreviewUrl(template)"
 							:alt="nameWithoutExt(template.basename)"
 							loading="lazy"
-							class="template-card__image">
+							class="template-card__image"
+							@error="failedPreviews = { ...failedPreviews, [template.fileid]: true }">
+						<!-- eslint-disable-next-line vue/no-v-html -->
 						<span v-else class="template-card__icon" v-html="creator.iconSvgInline" />
 					</span>
 					<span class="template-card__name">{{ nameWithoutExt(template.basename) }}</span>
@@ -42,6 +43,8 @@
 </template>
 
 <script>
+import { generateUrl } from '@nextcloud/router'
+
 export default {
 	name: 'TemplateSection',
 
@@ -54,14 +57,10 @@ export default {
 
 	emits: ['select'],
 
-	computed: {
-		previewStyle() {
-			if (!this.creator.ratio) {
-				return {}
-			}
-			// ratio is width/height; convert to padding-bottom trick
-			return { paddingBottom: `${(1 / this.creator.ratio) * 100}%` }
-		},
+	data() {
+		return {
+			failedPreviews: {},
+		}
 	},
 
 	methods: {
@@ -69,6 +68,13 @@ export default {
 			const dot = basename.lastIndexOf('.')
 			return dot > 0 ? basename.slice(0, dot) : basename
 		},
+
+		templatePreviewUrl(template) {
+			if (template.previewUrl) {
+				return template.previewUrl
+			}
+			return generateUrl('/core/preview?fileId={fileid}&x=256&y=256&a=1', { fileid: template.fileid })
+		},
 	},
 }
 </script>
@@ -76,12 +82,16 @@ export default {
 <style scoped>
 .template-section {
 	padding: calc(var(--default-grid-baseline) * 4);
+	margin: calc(var(--default-grid-baseline) * 4) calc(var(--default-grid-baseline) * 4) 0;
+	background-color: var(--color-background-hover);
+	border-radius: var(--border-radius-large);
 }
 
 .template-section__heading {
 	margin: 0 0 calc(var(--default-grid-baseline) * 2);
 	font-size: var(--default-font-size);
 	font-weight: 600;
+	color: var(--color-text-maxcontrast);
 }
 
 .template-section__list {
@@ -118,18 +128,15 @@ export default {
 .template-card__preview {
 	position: relative;
 	width: 100%;
+	aspect-ratio: 2 / 3;
 	overflow: hidden;
 	border: 2px solid var(--color-border);
 	border-radius: var(--border-radius-large);
 	background-color: var(--color-main-background);
 	box-sizing: border-box;
-}
-
-.template-card__preview--blank {
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	min-height: 120px;
 }
 
 .template-card__image {
diff --git a/src/services/config.js b/src/services/config.js
new file mode 100644
index 0000000000..b9b1625f2f
--- /dev/null
+++ b/src/services/config.js
@@ -0,0 +1,11 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import axios from '@nextcloud/axios'
+import { generateUrl } from '@nextcloud/router'
+
+export async function setOverviewGridView(value) {
+	await axios.put(generateUrl('/apps/richdocuments/settings/overview/grid_view'), { value })
+}
diff --git a/src/views/OfficeOverview.vue b/src/views/OfficeOverview.vue
index c0c7e15515..c41dea6819 100644
--- a/src/views/OfficeOverview.vue
+++ b/src/views/OfficeOverview.vue
@@ -51,29 +51,62 @@
 						</template>
 					</NcEmptyContent>
 
-					<div v-else class="office-overview__grid">
-						<FileCard v-for="file in files"
-							:key="file.id"
-							@click="openFile(file)">
-							<template #preview>
-								<img v-if="previewEnabled"
-									:src="getPreviewUrl(file)"
-									:alt="file.basename"
-									loading="lazy"
-									class="overview-file-preview">
-								<span v-else
-									class="overview-file-icon" />
-							</template>
-
-							<template #name>
-								{{ file.basename }}
-							</template>
-
-							<template #subname>
-								<NcDateTime :timestamp="file.mtime" />
-							</template>
-						</FileCard>
-					</div>
+					<section v-else class="office-overview__files" aria-labelledby="files-section-heading">
+						<div class="office-overview__files-header">
+							<h2 id="files-section-heading" class="office-overview__files-title">
+								{{ t('richdocuments', 'Recent {category}', { category: categoryName(activeCreator) }) }}
+							</h2>
+							<NcButton :aria-label="viewMode === 'list' ? t('richdocuments', 'Switch to grid view') : t('richdocuments', 'Switch to list view')"
+								variant="tertiary"
+								@click="toggleViewMode">
+								<template #icon>
+									<ViewGrid v-if="viewMode === 'list'" :size="20" />
+									<ViewList v-else :size="20" />
+								</template>
+							</NcButton>
+						</div>
+
+						<div v-if="viewMode === 'grid'" class="office-overview__grid">
+							<FileCard v-for="file in files"
+								:key="file.id"
+								@click="openFile(file)">
+								<template #preview>
+									<img v-if="previewEnabled"
+										:src="getPreviewUrl(file)"
+										:alt="file.basename"
+										loading="lazy"
+										class="overview-file-preview">
+									<span v-else
+										class="overview-file-icon" />
+								</template>
+
+								<template #name>
+									{{ file.basename }}
+								</template>
+
+								<template #subname>
+									<NcDateTime :timestamp="file.mtime" />
+								</template>
+							</FileCard>
+						</div>
+
+						<div v-else class="office-overview__list">
+							<NcListItem v-for="file in files"
+								:key="file.id"
+								:name="file.basename"
+								:active="false"
+								@click="openFile(file)">
+								<template #indicator>
+									<Star v-if="file.attributes.favorite === 1"
+										:size="16"
+										class="office-overview__favourite-icon" />
+								</template>
+								<template #subname>
+									<NcDateTime :timestamp="file.mtime" />
+								</template>
+							</NcListItem>
+						</div>
+					</section>
 				</template>
 
 				<!-- Create from template dialog -->
@@ -105,12 +138,16 @@
 import { sortNodes } from '@nextcloud/files'
 import { loadState } from '@nextcloud/initial-state'
 import { generateUrl } from '@nextcloud/router'
-import { NcAppContent, NcAppNavigation, NcAppNavigationItem, NcButton, NcContent, NcDateTime, NcDialog, NcEmptyContent, NcLoadingIcon, NcTextField } from '@nextcloud/vue'
+import { NcAppContent, NcAppNavigation, NcAppNavigationItem, NcButton, NcContent, NcDateTime, NcDialog, NcEmptyContent, NcListItem, NcLoadingIcon, NcTextField } from '@nextcloud/vue'
 import FileDocumentOutline from 'vue-material-design-icons/FileDocumentOutline.vue'
+import Star from 'vue-material-design-icons/Star.vue'
+import ViewGrid from 'vue-material-design-icons/ViewGrid.vue'
+import ViewList from 'vue-material-design-icons/ViewList.vue'
 import FileCard from '../components/FileCard.vue'
 import TemplateSection from '../components/TemplateSection.vue'
 import { getAllOfficeFiles, filterByMimes, invalidateOfficeFilesCache } from '../services/officeFiles.js'
 import { getTemplates, createFromTemplate } from '../services/templates.js'
+import { setOverviewGridView } from '../services/config.js'
 
 export default {
 	name: 'OfficeOverview',
@@ -126,9 +163,13 @@ export default {
 		NcDateTime,
 		NcDialog,
 		NcEmptyContent,
+		NcListItem,
 		NcLoadingIcon,
 		NcTextField,
+		Star,
 		TemplateSection,
+		ViewGrid,
+		ViewList,
 	},
 
 	data() {
@@ -139,6 +180,7 @@ export default {
 			loading: false,
 			error: null,
 			previewEnabled: loadState('richdocuments', 'previewEnabled', false),
+			viewMode: loadState('richdocuments', 'overview_config', {}).overview_grid_view ? 'grid' : 'list',
 			searchQuery: '',
 			showCreateDialog: false,
 			newFileName: '',
@@ -187,11 +229,19 @@ export default {
 			this.activeCreator = creator
 		},
 
+		toggleViewMode() {
+			const mode = this.viewMode === 'list' ? 'grid' : 'list'
+			this.viewMode = mode
+			setOverviewGridView(mode === 'grid').catch(() => {})
+		},
+
 		getPreviewUrl(file) {
-			return generateUrl('/core/preview?fileId={fileid}&x={x}&y={y}', {
+			const etag = (file.attributes?.etag || '').slice(0, 6)
+			return generateUrl('/core/preview?fileId={fileid}&x={x}&y={y}&v={v}&a=1&mimeFallback=true', {
 				fileid: file.fileid,
 				x: 300,
 				y: 300,
+				v: etag,
 			})
 		},
 
@@ -293,9 +343,36 @@ export default {
 }
 
 .office-overview__search {
+	display: flex;
+	justify-content: center;
 	padding: calc(var(--default-grid-baseline) * 4) calc(var(--default-grid-baseline) * 4) 0;
-	max-width: 400px;
-	margin: 0 auto;
+
+	> * {
+		width: 100%;
+		max-width: 400px;
+	}
+}
+
+.office-overview__files-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: calc(var(--default-grid-baseline) * 4) calc(var(--default-grid-baseline) * 4) calc(var(--default-grid-baseline) * 2);
+}
+
+.office-overview__files-title {
+	margin: 0;
+	font-size: var(--default-font-size);
+	font-weight: 600;
+	color: var(--color-text-maxcontrast);
+}
+
+.office-overview__list {
+	padding: 0 calc(var(--default-grid-baseline) * 2);
+}
+
+.office-overview__favourite-icon {
+	color: var(--color-warning);
 }
 
 .office-overview__create-form {