diff --git a/lib/Controller/FileController.php b/lib/Controller/FileController.php
index aeea8657ea..99b7dd3cf6 100644
--- a/lib/Controller/FileController.php
+++ b/lib/Controller/FileController.php
@@ -26,6 +26,7 @@
 
 use OCA\Files_Sharing\SharedStorage;
 use OCA\Libresign\AppInfo\Application;
+use OCA\Libresign\Db\File as FileEntity;
 use OCA\Libresign\Db\SignRequestMapper;
 use OCA\Libresign\Exception\LibresignException;
 use OCA\Libresign\Helper\JSActions;
@@ -35,6 +36,7 @@
 use OCA\Libresign\Service\AccountService;
 use OCA\Libresign\Service\FileService;
 use OCA\Libresign\Service\IdentifyMethodService;
+use OCA\Libresign\Service\RequestSignatureService;
 use OCA\Libresign\Service\SessionService;
 use OCP\AppFramework\Db\DoesNotExistException;
 use OCP\AppFramework\Http;
@@ -75,6 +77,7 @@ public function __construct(
 		private SessionService $sessionService,
 		private SignRequestMapper $signRequestMapper,
 		private IdentifyMethodService $identifyMethodService,
+		private RequestSignatureService $requestSignatureService,
 		private AccountService $accountService,
 		private IRootFolder $root,
 		private IPreview $preview,
@@ -208,9 +211,13 @@ public function validate(?string $type = null, $identifier = null): DataResponse
 	 *
 	 * @param string|null $signer_uuid Signer UUID
 	 * @param string|null $nodeId The nodeId (also called fileId). Is the id of a file at Nextcloud
-	 * @param int|null $status Status could be one of 0 = draft, 1 = able to sign, 2 = partial signed, 3 = signed, 4 = deleted.
+	 * @param list<int>|null $status Status could be none or many of 0 = draft, 1 = able to sign, 2 = partial signed, 3 = signed, 4 = deleted.
 	 * @param int|null $page the number of page to return
 	 * @param int|null $length Total of elements to return
+	 * @param int|null $start Start date of signature request (UNIX timestamp)
+	 * @param int|null $end End date of signature request (UNIX timestamp)
+	 * @param string|null $sortBy Name of the column to sort by
+	 * @param string|null $sortDirection Ascending or descending order
 	 * @return DataResponse<Http::STATUS_OK, array{pagination: LibresignPagination, data: ?LibresignFile[]}, array{}>
 	 *
 	 * 200: OK
@@ -223,16 +230,26 @@ public function list(
 		?int $length = null,
 		?string $signer_uuid = null,
 		?string $nodeId = null,
-		?int $status = null,
+		?array $status = null,
+		?int $start = null,
+		?int $end = null,
+		?string $sortBy = null,
+		?string $sortDirection = null,
 	): DataResponse {
 		$filter = array_filter([
 			'signer_uuid' => $signer_uuid,
 			'nodeId' => $nodeId,
 			'status' => $status,
+			'start' => $start,
+			'end' => $end,
 		], static function ($var) { return $var !== null; });
+		$sort = [
+			'sortBy' => $sortBy,
+			'sortDirection' => $sortDirection,
+		];
 		$return = $this->fileService
 			->setMe($this->userSession->getUser())
-			->listAssociatedFilesOfSignFlow($page, $length, $filter);
+			->listAssociatedFilesOfSignFlow($page, $length, $filter, $sort);
 		return new DataResponse($return, Http::STATUS_OK);
 	}
 
@@ -372,6 +389,15 @@ public function save(array $file, string $name = '', array $settings = []): Data
 				'file' => $file,
 				'settings' => $settings
 			]);
+			$data = [
+				'file' => [
+					'fileNode' => $node,
+				],
+				'name' => $name,
+				'userManager' => $this->userSession->getUser(),
+				'status' => FileEntity::STATUS_DRAFT,
+			];
+			$file = $this->requestSignatureService->save($data);
 
 			return new DataResponse(
 				[
@@ -393,4 +419,46 @@ public function save(array $file, string $name = '', array $settings = []): Data
 			);
 		}
 	}
+
+	/**
+	 * Delete File
+	 *
+	 * This will delete the file and all data
+	 *
+	 * @param integer $fileId Node id of a Nextcloud file
+	 * @return DataResponse<Http::STATUS_OK, array{message: string}, array{}>|DataResponse<Http::STATUS_UNAUTHORIZED, array{message: string}, array{}>|DataResponse<Http::STATUS_UNPROCESSABLE_ENTITY, array{action: integer, errors: string[]}, array{}>
+	 *
+	 * 200: OK
+	 * 401: Failed
+	 * 422: Failed
+	 */
+	#[NoAdminRequired]
+	#[NoCSRFRequired]
+	#[RequireManager]
+	#[ApiRoute(verb: 'DELETE', url: '/api/{apiVersion}/file/file_id/{fileId}', requirements: ['apiVersion' => '(v1)'])]
+	public function deleteAllRequestSignatureUsingFileId(int $fileId): DataResponse {
+		try {
+			$data = [
+				'userManager' => $this->userSession->getUser(),
+				'file' => [
+					'fileId' => $fileId
+				]
+			];
+			$this->validateHelper->validateExistingFile($data);
+			$this->fileService->delete($fileId);
+		} catch (\Throwable $th) {
+			return new DataResponse(
+				[
+					'message' => $th->getMessage(),
+				],
+				Http::STATUS_UNAUTHORIZED
+			);
+		}
+		return new DataResponse(
+			[
+				'message' => $this->l10n->t('Success')
+			],
+			Http::STATUS_OK
+		);
+	}
 }
diff --git a/lib/Db/AccountFileMapper.php b/lib/Db/AccountFileMapper.php
index 3428c8e811..192ec131b3 100644
--- a/lib/Db/AccountFileMapper.php
+++ b/lib/Db/AccountFileMapper.php
@@ -167,7 +167,7 @@ private function getUserAccountFile(array $filter = []): Pagination {
 			$qb->setMaxResults($filter['length']);
 		}
 
-		$pagination = new Pagination($qb);
+		$pagination = new Pagination($qb, $this->urlGenerator);
 		return $pagination;
 	}
 
