diff --git a/src/Components/LeftSidebar/LeftSidebar.vue b/src/Components/LeftSidebar/LeftSidebar.vue
index c3915253c..7e92e8eb7 100644
--- a/src/Components/LeftSidebar/LeftSidebar.vue
+++ b/src/Components/LeftSidebar/LeftSidebar.vue
@@ -39,6 +39,14 @@
 					<FolderIcon :size="20" />
 				</template>
 			</NcAppNavigationItem>
+			<NcAppNavigationItem id="fileslist"
+				:to="{ name: 'fileslist' }"
+				:name="t('libresign', 'New files')"
+				@click="unselectFile">
+				<template #icon>
+					<FolderIcon :size="20" />
+				</template>
+			</NcAppNavigationItem>
 			<NcAppNavigationItem id="validation"
 				:to="{name: 'validation'}"
 				:name="t('libresign', 'Validate')"
diff --git a/src/store/userconfig.js b/src/store/userconfig.js
new file mode 100644
index 000000000..5df6a14ba
--- /dev/null
+++ b/src/store/userconfig.js
@@ -0,0 +1,18 @@
+/**
+ * SPDX-FileCopyrightText: 2020-2024 LibreCode coop and contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { defineStore } from 'pinia'
+import Vue from 'vue'
+
+export const useUserConfigStore = defineStore('userconfig', {
+	state: () => ({
+		grid_view: true,
+	}),
+	actions: {
+		async update(key, value) {
+			Vue.set(this, key, value)
+		},
+	},
+})
diff --git a/src/views/FilesList/FileEntry/FileEntry.vue b/src/views/FilesList/FileEntry/FileEntry.vue
new file mode 100644
index 000000000..a6625a20b
--- /dev/null
+++ b/src/views/FilesList/FileEntry/FileEntry.vue
@@ -0,0 +1,15 @@
+<!--
+  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<tr />
+</template>
+
+<script>
+
+export default {
+	name: 'FileEntry',
+}
+</script>
diff --git a/src/views/FilesList/FileEntry/FileEntryGrid.vue b/src/views/FilesList/FileEntry/FileEntryGrid.vue
new file mode 100644
index 000000000..f2f8167ce
--- /dev/null
+++ b/src/views/FilesList/FileEntry/FileEntryGrid.vue
@@ -0,0 +1,28 @@
+<!--
+  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<tr>
+		<td class="files-list__row-name">
+			<FileEntryPreview :source="source" />
+		</td>
+	</tr>
+</template>
+
+<script>
+import FileEntryPreview from './FileEntryPreview.vue'
+export default {
+	name: 'FileEntryGrid',
+	components: {
+		FileEntryPreview,
+	},
+	props: {
+		source: {
+			type: Object,
+			required: true,
+		},
+	},
+}
+</script>
diff --git a/src/views/FilesList/FileEntry/FileEntryPreview.vue b/src/views/FilesList/FileEntry/FileEntryPreview.vue
new file mode 100644
index 000000000..5ea56f772
--- /dev/null
+++ b/src/views/FilesList/FileEntry/FileEntryPreview.vue
@@ -0,0 +1,86 @@
+<template>
+	<span class="files-list__row-icon">
+		<!-- Decorative images, should not be aria documented -->
+		<span v-if="previewUrl" class="files-list__row-icon-preview-container">
+			<img v-if="backgroundFailed !== true"
+				ref="previewImg"
+				alt=""
+				class="files-list__row-icon-preview"
+				:class="{'files-list__row-icon-preview--loaded': backgroundFailed === false}"
+				loading="lazy"
+				:src="previewUrl"
+				@error="backgroundFailed = true"
+				@load="backgroundFailed = false">
+		</span>
+
+		<FileIcon v-else v-once />
+
+		<!-- Favorite icon -->
+		<span v-if="isFavorite" class="files-list__row-icon-favorite">
+			<FavoriteIcon v-once />
+		</span>
+	</span>
+</template>
+
+<script>
+import FileIcon from 'vue-material-design-icons/File.vue'
+
+import { generateUrl, generateOcsUrl } from '@nextcloud/router'
+
+import { useUserConfigStore } from '../../../store/userconfig.js'
+
+export default {
+	name: 'FileEntryPreview',
+
+	components: {
+		FileIcon,
+	},
+	props: {
+		source: {
+			type: Object,
+			required: true,
+		},
+	},
+	setup() {
+		const userConfigStore = useUserConfigStore()
+		return { userConfigStore }
+	},
+	data() {
+		return {
+			backgroundFailed: false,
+		}
+	},
+	computed: {
+		isFavorite() {
+			return this.source?.attributes?.favorite === 1
+		},
+		previewUrl() {
+			if (this.backgroundFailed === true) {
+				return null
+			}
+
+			let previewUrl = ''
+			if (this.source?.uuid?.length > 0) {
+				previewUrl = generateOcsUrl('/apps/libresign/api/v1/file/thumbnail/{nodeId}', {
+					nodeId: this.source.nodeId,
+				})
+			} else {
+				previewUrl = window.location.origin + generateUrl('/core/preview?fileId={fileid}', {
+					fileid: this.source.nodeId,
+				})
+			}
+
+			const url = new URL(previewUrl)
+
+			// Request tiny previews
+			url.searchParams.set('x', this.userConfigStore.grid_view ? '128' : '32')
+			url.searchParams.set('y', this.userConfigStore.grid_view ? '128' : '32')
+			url.searchParams.set('mimeFallback', 'true')
+
+			// Handle cropping
+			url.searchParams.set('a', this.cropPreviews === true ? '0' : '1')
+			return url
+		},
+	},
+}
+</script>
diff --git a/src/views/FilesList/FileListFilter/FileListFilter.vue b/src/views/FilesList/FileListFilter/FileListFilter.vue
index 776461d3e..d235074b5 100644
--- a/src/views/FilesList/FileListFilter/FileListFilter.vue
+++ b/src/views/FilesList/FileListFilter/FileListFilter.vue
@@ -19,8 +19,8 @@
 </template>
 
 <script>
-import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator.js'
 
 export default {
diff --git a/src/views/FilesList/FileListFilter/FileListFilterModified.vue b/src/views/FilesList/FileListFilter/FileListFilterModified.vue
index 7e355d864..863419908 100644
--- a/src/views/FilesList/FileListFilter/FileListFilterModified.vue
+++ b/src/views/FilesList/FileListFilter/FileListFilterModified.vue
@@ -18,10 +18,13 @@
 
 <script>
 import { mdiCalendarRange } from '@mdi/js'
+import calendarSvg from '@mdi/svg/svg/calendar.svg?raw'
+
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
-import calendarSvg from '@mdi/svg/svg/calendar.svg?raw'
+
 import FileListFilter from './FileListFilter.vue'
+
 import { useFiltersStore } from '../../../store/filters.js'
 
 const startOfToday = () => (new Date()).setHours(0, 0, 0, 0)
diff --git a/src/views/FilesList/FileListFilter/FileListFilterStatus.vue b/src/views/FilesList/FileListFilter/FileListFilterStatus.vue
index 538785574..d68fa5fda 100644
--- a/src/views/FilesList/FileListFilter/FileListFilterStatus.vue
+++ b/src/views/FilesList/FileListFilter/FileListFilterStatus.vue
@@ -21,15 +21,17 @@
 
 <script>
 import { mdiListStatus } from '@mdi/js'
-
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
-import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
+import svgDelete from '@mdi/svg/svg/delete.svg?raw'
 import svgFile from '@mdi/svg/svg/file.svg?raw'
-import svgSignature from '@mdi/svg/svg/signature.svg?raw'
 import svgFractionOneHalf from '@mdi/svg/svg/fraction-one-half.svg?raw'
 import svgSignatureFreehand from '@mdi/svg/svg/signature-freehand.svg?raw'
-import svgDelete from '@mdi/svg/svg/delete.svg?raw'
+import svgSignature from '@mdi/svg/svg/signature.svg?raw'
+
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
+
 import FileListFilter from './FileListFilter.vue'
+
 import { useFiltersStore } from '../../../store/filters.js'
 
 const colorize = (svg, color) => {
diff --git a/src/views/FilesList/FileListFilters.vue b/src/views/FilesList/FileListFilters.vue
index 48d174122..1f24a1420 100644
--- a/src/views/FilesList/FileListFilters.vue
+++ b/src/views/FilesList/FileListFilters.vue
@@ -25,10 +25,12 @@
 </template>
 
 <script>
-import NcChip from '@nextcloud/vue/dist/Components/NcChip.js'
 import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
+import NcChip from '@nextcloud/vue/dist/Components/NcChip.js'
+
 import FileListFilterModified from './FileListFilter/FileListFilterModified.vue'
 import FileListFilterStatus from './FileListFilter/FileListFilterStatus.vue'
+
 import { useFiltersStore } from '../../store/filters.js'
 
 export default {
diff --git a/src/views/FilesList/FilesList.vue b/src/views/FilesList/FilesList.vue
index b654ef6a2..9dc04f48f 100644
--- a/src/views/FilesList/FilesList.vue
+++ b/src/views/FilesList/FilesList.vue
@@ -51,7 +51,7 @@
 				type="tertiary"
 				@click="toggleGridView">
 				<template #icon>
-					<ListViewIcon v-if="userConfig.grid_view" />
+					<ListViewIcon v-if="userConfigStore.grid_view" />
 					<ViewGridIcon v-else />
 				</template>
 			</NcButton>
@@ -73,25 +73,30 @@
 </template>
 
 <script>
-import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
-import PlusIcon from 'vue-material-design-icons/Plus.vue'
 
 import HomeSvg from '@mdi/svg/svg/home.svg?raw'
-import ListViewIcon from 'vue-material-design-icons/FormatListBulletedSquare.vue'
-import ViewGridIcon from 'vue-material-design-icons/ViewGrid.vue'
-import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
+
 import FolderIcon from 'vue-material-design-icons/Folder.vue'
-import UploadIcon from 'vue-material-design-icons/Upload.vue'
+import ListViewIcon from 'vue-material-design-icons/FormatListBulletedSquare.vue'
 import LinkIcon from 'vue-material-design-icons/Link.vue'
+import PlusIcon from 'vue-material-design-icons/Plus.vue'
+import UploadIcon from 'vue-material-design-icons/Upload.vue'
+import ViewGridIcon from 'vue-material-design-icons/ViewGrid.vue'
+
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
+import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
 import NcBreadcrumb from '@nextcloud/vue/dist/Components/NcBreadcrumb.js'
 import NcBreadcrumbs from '@nextcloud/vue/dist/Components/NcBreadcrumbs.js'
-import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
 import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
+import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
+
 import FilesListVirtual from './FilesListVirtual.vue'
-import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
+
 import { useFilesStore } from '../../store/files.js'
+import { useUserConfigStore } from '../../store/userconfig.js'
 
 export default {
 	name: 'FilesList',
@@ -115,15 +120,16 @@ export default {
 	},
 	setup() {
 		const filesStore = useFilesStore()
-		return { filesStore }
+		const userConfigStore = useUserConfigStore()
+		return {
+			filesStore,
+			userConfigStore,
+		}
 	},
 	data() {
 		return {
 			isUploading: false,
 			loading: false,
-			userConfig: {
-				grid_view: false,
-			},
 			dirContentsFiltered: [],
 		}
 	},
@@ -132,7 +138,7 @@ export default {
 			return HomeSvg
 		},
 		gridViewButtonLabel() {
-			return this.userConfig.grid_view
+			return this.userConfigStore.grid_view
 				? t('libresign', 'Switch to list view')
 				: t('libresign', 'Switch to grid view')
 		},
@@ -158,9 +164,7 @@ export default {
 			console.log('Need to implement refresh')
 		},
 		toggleGridView() {
-			this.userConfig.grid_view = !this.userConfig.grid_view
-			console.log('Need to implement toggle')
-			// this.userConfigStore.update('grid_view', !this.userConfig.grid_view)
+			this.userConfigStore.update('grid_view', !this.userConfigStore.grid_view)
 		},
 		filterDirContent() {
 			const nodes = this.filesStore.files
diff --git a/src/views/FilesList/FilesListTableHeader.vue b/src/views/FilesList/FilesListTableHeader.vue
new file mode 100644
index 000000000..99ab6a0cf
--- /dev/null
+++ b/src/views/FilesList/FilesListTableHeader.vue
@@ -0,0 +1,105 @@
+<!--
+  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<tr class="files-list__row-head">
+		<th class="files-list__column files-list__row-checkbox">
+			<NcCheckboxRadioSwitch />
+		</th>
+
+		<!-- Columns display -->
+
+		<!-- Link to file -->
+		<th class="files-list__column files-list__row-name files-list__column--sortable">
+			<!-- Icon or preview -->
+			<span class="files-list__row-icon" />
+
+			<!-- Name -->
+			<FilesListTableHeaderButton :name="t('files', 'Name')" mode="basename" />
+		</th>
+
+		<!-- Actions -->
+		<th class="files-list__row-actions" />
+
+		<!-- Custom views columns -->
+		<th v-for="column in columns"
+			:key="column.id"
+			:class="classForColumn(column)"
+			:aria-sort="ariaSortForMode(column.id)">
+			<FilesListTableHeaderButton v-if="!!column.sort" :name="column.title" :mode="column.id" />
+			<span v-else>
+				{{ column.title }}
+			</span>
+		</th>
+	</tr>
+</template>
+
+<script>
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
+
+import FilesListTableHeaderButton from './FilesListTableHeaderButton.vue'
+
+export default {
+	name: 'FilesListTableHeader',
+
+	components: {
+		FilesListTableHeaderButton,
+		NcCheckboxRadioSwitch,
+	},
+
+	props: {
+		nodes: {
+			type: Array,
+			required: true,
+		},
+	},
+	data() {
+		return {
+			isAscSorting: false,
+			sortingMode: 'name',
+			columns: [
+				{
+					title: t('libresign', 'Status'),
+					id: 'status',
+					sort: true,
+				},
+				{
+					title: t('libresign', 'Modified'),
+					id: 'modified',
+					sort: true,
+				},
+			],
+		}
+	},
+	methods: {
+		ariaSortForMode(mode) {
+			if (this.sortingMode === mode) {
+				return this.isAscSorting ? 'ascending' : 'descending'
+			}
+			return null
+		},
+		classForColumn(column) {
+			return {
+				'files-list__column': true,
+				'files-list__column--sortable': !!column.sort,
+				'files-list__row-column-custom': true,
+				[`files-list__row-${column.id}`]: true,
+			}
+		},
+	},
+}
+</script>
+
+<style scoped lang="scss">
+.files-list__column {
+	user-select: none;
+	// Make sure the cell colors don't apply to column headers
+	color: var(--color-text-maxcontrast) !important;
+
+	&--sortable {
+		cursor: pointer;
+	}
+}
+
+</style>
diff --git a/src/views/FilesList/FilesListTableHeaderButton.vue b/src/views/FilesList/FilesListTableHeaderButton.vue
new file mode 100644
index 000000000..e6eff4d9b
--- /dev/null
+++ b/src/views/FilesList/FilesListTableHeaderButton.vue
@@ -0,0 +1,74 @@
+<!--
+  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<NcButton :alignment="mode === 'size' ? 'end' : 'start-reverse'"
+		type="tertiary">
+		<template #icon>
+			<MenuUp v-if="true" class="files-list__column-sort-button-icon" />
+			<MenuDown v-else class="files-list__column-sort-button-icon" />
+		</template>
+		<span class="files-list__column-sort-button-text">{{ name }}</span>
+	</NcButton>
+</template>
+
+<script>
+
+import MenuDown from 'vue-material-design-icons/MenuDown.vue'
+import MenuUp from 'vue-material-design-icons/MenuUp.vue'
+
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+
+export default {
+	name: 'FilesListTableHeaderButton',
+
+	components: {
+		MenuDown,
+		MenuUp,
+		NcButton,
+	},
+
+	props: {
+		name: {
+			type: String,
+			required: true,
+		},
+		mode: {
+			type: String,
+			required: true,
+		},
+	},
+}
+</script>
+
+<style scoped lang="scss">
+.files-list__column-sort-button {
+	// Compensate for cells margin
+	margin: 0 calc(var(--button-padding, var(--cell-margin)) * -1);
+	min-width: calc(100% - 3 * var(--cell-margin))!important;
+
+	&-text {
+		color: var(--color-text-maxcontrast);
+		font-weight: normal;
+	}
+
+	&-icon {
+		color: var(--color-text-maxcontrast);
+		opacity: 0;
+		transition: opacity var(--animation-quick);
+		inset-inline-start: -10px;
+	}
+
+	&--size &-icon {
+		inset-inline-start: 10px;
+	}
+
+	&--active &-icon,
+	&:hover &-icon,
+	&:focus &-icon,
+	&:active &-icon {
+		opacity: 1;
+	}
+}
+</style>
diff --git a/src/views/FilesList/FilesListVirtual.vue b/src/views/FilesList/FilesListVirtual.vue
index 2a0e385d6..50e175fb8 100644
--- a/src/views/FilesList/FilesListVirtual.vue
+++ b/src/views/FilesList/FilesListVirtual.vue
@@ -1,19 +1,34 @@
 <template>
-	<VirtualList>
+	<VirtualList :data-component="userConfigStore.grid_view ? FileEntryGrid : FileEntry">
 		<template #filters>
 			<FileListFilters />
 		</template>
+		<template #header>
+			<!-- Table header and sort buttons -->
+			<FilesListTableHeader ref="thead"
+				:nodes="nodes" />
+		</template>
 	</VirtualList>
 </template>
 
 <script>
-import VirtualList from './VirtualList.vue'
+import FileEntry from './FileEntry/FileEntry.vue'
+import FileEntryGrid from './FileEntry/FileEntryGrid.vue'
 import FileListFilters from './FileListFilters.vue'
+import FilesListTableHeader from './FilesListTableHeader.vue'
+import VirtualList from './VirtualList.vue'
+
+import { useFilesStore } from '../../store/files.js'
+import { useUserConfigStore } from '../../store/userconfig.js'
+
 export default {
 	name: 'FilesListVirtual',
 	components: {
 		VirtualList,
 		FileListFilters,
+		FilesListTableHeader,
+		FileEntry,
+		FileEntryGrid,
 	},
 	props: {
 		nodes: {
@@ -21,6 +36,20 @@ export default {
 			required: true,
 		},
 	},
+	setup() {
+		const filesStore = useFilesStore()
+		const userConfigStore = useUserConfigStore()
+		return {
+			filesStore,
+			userConfigStore,
+		}
+	},
+	data() {
+		return {
+			FileEntry,
+			FileEntryGrid,
+		}
+	},
 }
 </script>
 
@@ -40,6 +69,35 @@ export default {
 	height: 100%;
 	will-change: scroll-position;
 	& :deep() {
+		// Table head, body and footer
+		tbody {
+			will-change: padding;
+			contain: layout paint style;
+			display: flex;
+			flex-direction: column;
+			width: 100%;
+			// Necessary for virtual scrolling absolute
+			position: relative;
+
+			/* Hover effect on tbody lines only */
+			tr {
+				contain: strict;
+				&:hover,
+				&:focus {
+					background-color: var(--color-background-dark);
+				}
+			}
+		}
+
+		.files-list__table {
+			display: block;
+
+			&.files-list__table--with-thead-overlay {
+				// Hide the table header below the overlay
+				margin-block-start: calc(-1 * var(--row-height));
+			}
+		}
+
 		.files-list__filters {
 			// Pinned on top when scrolling above table header
 			position: sticky;
@@ -52,6 +110,331 @@ export default {
 			height: var(--fixed-block-start-position);
 			width: 100%;
 		}
+
+		.files-list__thead,
+		.files-list__tfoot {
+			display: flex;
+			flex-direction: column;
+			width: 100%;
+			background-color: var(--color-main-background);
+
+		}
+
+		// Table header
+		.files-list__thead {
+			// Pinned on top when scrolling
+			position: sticky;
+			z-index: 10;
+			top: var(--fixed-block-start-position);
+		}
+
+		tr {
+			position: relative;
+			display: flex;
+			align-items: center;
+			width: 100%;
+			user-select: none;
+			border-block-end: 1px solid var(--color-border);
+			box-sizing: border-box;
+			user-select: none;
+			height: var(--row-height);
+		}
+
+		td, th {
+			display: flex;
+			align-items: center;
+			flex: 0 0 auto;
+			justify-content: start;
+			width: var(--row-height);
+			height: var(--row-height);
+			margin: 0;
+			padding: 0;
+			color: var(--color-text-maxcontrast);
+			border: none;
+
+			// Columns should try to add any text
+			// node wrapped in a span. That should help
+			// with the ellipsis on overflow.
+			span {
+				overflow: hidden;
+				white-space: nowrap;
+				text-overflow: ellipsis;
+			}
+		}
+
+		.files-list__row-checkbox {
+			justify-content: center;
+
+			.checkbox-radio-switch {
+				display: flex;
+				justify-content: center;
+
+				--icon-size: var(--checkbox-size);
+
+				label.checkbox-radio-switch__label {
+					width: var(--clickable-area);
+					height: var(--clickable-area);
+					margin: 0;
+					padding: calc((var(--clickable-area) - var(--checkbox-size)) / 2);
+				}
+
+				.checkbox-radio-switch__icon {
+					margin: 0 !important;
+				}
+			}
+		}
+
+		.files-list__row {
+			&:hover, &:focus, &:active, &--active, &--dragover {
+				// WCAG AA compliant
+				background-color: var(--color-background-hover);
+				// text-maxcontrast have been designed to pass WCAG AA over
+				// a white background, we need to adjust then.
+				--color-text-maxcontrast: var(--color-main-text);
+				> * {
+					--color-border: var(--color-border-dark);
+				}
+
+				// Hover state of the row should also change the favorite markers background
+				.favorite-marker-icon svg path {
+					stroke: var(--color-background-hover);
+				}
+			}
+
+			&--dragover * {
+				// Prevent dropping on row children
+				pointer-events: none;
+			}
+		}
+
+		// Entry preview or mime icon
+		.files-list__row-icon {
+			position: relative;
+			display: flex;
+			overflow: visible;
+			align-items: center;
+			// No shrinking or growing allowed
+			flex: 0 0 var(--icon-preview-size);
+			justify-content: center;
+			width: var(--icon-preview-size);
+			height: 100%;
+			// Show same padding as the checkbox right padding for visual balance
+			margin-inline-end: var(--checkbox-padding);
+			color: var(--color-primary-element);
+
+			// Icon is also clickable
+			* {
+				cursor: pointer;
+			}
+
+			& > span {
+				justify-content: flex-start;
+
+				&:not(.files-list__row-icon-favorite) svg {
+					width: var(--icon-preview-size);
+					height: var(--icon-preview-size);
+				}
+
+				// Slightly increase the size of the folder icon
+				&.folder-icon,
+				&.folder-open-icon {
+					margin: -3px;
+					svg {
+						width: calc(var(--icon-preview-size) + 6px);
+						height: calc(var(--icon-preview-size) + 6px);
+					}
+				}
+			}
+
+			&-preview-container {
+				position: relative; // Needed for the blurshash to be positioned correctly
+				overflow: hidden;
+				width: var(--icon-preview-size);
+				height: var(--icon-preview-size);
+				border-radius: var(--border-radius);
+			}
+
+			&-blurhash {
+				position: absolute;
+				inset-block-start: 0;
+				inset-inline-start: 0;
+				height: 100%;
+				width: 100%;
+				object-fit: cover;
+			}
+
+			&-preview {
+				// Center and contain the preview
+				object-fit: contain;
+				object-position: center;
+
+				height: 100%;
+				width: 100%;
+
+				/* Preview not loaded animation effect */
+				&:not(.files-list__row-icon-preview--loaded) {
+					background: var(--color-loading-dark);
+					// animation: preview-gradient-fade 1.2s ease-in-out infinite;
+				}
+			}
+
+			&-favorite {
+				position: absolute;
+				top: 0px;
+				inset-inline-end: -10px;
+			}
+
+			// File and folder overlay
+			&-overlay {
+				position: absolute;
+				max-height: calc(var(--icon-preview-size) * 0.5);
+				max-width: calc(var(--icon-preview-size) * 0.5);
+				color: var(--color-primary-element-text);
+				// better alignment with the folder icon
+				margin-block-start: 2px;
+
+				// Improve icon contrast with a background for files
+				&--file {
+					color: var(--color-main-text);
+					background: var(--color-main-background);
+					border-radius: 100%;
+				}
+			}
+		}
+
+		// Entry link
+		.files-list__row-name {
+			// Prevent link from overflowing
+			overflow: hidden;
+			// Take as much space as possible
+			flex: 1 1 auto;
+		}
+
+		.files-list__row-actions {
+			// take as much space as necessary
+			width: auto;
+
+			// Add margin to all cells after the actions
+			& ~ td,
+			& ~ th {
+				margin: 0 var(--cell-margin);
+			}
+
+			button {
+				.button-vue__text {
+					// Remove bold from default button styling
+					font-weight: normal;
+				}
+			}
+		}
+
+		.files-list__row-column-custom {
+			width: calc(var(--row-height) * 2);
+		}
+	}
+
+}
+</style>
+
+<style lang="scss">
+// Grid mode
+tbody.files-list__tbody.files-list__tbody--grid {
+	--half-clickable-area: calc(var(--clickable-area) / 2);
+	--item-padding: 16px;
+	--icon-preview-size: 166px;
+	--name-height: 32px;
+	--mtime-height: 16px;
+	--row-width: calc(var(--icon-preview-size) + var(--item-padding) * 2);
+	--row-height: calc(var(--icon-preview-size) + var(--name-height) + var(--mtime-height) + var(--item-padding) * 2);
+	--checkbox-padding: 0px;
+
+	display: grid;
+	grid-template-columns: repeat(auto-fill, var(--row-width));
+
+	align-content: center;
+	align-items: center;
+	justify-content: space-around;
+	justify-items: center;
+
+	tr {
+		display: flex;
+		flex-direction: column;
+		width: var(--row-width);
+		height: var(--row-height);
+		border: none;
+		border-radius: var(--border-radius-large);
+		padding: var(--item-padding);
+	}
+
+	// Checkbox in the top left
+	.files-list__row-checkbox {
+		position: absolute;
+		z-index: 9;
+		top: calc(var(--item-padding)/2);
+		inset-inline-start: calc(var(--item-padding)/2);
+		overflow: hidden;
+		--checkbox-container-size: 44px;
+		width: var(--checkbox-container-size);
+		height: var(--checkbox-container-size);
+
+		// Add a background to the checkbox so we do not see the image through it.
+		.checkbox-radio-switch__content::after {
+			content: '';
+			width: 16px;
+			height: 16px;
+			position: absolute;
+			inset-inline-start: 50%;
+			margin-inline-start: -8px;
+			z-index: -1;
+			background: var(--color-main-background);
+		}
+	}
+
+	// Star icon in the top right
+	.files-list__row-icon-favorite {
+		position: absolute;
+		top: 0;
+		inset-inline-end: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: var(--clickable-area);
+		height: var(--clickable-area);
+	}
+
+	.files-list__row-name {
+		display: flex;
+		flex-direction: column;
+		width: var(--icon-preview-size);
+		height: calc(var(--icon-preview-size) + var(--name-height));
+		// Ensure that the name outline is visible.
+		overflow: visible;
+
+		span.files-list__row-icon {
+			width: var(--icon-preview-size);
+			height: var(--icon-preview-size);
+		}
+
+		.files-list__row-name-text {
+			margin: 0;
+			// Ensure that the outline is not too close to the text.
+			margin-inline-start: -4px;
+			padding: 0px 4px;
+		}
+	}
+
+	.files-list__row-mtime {
+		width: var(--icon-preview-size);
+		height: var(--mtime-height);
+		font-size: calc(var(--default-font-size) - 4px);
+	}
+
+	.files-list__row-actions {
+		position: absolute;
+		inset-inline-end: calc(var(--half-clickable-area) / 2);
+		inset-block-end: calc(var(--mtime-height) / 2);
+		width: var(--clickable-area);
+		height: var(--clickable-area);
 	}
 }
 </style>