diff --git a/lib/Db/SignRequestMapper.php b/lib/Db/SignRequestMapper.php
index 0a2a0ccb1f..007cb729de 100644
--- a/lib/Db/SignRequestMapper.php
+++ b/lib/Db/SignRequestMapper.php
@@ -362,11 +362,12 @@ public function getFilesAssociatedFilesWithMeFormatted(
 		array $filter,
 		?int $page = null,
 		?int $length = null,
+		?array $sort = [],
 	): array {
 		$filter['email'] = $user->getEMailAddress();
 		$filter['length'] = $length;
 		$filter['page'] = $page;
-		$pagination = $this->getFilesAssociatedFilesWithMeStmt($user->getUID(), $filter);
+		$pagination = $this->getFilesAssociatedFilesWithMeStmt($user->getUID(), $filter, $sort);
 		$pagination->setMaxPerPage($length);
 		$pagination->setCurrentPage($page);
 		$currentPageResults = $pagination->getCurrentPageResults();
@@ -505,7 +506,17 @@ private function getFilesAssociatedFilesWithMeQueryBuilder(string $userId, ?arra
 			}
 			if (!empty($filter['status'])) {
 				$qb->andWhere(
-					$qb->expr()->eq('f.status', $qb->createNamedParameter($filter['status'], IQueryBuilder::PARAM_INT))
+					$qb->expr()->in('f.status', $qb->createNamedParameter($filter['status'], IQueryBuilder::PARAM_INT_ARRAY))
+				);
+			}
+			if (!empty($filter['start'])) {
+				$qb->andWhere(
+					$qb->expr()->gte('f.created_at', $qb->createNamedParameter($filter['start'], IQueryBuilder::PARAM_INT))
+				);
+			}
+			if (!empty($filter['end'])) {
+				$qb->andWhere(
+					$qb->expr()->lte('f.created_at', $qb->createNamedParameter($filter['end'], IQueryBuilder::PARAM_INT))
 				);
 			}
 			if (isset($filter['length']) && isset($filter['page'])) {
@@ -516,7 +527,11 @@ private function getFilesAssociatedFilesWithMeQueryBuilder(string $userId, ?arra
 		return $qb;
 	}
 
-	private function getFilesAssociatedFilesWithMeStmt(string $userId, ?array $filter = []): Pagination {
+	private function getFilesAssociatedFilesWithMeStmt(
+		string $userId,
+		?array $filter = [],
+		?array $sort = [],
+	): Pagination {
 		$qb = $this->getFilesAssociatedFilesWithMeQueryBuilder($userId, $filter);
 		$qb->select(
 			'f.id',
@@ -527,6 +542,12 @@ private function getFilesAssociatedFilesWithMeStmt(string $userId, ?array $filte
 			'f.status',
 			'f.metadata',
 		);
+		if (!empty($sort) && in_array($sort['sortBy'], ['name', 'status', 'created_at'])) {
+			$qb->orderBy(
+				$qb->func()->lower('f.' . $sort['sortBy']),
+				$sort['sortDirection'] == 'asc' ? 'asc' : 'desc'
+			);
+		}
 		$qb->selectAlias('f.created_at', 'request_date');
 
 		$countQueryBuilderModifier = function (IQueryBuilder $qb): int {
@@ -538,7 +559,7 @@ private function getFilesAssociatedFilesWithMeStmt(string $userId, ?array $filte
 			return (int)$qb->executeQuery()->fetchOne();
 		};
 
-		$pagination = new Pagination($qb);
+		$pagination = new Pagination($qb, $this->urlGenerator);
 		return $pagination;
 	}
 
diff --git a/lib/Helper/Pagination.php b/lib/Helper/Pagination.php
index b3a4129297..5e1f87db8f 100644
--- a/lib/Helper/Pagination.php
+++ b/lib/Helper/Pagination.php
@@ -26,13 +26,14 @@
 
 use OCA\Libresign\Db\PagerFantaQueryAdapter;
 use OCP\DB\QueryBuilder\IQueryBuilder;
+use OCP\IURLGenerator;
 use Pagerfanta\Pagerfanta;
 
 class Pagination extends Pagerfanta {
-	/** @var string */
-	private $rootPath;
+	private string $routeName;
 	public function __construct(
 		IQueryBuilder $queryBuilder,
+		private IURLGenerator $urlGenerator,
 	) {
 		$adapter = new PagerFantaQueryAdapter($queryBuilder);
 		parent::__construct($adapter);
@@ -41,27 +42,59 @@ public function __construct(
 	/**
 	 * @return static
 	 */
-	public function setRootPath(string $rootPath = ''): self {
-		$this->rootPath = $rootPath;
+	public function setRouteName(string $routeName = ''): self {
+		$this->routeName = $routeName;
 		return $this;
 	}
 
-	public function getPagination(?int $page, ?int $length): array {
+	public function getPagination(int $page, int $length, array $filter = []): array {
 		$this->setMaxPerPage($length);
-		$pagination['total'] = $this->count();
-		if ($pagination['total'] > $length) {
-			$pagination['current'] = $this->rootPath . '?page=' . $page . '&length=' . $length;
-			$pagination['next'] = $this->hasNextPage()      ? $this->rootPath . '?page=' . $this->getNextPage() . '&length=' . $length : null;
-			$pagination['prev'] = $this->hasPreviousPage()  ? $this->rootPath . '?page=' . $this->getPreviousPage() . '&length=' . $length : null;
-			$pagination['last'] = $this->hasNextPage()      ? $this->rootPath . '?page=' . $this->getNbPages() . '&length=' . $length : null;
-			$pagination['first'] = $this->hasPreviousPage() ? $this->rootPath . '?page=1&length=' . $length : null;
-		} else {
-			$pagination['current'] = null;
-			$pagination['next'] = null;
-			$pagination['prev'] = null;
-			$pagination['last'] = null;
-			$pagination['first'] = null;
+		$total = $this->count();
+		if ($total > $length) {
+			return [
+				'total' => $total,
+				'current' => $this->linkToRoute(true, $page, $length, $filter),
+				'next' => $this->linkToRoute($this->hasNextPage(), 'getNextPage', $length, $filter),
+				'prev' => $this->linkToRoute($this->hasPreviousPage(), 'getPreviousPage', $length, $filter),
+				'last' => $this->linkToRoute($this->hasNextPage(), 'getNbPages', $length, $filter),
+				'first' => $this->linkToRoute($this->hasPreviousPage(), 1, $length, $filter),
+			];
 		}
-		return $pagination;
+		return [
+			'total' => $total,
+			'current' => null,
+			'next' => null,
+			'prev' => null,
+			'last' => null,
+			'first' => null,
+		];
+	}
+
+	private function linkToRoute(bool $condition, int|string $page, int $length, array $filter): ?string {
+		if (!$condition) {
+			return null;
+		}
+		if (is_string($page)) {
+			$page = $this->$page();
+		}
+		$url = $this->urlGenerator->linkToRouteAbsolute(
+			$this->routeName,
+			array_merge(['page' => $page, 'length' => $length, 'apiVersion' => 'v1'], $filter)
+		);
+		$url = $this->sortParameters($url);
+		return $url;
+	}
+
+	/**
+	 * This is necessary to fix problem at integration tests because the method linkToRoute change the order of parameters
+	 */
+	private function sortParameters(?string $url): ?string {
+		if (!$url) {
+			return $url;
+		}
+		parse_str(parse_url($url, PHP_URL_QUERY), $query);
+		ksort($query);
+		$url = strtok($url, '?') . '?' . http_build_query($query);
+		return $url;
 	}
 }
diff --git a/lib/Service/AccountFileService.php b/lib/Service/AccountFileService.php
index 48e4afc9a3..38321e728f 100644
--- a/lib/Service/AccountFileService.php
+++ b/lib/Service/AccountFileService.php
@@ -65,10 +65,10 @@ public function accountFileList(array $filter, ?int $page = null, ?int $length =
 		$page = $page ?? 1;
 		$length = $length ?? (int)$this->appConfig->getAppValue('length_of_page', '100');
 		$data = $this->accountFileMapper->accountFileList($filter, $page, $length);
-		$data['pagination']->setRootPath('/file/list');
+		$data['pagination']->setRouteName('ocs.libresign.File.list');
 		return [
 			'data' => $data['data'],
-			'pagination' => $data['pagination']->getPagination($page, $length)
+			'pagination' => $data['pagination']->getPagination($page, $length, $filter)
 		];
 	}
 }
diff --git a/lib/Service/FileService.php b/lib/Service/FileService.php
index 78abfdf9f1..83a7cf4412 100644
--- a/lib/Service/FileService.php
+++ b/lib/Service/FileService.php
@@ -448,7 +448,12 @@ public function setFileByPath(string $path): self {
 	 *
 	 * @psalm-return array{data: array, pagination: array}
 	 */
-	public function listAssociatedFilesOfSignFlow($page = null, $length = null, array $filter = []): array {
+	public function listAssociatedFilesOfSignFlow(
+		$page = null,
+		$length = null,
+		array $filter = [],
+		array $sort = [],
+	): array {
 		$page = $page ?? 1;
 		$length = $length ?? (int)$this->appConfig->getAppValue('length_of_page', '100');
 
@@ -457,6 +462,7 @@ public function listAssociatedFilesOfSignFlow($page = null, $length = null, arra
 			$filter,
 			$page,
 			$length,
+			$sort,
 		);
 
 		$signers = $this->signRequestMapper->getByMultipleFileId(array_column($return['data'], 'id'));
@@ -464,10 +470,10 @@ public function listAssociatedFilesOfSignFlow($page = null, $length = null, arra
 		$visibleElements = $this->signRequestMapper->getVisibleElementsFromSigners($signers);
 		$return['data'] = $this->associateAllAndFormat($this->me, $return['data'], $signers, $identifyMethods, $visibleElements);
 
-		$return['pagination']->setRootPath('/file/list');
+		$return['pagination']->setRouteName('ocs.libresign.File.list');
 		return [
 			'data' => $return['data'],
-			'pagination' => $return['pagination']->getPagination($page, $length)
+			'pagination' => $return['pagination']->getPagination($page, $length, $filter)
 		];
 	}
 
@@ -601,4 +607,20 @@ public function getMyLibresignFile(int $nodeId): File {
 			],
 		);
 	}
+
+	public function delete(int $fileId): void {
+		$file = $this->fileMapper->getByFileId($fileId);
+		$this->fileElementService->deleteVisibleElements($file->getId());
+		$list = $this->signRequestMapper->getByFileId($file->getId());
+		foreach ($list as $signRequest) {
+			$this->signRequestMapper->delete($signRequest);
+		}
+		$this->fileMapper->delete($file);
+		if ($file->getSignedNodeId()) {
+			$signedNextcloudFile = $this->folderService->getFileById($file->getSignedNodeId());
+			$signedNextcloudFile->delete();
+		}
+		$nextcloudFile = $this->folderService->getFileById($fileId);
+		$nextcloudFile->delete();
+	}
 }
diff --git a/openapi-full.json b/openapi-full.json
index 7a5298e3b1..fad3f76592 100644
--- a/openapi-full.json
+++ b/openapi-full.json
@@ -1128,6 +1128,48 @@
                 }
             }
         },
+        "/index.php/apps/libresign/p/sign/{uuid}/pdf": {
+            "get": {
+                "operationId": "page-sign-pdf",
+                "summary": "Sign page to authenticated signer",
+                "description": "The path is used only by frontend",
+                "tags": [
+                    "page"
+                ],
+                "security": [
+                    {},
+                    {
+                        "bearer_auth": []
+                    },
+                    {
+                        "basic_auth": []
+                    }
+                ],
+                "parameters": [
+                    {
+                        "name": "uuid",
+                        "in": "path",
+                        "description": "Sign request uuid",
+                        "required": true,
+                        "schema": {
+                            "type": "string"
+                        }
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "OK",
+                        "content": {
+                            "text/html": {
+                                "schema": {
+                                    "type": "string"
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        },
         "/index.php/apps/libresign/p/sign/{uuid}": {
             "get": {
                 "operationId": "page-sign",
@@ -3695,9 +3737,32 @@
                         }
                     },
                     {
-                        "name": "status",
+                        "name": "status[]",
+                        "in": "query",
+                        "description": "Status could be none or many of 0 = draft, 1 = able to sign, 2 = partial signed, 3 = signed, 4 = deleted.",
+                        "schema": {
+                            "type": "array",
+                            "nullable": true,
+                            "items": {
+                                "type": "integer",
+                                "format": "int64"
+                            }
+                        }
+                    },
+                    {
+                        "name": "start",
+                        "in": "query",
+                        "description": "Start date of signature request (UNIX timestamp)",
+                        "schema": {
+                            "type": "integer",
+                            "format": "int64",
+                            "nullable": true
+                        }
+                    },
+                    {
+                        "name": "end",
                         "in": "query",
-                        "description": "Status could be one of 0 = draft, 1 = able to sign, 2 = partial signed, 3 = signed, 4 = deleted.",
+                        "description": "End date of signature request (UNIX timestamp)",
                         "schema": {
                             "type": "integer",
                             "format": "int64",
diff --git a/openapi.json b/openapi.json
index ebf9a8d844..fde54c2766 100644
--- a/openapi.json
+++ b/openapi.json
@@ -1032,6 +1032,48 @@
                 }
             }
         },
+        "/index.php/apps/libresign/p/sign/{uuid}/pdf": {
+            "get": {
+                "operationId": "page-sign-pdf",
+                "summary": "Sign page to authenticated signer",
+                "description": "The path is used only by frontend",
+                "tags": [
+                    "page"
+                ],
+                "security": [
+                    {},
+                    {
+                        "bearer_auth": []
+                    },
+                    {
+                        "basic_auth": []
+                    }
+                ],
+                "parameters": [
+                    {
+                        "name": "uuid",
+                        "in": "path",
+                        "description": "Sign request uuid",
+                        "required": true,
+                        "schema": {
+                            "type": "string"
+                        }
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "description": "OK",
+                        "content": {
+                            "text/html": {
+                                "schema": {
+                                    "type": "string"
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        },
         "/index.php/apps/libresign/p/sign/{uuid}": {
             "get": {
                 "operationId": "page-sign",
@@ -3599,9 +3641,32 @@
                         }
                     },
                     {
-                        "name": "status",
+                        "name": "status[]",
+                        "in": "query",
+                        "description": "Status could be none or many of 0 = draft, 1 = able to sign, 2 = partial signed, 3 = signed, 4 = deleted.",
+                        "schema": {
+                            "type": "array",
+                            "nullable": true,
+                            "items": {
+                                "type": "integer",
+                                "format": "int64"
+                            }
+                        }
+                    },
+                    {
+                        "name": "start",
+                        "in": "query",
+                        "description": "Start date of signature request (UNIX timestamp)",
+                        "schema": {
+                            "type": "integer",
+                            "format": "int64",
+                            "nullable": true
+                        }
+                    },
+                    {
+                        "name": "end",
                         "in": "query",
-                        "description": "Status could be one of 0 = draft, 1 = able to sign, 2 = partial signed, 3 = signed, 4 = deleted.",
+                        "description": "End date of signature request (UNIX timestamp)",
                         "schema": {
                             "type": "integer",
                             "format": "int64",
diff --git a/package-lock.json b/package-lock.json
index 39815131ab..fba9baaf9c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,8 @@
         "@fontsource/dancing-script": "^5.1.0",
         "@libresign/vue-pdf-editor": "^1.3.7",
         "@marionebl/option": "^1.0.8",
+        "@mdi/js": "^7.4.47",
+        "@mdi/svg": "^7.4.47",
         "@nextcloud/auth": "^2.4.0",
         "@nextcloud/axios": "^2.5.1",
         "@nextcloud/dialogs": "^6.0.1",
@@ -26,7 +28,9 @@
         "@nextcloud/router": "^3.0.1",
         "@nextcloud/vue": "^8.19.0",
         "blueimp-md5": "^2.19.0",
+        "copy-webpack-plugin": "^12.0.2",
         "crypto-js": "^4.2.0",
+        "debounce": "^2.2.0",
         "js-confetti": "^0.12.0",
         "pinia": "^2.2.6",
         "v-perfect-signature": "^1.4.0",
diff --git a/package.json b/package.json
index f9968c75d0..6df0422aa0 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,8 @@
     "@fontsource/dancing-script": "^5.1.0",
     "@libresign/vue-pdf-editor": "^1.3.7",
     "@marionebl/option": "^1.0.8",
+    "@mdi/js": "^7.4.47",
+    "@mdi/svg": "^7.4.47",
     "@nextcloud/auth": "^2.4.0",
     "@nextcloud/axios": "^2.5.1",
     "@nextcloud/dialogs": "^6.0.1",
@@ -37,7 +39,9 @@
     "@nextcloud/router": "^3.0.1",
     "@nextcloud/vue": "^8.19.0",
     "blueimp-md5": "^2.19.0",
+    "copy-webpack-plugin": "^12.0.2",
     "crypto-js": "^4.2.0",
+    "debounce": "^2.2.0",
     "js-confetti": "^0.12.0",
     "pinia": "^2.2.6",
     "v-perfect-signature": "^1.4.0",
diff --git a/src/Components/File/File.vue b/src/Components/File/File.vue
index 4be34805bb..f5f8088a4e 100644
--- a/src/Components/File/File.vue
+++ b/src/Components/File/File.vue
@@ -11,10 +11,10 @@
 			@load="backgroundFailed = false">
 		<FileIcon v-else v-once :size="128" />
 		<div class="enDot">
-			<div :class="filesStore.files[currentNodeId].statusText !== 'none' ? 'dot ' + statusToClass(filesStore.files[currentNodeId].status) : '' " />
-			<span>{{ filesStore.files[currentNodeId].statusText !== 'none' ? filesStore.files[currentNodeId].statusText : '' }}</span>
+			<div :class="filesStore.files.get(currentNodeId).statusText !== 'none' ? 'dot ' + statusToClass(filesStore.files.get(currentNodeId).status) : '' " />
+			<span>{{ filesStore.files.get(currentNodeId).statusText !== 'none' ? filesStore.files.get(currentNodeId).statusText : '' }}</span>
 		</div>
-		<h1>{{ filesStore.files[currentNodeId].name }}</h1>
+		<h1>{{ filesStore.files.get(currentNodeId).name }}</h1>
 	</div>
 </template>
 
@@ -60,7 +60,7 @@ export default {
 				return null
 			}
 			let previewUrl = ''
-			if (this.filesStore.files[this.currentNodeId]?.uuid?.length > 0) {
+			if (this.filesStore.files.get(this.currentNodeId)?.uuid?.length > 0) {
 				previewUrl = generateOcsUrl('/apps/libresign/api/v1/file/thumbnail/{nodeId}', {
 					nodeId: this.currentNodeId,
 				})
diff --git a/src/Components/LeftSidebar/LeftSidebar.vue b/src/Components/LeftSidebar/LeftSidebar.vue
index c3915253c5..3518ff3aac 100644
--- a/src/Components/LeftSidebar/LeftSidebar.vue
+++ b/src/Components/LeftSidebar/LeftSidebar.vue
@@ -31,8 +31,8 @@
 					<FileSignIcon :size="20" />
 				</template>
 			</NcAppNavigationItem>
-			<NcAppNavigationItem id="timeline"
-				:to="{ name: 'timeline' }"
+			<NcAppNavigationItem id="fileslist"
+				:to="{ name: 'fileslist' }"
 				:name="t('libresign', 'Files')"
 				@click="unselectFile">
 				<template #icon>
diff --git a/src/Components/RightSidebar/RequestSignatureTab.vue b/src/Components/RightSidebar/RequestSignatureTab.vue
index 094053fc92..70348937a8 100644
--- a/src/Components/RightSidebar/RequestSignatureTab.vue
+++ b/src/Components/RightSidebar/RequestSignatureTab.vue
@@ -5,15 +5,15 @@
 	</div>
 	<div v-else
 		id="request-signature-tab">
-		<NcButton v-if="canAddSigner"
+		<NcButton v-if="filesStore.canAddSigner()"
 			:type="hasSigners ? 'secondary' : 'primary'"
 			@click="addSigner">
 			{{ t('libresign', 'Add signer') }}
 		</NcButton>
-		<Signers :signers="dataSigners"
+		<Signers :signers="filesStore.signers"
 			event="libresign:edit-signer">
 			<template #actions="{signer}">
-				<NcActionButton v-if="canSave && !signer.signed"
+				<NcActionButton v-if="filesStore.canSave() && !signer.signed"
 					aria-label="Delete"
 					:close-after-click="true"
 					@click="filesStore.deleteSigner(signer)">
@@ -22,7 +22,7 @@
 					</template>
 					{{ t('libresign', 'Delete') }}
 				</NcActionButton>
-				<NcActionButton v-if="canRequestSign && !signer.signed && signer.signRequestId && !signer.me"
+				<NcActionButton v-if="filesStore.canRequestSign && !signer.signed && signer.signRequestId && !signer.me"
 					icon="icon-comment"
 					:close-after-click="true"
 					@click="sendNotify(signer)">
@@ -31,8 +31,8 @@
 			</template>
 		</Signers>
 		<div class="action-buttons">
-			<NcButton v-if="canSave"
-				:type="canSign ? 'secondary' : 'primary'"
+			<NcButton v-if="filesStore.canSave()"
+				:type="filesStore.canSign() ? 'secondary' : 'primary'"
 				:disabled="hasLoading"
 				@click="save()">
 				<template #icon>
@@ -40,7 +40,7 @@
 				</template>
 				{{ t('libresign', 'Next') }}
 			</NcButton>
-			<NcButton v-if="canSign"
+			<NcButton v-if="filesStore.canSign()"
 				type="primary"
 				:disabled="hasLoading"
 				@click="sign()">
@@ -49,7 +49,7 @@
 				</template>
 				{{ t('libresign', 'Sign') }}
 			</NcButton>
-			<NcButton v-if="canValidate"
+			<NcButton v-if="filesStore.canValidate()"
 				type="primary"
 				@click="validationFile()">
 				{{ t('libresign', 'Validate') }}
@@ -68,11 +68,9 @@
 <script>
 import Delete from 'vue-material-design-icons/Delete.vue'
 
-import { getCurrentUser } from '@nextcloud/auth'
 import axios from '@nextcloud/axios'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
-import { loadState } from '@nextcloud/initial-state'
 import { generateOcsUrl } from '@nextcloud/router'
 
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
@@ -118,45 +116,11 @@ export default {
 			hasLoading: false,
 			signerToEdit: {},
 			modalSrc: '',
-			canRequestSign: loadState('libresign', 'can_request_sign', false),
 		}
 	},
 	computed: {
-		canAddSigner() {
-			return this.canRequestSign
-				&& (
-					!Object.hasOwn(this.filesStore.getFile(), 'requested_by')
-					|| this.filesStore.getFile().requested_by.userId === getCurrentUser().uid
-				)
-				&& !this.filesStore.isPartialSigned()
-				&& !this.filesStore.isFullSigned()
-		},
-		canSave() {
-			return this.canRequestSign
-				&& (
-					!Object.hasOwn(this.filesStore.getFile(), 'requested_by')
-					|| this.filesStore.getFile().requested_by.userId === getCurrentUser().uid
-				)
-				&& !this.filesStore.isPartialSigned()
-				&& !this.filesStore.isFullSigned()
-				&& this.filesStore.getFile()?.signers?.length > 0
-		},
-		canSign() {
-			return !this.filesStore.isFullSigned()
-				&& this.filesStore.getFile().status > 0
-				&& this.filesStore.getFile()?.signers?.filter(signer => signer.me).length > 0
-				&& this.filesStore.getFile()?.signers?.filter(signer => signer.me)
-					.filter(signer => signer.signed?.length > 0).length === 0
-		},
-		canValidate() {
-			return this.filesStore.isPartialSigned()
-				|| this.filesStore.isFullSigned()
-		},
-		dataSigners() {
-			return this.filesStore.getFile()?.signers ?? []
-		},
 		hasSigners() {
-			return this.filesStore.hasSigners()
+			return this.filesStore.hasSigners(this.filesStore.getFile())
 		},
 		fileName() {
 			return this.filesStore.getFile()?.name ?? ''
@@ -236,8 +200,8 @@ export default {
 					name: this.filesStore.getFile()?.name,
 					users: [],
 				},
-			}
-			this.dataSigners.forEach(signer => {
+			};
+			(this.filesStore.getFile()?.signers ?? []).forEach(signer => {
 				const user = {
 					displayName: signer.displayName,
 					identify: {},
diff --git a/src/Components/Signers/Signer.vue b/src/Components/Signers/Signer.vue
index fae1807aa5..f5b9d481eb 100644
--- a/src/Components/Signers/Signer.vue
+++ b/src/Components/Signers/Signer.vue
@@ -9,7 +9,9 @@
 			<template #subname>
 				<Bullet v-for="method in identifyMethodsNames" :key="method" :name="method" />
 			</template>
-			<slot v-if="$slots.actions" slot="actions" name="actions" />
+			<NcActions>
+				<slot v-if="$slots.actions" slot="actions" name="actions" />
+			</NcActions>
 			<template #indicator>
 				<CheckboxBlankCircle :size="16"
 					:fill-color="statusColor"
@@ -25,6 +27,7 @@ import { emit } from '@nextcloud/event-bus'
 import { loadState } from '@nextcloud/initial-state'
 import Moment from '@nextcloud/moment'
 
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 import NcListItem from '@nextcloud/vue/dist/Components/NcListItem.js'
 
@@ -35,6 +38,7 @@ import { useFilesStore } from '../../store/files.js'
 export default {
 	name: 'Signer',
 	components: {
+		NcActions,
 		NcListItem,
 		NcAvatar,
 		CheckboxBlankCircle,
diff --git a/src/helpers/logger.js b/src/helpers/logger.js
new file mode 100644
index 0000000000..14d74a5d63
--- /dev/null
+++ b/src/helpers/logger.js
@@ -0,0 +1,11 @@
+/**
+ * SPDX-FileCopyrightText: 2024 LibreCode coop and contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { getLoggerBuilder } from '@nextcloud/logger'
+
+export default getLoggerBuilder()
+	.setApp('libresign')
+	.detectUser()
+	.build()
diff --git a/src/router/router.js b/src/router/router.js
index 56691d25bc..a838c465a9 100644
--- a/src/router/router.js
+++ b/src/router/router.js
@@ -154,9 +154,9 @@ const router = new Router({
 			props: true,
 		},
 		{
-			path: '/f/timeline/sign',
-			name: 'timeline',
-			component: () => import('../views/Timeline/Timeline.vue'),
+			path: '/f/filelist/sign',
+			name: 'fileslist',
+			component: () => import('../views/FilesList/FilesList.vue'),
 		},
 		{
 			path: '/f/request',
diff --git a/src/store/actionsmenu.js b/src/store/actionsmenu.js
new file mode 100644
index 0000000000..16676167f2
--- /dev/null
+++ b/src/store/actionsmenu.js
@@ -0,0 +1,12 @@
+/**
+ * SPDX-FileCopyrightText: 2024 LibreCode coop and contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { defineStore } from 'pinia'
+
+export const useActionsMenuStore = defineStore('actionsmenu', {
+	state: () => ({
+		opened: null,
+	}),
+})
diff --git a/src/store/files.js b/src/store/files.js
index b5812ede2b..ea535760dc 100644
--- a/src/store/files.js
+++ b/src/store/files.js
@@ -20,182 +20,301 @@
  */
 
 import { defineStore } from 'pinia'
-import { set } from 'vue'
+import { del, set } from 'vue'
 
+import { getCurrentUser } from '@nextcloud/auth'
 import axios from '@nextcloud/axios'
+import { emit, subscribe } from '@nextcloud/event-bus'
+import { loadState } from '@nextcloud/initial-state'
 import Moment from '@nextcloud/moment'
 import { generateOcsUrl } from '@nextcloud/router'
 
+import { useFilesSortingStore } from './filesSorting.js'
+import { useFiltersStore } from './filters.js'
 import { useSidebarStore } from './sidebar.js'
 import { useSignStore } from './sign.js'
 
-export const useFilesStore = defineStore('files', {
-	state: () => {
-		return {
-			files: {},
-			selectedNodeId: 0,
-			identifyingSigner: false,
-			loading: false,
-			filterActive: 'all',
-		}
-	},
-
-	actions: {
-		addFile(file) {
-			set(this.files, file.nodeId, file)
-			this.hydrateFile(file.nodeId)
-		},
-		selectFile(nodeId) {
-			this.selectedNodeId = nodeId ?? 0
-			if (this.selectedNodeId === 0) {
-				const signStore = useSignStore()
-				signStore.reset()
-				return
-			}
-			const sidebarStore = useSidebarStore()
-			sidebarStore.activeRequestSignatureTab()
-		},
-		getFile() {
-			return this.files[this.selectedNodeId] ?? {}
-		},
-		async flushSelectedFile() {
-			const files = await this.getAllFiles({
-				nodeId: this.selectedNodeId,
-			})
-			this.addFile(files[this.selectedNodeId])
-		},
-		enableIdentifySigner() {
-			this.identifyingSigner = true
-		},
-		disableIdentifySigner() {
-			this.identifyingSigner = false
-		},
-		hasSigners() {
-			if (this.selectedNodeId === 0) {
-				return false
-			}
-			if (!Object.hasOwn(this.getFile(), 'signers')) {
-				return false
-			}
-			return this.files[this.selectedNodeId].signers.length > 0
-		},
-		isPartialSigned() {
-			if (this.selectedNodeId === 0) {
-				return false
-			}
-			if (!Object.hasOwn(this.getFile(), 'signers')) {
-				return false
-			}
-			return this.files[this.selectedNodeId].signers
-				.filter(signer => signer.signed?.length > 0).length > 0
-		},
-		isFullSigned() {
-			if (this.selectedNodeId === 0) {
-				return false
-			}
-			if (!Object.hasOwn(this.getFile(), 'signers')) {
-				return false
-			}
-			return this.files[this.selectedNodeId].signers.length > 0
-				&& this.files[this.selectedNodeId].signers
-					.filter(signer => signer.signed?.length > 0).length === this.files[this.selectedNodeId].signers.length
-		},
-		getSubtitle() {
-			if (this.selectedNodeId === 0) {
-				return ''
+export const useFilesStore = function(...args) {
+	const store = defineStore('files', {
+		state: () => {
+			return {
+				files: {},
+				selectedNodeId: 0,
+				identifyingSigner: false,
+				loading: false,
+				canRequestSign: loadState('libresign', 'can_request_sign', false),
+				ordered: [],
+				paginationNextUrl: '',
+				loadedAll: false,
 			}
-			const file = this.files[this.selectedNodeId]
-			if ((file?.requested_by?.userId ?? '').length === 0 || file?.request_date.length === 0) {
-				return ''
-			}
-			return t('libresign', 'Requested by {name}, at {date}', {
-				name: file.requested_by.userId,
-				date: Moment(Date.parse(file.request_date)).format('LL LTS'),
-			})
 		},
-		async hydrateFile(nodeId) {
-			if (Object.hasOwn(this.files[nodeId], 'uuid')) {
-				return
-			}
-			await axios.get(generateOcsUrl('/apps/libresign/api/v1/file/validate/file_id/{fileId}', {
-				fileId: nodeId,
-			}))
-				.then((response) => {
-					set(this.files, nodeId, response.data.ocs.data)
-					this.addUniqueIdentifierToAllSigners(this.files[nodeId].signers)
+
+		actions: {
+			addFile(file) {
+				set(this.files, file.nodeId, file)
+				this.hydrateFile(file.nodeId)
+				if (!this.ordered.includes(file.nodeId)) {
+					this.ordered.push(file.nodeId)
+				}
+			},
+			selectFile(nodeId) {
+				this.selectedNodeId = nodeId ?? 0
+				if (this.selectedNodeId === 0) {
+					const signStore = useSignStore()
+					signStore.reset()
+					return
+				}
+				const sidebarStore = useSidebarStore()
+				sidebarStore.activeRequestSignatureTab()
+			},
+			getFile(file) {
+				if (typeof file === 'object') {
+					return file
+				}
+				return this.files[this.selectedNodeId] ?? {}
+			},
+			async flushSelectedFile() {
+				const files = await this.getAllFiles({
+					nodeId: this.selectedNodeId,
 				})
-				.catch(() => {
-					set(this.files[nodeId], 'signers', [])
+				this.addFile(files[this.selectedNodeId])
+			},
+			enableIdentifySigner() {
+				this.identifyingSigner = true
+			},
+			disableIdentifySigner() {
+				this.identifyingSigner = false
+			},
+			hasSigners(file) {
+				file = this.getFile(file)
+				if (this.selectedNodeId === 0) {
+					return false
+				}
+				if (!Object.hasOwn(file, 'signers')) {
+					return false
+				}
+				return file.signers.length > 0
+			},
+			isPartialSigned(file) {
+				file = this.getFile(file)
+				if (!Object.hasOwn(file, 'signers')) {
+					return false
+				}
+				return file.signers
+					.filter(signer => signer.signed?.length > 0).length > 0
+			},
+			isFullSigned(file) {
+				file = this.getFile(file)
+				if (!Object.hasOwn(file, 'signers')) {
+					return false
+				}
+				return file.signers.length > 0
+					&& file.signers
+						.filter(signer => signer.signed?.length > 0).length === file.signers.length
+			},
+			canSign(file) {
+				file = this.getFile(file)
+				return !this.isFullSigned(file)
+					&& file.status > 0
+					&& file?.signers?.filter(signer => signer.me).length > 0
+					&& file?.signers?.filter(signer => signer.me)
+						.filter(signer => signer.signed?.length > 0).length === 0
+			},
+			canValidate(file) {
+				file = this.getFile(file)
+				return this.isPartialSigned(file)
+					|| this.isFullSigned(file)
+			},
+			canDelete(file) {
+				file = this.getFile(file)
+				return this.canRequestSign
+					&& (
+						!Object.hasOwn(file, 'requested_by')
+						|| file.requested_by.userId === getCurrentUser().uid
+					)
+			},
+			canAddSigner(file) {
+				file = this.getFile(file)
+				return this.canRequestSign
+					&& (
+						!Object.hasOwn(file, 'requested_by')
+						|| file.requested_by.userId === getCurrentUser().uid
+					)
+					&& !this.isPartialSigned(file)
+					&& !this.isFullSigned(file)
+			},
+			canSave(file) {
+				file = this.getFile(file)
+				return this.canRequestSign
+					&& (
+						!Object.hasOwn(file, 'requested_by')
+						|| file.requested_by.userId === getCurrentUser().uid
+					)
+					&& !this.isPartialSigned(file)
+					&& !this.isFullSigned(file)
+					&& file?.signers?.length > 0
+			},
+			getSubtitle() {
+				if (this.selectedNodeId === 0) {
+					return ''
+				}
+				const file = this.getFile()
+				if ((file?.requested_by?.userId ?? '').length === 0 || file?.request_date.length === 0) {
+					return ''
+				}
+				return t('libresign', 'Requested by {name}, at {date}', {
+					name: file.requested_by.userId,
+					date: Moment(Date.parse(file.request_date)).format('LL LTS'),
 				})
-		},
-		addUniqueIdentifierToAllSigners(signers) {
-			if (signers === undefined) {
-				return
-			}
-			signers.map(signer => this.addIdentifierToSigner(signer))
-		},
-		addIdentifierToSigner(signer) {
-			// generate unique code to new signer to be possible delete or edit
-			if ((signer.identify === undefined || signer.identify === '') && signer.signRequestId === undefined) {
-				signer.identify = btoa(JSON.stringify(signer))
-			}
-			if (signer.signRequestId) {
-				signer.identify = signer.signRequestId
-			}
-		},
-		signerUpdate(signer) {
-			this.addIdentifierToSigner(signer)
-			// Remove if already exists
-			for (let i = this.files[this.selectedNodeId].signers.length - 1; i >= 0; i--) {
-				if (this.files[this.selectedNodeId].signers[i].identify === signer.identify) {
-					this.files[this.selectedNodeId].signers.splice(i, 1)
-					break
-				}
-				if (this.files[this.selectedNodeId].signers[i].signRequestId === signer.identify) {
-					this.files[this.selectedNodeId].signers.splice(i, 1)
-					break
+			},
+			async hydrateFile(nodeId) {
+				if (Object.hasOwn(this.files[nodeId], 'uuid')) {
+					return
 				}
-			}
-			this.files[this.selectedNodeId].signers.push(signer)
-		},
-		async deleteSigner(signer) {
-			if (!isNaN(signer.signRequestId)) {
-				await axios.delete(generateOcsUrl('/apps/libresign/api/{apiVersion}/sign/file_id/{fileId}/{signRequestId}', {
-					apiVersion: 'v1',
-					fileId: this.selectedNodeId,
-					signRequestId: signer.signRequestId,
+				await axios.get(generateOcsUrl('/apps/libresign/api/v1/file/validate/file_id/{fileId}', {
+					fileId: nodeId,
 				}))
-			}
-			set(
-				this.files[this.selectedNodeId],
-				'signers',
-				this.files[this.selectedNodeId].signers.filter((i) => i.identify !== signer.identify),
-			)
-		},
-		async getAllFiles(filter) {
-			const response = await axios.get(generateOcsUrl('/apps/libresign/api/v1/file/list'), { params: filter })
-			this.files = {}
-			response.data.ocs.data.data.forEach(file => {
-				this.addFile(file)
-			})
-			return this.files
-		},
-		filter(type) {
-			this.filterActive = type
-			if (type === 'pending') {
-				return Object.values(this.files).filter(
-					(a) => (a.status === 1 || a.status === 2)).sort(
-					(a, b) => (a.request_date < b.request_date) ? 1 : -1)
-			}
-			if (type === 'signed') {
-				return Object.values(this.files).filter(
-					(a) => (a.status === 3)).sort(
-					(a, b) => (a.request_date < b.request_date) ? 1 : -1)
-			}
-			if (type === 'all') {
-				this.filterActive = 'all'
-				return Object.values(this.files).sort((a, b) => (a.request_date < b.request_date) ? 1 : -1)
-			}
+					.then((response) => {
+						set(this.files, nodeId, response.data.ocs.data)
+						this.addUniqueIdentifierToAllSigners(this.files[nodeId].signers)
+					})
+					.catch(() => {
+						set(this.files[nodeId], 'signers', [])
+					})
+			},
+			addUniqueIdentifierToAllSigners(signers) {
+				if (signers === undefined) {
+					return
+				}
+				signers.map(signer => this.addIdentifierToSigner(signer))
+			},
+			addIdentifierToSigner(signer) {
+				// generate unique code to new signer to be possible delete or edit
+				if ((signer.identify === undefined || signer.identify === '') && signer.signRequestId === undefined) {
+					signer.identify = btoa(JSON.stringify(signer))
+				}
+				if (signer.signRequestId) {
+					signer.identify = signer.signRequestId
+				}
+			},
+			signerUpdate(signer) {
+				this.addIdentifierToSigner(signer)
+				// Remove if already exists
+				for (let i = this.getFile().signers.length - 1; i >= 0; i--) {
+					if (this.getFile().signers[i].identify === signer.identify) {
+						this.getFile().signers.splice(i, 1)
+						break
+					}
+					if (this.getFile().signers[i].signRequestId === signer.identify) {
+						this.getFile().signers.splice(i, 1)
+						break
+					}
+				}
+				this.getFile().signers.push(signer)
+			},
+			async deleteSigner(signer) {
+				if (!isNaN(signer.signRequestId)) {
+					await axios.delete(generateOcsUrl('/apps/libresign/api/{apiVersion}/sign/file_id/{fileId}/{signRequestId}', {
+						apiVersion: 'v1',
+						fileId: this.selectedNodeId,
+						signRequestId: signer.signRequestId,
+					}))
+				}
+				set(
+					this.files[this.selectedNodeId],
+					'signers',
+					this.files[this.selectedNodeId].signers.filter((i) => i.identify !== signer.identify),
+				)
+			},
+			async delete(file, deleteFile) {
+				file = this.getFile(file)
+				if (file?.uuid !== undefined) {
+					const url = deleteFile
+						? '/apps/libresign/api/v1/file/file_id/{fileId}'
+						: '/apps/libresign/api/v1/sign/file_id/{fileId}'
+					await axios.delete(generateOcsUrl(url, {
+						fileId: file.nodeId,
+					}))
+				}
+				del(this.files, file.nodeId)
+
+				const index = this.ordered.indexOf(file.nodeId)
+				if (index > -1) {
+					this.ordered.splice(index, 1)
+				}
+			},
+			async getAllFiles(filter) {
+				if (this.loading || this.loadedAll) {
+					return this.files
+				}
+				this.loading = true
+				const url = !this.paginationNextUrl
+					? generateOcsUrl('/apps/libresign/api/v1/file/list')
+					: this.paginationNextUrl
+
+				const urlObj = new URL(url)
+				const params = new URLSearchParams(urlObj.search)
+
+				if (filter) {
+					for (const [key, value] of Object.entries(filter)) {
+						params.set(key, value)
+					}
+				}
+				const { chips } = useFiltersStore()
+				if (chips?.status) {
+					chips.status.forEach(status => {
+						params.append('status[]', status.id)
+					})
+				}
+				if (chips?.modified?.length) {
+					const { start, end } = chips.modified[0]
+					params.set('start', Math.floor(start / 1000))
+					params.set('end', Math.floor(end / 1000))
+				}
+				const { sortingMode, sortingDirection } = useFilesSortingStore()
+				if (sortingMode) {
+					params.set('sortBy', sortingMode)
+				}
+				if (sortingDirection) {
+					params.set('sortDirection', sortingDirection)
+				}
+
+				urlObj.search = params.toString()
+
+				const response = await axios.get(urlObj.toString())
+
+				if (!this.paginationNextUrl) {
+					this.files = {}
+					this.ordered = []
+				}
+				this.paginationNextUrl = response.data.ocs.data.pagination.next
+				this.loadedAll = !this.paginationNextUrl
+				response.data.ocs.data.data.forEach((file) => {
+					this.addFile(file)
+				})
+				this.loading = false
+				emit('libresign:files:updated')
+				return this.files
+			},
+			async updateAllFiles() {
+				this.paginationNextUrl = null
+				this.loadedAll = false
+				return this.getAllFiles()
+			},
+			filesSorted() {
+				return this.ordered.map(key => this.files[key])
+			},
 		},
-	},
-})
+	})
+
+	const filesStore = store(...args)
+
+	// Make sure we only register the listeners once
+	if (!filesStore._initialized) {
+		subscribe('libresign:filters:update', filesStore.updateAllFiles)
+		subscribe('libresign:sorting:update', filesStore.updateAllFiles)
+		filesStore._initialized = true
+	}
+
+	return filesStore
+}
diff --git a/src/store/filesSorting.js b/src/store/filesSorting.js
new file mode 100644
index 0000000000..7e89b66170
--- /dev/null
+++ b/src/store/filesSorting.js
@@ -0,0 +1,36 @@
+/**
+ * SPDX-FileCopyrightText: 2024 LibreCode coop and contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { defineStore } from 'pinia'
+
+import { emit } from '@nextcloud/event-bus'
+
+const DEFAULT_SORTING_DIRECTION = 'asc'
+
+export const useFilesSortingStore = defineStore('filesSorting', {
+	state: () => ({
+		sortingMode: 'name',
+		sortingDirection: DEFAULT_SORTING_DIRECTION,
+	}),
+
+	actions: {
+		toggleSortingDirection() {
+			this.sortingDirection = this.sortingDirection === 'asc' ? 'desc' : 'asc'
+			emit('libresign:sorting:update')
+		},
+
+		toggleSortBy(key) {
+			// If we're already sorting by this key, flip the direction
+			if (this.sortingMode === key) {
+				this.toggleSortingDirection()
+				return
+			}
+			// else sort ASC by this new key
+			this.sortingMode = key
+			this.sortingDirection = DEFAULT_SORTING_DIRECTION
+			emit('libresign:sorting:update')
+		},
+	},
+})
diff --git a/src/store/filters.js b/src/store/filters.js
new file mode 100644
index 0000000000..750d1f694b
--- /dev/null
+++ b/src/store/filters.js
@@ -0,0 +1,30 @@
+/**
+ * SPDX-FileCopyrightText: 2024 LibreCode coop and contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { defineStore } from 'pinia'
+
+import { emit } from '@nextcloud/event-bus'
+
+import logger from '../helpers/logger.js'
+
+export const useFiltersStore = defineStore('filter', {
+	state: () => ({
+		chips: {},
+	}),
+
+	getters: {
+		activeChips(state) {
+			return Object.values(state.chips).flat()
+		},
+	},
+
+	actions: {
+		onFilterUpdateChips(event) {
+			this.chips = { ...this.chips, [event.id]: [...event.detail] }
+			emit('libresign:filters:update')
+			logger.debug('File list filter chips updated', { chips: event.detail })
+		},
+	},
+})
diff --git a/src/store/userconfig.js b/src/store/userconfig.js
new file mode 100644
index 0000000000..7e70f4808f
--- /dev/null
+++ b/src/store/userconfig.js
@@ -0,0 +1,18 @@
+/**
+ * SPDX-FileCopyrightText: 2024 LibreCode coop and contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { defineStore } from 'pinia'
+import { set } from 'vue'
+
+export const useUserConfigStore = defineStore('userconfig', {
+	state: () => ({
+		grid_view: true,
+	}),
+	actions: {
+		async update(key, value) {
+			set(this, key, value)
+		},
+	},
+})
diff --git a/src/types/openapi/openapi-full.ts b/src/types/openapi/openapi-full.ts
index 64966b8c1c..769b00c353 100644
--- a/src/types/openapi/openapi-full.ts
+++ b/src/types/openapi/openapi-full.ts
@@ -153,6 +153,26 @@ export type paths = {
         patch?: never;
         trace?: never;
     };
+    "/index.php/apps/libresign/p/sign/{uuid}/pdf": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * Sign page to authenticated signer
+         * @description The path is used only by frontend
+         */
+        get: operations["page-sign-pdf"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/index.php/apps/libresign/p/sign/{uuid}": {
         parameters: {
             query?: never;
@@ -1419,6 +1439,29 @@ export interface operations {
             };
         };
     };
+    "page-sign-pdf": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description Sign request uuid */
+                uuid: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description OK */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/html": string;
+                };
+            };
+        };
+    };
     "page-sign": {
         parameters: {
             query?: never;
@@ -2453,8 +2496,12 @@ export interface operations {
                 signer_uuid?: string | null;
                 /** @description The nodeId (also called fileId). Is the id of a file at Nextcloud */
                 nodeId?: string | null;
-                /** @description Status could be one of 0 = draft, 1 = able to sign, 2 = partial signed, 3 = signed, 4 = deleted. */
-                status?: number | null;
+                /** @description Status could be none or many of 0 = draft, 1 = able to sign, 2 = partial signed, 3 = signed, 4 = deleted. */
+                "status[]"?: number[] | null;
+                /** @description Start date of signature request (UNIX timestamp) */
+                start?: number | null;
+                /** @description End date of signature request (UNIX timestamp) */
+                end?: number | null;
             };
             header: {
                 /** @description Required to be true for the API request to pass */
diff --git a/src/types/openapi/openapi.ts b/src/types/openapi/openapi.ts
index 2f1422039c..256118bfd9 100644
--- a/src/types/openapi/openapi.ts
+++ b/src/types/openapi/openapi.ts
@@ -153,6 +153,26 @@ export type paths = {
         patch?: never;
         trace?: never;
     };
+    "/index.php/apps/libresign/p/sign/{uuid}/pdf": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * Sign page to authenticated signer
+         * @description The path is used only by frontend
+         */
+        get: operations["page-sign-pdf"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/index.php/apps/libresign/p/sign/{uuid}": {
         parameters: {
             query?: never;
@@ -1273,6 +1293,29 @@ export interface operations {
             };
         };
     };
+    "page-sign-pdf": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description Sign request uuid */
+                uuid: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description OK */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/html": string;
+                };
+            };
+        };
+    };
     "page-sign": {
         parameters: {
             query?: never;
@@ -2307,8 +2350,12 @@ export interface operations {
                 signer_uuid?: string | null;
                 /** @description The nodeId (also called fileId). Is the id of a file at Nextcloud */
                 nodeId?: string | null;
-                /** @description Status could be one of 0 = draft, 1 = able to sign, 2 = partial signed, 3 = signed, 4 = deleted. */
-                status?: number | null;
+                /** @description Status could be none or many of 0 = draft, 1 = able to sign, 2 = partial signed, 3 = signed, 4 = deleted. */
+                "status[]"?: number[] | null;
+                /** @description Start date of signature request (UNIX timestamp) */
+                start?: number | null;
+                /** @description End date of signature request (UNIX timestamp) */
+                end?: number | null;
             };
             header: {
                 /** @description Required to be true for the API request to pass */
diff --git a/src/views/FilesList/FileEntry/FileEntry.vue b/src/views/FilesList/FileEntry/FileEntry.vue
new file mode 100644
index 0000000000..dc7512ba02
--- /dev/null
+++ b/src/views/FilesList/FileEntry/FileEntry.vue
@@ -0,0 +1,72 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 LibreCode coop and contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<tr class="files-list__row"
+		@contextmenu="onRightClick">
+		<td class="files-list__row-name"
+			@click="openDetailsIfAvailable">
+			<FileEntryPreview :source="source" />
+			<FileEntryName ref="name"
+				:basename="source.name"
+				:extension="'.pdf'" />
+		</td>
+
+		<!-- Status -->
+		<td class="files-list__row-status"
+			@click="openDetailsIfAvailable">
+			<FileEntryStatus :status="source.status"
+				:status-text="source.statusText" />
+		</td>
+
+		<!-- Mtime -->
+		<td :style="mtimeOpacity"
+			class="files-list__row-mtime"
+			@click="openDetailsIfAvailable">
+			<NcDateTime v-if="source.request_date" :timestamp="mtime" :ignore-seconds="true" />
+		</td>
+
+		<!-- Actions -->
+		<FileEntryActions ref="actions"
+			:class="`files-list__row-actions-${source.nodeId}`"
+			:opened.sync="openedMenu"
+			:source="source"
+			:loading="loading" />
+	</tr>
+</template>
+
+<script>
+import NcDateTime from '@nextcloud/vue/dist/Components/NcDateTime.js'
+
+import FileEntryActions from './FileEntryActions.vue'
+import FileEntryName from './FileEntryName.vue'
+import FileEntryPreview from './FileEntryPreview.vue'
+import FileEntryStatus from './FileEntryStatus.vue'
+
+import FileEntryMixin from './FileEntryMixin.js'
+import { useActionsMenuStore } from '../../../store/actionsmenu.js'
+import { useFilesStore } from '../../../store/files.js'
+
+export default {
+	name: 'FileEntry',
+	components: {
+		NcDateTime,
+		FileEntryActions,
+		FileEntryName,
+		FileEntryPreview,
+		FileEntryStatus,
+	},
+	mixins: [
+		FileEntryMixin,
+	],
+	setup() {
+		const actionsMenuStore = useActionsMenuStore()
+		const filesStore = useFilesStore()
+		return {
+			actionsMenuStore,
+			filesStore,
+		}
+	},
+}
+</script>
diff --git a/src/views/FilesList/FileEntry/FileEntryActions.vue b/src/views/FilesList/FileEntry/FileEntryActions.vue
new file mode 100644
index 0000000000..744ab69d55
--- /dev/null
+++ b/src/views/FilesList/FileEntry/FileEntryActions.vue
@@ -0,0 +1,230 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 LibreCode coop and LibreCode contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<td class="files-list__row-actions">
+		<!-- Menu actions -->
+		<NcActions ref="actionsMenu"
+			:force-name="true"
+			type="tertiary"
+			:open.sync="openedMenu"
+			@close="openedMenu = null">
+			<!-- Default actions list-->
+			<NcActionButton v-for="action in visibleMenu"
+				:key="action.id"
+				:ref="`action-${action.id}`"
+				:class="{
+					[`files-list__row-action-${action.id}`]: true,
+				}"
+				:aria-label="action.title"
+				:title="action.title"
+				@click="onActionClick(action)">
+				<template #icon>
+					<NcLoadingIcon v-if="loading === action.id" :size="18" />
+					<NcIconSvgWrapper v-else :svg="action.iconSvgInline" />
+				</template>
+				{{ action.title }}
+			</NcActionButton>
+		</NcActions>
+		<NcDialog v-if="confirmDelete"
+			:name="t('libresign', 'Confirm')"
+			:can-close="!deleting"
+			:open.sync="confirmDelete">
+			{{ t('libresign', 'The signature request will be deleted. Do you confirm this action?') }}
+			<NcCheckboxRadioSwitch :checked.sync="deleteFile" type="switch">
+				{{ t('libresign', 'Also delete the file.') }}
+			</NcCheckboxRadioSwitch>
+			<template #actions>
+				<NcButton type="primary"
+					@click="doDelete()">
+					<template #icon>
+						<NcLoadingIcon v-if="deleting" :size="20" />
+					</template>
+					{{ t('libresign', 'Ok') }}
+				</NcButton>
+				<NcButton type="secondary"
+					@click="confirmDelete = false">
+					{{ t('libresign', 'Cancel') }}
+				</NcButton>
+			</template>
+		</NcDialog>
+	</td>
+</template>
+
+<script>
+import svgDelete from '@mdi/svg/svg/delete.svg?raw'
+import svgSignature from '@mdi/svg/svg/signature.svg?raw'
+import svgTextBoxCheck from '@mdi/svg/svg/text-box-check.svg?raw'
+
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
+import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
+import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
+import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
+
+import { useActionsMenuStore } from '../../../store/actionsmenu.js'
+import { useFilesStore } from '../../../store/files.js'
+import { useSidebarStore } from '../../../store/sidebar.js'
+import { useSignStore } from '../../../store/sign.js'
+
+export default {
+	name: 'FileEntryActions',
+	components: {
+		NcActionButton,
+		NcActions,
+		NcButton,
+		NcCheckboxRadioSwitch,
+		NcDialog,
+		NcIconSvgWrapper,
+		NcLoadingIcon,
+	},
+	props: {
+		opened: {
+			type: Boolean,
+			default: false,
+		},
+		source: {
+			type: Object,
+			required: true,
+		},
+		loading: {
+			type: Boolean,
+			required: true,
+		},
+	},
+	setup() {
+		const actionsMenuStore = useActionsMenuStore()
+		const filesStore = useFilesStore()
+		const sidebarStore = useSidebarStore()
+		const signStore = useSignStore()
+		return {
+			actionsMenuStore,
+			filesStore,
+			sidebarStore,
+			signStore,
+		}
+	},
+	data() {
+		return {
+			enabledMenuActions: [],
+			confirmDelete: false,
+			deleteFile: true,
+			deleting: false,
+		}
+	},
+	computed: {
+		openedMenu: {
+			get() {
+				return this.actionsMenuStore.opened === this.source.nodeId
+			},
+			set(opened) {
+				this.actionsMenuStore.opened = opened ? this.source.nodeId : null
+			},
+		},
+		visibleMenu() {
+			return this.enabledMenuActions.filter(action => this.visibleIf(action))
+		},
+	},
+	mounted() {
+		this.registerAction({
+			id: 'validate',
+			title: t('libresign', 'Validate'),
+			iconSvgInline: svgTextBoxCheck,
+		})
+		this.registerAction({
+			id: 'sign',
+			title: t('libresign', 'Sign'),
+			iconSvgInline: svgSignature,
+		})
+		this.registerAction({
+			id: 'delete',
+			title: t('libresign', 'Delete'),
+			iconSvgInline: svgDelete,
+		})
+	},
+	methods: {
+		visibleIf(action) {
+			const file = this.filesStore.files[this.source.nodeId]
+			let visible = false
+			if (action.id === 'sign') {
+				visible = this.filesStore.canSign(file)
+			} else if (action.id === 'validate') {
+				visible = this.filesStore.canValidate(file)
+			} else if (action.id === 'delete') {
+				visible = this.filesStore.canDelete(file)
+			}
+			return visible
+		},
+		async onActionClick(action) {
+			this.openedMenu = null
+			this.sidebarStore.hideSidebar()
+			if (action.id === 'sign') {
+				const signUuid = this.source.signers
+					.reduce((accumulator, signer) => {
+						if (signer.me) {
+							return signer.sign_uuid
+						}
+						return accumulator
+					}, '')
+				this.signStore.setDocumentToSign(this.source)
+				this.$router.push({
+					name: 'SignPDF',
+					params: {
+						uuid: signUuid,
+					},
+				})
+				this.filesStore.selectFile(this.source.nodeId)
+			} else if (action.id === 'validate') {
+				this.$router.push({
+					name: 'ValidationFile',
+					params: {
+						uuid: this.source.uuid,
+					},
+				})
+			} else if (action.id === 'delete') {
+				this.confirmDelete = true
+			}
+		},
+		registerAction(action) {
+			this.enabledMenuActions = [...this.enabledMenuActions, action]
+		},
+		async doDelete() {
+			this.deleting = true
+			await this.filesStore.delete(this.source, this.deleteFile)
+			this.deleting = false
+		},
+	},
+}
+</script>
+
+<style lang="scss">
+// Allow right click to define the position of the menu
+// only if defined
+main.app-content[style*="mouse-pos-x"] .v-popper__popper {
+	transform: translate3d(var(--mouse-pos-x), var(--mouse-pos-y), 0px) !important;
+
+	// If the menu is too close to the bottom, we move it up
+	&[data-popper-placement="top"] {
+		// 34px added to align with the top of the cursor
+		transform: translate3d(var(--mouse-pos-x), calc(var(--mouse-pos-y) - 50vh + 34px), 0px) !important;
+	}
+	// Hide arrow if floating
+	.v-popper__arrow-container {
+		display: none;
+	}
+}
+</style>
+
+<style lang="scss" scoped>
+:deep(.button-vue--icon-and-text, .files-list__row-action-sharing-status) {
+	.button-vue__text {
+		color: var(--color-primary-element);
+	}
+	.button-vue__icon {
+		color: var(--color-primary-element);
+	}
+}
+</style>
diff --git a/src/views/FilesList/FileEntry/FileEntryGrid.vue b/src/views/FilesList/FileEntry/FileEntryGrid.vue
new file mode 100644
index 0000000000..e810debe8f
--- /dev/null
+++ b/src/views/FilesList/FileEntry/FileEntryGrid.vue
@@ -0,0 +1,72 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 LibreCode coop and contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<tr class="files-list__row"
+		@contextmenu="onRightClick">
+		<td class="files-list__row-name"
+			@click="openDetailsIfAvailable">
+			<FileEntryPreview :source="source" />
+			<FileEntryName ref="name"
+				:basename="source.name"
+				:extension="'.pdf'" />
+		</td>
+
+		<!-- Status -->
+		<td class="files-list__row-status"
+			@click="openDetailsIfAvailable">
+			<FileEntryStatus :status="source.status"
+				:status-text="source.statusText" />
+		</td>
+
+		<!-- Mtime -->
+		<td :style="mtimeOpacity"
+			class="files-list__row-mtime"
+			@click="openDetailsIfAvailable">
+			<NcDateTime v-if="source.request_date" :timestamp="mtime" :ignore-seconds="true" />
+		</td>
+
+		<!-- Actions -->
+		<FileEntryActions ref="actions"
+			:class="`files-list__row-actions-${source.nodeId}`"
+			:opened.sync="openedMenu"
+			:source="source"
+			:loading="loading" />
+	</tr>
+</template>
+
+<script>
+import NcDateTime from '@nextcloud/vue/dist/Components/NcDateTime.js'
+
+import FileEntryActions from './FileEntryActions.vue'
+import FileEntryName from './FileEntryName.vue'
+import FileEntryPreview from './FileEntryPreview.vue'
+import FileEntryStatus from './FileEntryStatus.vue'
+
+import FileEntryMixin from './FileEntryMixin.js'
+import { useActionsMenuStore } from '../../../store/actionsmenu.js'
+import { useFilesStore } from '../../../store/files.js'
+
+export default {
+	name: 'FileEntryGrid',
+	components: {
+		NcDateTime,
+		FileEntryActions,
+		FileEntryName,
+		FileEntryPreview,
+		FileEntryStatus,
+	},
+	mixins: [
+		FileEntryMixin,
+	],
+	setup() {
+		const actionsMenuStore = useActionsMenuStore()
+		const filesStore = useFilesStore()
+		return {
+			actionsMenuStore,
+			filesStore,
+		}
+	},
+}
+</script>
diff --git a/src/views/FilesList/FileEntry/FileEntryMixin.js b/src/views/FilesList/FileEntry/FileEntryMixin.js
new file mode 100644
index 0000000000..8cbcbd6985
--- /dev/null
+++ b/src/views/FilesList/FileEntry/FileEntryMixin.js
@@ -0,0 +1,75 @@
+/**
+ * SPDX-FileCopyrightText: 2021 LibreCode coop and LibreCode contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+export default {
+	props: {
+		source: {
+			type: Object,
+			required: true,
+		},
+		loading: {
+			type: Boolean,
+			required: true,
+		},
+	},
+	computed: {
+		mtime() {
+			return Date.parse(this?.source?.request_date)
+		},
+
+		openedMenu: {
+			get() {
+				return this.actionsMenuStore.opened === this.source.nodeId
+			},
+			set(opened) {
+				this.actionsMenuStore.opened = opened ? this.source.nodeId : null
+			},
+		},
+
+		mtimeOpacity() {
+			const maxOpacityTime = 31 * 24 * 60 * 60 * 1000 // 31 days
+
+			const mtime = this.mtime?.getTime?.()
+			if (!mtime) {
+				return {}
+			}
+
+			// 1 = today, 0 = 31 days ago
+			const ratio = Math.round(Math.min(100, 100 * (maxOpacityTime - (Date.now() - mtime)) / maxOpacityTime))
+			if (ratio < 0) {
+				return {}
+			}
+			return {
+				color: `color-mix(in srgb, var(--color-main-text) ${ratio}%, var(--color-text-maxcontrast))`,
+			}
+		},
+	},
+	methods: {
+		// Open the actions menu on right click
+		onRightClick(event) {
+			// If already opened, fallback to default browser
+			if (this.openedMenu) {
+				return
+			}
+
+			// Reset any right menu position potentially set
+			const root = this.$el?.closest('main.app-content')
+			root.style.removeProperty('--mouse-pos-x')
+			root.style.removeProperty('--mouse-pos-y')
+
+			this.actionsMenuStore.opened = this.source.nodeId
+
+			// Prevent any browser defaults
+			event.preventDefault()
+			event.stopPropagation()
+		},
+
+		openDetailsIfAvailable(event) {
+			event.preventDefault()
+			event.stopPropagation()
+			this.filesStore.selectFile(this.source.nodeId)
+		},
+	},
+}
diff --git a/src/views/FilesList/FileEntry/FileEntryName.vue b/src/views/FilesList/FileEntry/FileEntryName.vue
new file mode 100644
index 0000000000..bb2ddc4baa
--- /dev/null
+++ b/src/views/FilesList/FileEntry/FileEntryName.vue
@@ -0,0 +1,74 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 LibreCode coop and LibreCode contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<component :is="linkTo.is"
+		ref="basename"
+		class="files-list__row-name-link"
+		v-bind="linkTo.params"
+		dir="auto">
+		<!-- Filename -->
+		<span class="files-list__row-name-text">
+			<!-- Keep the filename stuck to the extension to avoid whitespace rendering issues-->
+			<span class="files-list__row-name-" v-text="basename" />
+			<span class="files-list__row-name-ext" v-text="extension" />
+		</span>
+	</component>
+</template>
+
+<script>
+
+import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
+
+export default {
+	name: 'FileEntryName',
+
+	components: {
+		NcTextField,
+	},
+
+	props: {
+		/**
+		 * The filename without extension
+		 */
+		basename: {
+			type: String,
+			required: true,
+		},
+		/**
+		 * The extension of the filename
+		 */
+		extension: {
+			type: String,
+			required: true,
+		},
+	},
+
+	computed: {
+		linkTo() {
+			return {
+				is: 'button',
+				params: {
+					'aria-label': this.basename,
+					title: this.basename,
+					tabindex: '0',
+				},
+			}
+		},
+	},
+}
+</script>
+
+<style scoped lang="scss">
+button.files-list__row-name-link {
+	background-color: unset;
+	border: none;
+	font-weight: normal;
+
+	&:active {
+		// No active styles - handled by the row entry
+		background-color: unset !important;
+	}
+}
+</style>
diff --git a/src/views/FilesList/FileEntry/FileEntryPreview.vue b/src/views/FilesList/FileEntry/FileEntryPreview.vue
new file mode 100644
index 0000000000..d9774d7820
--- /dev/null
+++ b/src/views/FilesList/FileEntry/FileEntryPreview.vue
@@ -0,0 +1,90 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 LibreCode coop and LibreCode contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<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/FileEntry/FileEntryStatus.vue b/src/views/FilesList/FileEntry/FileEntryStatus.vue
new file mode 100644
index 0000000000..349a445df1
--- /dev/null
+++ b/src/views/FilesList/FileEntry/FileEntryStatus.vue
@@ -0,0 +1,85 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 LibreCode coop and LibreCode contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<div class="enDot">
+		<div :class="statusText !== 'none' ? 'dot ' + statusToClass(status) : '' "
+			:title="statusText !== 'none' ? statusText : ''" />
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'FileEntryStatus',
+	props: {
+		statusText: {
+			type: String,
+			required: true,
+			default: 'none',
+		},
+		status: {
+			type: Number,
+			required: true,
+			default: 0,
+		},
+	},
+	methods: {
+		statusToClass(status) {
+			switch (Number(status)) {
+			case 0:
+				return 'no-signers'
+			case 1:
+			case 2:
+				return 'pending'
+			case 3:
+				return 'signed'
+			default:
+				return ''
+			}
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.enDot{
+	--dot-size: 10px;
+
+	display: flex;
+	flex-direction: row;
+	align-content: center;
+	margin: 5px;
+	max-width: 100%;
+	align-items: center;
+	justify-content: center;
+	cursor: inherit;
+
+	.dot{
+		flex: 1 0 var(--dot-size);
+		height: var(--dot-size);
+		border-radius: 50%;
+		margin-right: 10px;
+		cursor: inherit;
+	}
+
+	.signed{
+		background: #008000;
+	}
+
+	.no-signers{
+		background: #ff0000;
+	}
+
+	.pending {
+		background: #d67335
+	}
+
+	span{
+		font-size: 14px;
+		font-weight: normal;
+		text-align: center;
+		cursor: inherit;
+	}
+}
+</style>
diff --git a/src/views/FilesList/FileListFilter/FileListFilter.vue b/src/views/FilesList/FileListFilter/FileListFilter.vue
new file mode 100644
index 0000000000..9fe6ecd121
--- /dev/null
+++ b/src/views/FilesList/FileListFilter/FileListFilter.vue
@@ -0,0 +1,62 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 LibreCode coop and LibreCode contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<NcActions force-menu
+		:type="isActive ? 'secondary' : 'tertiary'"
+		:menu-name="filterName">
+		<template #icon>
+			<slot name="icon" />
+		</template>
+		<slot />
+
+		<template v-if="isActive">
+			<NcActionSeparator />
+			<NcActionButton class="files-list-filter__clear-button"
+				close-after-click
+				@click="$emit('reset-filter')">
+				{{ t('files', 'Clear filter') }}
+			</NcActionButton>
+		</template>
+	</NcActions>
+</template>
+
+<script>
+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 {
+	name: 'FileListFilter',
+	components: {
+		NcActions,
+		NcActionButton,
+		NcActionSeparator,
+	},
+	props: {
+		isActive: {
+			type: Boolean,
+			required: true,
+		},
+		filterName: {
+			type: String,
+			required: true,
+		},
+	},
+}
+</script>
+
+<style scoped lang="scss">
+.files-list-filter__clear-button :deep(.action-button__text) {
+	color: var(--color-error-text);
+}
+
+:deep(.button-vue) {
+	font-weight: normal !important;
+
+	* {
+		font-weight: normal !important;
+	}
+}
+</style>
diff --git a/src/views/FilesList/FileListFilter/FileListFilterModified.vue b/src/views/FilesList/FileListFilter/FileListFilterModified.vue
new file mode 100644
index 0000000000..2c6ef22cd3
--- /dev/null
+++ b/src/views/FilesList/FileListFilter/FileListFilterModified.vue
@@ -0,0 +1,141 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 LibreCode coop and LibreCode contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<FileListFilter :is-active="isActive"
+		:filter-name="t('libresign', 'Modified')"
+		@reset-filter="resetFilter">
+		<template #icon>
+			<NcIconSvgWrapper :path="mdiCalendarRange" />
+		</template>
+		<NcActionButton v-for="preset of timePresets"
+			:key="preset.id"
+			type="radio"
+			close-after-click
+			:model-value.sync="selectedOption"
+			:value="preset.id">
+			{{ preset.label }}
+		</NcActionButton>
+	</FileListFilter>
+</template>
+
+<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 FileListFilter from './FileListFilter.vue'
+
+import { useFiltersStore } from '../../../store/filters.js'
+
+const startOfToday = () => (new Date()).setHours(0, 0, 0, 0)
+const endOfToday = () => (new Date()).setHours(23, 59, 59, 999)
+
+export default {
+	name: 'FileListFilterModified',
+	components: {
+		FileListFilter,
+		NcActionButton,
+		NcIconSvgWrapper,
+	},
+	setup() {
+		const filtersStore = useFiltersStore()
+		return {
+			// icons used in template
+			mdiCalendarRange,
+			filtersStore,
+		}
+	},
+	data() {
+		return {
+			selectedOption: null,
+			timePresets: [
+				{
+					id: 'today',
+					label: t('libresign', 'Today'),
+					start: startOfToday(),
+					end: endOfToday(),
+				},
+				{
+					id: 'last-7',
+					label: t('libresign', 'Last 7 days'),
+					start: startOfToday() - (7 * 24 * 60 * 60 * 1000),
+					end: endOfToday(),
+				},
+				{
+					id: 'last-30',
+					label: t('libresign', 'Last 30 days'),
+					start: startOfToday() - (30 * 24 * 60 * 60 * 1000),
+					end: endOfToday(),
+				},
+				{
+					id: 'this-year',
+					label: t('libresign', 'This year ({year})', { year: (new Date()).getFullYear() }),
+					start: (new Date(startOfToday())).setMonth(0, 1),
+					end: endOfToday(),
+				},
+				{
+					id: 'last-year',
+					label: t('libresign', 'Last year ({year})', { year: (new Date()).getFullYear() - 1 }),
+					start: (new Date(startOfToday())).setFullYear((new Date()).getFullYear() - 1, 0, 1),
+					end: (new Date(startOfToday())).setMonth(0, 1),
+				},
+			],
+		}
+	},
+	computed: {
+		isActive() {
+			return this.selectedOption !== null
+		},
+		currentPreset() {
+			return this.timePresets.find(({ id }) => id === this.selectedOption) ?? null
+		},
+	},
+	watch: {
+		selectedOption() {
+			if (this.selectedOption === null) {
+				this.selectedOption = null
+				this.setPreset()
+			} else {
+				this.setPreset(this.currentPreset)
+
+			}
+		},
+	},
+	methods: {
+		setPreset(preset) {
+			const chips = []
+			if (preset) {
+				chips.push({
+					start: preset.start,
+					end: preset.end,
+					icon: calendarSvg,
+					text: preset.label,
+					onclick: () => this.setPreset(),
+				})
+			} else {
+				this.resetFilter()
+			}
+			this.filtersStore.onFilterUpdateChips({ detail: chips, id: 'modified' })
+		},
+		resetFilter() {
+			if (this.selectedOption !== null) {
+				this.selectedOption = null
+				this.timeRangeEnd = null
+				this.timeRangeStart = null
+			}
+		},
+	},
+}
+</script>
+
+<style scoped lang="scss">
+.files-list-filter-time {
+	&__clear-button :deep(.action-button__text) {
+		color: var(--color-error-text);
+	}
+}
+</style>
diff --git a/src/views/FilesList/FileListFilter/FileListFilterStatus.vue b/src/views/FilesList/FileListFilter/FileListFilterStatus.vue
new file mode 100644
index 0000000000..6f6b2c2443
--- /dev/null
+++ b/src/views/FilesList/FileListFilter/FileListFilterStatus.vue
@@ -0,0 +1,137 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 LibreCode coop and LibreCode contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<FileListFilter class="file-list-filter-status"
+		:is-active="isActive"
+		:filter-name="t('libresign', 'Status')"
+		@reset-filter="resetFilter">
+		<template #icon>
+			<NcIconSvgWrapper :path="mdiListStatus" />
+		</template>
+		<NcActionButton v-for="status of statusPresets"
+			:key="status.id"
+			type="checkbox"
+			:model-value="selectedOptions.includes(status)"
+			@click="toggleOption(status)">
+			<template #icon>
+				<NcIconSvgWrapper :svg="status.icon" />
+			</template>
+			{{ status.label }}
+		</NcActionButton>
+	</FileListFilter>
+</template>
+
+<script>
+import { mdiListStatus } from '@mdi/js'
+import svgFile from '@mdi/svg/svg/file.svg?raw'
+import svgFractionOneHalf from '@mdi/svg/svg/fraction-one-half.svg?raw'
+import svgSignatureFreehand from '@mdi/svg/svg/signature-freehand.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) => {
+	return svg.replace('<path ', `<path fill="${color}" `)
+}
+
+export default {
+	name: 'FileListFilterStatus',
+	components: {
+		FileListFilter,
+		NcActionButton,
+		NcIconSvgWrapper,
+	},
+	setup() {
+		const filtersStore = useFiltersStore()
+		return {
+			mdiListStatus,
+			filtersStore,
+		}
+	},
+	data() {
+		return {
+			selectedOptions: [],
+			statusPresets: [
+				{
+					id: 0,
+					icon: colorize(svgFile, '#E0E0E0'),
+					label: t('libresign', 'draft'),
+				},
+				{
+					id: 1,
+					icon: colorize(svgSignature, '#B2E0B2'),
+					label: t('libresign', 'available for signature'),
+				},
+				{
+					id: 2,
+					icon: colorize(svgFractionOneHalf, '#F0E68C'),
+					label: t('libresign', 'partially signed'),
+				},
+				{
+					id: 3,
+					icon: colorize(svgSignatureFreehand, '#A0C4FF'),
+					label: t('libresign', 'signed'),
+				},
+			],
+		}
+	},
+	computed: {
+		isActive() {
+			return this.selectedOptions.length > 0
+		},
+	},
+	watch: {
+		selectedOptions(newValue, oldValue) {
+			if (newValue.length === 0) {
+				this.setPreset()
+			} else {
+				this.setPreset(newValue)
+			}
+		},
+	},
+	methods: {
+		setPreset(presets) {
+			const chips = []
+			if (presets && presets.length > 0) {
+				for (const preset of presets) {
+					chips.push({
+						id: preset.id,
+						icon: preset.icon,
+						text: preset.label,
+						onclick: () => this.setPreset(presets.filter(({ id }) => id !== preset.id)),
+					})
+				}
+			} else {
+				this.resetFilter()
+			}
+			this.filtersStore.onFilterUpdateChips({ detail: chips, id: 'status' })
+		},
+		resetFilter() {
+			if (this.selectedOptions.length > 0) {
+				this.selectedOptions = []
+			}
+		},
+		toggleOption(option) {
+			const idx = this.selectedOptions.indexOf(option)
+			if (idx !== -1) {
+				this.selectedOptions.splice(idx, 1)
+			} else {
+				this.selectedOptions.push(option)
+			}
+		},
+	},
+}
+</script>
+
+<style>
+.file-list-filter-status {
+	max-width: 220px;
+}
+</style>
diff --git a/src/views/FilesList/FileListFilters.vue b/src/views/FilesList/FileListFilters.vue
new file mode 100644
index 0000000000..4dab95821a
--- /dev/null
+++ b/src/views/FilesList/FileListFilters.vue
@@ -0,0 +1,80 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 LibreCode coop and LibreCode contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<div class="file-list-filters">
+		<div class="file-list-filters__filter">
+			<div class="file-list-filters__filter">
+				<FileListFilterModified />
+				<FileListFilterStatus />
+			</div>
+		</div>
+		<ul v-if="filtersStore.activeChips.length > 0" class="file-list-filters__active" :aria-label="t('libresign', 'Active filters')">
+			<li v-for="(chip, index) of filtersStore.activeChips" :key="index">
+				<NcChip :aria-label-close="t('libresign', 'Remove filter')"
+					:icon-svg="chip.icon"
+					:text="chip.text"
+					@close="chip.onclick">
+					<template v-if="chip.user" #icon>
+						<NcAvatar disable-menu
+							:show-user-status="false"
+							:size="24"
+							:user="chip.user" />
+					</template>
+				</NcChip>
+			</li>
+		</ul>
+	</div>
+</template>
+
+<script>
+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 {
+	name: 'FileListFilters',
+	components: {
+		NcChip,
+		NcAvatar,
+		FileListFilterModified,
+		FileListFilterStatus,
+	},
+	setup() {
+		const filtersStore = useFiltersStore()
+		return { filtersStore }
+	},
+}
+</script>
+
+<style scoped lang="scss">
+.file-list-filters {
+	display: flex;
+	flex-direction: column;
+	gap: var(--default-grid-baseline);
+	height: 100%;
+	width: 100%;
+
+	&__filter {
+		display: flex;
+		align-items: start;
+		justify-content: start;
+		gap: calc(var(--default-grid-baseline, 4px) * 2);
+
+		> * {
+			flex: 0 1 fit-content;
+		}
+	}
+
+	&__active {
+		display: flex;
+		flex-direction: row;
+		gap: calc(var(--default-grid-baseline, 4px) * 2);
+	}
+}
+</style>
diff --git a/src/views/FilesList/FilesList.vue b/src/views/FilesList/FilesList.vue
new file mode 100644
index 0000000000..09b4c92737
--- /dev/null
+++ b/src/views/FilesList/FilesList.vue
@@ -0,0 +1,455 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 LibreCode coop and LibreCode contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<NcAppContent :page-heading="t('libresign', 'Files')">
+		<div class="files-list__header">
+			<NcBreadcrumbs class="files-list__breadcrumbs">
+				<NcBreadcrumb :name="t('libresign', 'Files')"
+					:title="t('libresign', 'Files')"
+					:exact="true"
+					:force-icon-text="true"
+					:to="{ name: 'fileslist' }"
+					:aria-description="t('libresign', 'Files')"
+					:disable-drop="true"
+					@click.native="refresh()">
+					<template #icon>
+						<NcIconSvgWrapper :size="20"
+							:svg="viewIcon" />
+					</template>
+				</NcBreadcrumb>
+				<template #actions>
+					<NcActions :menu-name="t('libresign', 'Request')"
+						:open.sync="openedMenu">
+						<template #icon>
+							<PlusIcon :size="20" />
+						</template>
+						<NcActionButton @click="showModalUploadFromUrl()">
+							<template #icon>
+								<LinkIcon :size="20" />
+							</template>
+							{{ t('libresign', 'Upload from URL') }}
+						</NcActionButton>
+						<NcActionButton @click="showFilePicker = true">
+							<template #icon>
+								<FolderIcon :size="20" />
+							</template>
+							{{ t('libresign', 'Choose from Files') }}
+						</NcActionButton>
+						<NcActionButton @click="uploadFile">
+							<template #icon>
+								<NcLoadingIcon v-if="isUploading" :size="20" />
+								<UploadIcon v-else :size="20" />
+							</template>
+							{{ t('libresign', 'Upload') }}
+						</NcActionButton>
+					</NcActions>
+				</template>
+			</NcBreadcrumbs>
+
+			<NcLoadingIcon v-if="isRefreshing" class="files-list__refresh-icon" />
+
+			<NcButton :aria-label="gridViewButtonLabel"
+				:title="gridViewButtonLabel"
+				class="files-list__header-grid-button"
+				type="tertiary"
+				@click="toggleGridView">
+				<template #icon>
+					<ListViewIcon v-if="userConfigStore.grid_view" />
+					<ViewGridIcon v-else />
+				</template>
+			</NcButton>
+		</div>
+		<NcLoadingIcon v-if="loading && !isRefreshing"
+			class="files-list__loading-icon"
+			:size="38"
+			:name="t('libresign', 'Loading …')" />
+		<NcEmptyContent v-else-if="!loading && isEmptyDir"
+			:name="t('libresign', 'There are no documents')"
+			:description="t('libresign', 'Choose the file to request signatures.')">
+			<template #icon>
+				<FolderIcon />
+			</template>
+		</NcEmptyContent>
+		<FilesListVirtual v-else
+			:nodes="dirContentsSorted"
+			:loading="loading" />
+		<FilePicker v-if="showFilePicker"
+			:name="t('libresign', 'Select your file')"
+			:multiselect="false"
+			:buttons="filePickerButtons"
+			:mimetype-filter="['application/pdf']"
+			@close="showFilePicker = false" />
+		<NcDialog v-if="modalUploadFromUrl"
+			:name="t('libresign', 'URL of a PDF file')"
+			:can-close="!loading"
+			@closing="closeModalUploadFromUrl">
+			<NcNoteCard v-for="message in uploadUrlErrors"
+				:key="message"
+				type="error">
+				{{ message }}
+			</NcNoteCard>
+			<NcTextField :label="t('libresign', 'URL of a PDF file')"
+				:value.sync="pdfUrl">
+				<LinkIcon :size="20" />
+			</NcTextField>
+			<template #actions>
+				<NcButton :disabled="!canUploadFronUrl"
+					type="primary"
+					@click="uploadUrl">
+					{{ t('libresign', 'Send') }}
+					<template #icon>
+						<NcLoadingIcon v-if="loading" :size="20" />
+						<CloudUploadIcon v-else :size="20" />
+					</template>
+				</NcButton>
+			</template>
+		</NcDialog>
+	</NcAppContent>
+</template>
+
+<script>
+
+import HomeSvg from '@mdi/svg/svg/home.svg?raw'
+
+import CloudUploadIcon from 'vue-material-design-icons/CloudUpload.vue'
+import FolderIcon from 'vue-material-design-icons/Folder.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 axios from '@nextcloud/axios'
+import { FilePickerVue as FilePicker } from '@nextcloud/dialogs/filepicker.js'
+import { subscribe, unsubscribe } from '@nextcloud/event-bus'
+import { generateOcsUrl } from '@nextcloud/router'
+
+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 NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.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 NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
+import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
+
+import FilesListVirtual from './FilesListVirtual.vue'
+
+import { filesService } from '../../domains/files/index.js'
+import { useActionsMenuStore } from '../../store/actionsmenu.js'
+import { useFilesStore } from '../../store/files.js'
+import { useSidebarStore } from '../../store/sidebar.js'
+import { useUserConfigStore } from '../../store/userconfig.js'
+
+const PDF_MIME_TYPE = 'application/pdf'
+
+const loadFileToBase64 = file => {
+	return new Promise((resolve, reject) => {
+		const reader = new FileReader()
+		reader.readAsDataURL(file)
+		reader.onload = () => resolve(reader.result)
+		reader.onerror = (error) => reject(error)
+	})
+}
+export default {
+	name: 'FilesList',
+	components: {
+		FilePicker,
+		NcDialog,
+		NcNoteCard,
+		NcTextField,
+		CloudUploadIcon,
+		NcAppContent,
+		NcButton,
+		PlusIcon,
+		ListViewIcon,
+		ViewGridIcon,
+		NcLoadingIcon,
+		FolderIcon,
+		UploadIcon,
+		LinkIcon,
+		NcBreadcrumb,
+		NcBreadcrumbs,
+		NcActions,
+		NcActionButton,
+		NcIconSvgWrapper,
+		FilesListVirtual,
+		NcEmptyContent,
+	},
+	setup() {
+		const actionsMenuStore = useActionsMenuStore()
+		const filesStore = useFilesStore()
+		const sidebarStore = useSidebarStore()
+		const userConfigStore = useUserConfigStore()
+		return {
+			actionsMenuStore,
+			filesStore,
+			sidebarStore,
+			userConfigStore,
+		}
+	},
+	data() {
+		return {
+			modalUploadFromUrl: false,
+			showingFilePicker: false,
+			pdfUrl: '',
+			file: {},
+			signers: [],
+			uploadUrlErrors: [],
+			errors: [],
+			isUploading: false,
+			loading: false,
+			dirContentsFiltered: [],
+		}
+	},
+	computed: {
+		filePickerButtons() {
+			return [{
+				label: t('libresign', 'Choose'),
+				callback: (nodes) => this.handleFileChoose(nodes),
+				type: 'primary',
+			}]
+		},
+		canRequest() {
+			return this.signers.length > 0
+		},
+		canUploadFronUrl() {
+			if (this.loading) {
+				return false
+			}
+			try {
+				// eslint-disable-next-line no-new
+				new URL(this.pdfUrl)
+				return true
+			} catch (e) {
+				return false
+			}
+		},
+		openedMenu: {
+			get() {
+				return this.actionsMenuStore.opened === 'global'
+			},
+			set(opened) {
+				this.actionsMenuStore.opened = opened ? 'global' : null
+			},
+		},
+		showFilePicker: {
+			get() {
+				return this.showingFilePicker
+			},
+			set(state) {
+				this.showingFilePicker = state
+				if (state) {
+					this.openedMenu = false
+				}
+			},
+		},
+		viewIcon() {
+			return HomeSvg
+		},
+		gridViewButtonLabel() {
+			return this.userConfigStore.grid_view
+				? t('libresign', 'Switch to list view')
+				: t('libresign', 'Switch to grid view')
+		},
+		dirContentsSorted() {
+			if (!this.isEmptyDir) {
+				return []
+			}
+			return this.dirContentsFiltered
+		},
+		isEmptyDir() {
+			return this.filesStore.files.size === 0
+		},
+		isRefreshing() {
+			return !this.isEmptyDir
+				&& this.loading
+		},
+	},
+	async created() {
+		await this.filesStore.getAllFiles()
+	},
+	async mounted() {
+		subscribe('libresign:visible-elements-saved', this.closeSidebar)
+		this.filesStore.disableIdentifySigner()
+	},
+	beforeUnmount() {
+		unsubscribe('libresign:visible-elements-saved')
+		this.filesStore.selectFile()
+	},
+	methods: {
+		refresh() {
+			this.filesStore.updateAllFiles()
+		},
+		toggleGridView() {
+			this.userConfigStore.update('grid_view', !this.userConfigStore.grid_view)
+		},
+		closeSidebar() {
+			this.filesStore.selectFile()
+		},
+		showModalUploadFromUrl() {
+			this.actionsMenuStore.opened = false
+			this.modalUploadFromUrl = true
+		},
+		closeModalUploadFromUrl() {
+			this.cleanErrors()
+			this.modalUploadFromUrl = false
+		},
+		cleanErrors() {
+			this.uploadUrlErrors = []
+			this.errors = []
+		},
+		async uploadUrl() {
+			this.loading = true
+			this.cleanErrors()
+			await axios.post(generateOcsUrl('/apps/libresign/api/v1/file'), {
+				file: {
+					url: this.pdfUrl,
+				},
+			})
+				.then(({ data }) => {
+					this.filesStore.addFile({
+						nodeId: data.ocs.data.id,
+						name: data.ocs.data.name,
+					})
+					this.filesStore.selectFile(data.ocs.data.id)
+					this.closeModalUploadFromUrl()
+				})
+				.catch(({ response }) => {
+					this.uploadUrlErrors = [response.data.ocs.data.message]
+				})
+			this.loading = false
+		},
+		async upload(file) {
+			try {
+				const { name: original } = file
+
+				const name = original.split('.').slice(0, -1).join('.')
+
+				const data = await loadFileToBase64(file)
+
+				const res = await filesService.uploadFile({ name, file: data })
+
+				this.filesStore.addFile({
+					nodeId: res.id,
+					name: res.name,
+				})
+				this.filesStore.selectFile(res.id)
+				this.cleanErrors()
+			} catch (err) {
+				this.errors = [err.response.data.ocs.data.message]
+			}
+		},
+		uploadFile() {
+			this.loading = true
+			const input = document.createElement('input')
+			input.accept = PDF_MIME_TYPE
+			input.type = 'file'
+
+			input.onchange = async (ev) => {
+				const file = ev.target.files[0]
+
+				if (file) {
+					this.upload(file)
+				}
+
+				input.remove()
+			}
+
+			input.click()
+			this.loading = false
+		},
+		async handleFileChoose(nodes) {
+			const path = nodes[0]?.path
+			if (!path) {
+				return
+			}
+
+			await axios.post(generateOcsUrl('/apps/libresign/api/v1/file'), {
+				file: {
+					path,
+				},
+				name: path.match(/([^/]*?)(?:\.[^.]*)?$/)[1] ?? '',
+			})
+				.then(({ data }) => {
+					this.filesStore.addFile({
+						nodeId: data.ocs.data.id,
+						name: data.ocs.data.name,
+					})
+					this.filesStore.selectFile(data.ocs.data.id)
+					this.cleanErrors()
+				})
+				.catch(({ response }) => {
+					this.errors = [response.data.ocs.data.message]
+					this.loading = false
+				})
+		},
+	},
+}
+</script>
+
+<style scoped lang="scss">
+.app-content {
+	// Virtual list needs to be full height and is scrollable
+	display: flex;
+	overflow: hidden;
+	flex-direction: column;
+	max-height: 100%;
+	position: relative !important;
+}
+
+.files-list__breadcrumbs {
+	// Take as much space as possible
+	flex: 1 1 100% !important;
+	width: 100%;
+	height: 100%;
+	margin-block: 0;
+	margin-inline: 10px;
+	min-width: 0;
+
+	:deep() {
+		a {
+			cursor: pointer !important;
+		}
+	}
+
+	&--with-progress {
+		flex-direction: column !important;
+		align-items: flex-start !important;
+	}
+}
+
+.files-list {
+	&__header {
+		display: flex;
+		align-items: center;
+		// Do not grow or shrink (vertically)
+		flex: 0 0;
+		max-width: 100%;
+		// Align with the navigation toggle icon
+		margin-block: var(--app-navigation-padding, 4px);
+		margin-inline: calc(var(--default-clickable-area, 44px) + 2 * var(--app-navigation-padding, 4px)) var(--app-navigation-padding, 4px);
+
+		>* {
+			// Do not grow or shrink (horizontally)
+			flex: 0 0;
+		}
+	}
+
+	&__refresh-icon {
+		flex: 0 0 var(--default-clickable-area);
+		width: var(--default-clickable-area);
+		height: var(--default-clickable-area);
+	}
+
+	&__loading-icon {
+		margin: auto;
+	}
+}
+</style>
diff --git a/src/views/FilesList/FilesListTableHeader.vue b/src/views/FilesList/FilesListTableHeader.vue
new file mode 100644
index 0000000000..19211678b1
--- /dev/null
+++ b/src/views/FilesList/FilesListTableHeader.vue
@@ -0,0 +1,99 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 LibreCode coop and contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<tr class="files-list__row-head">
+		<!-- Columns display -->
+
+		<!-- Link to file -->
+		<th class="files-list__column files-list__row-name files-list__column--sortable"
+			:aria-sort="ariaSortForMode('basename')">
+			<!-- Icon or preview -->
+			<span class="files-list__row-icon" />
+
+			<!-- Name -->
+			<FilesListTableHeaderButton :name="t('files', 'Name')" mode="name" />
+		</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 FilesListTableHeaderButton from './FilesListTableHeaderButton.vue'
+
+export default {
+	name: 'FilesListTableHeader',
+
+	components: {
+		FilesListTableHeaderButton,
+	},
+
+	props: {
+		nodes: {
+			type: Array,
+			required: true,
+		},
+	},
+	data() {
+		return {
+			isAscSorting: false,
+			sortingMode: 'name',
+			columns: [
+				{
+					title: t('libresign', 'Status'),
+					id: 'status',
+					sort: true,
+				},
+				{
+					title: t('libresign', 'Created at'),
+					id: 'created_at',
+					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 0000000000..66f0e3c9da
--- /dev/null
+++ b/src/views/FilesList/FilesListTableHeaderButton.vue
@@ -0,0 +1,88 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 LibreCode coop and contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<NcButton :class="['files-list__column-sort-button', {
+			'files-list__column-sort-button--active': filesSortingStore.sortingMode === mode,
+			'files-list__column-sort-button--size': filesSortingStore.sortingMode === 'size',
+		}]"
+		:alignment="mode === 'size' ? 'end' : 'start-reverse'"
+		type="tertiary"
+		@click="filesSortingStore.toggleSortBy(mode)">
+		<template #icon>
+			<MenuUp v-if="filesSortingStore.sortingMode !== mode || filesSortingStore.sortingDirection === 'asc'" 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'
+
+import { useFilesSortingStore } from '../../store/filesSorting.js'
+
+export default {
+	name: 'FilesListTableHeaderButton',
+
+	components: {
+		MenuDown,
+		MenuUp,
+		NcButton,
+	},
+
+	props: {
+		name: {
+			type: String,
+			required: true,
+		},
+		mode: {
+			type: String,
+			required: true,
+		},
+	},
+
+	setup() {
+		const filesSortingStore = useFilesSortingStore()
+		return {
+			filesSortingStore,
+		}
+	},
+}
+</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
new file mode 100644
index 0000000000..6d13924bc1
--- /dev/null
+++ b/src/views/FilesList/FilesListVirtual.vue
@@ -0,0 +1,529 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 LibreCode coop and LibreCode contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<VirtualList :data-component="userConfigStore.grid_view ? FileEntryGrid : FileEntry"
+		:loading="loading">
+		<template #filters>
+			<FileListFilters />
+		</template>
+		<template #header>
+			<!-- Table header and sort buttons -->
+			<FilesListTableHeader ref="thead"
+				:nodes="nodes" />
+		</template>
+	</VirtualList>
+</template>
+
+<script>
+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,
+		// eslint-disable-next-line vue/no-unused-components
+		FileEntry,
+		// eslint-disable-next-line vue/no-unused-components
+		FileEntryGrid,
+	},
+	props: {
+		nodes: {
+			type: Array,
+			required: true,
+		},
+		loading: {
+			type: Boolean,
+			required: true,
+		},
+	},
+	setup() {
+		const filesStore = useFilesStore()
+		const userConfigStore = useUserConfigStore()
+		return {
+			filesStore,
+			userConfigStore,
+		}
+	},
+	data() {
+		return {
+			FileEntry,
+			FileEntryGrid,
+		}
+	},
+}
+</script>
+
+<style scoped lang="scss">
+.files-list {
+	--row-height: 55px;
+	--cell-margin: 14px;
+
+	--checkbox-padding: calc((var(--row-height) - var(--checkbox-size)) / 2);
+	--checkbox-size: 24px;
+	--clickable-area: var(--default-clickable-area);
+	--icon-preview-size: 32px;
+
+	--fixed-block-start-position: var(--default-clickable-area);
+
+	overflow: auto;
+	height: 100%;
+	will-change: scroll-position;
+
+	&:has(.file-list-filters__active) {
+		--fixed-block-start-position: calc(var(--default-clickable-area) + var(--default-grid-baseline) + var(--clickable-area-small));
+	}
+
+	& :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;
+			top: 0;
+			// ensure there is a background to hide the file list on scroll
+			background-color: var(--color-main-background);
+			z-index: 10;
+			// fixed the size
+			padding-inline: var(--row-height) var(--default-grid-baseline, 4px);
+			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;
+
+			button.files-list__row-name-link {
+				display: flex;
+				align-items: center;
+				text-align: start;
+				// Fill cell height and width
+				width: 100%;
+				height: 100%;
+				// Necessary for flex grow to work
+				min-width: 0;
+				margin: 0;
+				padding: 0;
+
+				// Already added to the inner text, see rule below
+				&:focus-visible {
+					outline: none !important;
+				}
+
+				// Keyboard indicator a11y
+				&:focus .files-list__row-name-text {
+					outline: var(--border-width-input-focused) solid var(--color-main-text) !important;
+					border-radius: var(--border-radius-element);
+				}
+				&:focus:not(:focus-visible) .files-list__row-name-text {
+					outline: none !important;
+				}
+			}
+
+			.files-list__row-name-text {
+				color: var(--color-main-text);
+				// Make some space for the outline
+				padding: var(--default-grid-baseline) calc(2 * var(--default-grid-baseline));
+				padding-inline-start: -10px;
+				// Align two name and ext
+				display: inline-flex;
+			}
+
+			.files-list__row-name-ext {
+				color: var(--color-text-maxcontrast);
+				// always show the extension
+				overflow: visible;
+			}
+		}
+
+		.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-mtime,
+		.files-list__row-status {
+			color: var(--color-text-maxcontrast);
+		}
+		.files-list__row-status {
+			width: calc(var(--row-height) * 1.5);
+			// Right align content/text
+			justify-content: flex-end;
+		}
+
+		.files-list__row-mtime {
+			width: calc(var(--row-height) * 2);
+		}
+
+		.files-list__row-column-custom {
+			width: calc(var(--row-height) * 2);
+		}
+	}
+
+}
+
+@media screen and (max-width: 512px) {
+	.files-list :deep(.files-list__filters) {
+		// Reduce padding on mobile
+		padding-inline: var(--default-grid-baseline, 4px);
+	}
+}
+
+</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 {
+		position: relative;
+		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-status {
+		position: absolute;
+		top: var(--item-padding);
+		inset-inline-end: var(--item-padding);
+		width: var(--clickable-area);
+		height: var(--clickable-area);
+	}
+
+	.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
new file mode 100644
index 0000000000..c9dd46320e
--- /dev/null
+++ b/src/views/FilesList/VirtualList.vue
@@ -0,0 +1,92 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 LibreCode coop and LibreCode contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<div class="files-list">
+		<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.filesSorted()"
+					:key="item.nodeId"
+					:source="item"
+					:loading="loading" />
+			</tbody>
+			<tfoot ref="endOfList" />
+		</table>
+	</div>
+</template>
+
+<script>
+import debounce from 'debounce'
+
+import { subscribe, unsubscribe } from '@nextcloud/event-bus'
+
+import { useFilesStore } from '../../store/files.js'
+import { useUserConfigStore } from '../../store/userconfig.js'
+
+export default {
+	name: 'VirtualList',
+	props: {
+		dataComponent: {
+			type: [Object, Function],
+			required: true,
+		},
+		loading: {
+			type: Boolean,
+			required: true,
+		},
+	},
+	setup() {
+		const filesStore = useFilesStore()
+		const userConfigStore = useUserConfigStore()
+		return {
+			filesStore,
+			userConfigStore,
+		}
+	},
+	data() {
+		return {
+			observer: null,
+		}
+	},
+	mounted() {
+		this.observer = new IntersectionObserver(debounce(([entry]) => {
+			if (entry && entry.isIntersecting) {
+				this.getFilesIfNotLoading()
+			}
+		}, 100, false))
+		subscribe('libresign:files:updated', this.updateObserver)
+	},
+	beforeDestroy() {
+		this.observer.disconnect()
+		unsubscribe('libresign:files:updated')
+	},
+	methods: {
+		getFilesIfNotLoading() {
+			if (this.filesStore.loading) {
+				setTimeout(this.getFilesIfNotLoading, 100)
+			} else {
+				this.filesStore.getAllFiles()
+			}
+		},
+		updateObserver() {
+			const endOfListElement = this.$refs?.endOfList
+			if (!endOfListElement) return
+			this.observer.disconnect()
+			this.observer.observe(endOfListElement)
+		},
+	},
+}
+</script>
diff --git a/src/views/Timeline/Timeline.vue b/src/views/Timeline/Timeline.vue
deleted file mode 100644
index d3ad50320b..0000000000
--- a/src/views/Timeline/Timeline.vue
+++ /dev/null
@@ -1,146 +0,0 @@
-<template>
-	<div class="container-timeline">
-		<div class="content-timeline">
-			<TopBar :sidebar-toggle="true">
-				<template #filter>
-					<div class="filtered">
-						<a :class="filesStore.filterActive === 'all' ? 'allFiles active' : 'allFiles'" @click="changeFilter('all')">
-							{{ t('libresign', 'All Files') }}
-						</a>
-						<a :class="filesStore.filterActive === 'pending' ? 'pending active': 'pending'" @click="changeFilter('pending')">
-							{{ t('libresign', 'Pending') }}
-						</a>
-						<a :class="filesStore.filterActive === 'signed' ? 'signed active' : 'signed'" @click="changeFilter('signed')">
-							{{ t('libresign', 'Signed') }}
-						</a>
-					</div>
-				</template>
-			</TopBar>
-			<ul v-if="emptyContentFile ===false">
-				<File v-for="file in fileList"
-					:key="file.nodeId"
-					:node-id="file.nodeId"
-					:class="{'file-details': true, 'active': file.nodeId === filesStore.file?.file?.nodeId}" />
-			</ul>
-			<NcEmptyContent v-else
-				:name="t('libresign', 'There are no documents')">
-				<template #icon>
-					<FolderIcon />
-				</template>
-			</NcEmptyContent>
-		</div>
-	</div>
-</template>
-
-<script>
-import FolderIcon from 'vue-material-design-icons/Folder.vue'
-
-import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
-
-import File from '../../Components/File/File.vue'
-import TopBar from '../../Components/TopBar/TopBar.vue'
-
-import { useFilesStore } from '../../store/files.js'
-
-export default {
-	name: 'Timeline',
-	components: {
-		TopBar,
-		File,
-		NcEmptyContent,
-		FolderIcon,
-	},
-	setup() {
-		const filesStore = useFilesStore()
-		return { filesStore }
-	},
-	data() {
-		return {
-			loading: false,
-			filesFiltered: [],
-		}
-	},
-	computed: {
-		fileList: {
-			get() {
-				return this.filesFiltered.slice().sort(
-					(a, b) => (a.request_date < b.request_date) ? 1 : -1,
-				)
-			},
-			set(value) {
-				this.filesFiltered = value
-			},
-		},
-		emptyContentFile() {
-			return this.fileList.length <= 0
-		},
-	},
-	async created() {
-		await this.filesStore.getAllFiles()
-		this.changeFilter('all')
-	},
-	methods: {
-		changeFilter(type) {
-			this.fileList = this.filesStore.filter(type)
-		},
-	},
-}
-</script>
-
-<style lang="scss" scoped>
-.container-timeline{
-	display: flex;
-	width: 100%;
-	justify-content: center;
-	flex-direction: row;
-
-	.content-timeline{
-		display: flex;
-		width: 100%;
-		flex-direction: column;
-
-		.filtered {
-			display: flex;
-			justify-content: flex-end;
-			padding: 5px;
-
-			a {
-				padding: 6px;
-				background: rgba(206, 206, 206, 0.3);
-			}
-
-			.signed{
-				border-radius: 0 10px 10px 0;
-			}
-
-			.allFiles{
-				border-radius: 10px 0 0 10px;
-			}
-
-			.active {
-				background: darken(rgba(206, 206, 206, 0.3), 20%)
-			}
-		}
-
-		.active {
-			// 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);
-			}
-			& {
-				border-radius: 10px;
-			}
-		}
-
-		ul{
-			display: flex;
-			width: 100%;
-			flex-wrap: wrap;
-		}
-	}
-}
-</style>
diff --git a/tests/integration/features/file/list.feature b/tests/integration/features/file/list.feature
index 5ce67f8f59..8f59a45a16 100644
--- a/tests/integration/features/file/list.feature
+++ b/tests/integration/features/file/list.feature
@@ -75,10 +75,10 @@ Feature: file-list
       | key                              | value                      |
       | (jq).ocs.data.data[0].name       | document                   |
       | (jq).ocs.data.pagination.total   | 5                          |
-      | (jq).ocs.data.pagination.current | /file/list?page=1&length=2 |
-      | (jq).ocs.data.pagination.next    | /file/list?page=2&length=2 |
+      | (jq).ocs.data.pagination.current | <BASE_URL>/ocsapp/apps/libresign/api/v1/file/list?length=2&page=1 |
+      | (jq).ocs.data.pagination.next    | <BASE_URL>/ocsapp/apps/libresign/api/v1/file/list?length=2&page=2 |
       | (jq).ocs.data.pagination.prev    | null                       |
-      | (jq).ocs.data.pagination.last    | /file/list?page=3&length=2 |
+      | (jq).ocs.data.pagination.last    | <BASE_URL>/ocsapp/apps/libresign/api/v1/file/list?length=2&page=3 |
       | (jq).ocs.data.pagination.first   | null                       |
     # second page
     When sending "get" to ocs "/apps/libresign/api/v1/file/list?length=2&page=2"
@@ -86,19 +86,19 @@ Feature: file-list
       | key                              | value                      |
       | (jq).ocs.data.data[0].name       | document                   |
       | (jq).ocs.data.pagination.total   | 5                          |
-      | (jq).ocs.data.pagination.current | /file/list?page=2&length=2 |
-      | (jq).ocs.data.pagination.next    | /file/list?page=3&length=2 |
-      | (jq).ocs.data.pagination.prev    | /file/list?page=1&length=2 |
-      | (jq).ocs.data.pagination.last    | /file/list?page=3&length=2 |
-      | (jq).ocs.data.pagination.first   | /file/list?page=1&length=2 |
+      | (jq).ocs.data.pagination.current | <BASE_URL>/ocsapp/apps/libresign/api/v1/file/list?length=2&page=2 |
+      | (jq).ocs.data.pagination.next    | <BASE_URL>/ocsapp/apps/libresign/api/v1/file/list?length=2&page=3 |
+      | (jq).ocs.data.pagination.prev    | <BASE_URL>/ocsapp/apps/libresign/api/v1/file/list?length=2&page=1 |
+      | (jq).ocs.data.pagination.last    | <BASE_URL>/ocsapp/apps/libresign/api/v1/file/list?length=2&page=3 |
+      | (jq).ocs.data.pagination.first   | <BASE_URL>/ocsapp/apps/libresign/api/v1/file/list?length=2&page=1 |
     # last page
-    When sending "get" to ocs "/apps/libresign/api/v1/file/list?length=2&page=3"
+    When sending "get" to ocs "/apps/libresign/api/v1/file/list?page=3&length=2"
     Then the response should be a JSON array with the following mandatory values
       | key                              | value                      |
       | (jq).ocs.data.data[0].name       | document                   |
       | (jq).ocs.data.pagination.total   | 5                          |
-      | (jq).ocs.data.pagination.current | /file/list?page=3&length=2 |
+      | (jq).ocs.data.pagination.current | <BASE_URL>/ocsapp/apps/libresign/api/v1/file/list?length=2&page=3 |
       | (jq).ocs.data.pagination.next    | null                       |
-      | (jq).ocs.data.pagination.prev    | /file/list?page=2&length=2 |
+      | (jq).ocs.data.pagination.prev    | <BASE_URL>/ocsapp/apps/libresign/api/v1/file/list?length=2&page=2 |
       | (jq).ocs.data.pagination.last    | null                       |
-      | (jq).ocs.data.pagination.first   | /file/list?page=1&length=2 |
+      | (jq).ocs.data.pagination.first   | <BASE_URL>/ocsapp/apps/libresign/api/v1/file/list?length=2&page=1 |
diff --git a/tsconfig.json b/tsconfig.json
index 4176c09e07..3d0d2e6764 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -12,4 +12,4 @@
 	"vueCompilerOptions": {
 		"target": 2.7,
 	}
-}
\ No newline at end of file
+}
diff --git a/webpack.config.js b/webpack.config.js
index f223ef099d..208eed9198 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -3,6 +3,7 @@ const path = require('path')
 const BabelLoaderExcludeNodeModulesExcept = require('babel-loader-exclude-node-modules-except')
 const { EsbuildPlugin } = require('esbuild-loader')
 const nextcloudWebpackConfig = require('@nextcloud/webpack-vue-config')
+const CopyPlugin = require('copy-webpack-plugin');
 
 module.exports = merge(nextcloudWebpackConfig, {
 	entry: {
@@ -66,4 +67,14 @@ module.exports = merge(nextcloudWebpackConfig, {
 		],
 	},
 	cache: true,
+	plugins: [
+		new CopyPlugin({
+			patterns: [
+				{
+					from: 'node_modules/@libresign/vue-pdf-editor/dist/pdf.worker.min.mjs',
+					to: '',
+				},
+			],
+		}),
+	],
 })