diff --git a/src/views/FilesList/VirtualList.vue b/src/views/FilesList/VirtualList.vue
index 941ddf47b..fddcaa33a 100644
--- a/src/views/FilesList/VirtualList.vue
+++ b/src/views/FilesList/VirtualList.vue
@@ -3,11 +3,44 @@
 		<div class="files-list__filters">
 			<slot name="filters" />
 		</div>
+
+		<table class="files-list__table">
+			<!-- Header -->
+			<thead ref="thead" class="files-list__thead">
+				<slot name="header" />
+			</thead>
+			<!-- Body -->
+			<tbody class="files-list__tbody"
+				:class="userConfigStore.grid_view ? 'files-list__tbody--grid' : 'files-list__tbody--list'"
+				data-cy-files-list-tbody>
+				<component :is="dataComponent"
+					v-for="item in filesStore.files"
+					:key="item.nodeId"
+					:source="item" />
+			</tbody>
+		</table>
 	</div>
 </template>
 
 <script>
+import { useFilesStore } from '../../store/files.js'
+import { useUserConfigStore } from '../../store/userconfig.js'
+
 export default {
 	name: 'VirtualList',
+	props: {
+		dataComponent: {
+			type: [Object, Function],
+			required: true,
+		},
+	},
+	setup() {
+		const filesStore = useFilesStore()
+		const userConfigStore = useUserConfigStore()
+		return {
+			filesStore,
+			userConfigStore,
+		}
+	},
 }
 </script>