diff --git a/appinfo/routes/routesAccountController.php b/appinfo/routes/routesAccountController.php
index 641f80566b..00d2849a4f 100644
--- a/appinfo/routes/routesAccountController.php
+++ b/appinfo/routes/routesAccountController.php
@@ -20,9 +20,9 @@
 		['name' => 'account#accountFileListToApproval', 'url' => '/api/{apiVersion}/account/files/approval/list', 'verb' => 'GET', 'requirements' => $requirements],
 		['name' => 'account#createSignatureElement',    'url' => '/api/{apiVersion}/account/signature/elements', 'verb' => 'POST', 'requirements' => $requirements],
 		['name' => 'account#getSignatureElements',      'url' => '/api/{apiVersion}/account/signature/elements', 'verb' => 'GET', 'requirements' => $requirements],
-		['name' => 'account#getSignatureElementPreview','url' => '/api/{apiVersion}/account/signature/elements/preview/{fileId}', 'verb' => 'GET', 'requirements' => $requirements],
-		['name' => 'account#getSignatureElement',       'url' => '/api/{apiVersion}/account/signature/elements/{elementId}', 'verb' => 'GET', 'requirements' => $requirements],
-		['name' => 'account#patchSignatureElement',     'url' => '/api/{apiVersion}/account/signature/elements/{elementId}', 'verb' => 'PATCH', 'requirements' => $requirements],
-		['name' => 'account#deleteSignatureElement',    'url' => '/api/{apiVersion}/account/signature/elements/{elementId}', 'verb' => 'DELETE', 'requirements' => $requirements],
+		['name' => 'account#getSignatureElementPreview','url' => '/api/{apiVersion}/account/signature/elements/preview/{nodeId}', 'verb' => 'GET', 'requirements' => $requirements],
+		['name' => 'account#getSignatureElement',       'url' => '/api/{apiVersion}/account/signature/elements/{nodeId}', 'verb' => 'GET', 'requirements' => $requirements],
+		['name' => 'account#patchSignatureElement',     'url' => '/api/{apiVersion}/account/signature/elements/{nodeId}', 'verb' => 'PATCH', 'requirements' => $requirements],
+		['name' => 'account#deleteSignatureElement',    'url' => '/api/{apiVersion}/account/signature/elements/{nodeId}', 'verb' => 'DELETE', 'requirements' => $requirements],
 	],
 ];
diff --git a/img/application-pdf.png b/img/application-pdf.png
deleted file mode 100644
index 2ee4aab352..0000000000
Binary files a/img/application-pdf.png and /dev/null differ
diff --git a/img/frame4.png b/img/frame4.png
deleted file mode 100644
index e495cbb94a..0000000000
Binary files a/img/frame4.png and /dev/null differ
diff --git a/lib/Controller/AccountController.php b/lib/Controller/AccountController.php
index 19fb87a5a8..98f9257517 100644
--- a/lib/Controller/AccountController.php
+++ b/lib/Controller/AccountController.php
@@ -324,10 +324,10 @@ public function getSignatureElements(): JSONResponse {
 	#[NoAdminRequired]
 	#[PublicPage]
 	#[NoCSRFRequired]
-	public function getSignatureElementPreview(int $fileId) {
+	public function getSignatureElementPreview(int $nodeId) {
 		try {
 			$node = $this->accountService->getFileByNodeIdAndSessionId(
-				$fileId,
+				$nodeId,
 				$this->sessionService->getSessionId()
 			);
 		} catch (DoesNotExistException $th) {
@@ -346,11 +346,11 @@ public function getSignatureElementPreview(int $fileId) {
 
 	#[NoAdminRequired]
 	#[NoCSRFRequired]
-	public function getSignatureElement(int $elementId): JSONResponse {
+	public function getSignatureElement(int $nodeId): JSONResponse {
 		$userId = $this->userSession->getUser()->getUID();
 		try {
 			return new JSONResponse(
-				$this->signerElementsService->getUserElementByElementId($userId, $elementId),
+				$this->signerElementsService->getUserElementByNodeId($userId, $nodeId),
 				Http::STATUS_OK
 			);
 		} catch (\Throwable $th) {
@@ -365,9 +365,9 @@ public function getSignatureElement(int $elementId): JSONResponse {
 
 	#[NoAdminRequired]
 	#[NoCSRFRequired]
-	public function patchSignatureElement($elementId, string $type = '', array $file = []): JSONResponse {
+	public function patchSignatureElement($nodeId, string $type = '', array $file = []): JSONResponse {
 		try {
-			$element['elementId'] = $elementId;
+			$element['nodeId'] = $nodeId;
 			if ($type) {
 				$element['type'] = $type;
 			}
@@ -394,10 +394,14 @@ public function patchSignatureElement($elementId, string $type = '', array $file
 
 	#[NoAdminRequired]
 	#[NoCSRFRequired]
-	public function deleteSignatureElement(int $elementId): JSONResponse {
-		$userId = $this->userSession->getUser()->getUID();
+	#[PublicPage]
+	public function deleteSignatureElement(int $nodeId): JSONResponse {
 		try {
-			$this->accountService->deleteSignatureElement($userId, $elementId);
+			$this->accountService->deleteSignatureElement(
+				user: $this->userSession->getUser(),
+				nodeId: $nodeId,
+				sessionId: $this->sessionService->getSessionId(),
+			);
 		} catch (\Throwable $th) {
 			return new JSONResponse(
 				[
diff --git a/lib/Controller/PageController.php b/lib/Controller/PageController.php
index a8d4dbc1b4..e8b3af9ebc 100644
--- a/lib/Controller/PageController.php
+++ b/lib/Controller/PageController.php
@@ -100,6 +100,7 @@ public function index(): TemplateResponse {
 			$this->initialState->provideInitialState('can_request_sign', false);
 		}
 
+		$this->provideSignerSignatues();
 		$this->initialState->provideInitialState('file_info', $this->fileService->formatFile());
 		$this->initialState->provideInitialState('identify_methods', $this->identifyMethodService->getIdentifyMethodsSettings());
 		$this->initialState->provideInitialState('legal_information', $this->appConfig->getAppValue('legal_information'));
@@ -173,8 +174,6 @@ public function sign(string $uuid): TemplateResponse {
 		$this->initialState->provideInitialState('statusText', $file['statusText']);
 		$this->initialState->provideInitialState('signers', $file['signers']);
 		$this->provideSignerSignatues();
-		$signatureMethods = $this->identifyMethodService->getSignMethodsOfIdentifiedFactors($this->getSignRequestEntity()->getId());
-		$this->initialState->provideInitialState('signature_methods', $signatureMethods);
 		$this->initialState->provideInitialState('token_length', TokenService::TOKEN_LENGTH);
 		$this->initialState->provideInitialState('description', $this->getSignRequestEntity()->getDescription() ?? '');
 		$this->initialState->provideInitialState('pdf',
diff --git a/lib/Db/FileMapper.php b/lib/Db/FileMapper.php
index 20a740a01c..183b751827 100644
--- a/lib/Db/FileMapper.php
+++ b/lib/Db/FileMapper.php
@@ -118,15 +118,15 @@ public function getBySignerUuid(?string $uuid = null): File {
 	}
 
 	/**
-	 * Return LibreSign file by fileId
+	 * Return LibreSign file by nodeId
 	 */
-	public function getByFileId(?int $fileId = null): File {
-		$exists = array_filter($this->file, fn ($f) => $f->getNodeId() === $fileId || $f->getSignedNodeId() === $fileId);
+	public function getByFileId(?int $nodeId = null): File {
+		$exists = array_filter($this->file, fn ($f) => $f->getNodeId() === $nodeId || $f->getSignedNodeId() === $nodeId);
 		if (!empty($exists)) {
 			return current($exists);
 		}
 		foreach ($this->file as $file) {
-			if ($file->getNodeId() === $fileId) {
+			if ($file->getNodeId() === $nodeId) {
 				return $file;
 			}
 		}
@@ -136,8 +136,8 @@ public function getByFileId(?int $fileId = null): File {
 			->from($this->getTableName())
 			->where(
 				$qb->expr()->orX(
-					$qb->expr()->eq('node_id', $qb->createNamedParameter($fileId, IQueryBuilder::PARAM_INT)),
-					$qb->expr()->eq('signed_node_id', $qb->createNamedParameter($fileId, IQueryBuilder::PARAM_INT))
+					$qb->expr()->eq('node_id', $qb->createNamedParameter($nodeId, IQueryBuilder::PARAM_INT)),
+					$qb->expr()->eq('signed_node_id', $qb->createNamedParameter($nodeId, IQueryBuilder::PARAM_INT))
 				)
 			);
 
diff --git a/lib/Db/SignRequestMapper.php b/lib/Db/SignRequestMapper.php
index 0f8fa5492a..6654426188 100644
--- a/lib/Db/SignRequestMapper.php
+++ b/lib/Db/SignRequestMapper.php
@@ -361,16 +361,10 @@ public function getFilesAssociatedFilesWithMeFormatted(
 		$currentPageResults = $pagination->getCurrentPageResults();
 
 		$data = [];
-		$fileIds = [];
-
 		foreach ($currentPageResults as $row) {
-			$fileIds[] = $row['id'];
 			$data[] = $this->formatListRow($row);
 		}
-		$signers = $this->getByMultipleFileId($fileIds);
-		$identifyMethods = $this->getIdentifyMethodsFromSigners($signers);
-		$visibleElements = $this->getVisibleElementsFromSigners($signers);
-		$return['data'] = $this->associateAllAndFormat($user, $data, $signers, $identifyMethods, $visibleElements);
+		$return['data'] = $data;
 		$return['pagination'] = $pagination;
 		return $return;
 	}
@@ -379,7 +373,7 @@ public function getFilesAssociatedFilesWithMeFormatted(
 	 * @param array<SignRequest> $signRequests
 	 * @return FileElement[][]
 	 */
-	private function getVisibleElementsFromSigners(array $signRequests): array {
+	public function getVisibleElementsFromSigners(array $signRequests): array {
 		$signRequestIds = array_map(function (SignRequest $signRequest): int {
 			return $signRequest->getId();
 		}, $signRequests);
@@ -408,7 +402,7 @@ private function getVisibleElementsFromSigners(array $signRequests): array {
 	 * @param array<SignRequest> $signRequests
 	 * @return array<array-key, array<array-key, \OCP\AppFramework\Db\Entity&\OCA\Libresign\Db\IdentifyMethod>>
 	 */
-	private function getIdentifyMethodsFromSigners(array $signRequests): array {
+	public function getIdentifyMethodsFromSigners(array $signRequests): array {
 		$signRequestIds = array_map(function (SignRequest $signRequest): int {
 			return $signRequest->getId();
 		}, $signRequests);
@@ -531,113 +525,6 @@ private function getFilesAssociatedFilesWithMeStmt(string $userId, ?string $emai
 		return $pagination;
 	}
 
-	/**
-	 * @param IUser $userId
-	 * @param array $files
-	 * @param array<SignRequest> $signers
-	 * @param array<array-key, array<array-key, \OCP\AppFramework\Db\Entity&\OCA\Libresign\Db\IdentifyMethod>> $identifyMethods
-	 * @param SignRequest[][]
-	 */
-	private function associateAllAndFormat(IUser $user, array $files, array $signers, array $identifyMethods, array $visibleElements): array {
-		foreach ($files as $key => $file) {
-			$totalSigned = 0;
-			foreach ($signers as $signerKey => $signer) {
-				if ($signer->getFileId() === $file['id']) {
-					/** @var array<IdentifyMethod> */
-					$identifyMethodsOfSigner = $identifyMethods[$signer->getId()] ?? [];
-					$data = [
-						'email' => array_reduce($identifyMethodsOfSigner, function (string $carry, IdentifyMethod $identifyMethod): string {
-							if ($identifyMethod->getIdentifierKey() === IdentifyMethodService::IDENTIFY_EMAIL) {
-								return $identifyMethod->getIdentifierValue();
-							}
-							return $carry;
-						}, ''),
-						'description' => $signer->getDescription(),
-						'displayName' =>
-							array_reduce($identifyMethodsOfSigner, function (string $carry, IdentifyMethod $identifyMethod): string {
-								if (!$carry && $identifyMethod->getMandatory()) {
-									return $identifyMethod->getIdentifierValue();
-								}
-								return $carry;
-							}, $signer->getDisplayName()),
-						'request_sign_date' => (new \DateTime())
-							->setTimestamp($signer->getCreatedAt())
-							->format('Y-m-d H:i:s'),
-						'signed' => null,
-						'signRequestId' => $signer->getId(),
-						'me' => array_reduce($identifyMethodsOfSigner, function (bool $carry, IdentifyMethod $identifyMethod) use ($user): bool {
-							if ($identifyMethod->getIdentifierKey() === IdentifyMethodService::IDENTIFY_ACCOUNT) {
-								if ($user->getUID() === $identifyMethod->getIdentifierValue()) {
-									return true;
-								}
-							} elseif ($identifyMethod->getIdentifierKey() === IdentifyMethodService::IDENTIFY_EMAIL) {
-								if (!$user->getEMailAddress()) {
-									return false;
-								}
-								if ($user->getEMailAddress() === $identifyMethod->getIdentifierValue()) {
-									return true;
-								}
-							}
-							return $carry;
-						}, false),
-						'visibleElements' => array_map(function (FileElement $visibleElement) use ($file) {
-							$element = [
-								'elementId' => $visibleElement->getId(),
-								'signRequestId' => $visibleElement->getSignRequestId(),
-								'type' => $visibleElement->getType(),
-								'coordinates' => [
-									'page' => $visibleElement->getPage(),
-									'urx' => $visibleElement->getUrx(),
-									'ury' => $visibleElement->getUry(),
-									'llx' => $visibleElement->getLlx(),
-									'lly' => $visibleElement->getLly()
-								]
-							];
-							$metadata = json_decode($file['metadata'], true);
-							$dimension = $metadata['d'][$element['coordinates']['page'] - 1];
-
-							$element['coordinates']['left'] = $element['coordinates']['llx'];
-							$element['coordinates']['height'] = abs($element['coordinates']['ury'] - $element['coordinates']['lly']);
-							$element['coordinates']['top'] = $dimension['h'] - $element['coordinates']['ury'];
-							$element['coordinates']['width'] = $element['coordinates']['urx'] - $element['coordinates']['llx'];
-
-							return $element;
-						}, $visibleElements[$signer->getId()] ?? []),
-						'identifyMethods' => array_map(function (IdentifyMethod $identifyMethod) use ($signer): array {
-							return [
-								'method' => $identifyMethod->getIdentifierKey(),
-								'value' => $identifyMethod->getIdentifierValue(),
-								'mandatory' => $identifyMethod->getMandatory(),
-							];
-						}, array_values($identifyMethodsOfSigner)),
-					];
-
-					if ($data['me']) {
-						$data['sign_uuid'] = $signer->getUuid();
-						$files[$key]['url'] = $this->urlGenerator->linkToRoute('libresign.page.getPdfFile', ['uuid' => $signer->getuuid()]);
-					}
-
-					if ($signer->getSigned()) {
-						$data['signed'] = $this->dateTimeFormatter->formatDateTime($signer->getSigned());
-						$totalSigned++;
-					}
-					ksort($data);
-					$files[$key]['signers'][] = $data;
-					unset($signers[$signerKey]);
-				}
-			}
-			if (empty($files[$key]['signers'])) {
-				$files[$key]['signers'] = [];
-				$files[$key]['statusText'] = $this->l10n->t('no signers');
-			} else {
-				$files[$key]['statusText'] = $this->fileMapper->getTextOfStatus((int) $files[$key]['status']);
-			}
-			unset($files[$key]['id']);
-			ksort($files[$key]);
-		}
-		return $files;
-	}
-
 	private function formatListRow(array $row): array {
 		$row['id'] = (int) $row['id'];
 		$row['status'] = (int) $row['status'];
diff --git a/lib/Helper/ValidateHelper.php b/lib/Helper/ValidateHelper.php
index 200ef16303..95ddd1fa0a 100644
--- a/lib/Helper/ValidateHelper.php
+++ b/lib/Helper/ValidateHelper.php
@@ -295,15 +295,15 @@ public function validateVisibleElementsRelation(array $list, SignRequest $signRe
 			if (!array_key_exists('documentElementId', $elements)) {
 				throw new LibresignException($this->l10n->t('Field %s not found', ['documentElementId']));
 			}
-			if (!array_key_exists('profileFileId', $elements)) {
-				throw new LibresignException($this->l10n->t('Field %s not found', ['profileFileId']));
+			if (!array_key_exists('profileNodeId', $elements)) {
+				throw new LibresignException($this->l10n->t('Field %s not found', ['profileNodeId']));
 			}
 			$this->validateSignerIsOwnerOfPdfVisibleElement($elements['documentElementId'], $signRequest);
 			if ($user instanceof IUser) {
 				try {
-					$this->userElementMapper->findOne(['file_id' => $elements['profileFileId'], 'user_id' => $user->getUID()]);
+					$this->userElementMapper->findOne(['file_id' => $elements['profileNodeId'], 'user_id' => $user->getUID()]);
 				} catch (\Throwable $th) {
-					throw new LibresignException($this->l10n->t('Field %s does not belong to user', $elements['profileFileId']));
+					throw new LibresignException($this->l10n->t('Field %s does not belong to user', $elements['profileNodeId']));
 				}
 			}
 		}
diff --git a/lib/Middleware/GlobalInjectionMiddleware.php b/lib/Middleware/GlobalInjectionMiddleware.php
index 66e9db14e7..dae22bb77d 100644
--- a/lib/Middleware/GlobalInjectionMiddleware.php
+++ b/lib/Middleware/GlobalInjectionMiddleware.php
@@ -34,7 +34,7 @@ class GlobalInjectionMiddleware extends Middleware {
 	public function afterController(Controller $controller, string $methodName, Response $response) {
 		if ($controller instanceof ViewController) {
 			$policy = new ContentSecurityPolicy();
-			$policy->allowEvalScript(true);
+			$policy->addAllowedFrameDomain("'self'");
 			$response->setContentSecurityPolicy($policy);
 		}
 		return $response;
diff --git a/lib/Service/AccountService.php b/lib/Service/AccountService.php
index b6ccd9c6dd..2e9c2d0ae3 100644
--- a/lib/Service/AccountService.php
+++ b/lib/Service/AccountService.php
@@ -47,6 +47,7 @@
 use OCP\Files\Config\IMountProviderCollection;
 use OCP\Files\Config\IUserMountCache;
 use OCP\Files\File;
+use OCP\Files\Folder;
 use OCP\Files\IMimeTypeDetector;
 use OCP\Files\IRootFolder;
 use OCP\Http\Client\IClientService;
@@ -405,9 +406,12 @@ private function saveFileOfVisibleElementUsingSession(array $data, string $sessi
 		$rootSignatureFolder = $this->folderService->getFolder();
 		$folderName = $sessionId;
 		if ($rootSignatureFolder->nodeExists($folderName)) {
-			throw new \Exception($this->l10n->t('File already exists'));
+			/** @var Folder $folderToFile */
+			$folderToFile = $rootSignatureFolder->get($folderName);
+		} else {
+			/** @var Folder $folderToFile */
+			$folderToFile = $rootSignatureFolder->newFolder($folderName);
 		}
-		$folderToFile = $rootSignatureFolder->newFolder($folderName);
 		$filename = implode(
 			'_',
 			[
@@ -461,9 +465,24 @@ private function getFileRaw(array $data) {
 		return $content;
 	}
 
-	public function deleteSignatureElement(string $userId, int $elementId): void {
-		$element = $this->userElementMapper->findOne(['id' => $elementId, 'user_id' => $userId]);
-		$this->userElementMapper->delete($element);
+	public function deleteSignatureElement(?IUser $user, string $sessionId, int $nodeId): void {
+		if ($user instanceof IUser) {
+			$element = $this->userElementMapper->findOne([
+				'file_id' => $nodeId,
+				'user_id' => $user->getUID(),
+			]);
+			$this->userElementMapper->delete($element);
+			$file = $this->root->getById($element->getFileId());
+			if ($file) {
+				current($file)->delete();
+			}
+		} else {
+			$rootSignatureFolder = $this->folderService->getFolder();
+			$folderName = $sessionId;
+			if ($rootSignatureFolder->nodeExists($folderName)) {
+				$rootSignatureFolder->delete($folderName);
+			}
+		}
 	}
 
 	/**
diff --git a/lib/Service/FileService.php b/lib/Service/FileService.php
index c3ba5d63a5..c92db651c1 100644
--- a/lib/Service/FileService.php
+++ b/lib/Service/FileService.php
@@ -25,8 +25,10 @@
 namespace OCA\Libresign\Service;
 
 use OCA\Libresign\Db\File;
+use OCA\Libresign\Db\FileElement;
 use OCA\Libresign\Db\FileElementMapper;
 use OCA\Libresign\Db\FileMapper;
+use OCA\Libresign\Db\IdentifyMethod;
 use OCA\Libresign\Db\SignRequest;
 use OCA\Libresign\Db\SignRequestMapper;
 use OCA\Libresign\Exception\LibresignException;
@@ -236,6 +238,9 @@ private function getSigners(): array {
 					}
 				}
 			}
+			if ($signatureToShow['me'] && !is_null($this->signRequest)) {
+				$signatureToShow['signatureMethods'] = $this->identifyMethodService->getSignMethodsOfIdentifiedFactors($this->signRequest->getId());
+			}
 			$signatureToShow['identifyMethods'] = array_reduce($signatureToShow['identifyMethods'], function ($carry, $list) {
 				foreach ($list as $identifyMethod) {
 					$carry[] = [
@@ -452,19 +457,153 @@ public function listAssociatedFilesOfSignFlow($page = null, $length = null, arra
 		$page = $page ?? 1;
 		$length = $length ?? (int) $this->appConfig->getAppValue('length_of_page', '100');
 
-		$data = $this->signRequestMapper->getFilesAssociatedFilesWithMeFormatted(
+		$return = $this->signRequestMapper->getFilesAssociatedFilesWithMeFormatted(
 			$this->me,
 			$page,
 			$length,
 			$filter,
 		);
-		$data['pagination']->setRootPath('/file/list');
+
+		$signers = $this->signRequestMapper->getByMultipleFileId(array_column($return['data'], 'id'));
+		$identifyMethods = $this->signRequestMapper->getIdentifyMethodsFromSigners($signers);
+		$visibleElements = $this->signRequestMapper->getVisibleElementsFromSigners($signers);
+		$return['data'] = $this->associateAllAndFormat($this->me, $return['data'], $signers, $identifyMethods, $visibleElements);
+
+		$return['pagination']->setRootPath('/file/list');
 		return [
-			'data' => $data['data'],
-			'pagination' => $data['pagination']->getPagination($page, $length)
+			'data' => $return['data'],
+			'pagination' => $return['pagination']->getPagination($page, $length)
 		];
 	}
 
+	/**
+	 * @param IUser $userId
+	 * @param array $files
+	 * @param array<SignRequest> $signers
+	 * @param array<array-key, array<array-key, \OCP\AppFramework\Db\Entity&\OCA\Libresign\Db\IdentifyMethod>> $identifyMethods
+	 * @param SignRequest[][]
+	 */
+	private function associateAllAndFormat(IUser $user, array $files, array $signers, array $identifyMethods, array $visibleElements): array {
+		foreach ($files as $key => $file) {
+			$totalSigned = 0;
+			foreach ($signers as $signerKey => $signer) {
+				if ($signer->getFileId() === $file['id']) {
+					/** @var array<IdentifyMethod> */
+					$identifyMethodsOfSigner = $identifyMethods[$signer->getId()] ?? [];
+					$data = [
+						'email' => array_reduce($identifyMethodsOfSigner, function (string $carry, IdentifyMethod $identifyMethod): string {
+							if ($identifyMethod->getIdentifierKey() === IdentifyMethodService::IDENTIFY_EMAIL) {
+								return $identifyMethod->getIdentifierValue();
+							}
+							return $carry;
+						}, ''),
+						'description' => $signer->getDescription(),
+						'displayName' =>
+							array_reduce($identifyMethodsOfSigner, function (string $carry, IdentifyMethod $identifyMethod): string {
+								if (!$carry && $identifyMethod->getMandatory()) {
+									return $identifyMethod->getIdentifierValue();
+								}
+								return $carry;
+							}, $signer->getDisplayName()),
+						'request_sign_date' => (new \DateTime())
+							->setTimestamp($signer->getCreatedAt())
+							->format('Y-m-d H:i:s'),
+						'signed' => null,
+						'signRequestId' => $signer->getId(),
+						'me' => array_reduce($identifyMethodsOfSigner, function (bool $carry, IdentifyMethod $identifyMethod) use ($user): bool {
+							if ($identifyMethod->getIdentifierKey() === IdentifyMethodService::IDENTIFY_ACCOUNT) {
+								if ($user->getUID() === $identifyMethod->getIdentifierValue()) {
+									return true;
+								}
+							} elseif ($identifyMethod->getIdentifierKey() === IdentifyMethodService::IDENTIFY_EMAIL) {
+								if (!$user->getEMailAddress()) {
+									return false;
+								}
+								if ($user->getEMailAddress() === $identifyMethod->getIdentifierValue()) {
+									return true;
+								}
+							}
+							return $carry;
+						}, false),
+						'visibleElements' => array_map(function (FileElement $visibleElement) use ($file) {
+							$element = [
+								'elementId' => $visibleElement->getId(),
+								'signRequestId' => $visibleElement->getSignRequestId(),
+								'type' => $visibleElement->getType(),
+								'coordinates' => [
+									'page' => $visibleElement->getPage(),
+									'urx' => $visibleElement->getUrx(),
+									'ury' => $visibleElement->getUry(),
+									'llx' => $visibleElement->getLlx(),
+									'lly' => $visibleElement->getLly()
+								]
+							];
+							$metadata = json_decode($file['metadata'], true);
+							$dimension = $metadata['d'][$element['coordinates']['page'] - 1];
+
+							$element['coordinates']['left'] = $element['coordinates']['llx'];
+							$element['coordinates']['height'] = abs($element['coordinates']['ury'] - $element['coordinates']['lly']);
+							$element['coordinates']['top'] = $dimension['h'] - $element['coordinates']['ury'];
+							$element['coordinates']['width'] = $element['coordinates']['urx'] - $element['coordinates']['llx'];
+
+							return $element;
+						}, $visibleElements[$signer->getId()] ?? []),
+						'identifyMethods' => array_map(function (IdentifyMethod $identifyMethod) use ($signer): array {
+							return [
+								'method' => $identifyMethod->getIdentifierKey(),
+								'value' => $identifyMethod->getIdentifierValue(),
+								'mandatory' => $identifyMethod->getMandatory(),
+							];
+						}, array_values($identifyMethodsOfSigner)),
+					];
+
+					if ($data['me']) {
+						$temp = array_map(function (IdentifyMethod $identifyMethodEntity) use ($signer): array {
+							$this->identifyMethodService->setCurrentIdentifyMethod($identifyMethodEntity);
+							$identifyMethod = $this->identifyMethodService->getInstanceOfIdentifyMethod(
+								$identifyMethodEntity->getIdentifierKey(),
+								$identifyMethodEntity->getIdentifierValue(),
+							);
+							$signatureMethods = $identifyMethod->getSignatureMethods();
+							$return = [];
+							foreach ($signatureMethods as $signatureMethod) {
+								if (!$signatureMethod->isEnabled()) {
+									continue;
+								}
+								$signatureMethod->setEntity($identifyMethod->getEntity());
+								$return[$signatureMethod->getName()] = $signatureMethod->toArray();
+							}
+							return $return;
+						}, array_values($identifyMethodsOfSigner));
+						$data['signatureMethods'] = [];
+						foreach ($temp as $methods) {
+							$data['signatureMethods'] = array_merge($data['signatureMethods'], $methods);
+						}
+						$data['sign_uuid'] = $signer->getUuid();
+						$files[$key]['url'] = $this->urlGenerator->linkToRoute('libresign.page.getPdfFile', ['uuid' => $signer->getuuid()]);
+					}
+
+					if ($signer->getSigned()) {
+						$data['signed'] = $this->dateTimeFormatter->formatDateTime($signer->getSigned());
+						$totalSigned++;
+					}
+					ksort($data);
+					$files[$key]['signers'][] = $data;
+					unset($signers[$signerKey]);
+				}
+			}
+			if (empty($files[$key]['signers'])) {
+				$files[$key]['signers'] = [];
+				$files[$key]['statusText'] = $this->l10n->t('no signers');
+			} else {
+				$files[$key]['statusText'] = $this->fileMapper->getTextOfStatus((int) $files[$key]['status']);
+			}
+			unset($files[$key]['id']);
+			ksort($files[$key]);
+		}
+		return $files;
+	}
+
 	public function getMyLibresignFile(int $nodeId): File {
 		return $this->signRequestMapper->getMyLibresignFile(
 			userId: $this->me->getUID(),
diff --git a/lib/Service/SignFileService.php b/lib/Service/SignFileService.php
index a12b27d5a6..37408d54b6 100644
--- a/lib/Service/SignFileService.php
+++ b/lib/Service/SignFileService.php
@@ -232,8 +232,8 @@ public function setVisibleElements(array $list): self {
 			});
 			if ($element) {
 				$c = current($element);
-				if (!empty($c['profileFileId'])) {
-					$nodeId = $c['profileFileId'];
+				if (!empty($c['profileNodeId'])) {
+					$nodeId = $c['profileNodeId'];
 				} else {
 					throw new LibresignException($this->l10n->t('Invalid data to sign file'), 1);
 				}
@@ -259,7 +259,7 @@ public function setVisibleElements(array $list): self {
 				if (!$node) {
 					throw new \Exception('empty');
 				}
-				$node = $node[0];
+				$node = current($node);
 			} catch (\Throwable $th) {
 				throw new LibresignException($this->l10n->t('You need to define a visible signature or initials to sign this document.'));
 			}
@@ -400,10 +400,10 @@ public function getFileToSing(FileEntity $libresignFile): \OCP\Files\Node {
 		return $originalFile;
 	}
 
-	public function getLibresignFile(?int $fileId, ?string $signRequestUuid = null): FileEntity {
+	public function getLibresignFile(?int $nodeId, ?string $signRequestUuid = null): FileEntity {
 		try {
-			if ($fileId) {
-				$libresignFile = $this->fileMapper->getByFileId($fileId);
+			if ($nodeId) {
+				$libresignFile = $this->fileMapper->getByFileId($nodeId);
 			} elseif ($signRequestUuid) {
 				$signRequest = $this->signRequestMapper->getByUuid($signRequestUuid);
 				$libresignFile = $this->fileMapper->getById($signRequest->getFileId());
diff --git a/lib/Service/SignerElementsService.php b/lib/Service/SignerElementsService.php
index 13ad37eda4..cb3acf70ff 100644
--- a/lib/Service/SignerElementsService.php
+++ b/lib/Service/SignerElementsService.php
@@ -42,13 +42,8 @@ public function __construct(
 	) {
 	}
 
-	/**
-	 * @return ((int|string)[]|\DateTime|int|string)[]
-	 *
-	 * @psalm-return array{id?: int, type?: string, file?: array{url: string, fileId: int}, uid?: string, starred?: 0|1, createdAt?: \DateTime}
-	 */
-	public function getUserElementByElementId(string $userId, $elementId): array {
-		$element = $this->userElementMapper->findOne(['id' => $elementId, 'user_id' => $userId]);
+	public function getUserElementByNodeId(string $userId, $nodeId): array {
+		$element = $this->userElementMapper->findOne(['file_id' => $nodeId, 'user_id' => $userId]);
 		$exists = $this->signatureFileExists($element);
 		if (!$exists) {
 			return [];
@@ -58,7 +53,7 @@ public function getUserElementByElementId(string $userId, $elementId): array {
 			'type' => $element->getType(),
 			'file' => [
 				'url' => $this->urlGenerator->linkToRoute('core.Preview.getPreviewByFileId', ['fileId' => $element->getFileId(), 'x' => self::ELEMENT_SIGN_WIDTH, 'y' => self::ELEMENT_SIGN_HEIGHT]),
-				'fileId' => $element->getFileId()
+				'nodeId' => $element->getFileId()
 			],
 			'uid' => $element->getUserId(),
 			'starred' => $element->getStarred() ? 1 : 0,
@@ -79,7 +74,7 @@ public function getUserElements(string $userId): array {
 				'type' => $element->getType(),
 				'file' => [
 					'url' => $this->urlGenerator->linkToRoute('core.Preview.getPreviewByFileId', ['fileId' => $element->getFileId(), 'x' => self::ELEMENT_SIGN_WIDTH, 'y' => self::ELEMENT_SIGN_HEIGHT]),
-					'fileId' => $element->getFileId()
+					'nodeId' => $element->getFileId()
 				],
 				'starred' => $element->getStarred() ? 1 : 0,
 				'createdAt' => $element->getCreatedAt()->format('Y-m-d H:i:s'),
@@ -120,9 +115,9 @@ public function getElementsFromSessionAsArray(): array {
 				'file' => [
 					'url' => $this->urlGenerator->linkToRoute('ocs.libresign.account.getSignatureElementPreview', [
 						'apiVersion' => 'v1',
-						'fileId' => $fileElement->getId(),
+						'nodeId' => $fileElement->getId(),
 					]),
-					'fileId' => $fileElement->getId(),
+					'nodeId' => $fileElement->getId(),
 				],
 				'starred' => 0,
 				'createdAt' => (new \DateTime())->setTimestamp((int) $timestamp)->format('Y-m-d H:i:s'),
diff --git a/package-lock.json b/package-lock.json
index 204be8893e..b4981ac1b8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,6 +28,7 @@
         "blueimp-md5": "^2.19.0",
         "crypto-js": "^4.2.0",
         "dompurify": "^3.1.0",
+        "js-confetti": "^0.12.0",
         "linkify-string": "^4.1.3",
         "lodash-es": "^4.17.21",
         "pinia": "^2.1.7",
@@ -12847,6 +12848,11 @@
       "resolved": "https://registry.npmjs.org/jpeg-exif/-/jpeg-exif-1.1.4.tgz",
       "integrity": "sha512-a+bKEcCjtuW5WTdgeXFzswSrdqi0jk4XlEtZlx5A94wCoBpFjfFTbo/Tra5SpNCl/YFZPvcV1dJc+TAYeg6ROQ=="
     },
+    "node_modules/js-confetti": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/js-confetti/-/js-confetti-0.12.0.tgz",
+      "integrity": "sha512-1R0Akxn3Zn82pMqW65N1V2NwKkZJ75bvBN/VAb36Ya0YHwbaSiAJZVRr/19HBxH/O8x2x01UFAbYI18VqlDN6g=="
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
diff --git a/package.json b/package.json
index 4aae205d46..d0b624ebff 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
     "blueimp-md5": "^2.19.0",
     "crypto-js": "^4.2.0",
     "dompurify": "^3.1.0",
+    "js-confetti": "^0.12.0",
     "linkify-string": "^4.1.3",
     "lodash-es": "^4.17.21",
     "pinia": "^2.1.7",
diff --git a/src/App.vue b/src/App.vue
index fdb755f021..c691d11266 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -22,7 +22,7 @@
 -->
 
 <template>
-	<NcContent app-name="libresign">
+	<NcContent app-name="libresign" :class="{'sign-external-page': isSignExternalPage}">
 		<LeftSidebar />
 		<NcAppContent :class="{'icon-loading' : loading }">
 			<router-view v-if="!loading" :key="$route.name " :loading.sync="loading" />
@@ -63,11 +63,21 @@ export default {
 		isRoot() {
 			return this.$route.path === '/'
 		},
+		isSignExternalPage() {
+			return this.$route.path.startsWith('/p/')
+		},
 	},
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
+.sign-external-page {
+	width: 100%;
+	height: 100%;
+	margin: unset;
+	box-sizing: unset;
+	border-radius: unset;
+}
 .app-libresign {
 	.app-navigation {
 		.app-navigation-entry.active {
diff --git a/src/Components/Draw/Draw.vue b/src/Components/Draw/Draw.vue
index c05e915f33..88c40a22a1 100644
--- a/src/Components/Draw/Draw.vue
+++ b/src/Components/Draw/Draw.vue
@@ -99,19 +99,17 @@ export default {
 }
 </script>
 
-<style lang="scss">
-#app-sidebar-vue {
-	width: unset;
-	.app-sidebar__close {
-		display: none;
-	}
-}
-.draw-signature {
-	.modal-container {
+<style lang="scss" scoped>
+.draw-signature{
+	::v-deep .modal-container {
 		width: unset !important;
 		height: unset !important;
 	}
+	::v-deep .app-sidebar__close {
+		display: none;
+	}
+	::v-deep #app-sidebar-vue {
+		width: unset;
+	}
 }
 </style>
-<style lang="scss" scoped>
-</style>
diff --git a/src/Components/LeftSidebar/LeftSidebar.vue b/src/Components/LeftSidebar/LeftSidebar.vue
index f819070e21..29b1191098 100644
--- a/src/Components/LeftSidebar/LeftSidebar.vue
+++ b/src/Components/LeftSidebar/LeftSidebar.vue
@@ -74,6 +74,7 @@
 import NcAppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation.js'
 import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
 import NcAppNavigationSettings from '@nextcloud/vue/dist/Components/NcAppNavigationSettings.js'
+import { getCurrentUser } from '@nextcloud/auth'
 import { loadState } from '@nextcloud/initial-state'
 import { useFilesStore } from '../../store/files.js'
 import AccountCheckIcon from 'vue-material-design-icons/AccountCheck.vue'
@@ -112,7 +113,8 @@ export default {
 			return this.$route.query._back_to_signature
 		},
 		showLeftSidebar() {
-			return !!this.$route.name && this.$route.name !== 'SignPDF'
+			return getCurrentUser()
+				|| !this.$route.path.startsWith('/p/')
 		},
 	},
 	methods: {
diff --git a/src/Components/PdfEditor/PdfEditor.vue b/src/Components/PdfEditor/PdfEditor.vue
index 6116dbc296..1c238d89ee 100644
--- a/src/Components/PdfEditor/PdfEditor.vue
+++ b/src/Components/PdfEditor/PdfEditor.vue
@@ -97,5 +97,8 @@ canvas {
 <style lang="scss" scoped>
 .vue-pdf-editor {
 	overflow: unset !important;
+	min-height: 0;
+	position: unset !important;
+	display: flex;
 }
 </style>
diff --git a/src/Components/RightSidebar/AppFilesTab.vue b/src/Components/RightSidebar/AppFilesTab.vue
index 760a09f365..d1dfac2a97 100644
--- a/src/Components/RightSidebar/AppFilesTab.vue
+++ b/src/Components/RightSidebar/AppFilesTab.vue
@@ -3,7 +3,7 @@
 		<h3 v-if="filesStore.getSubtitle()">
 			{{ filesStore.getSubtitle() }}
 		</h3>
-		<RequestSignatureTab />
+		<RequestSignatureTab :use-modal="true" />
 	</div>
 </template>
 
diff --git a/src/Components/RightSidebar/RequestSignatureTab.vue b/src/Components/RightSidebar/RequestSignatureTab.vue
index c444d71e3c..630f15892d 100644
--- a/src/Components/RightSidebar/RequestSignatureTab.vue
+++ b/src/Components/RightSidebar/RequestSignatureTab.vue
@@ -4,7 +4,7 @@
 		<IdentifySigner :signer-to-edit="signerToEdit" />
 	</div>
 	<div v-else
-		id="request-signature-list-signers">
+		id="request-signature-tab">
 		<NcButton v-if="canAddSigner"
 			:type="hasSigners ? 'secondary' : 'primary'"
 			@click="addSigner">
@@ -79,6 +79,8 @@ import VisibleElements from '../Request/VisibleElements.vue'
 import { loadState } from '@nextcloud/initial-state'
 import { useFilesStore } from '../../store/files.js'
 import { useSignStore } from '../../store/sign.js'
+import { useSidebarStore } from '../../store/sidebar.js'
+import router from '../../router/router.js'
 
 export default {
 	name: 'RequestSignatureTab',
@@ -92,10 +94,17 @@ export default {
 		IdentifySigner,
 		VisibleElements,
 	},
+	props: {
+		useModal: {
+			type: Boolean,
+			default: false,
+		},
+	},
 	setup() {
 		const filesStore = useFilesStore()
 		const signStore = useSignStore()
-		return { filesStore, signStore }
+		const sidebarStore = useSidebarStore()
+		return { filesStore, signStore, sidebarStore }
 	},
 	data() {
 		return {
@@ -161,7 +170,8 @@ export default {
 			this.showSignModal = false
 		},
 		validationFile() {
-			this.$router.push({ name: 'validationFile', params: { uuid: this.filesStore.getFile().uuid } })
+			this.$router.push({ name: 'ValidationFile', params: { uuid: this.filesStore.getFile().uuid } })
+			this.sidebarStore.hideSidebar()
 		},
 		addSigner() {
 			this.signerToEdit = {}
@@ -196,10 +206,14 @@ export default {
 					}
 					return accumulator
 				}, '')
-			this.signStore.document = this.filesStore.getFile()
-			const route = this.$router.resolve({ name: 'SignPDF', params: { uuid } })
-			this.modalSrc = route.href
-			this.showSignModal = true
+			if (this.useModal) {
+				const route = router.resolve({ name: 'SignPDFExternal', params: { uuid } })
+				this.modalSrc = route.href
+				this.showSignModal = true
+				return
+			}
+			this.signStore.setDocumentToSign(this.filesStore.getFile())
+			this.$router.push({ name: 'SignPDF', params: { uuid } })
 		},
 		async save() {
 			this.hasLoading = true
diff --git a/src/Components/RightSidebar/RightSidebar.vue b/src/Components/RightSidebar/RightSidebar.vue
index 4165289dee..800afb3e72 100644
--- a/src/Components/RightSidebar/RightSidebar.vue
+++ b/src/Components/RightSidebar/RightSidebar.vue
@@ -1,11 +1,18 @@
 <template>
-	<NcAppSidebar v-show="opened"
+	<NcAppSidebar v-if="sidebarStore.isVisible()"
+		ref="rightAppSidebar"
 		:name="fileName"
 		:subtitle="subTitle"
-		:active="fileName"
+		:active.sync="sidebarStore.activeTab"
+		@update:active="handleUpdateActive"
 		@close="closeSidebar">
-		<NcAppSidebarTab v-if="showListSigners"
-			id="request-signature-list-signers"
+		<NcAppSidebarTab v-if="showSign"
+			id="sign-tab"
+			:name="fileName">
+			<SignTab />
+		</NcAppSidebarTab>
+		<NcAppSidebarTab v-if="showRequestSignatureTab"
+			id="request-signature-tab"
 			:name="fileName">
 			<RequestSignatureTab />
 		</NcAppSidebarTab>
@@ -16,8 +23,10 @@
 import NcAppSidebar from '@nextcloud/vue/dist/Components/NcAppSidebar.js'
 import NcAppSidebarTab from '@nextcloud/vue/dist/Components/NcAppSidebarTab.js'
 import RequestSignatureTab from '../RightSidebar/RequestSignatureTab.vue'
+import SignTab from '../RightSidebar/SignTab.vue'
 import { useFilesStore } from '../../store/files.js'
 import { useSignStore } from '../../store/sign.js'
+import { useSidebarStore } from '../../store/sidebar.js'
 
 export default {
 	name: 'RightSidebar',
@@ -25,11 +34,13 @@ export default {
 		NcAppSidebar,
 		NcAppSidebarTab,
 		RequestSignatureTab,
+		SignTab,
 	},
 	setup() {
 		const filesStore = useFilesStore()
 		const signStore = useSignStore()
-		return { filesStore, signStore }
+		const sidebarStore = useSidebarStore()
+		return { filesStore, signStore, sidebarStore }
 	},
 	computed: {
 		fileName() {
@@ -41,17 +52,28 @@ export default {
 			}
 			return this.filesStore.getSubtitle()
 		},
-		opened() {
-			return this.filesStore.selectedNodeId > 0
+		showRequestSignatureTab() {
+			return this.sidebarStore.activeTab === 'request-signature-tab'
+		},
+		showSign() {
+			return this.sidebarStore.activeTab === 'sign-tab'
+		},
+	},
+	watch: {
+		'sidebarStore.activeTab'(newValue, previousValue) {
+			if (this.$refs?.rightAppSidebar?.$refs?.tabs) {
+				this.$refs.rightAppSidebar.$refs.tabs.activeTab = newValue
+			}
 		},
 	},
 	methods: {
-		showListSigners() {
-			return !!this.filesStore.getFile()?.name
+		handleUpdateActive(active) {
+			this.sidebarStore.setActiveTab(active)
 		},
 		closeSidebar() {
-			this.filesStore.selectFile()
-			this.$emit('close')
+			this.sidebarStore.hideSidebar()
+			// this.filesStore.selectFile()
+			// this.signStore.reset()
 		},
 	},
 }
diff --git a/src/Components/RightSidebar/SignTab.vue b/src/Components/RightSidebar/SignTab.vue
new file mode 100644
index 0000000000..b0851f53e1
--- /dev/null
+++ b/src/Components/RightSidebar/SignTab.vue
@@ -0,0 +1,96 @@
+<!--
+- @copyright Copyright (c) 2024 Vitor Mattos <vitor@php.rio>
+-
+- @author Vitor Mattos <vitor@php.rio>
+-
+- @license GNU AGPL version 3 or any later version
+-
+- This program is free software: you can redistribute it and/or modify
+- it under the terms of the GNU Affero General Public License as
+- published by the Free Software Foundation, either version 3 of the
+- License, or (at your option) any later version.
+-
+- This program is distributed in the hope that it will be useful,
+- but WITHOUT ANY WARRANTY; without even the implied warranty of
+- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+- GNU Affero General Public License for more details.
+-
+- You should have received a copy of the GNU Affero General Public License
+- along with this program.  If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<template>
+	<div class="sign-pdf-sidebar">
+		<header>
+			<Chip>
+				{{ signStore.document.statusText }}
+			</Chip>
+		</header>
+
+		<main>
+			<div v-if="!signStore.mounted" class="sidebar-loading">
+				<p>
+					{{ t('libresign', 'Loading …') }}
+				</p>
+			</div>
+			<div v-if="!signEnabled">
+				{{ t('libresign', 'Document not available for signature.') }}
+			</div>
+			<Sign v-else-if="signStore.mounted"
+				@signed="onSigned" />
+		</main>
+	</div>
+</template>
+
+<script>
+import { SIGN_STATUS } from '../../domains/sign/enum.js'
+import Chip from '../../Components/Chip.vue'
+import Sign from '../../views/SignPDF/_partials/Sign.vue'
+import { useSignStore } from '../../store/sign.js'
+import { useSidebarStore } from '../../store/sidebar.js'
+
+export default {
+	name: 'SignTab',
+	components: {
+		Chip,
+		Sign,
+	},
+	setup() {
+		const signStore = useSignStore()
+		const sidebarStore = useSidebarStore()
+		return { signStore, sidebarStore }
+	},
+	methods: {
+		signEnabled() {
+			return SIGN_STATUS.ABLE_TO_SIGN === this.signStore.document.status
+				|| SIGN_STATUS.PARTIAL_SIGNED === this.signStore.document.status
+		},
+		onSigned(data) {
+			this.$router.push({
+				name: 'ValidationFile',
+				params: {
+					uuid: data.file.uuid,
+					isAfterSigned: true,
+				},
+			})
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+header {
+	text-align: center;
+	width: 100%;
+	margin-top: 1em;
+	margin-bottom: 3em;
+}
+main {
+	flex-direction: column;
+	align-items: center;
+	width: 100%;
+	.sidebar-loading {
+		text-align: center;
+	}
+}
+</style>
diff --git a/src/Components/TopBar/SidebarToggle.vue b/src/Components/TopBar/SidebarToggle.vue
new file mode 100644
index 0000000000..72c4c7b350
--- /dev/null
+++ b/src/Components/TopBar/SidebarToggle.vue
@@ -0,0 +1,56 @@
+<!--
+- @copyright Copyright (c) 2024 Vitor Mattos <vitor@php.rio>
+-
+- @author Vitor Mattos <vitor@php.rio>
+-
+- @license GNU AGPL version 3 or any later version
+-
+- This program is free software: you can redistribute it and/or modify
+- it under the terms of the GNU Affero General Public License as
+- published by the Free Software Foundation, either version 3 of the
+- License, or (at your option) any later version.
+-
+- This program is distributed in the hope that it will be useful,
+- but WITHOUT ANY WARRANTY; without even the implied warranty of
+- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+- GNU Affero General Public License for more details.
+-
+- You should have received a copy of the GNU Affero General Public License
+- along with this program.  If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<template>
+	<NcButton v-if="sidebarStore.canShow()"
+		:aria-label="t('spreed', 'Open sidebar')"
+		:title="t('spreed', 'Open sidebar')"
+		close-after-click="true"
+		type="tertiary"
+		@click="openSidebar">
+		<template #icon>
+			<MenuIcon :size="20" />
+		</template>
+	</NcButton>
+</template>
+
+<script>
+import MenuIcon from 'vue-material-design-icons/Menu.vue'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import { useSidebarStore } from '../../store/sidebar.js'
+
+export default {
+	name: 'SidebarToggle',
+	components: {
+		NcButton,
+		MenuIcon,
+	},
+	setup() {
+		const sidebarStore = useSidebarStore()
+		return { sidebarStore }
+	},
+	methods: {
+		openSidebar() {
+			this.sidebarStore.showSidebar()
+		},
+	},
+}
+</script>
diff --git a/src/Components/TopBar/TopBar.vue b/src/Components/TopBar/TopBar.vue
new file mode 100644
index 0000000000..c1de3deaba
--- /dev/null
+++ b/src/Components/TopBar/TopBar.vue
@@ -0,0 +1,68 @@
+<!--
+- @copyright Copyright (c) 2024 Vitor Mattos <vitor@php.rio>
+-
+- @author Vitor Mattos <vitor@php.rio>
+-
+- @license GNU AGPL version 3 or any later version
+-
+- This program is free software: you can redistribute it and/or modify
+- it under the terms of the GNU Affero General Public License as
+- published by the Free Software Foundation, either version 3 of the
+- License, or (at your option) any later version.
+-
+- This program is distributed in the hope that it will be useful,
+- but WITHOUT ANY WARRANTY; without even the implied warranty of
+- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+- GNU Affero General Public License for more details.
+-
+- You should have received a copy of the GNU Affero General Public License
+- along with this program.  If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<template>
+	<div class="top-bar" :style="topBarStyle">
+		<slot name="filter" />
+		<SidebarToggle v-if="sidebarToggle" />
+	</div>
+</template>
+
+<script>
+import SidebarToggle from './SidebarToggle.vue'
+
+export default {
+	name: 'TopBar',
+	components: {
+		SidebarToggle,
+	},
+	props: {
+		sidebarToggle: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	computed: {
+		topBarStyle() {
+			return {
+				'--original-color-main-background': window.getComputedStyle(document.body).getPropertyValue('--color-main-background'),
+			}
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.top-bar {
+	display: flex;
+	flex-wrap: wrap;
+	z-index: 10;
+	gap: 3px;
+	justify-content: flex-end;
+	border-bottom: 1px solid var(--color-border);
+	background-color: rgba(var(--color-main-background-rgb),0.8);
+	transition: all 0.3s ease-out 0s;
+	width: 100%;
+	> * {
+		margin: 8px;
+	}
+}
+</style>
diff --git a/src/external.js b/src/external.js
index b933126796..1c77afcb69 100644
--- a/src/external.js
+++ b/src/external.js
@@ -26,7 +26,7 @@ import { getRequestToken } from '@nextcloud/auth'
 import Vue from 'vue'
 import { createPinia, PiniaVuePlugin } from 'pinia'
 
-import External from './External.vue'
+import App from './App.vue'
 import router from './router/router.js'
 import store from './store/index.js'
 
@@ -61,5 +61,5 @@ export default new Vue({
 	router,
 	store,
 	pinia,
-	render: h => h(External),
+	render: h => h(App),
 })
diff --git a/src/helpers/SelectAction.js b/src/helpers/SelectAction.js
index ad8b16b0a8..f82b3d55b0 100644
--- a/src/helpers/SelectAction.js
+++ b/src/helpers/SelectAction.js
@@ -22,32 +22,37 @@
  */
 
 import { loadState } from '@nextcloud/initial-state'
+import { isExternal } from '../helpers/isExternal.js'
 
 const redirectURL = loadState('libresign', 'redirect', 'Home')
 
-export const selectAction = (action) => {
+export const selectAction = (action, to, from) => {
+	const isExternalRoute = isExternal(to, from)
+	const external = isExternalRoute ? 'External' : ''
 	switch (action) {
 	case 1000: // ACTION_REDIRECT
 		window.location.replace(redirectURL.toString())
 		break
 	case 1500: // ACTION_CREATE_ACCOUNT
-		return 'CreateAccount'
+		return 'CreateAccount' + external
 	case 2000: // ACTION_DO_NOTHING
-		return 'DefaultPageError'
+		return 'DefaultPageError' + external
 	case 2500: // ACTION_SIGN
-		return 'SignPDF'
+		return 'SignPDF' + external
+	case 2625: // ACTION_SIGN_INTERNAL
+		return 'SignPDF' + external
 	case 2750: // ACTION_SIGN_ACCOUNT_FILE
-		return 'AccountFileApprove'
+		return 'AccountFileApprove' + external
 	case 3000: // ACTION_SHOW_ERROR
-		return 'DefaultPageSuccess'
+		return 'DefaultPageError' + external
 	case 3500: // ACTION_SIGNED
-		return 'DefaultPageSuccess'
+		return 'ValidationFile' + external
 	case 4000: // ACTION_CREATE_SIGNATURE_PASSWORD
-		return 'CreatePassword'
+		return 'CreatePassword' + external
 	case 4500: // ACTION_RENEW_EMAIL
-		return 'RenewEmail'
+		return 'RenewEmail' + external
 	case 5000: // ACTION_INCOMPLETE_SETUP
-		return 'incomplete'
+		return 'incomplete' + external
 	default:
 		break
 	}
diff --git a/src/helpers/isExternal.js b/src/helpers/isExternal.js
new file mode 100644
index 0000000000..60fbc2e948
--- /dev/null
+++ b/src/helpers/isExternal.js
@@ -0,0 +1,6 @@
+export const isExternal = (to, from) => {
+	if (from.path === '/') {
+		return to.path.startsWith('/p/')
+	}
+	return from.path.startsWith('/p/')
+}
diff --git a/src/router/router.js b/src/router/router.js
index e98663282b..4d72c0e8b5 100644
--- a/src/router/router.js
+++ b/src/router/router.js
@@ -24,6 +24,7 @@ import Vue from 'vue'
 import Router from 'vue-router'
 import { getRootUrl, generateUrl } from '@nextcloud/router'
 import { selectAction } from '../helpers/SelectAction.js'
+import { isExternal } from '../helpers/isExternal.js'
 import { loadState } from '@nextcloud/initial-state'
 
 Vue.use(Router)
@@ -46,56 +47,50 @@ const router = new Router({
 	base: generateWebBasePath(),
 	linkActiveClass: 'active',
 	routes: [
-		{
-			path: '/reset-password',
-			name: 'ResetPassword',
-			component: () => import('../views/ResetPassword.vue'),
-		},
-
 		// public
-		{
-			path: '/p/account/files/approve/:uuid',
-			name: 'AccountFileApprove',
-			component: () => import('../views/SignPDF/SignPDF.vue'),
-			props: true,
-		},
 		{
 			path: '/p/sign/:uuid',
-			redirect: { name: selectAction(loadState('libresign', 'action', '')) },
+			beforeEnter: (to, from, next) => {
+				const action = selectAction(loadState('libresign', 'action', ''), to, from)
+				if (action !== undefined) {
+					if (to.name !== 'incomplete') {
+						next({
+							name: action,
+							params: to.params,
+						})
+						return
+					}
+				}
+				next()
+			},
 			props: true,
 		},
 		{
 			path: '/p/sign/:uuid/pdf',
-			name: 'SignPDF',
+			name: 'SignPDFExternal',
 			component: () => import('../views/SignPDF/SignPDF.vue'),
 			props: true,
 		},
 		{
 			path: '/p/sign/:uuid/sign-in',
-			name: 'CreateAccount',
+			name: 'CreateAccountExternal',
 			component: () => import('../views/CreateAccount.vue'),
 			props: true,
 		},
 		{
 			path: '/p/sign/:uuid/error',
-			name: 'DefaultPageError',
+			name: 'DefaultPageErrorExternal',
 			component: () => import('../views/DefaultPageError.vue'),
 			props: true,
 		},
-		{
-			path: '/p/sign/:uuid/success',
-			name: 'DefaultPageSuccess',
-			component: () => import('../views/DefaultPageSuccess.vue'),
-			props: true,
-		},
 		{
 			path: '/p/sign/:uuid/renew/email',
-			name: 'RenewEmail',
+			name: 'RenewEmailExternal',
 			component: () => import('../views/RenewEmail.vue'),
 		},
 		{
 			path: '/p/validation/:uuid',
-			name: 'validationFilePublic',
+			name: 'ValidationFileExternal',
 			component: () => import('../views/Validation.vue'),
 			props: true,
 		},
@@ -113,7 +108,7 @@ const router = new Router({
 			path: '/f/incomplete',
 			name: 'incomplete',
 			beforeEnter: (to, from, next) => {
-				const action = selectAction(loadState('libresign', 'action', ''))
+				const action = selectAction(loadState('libresign', 'action', ''), to, from)
 				if (action !== undefined) {
 					if (to.name !== 'incomplete') {
 						next({
@@ -134,7 +129,7 @@ const router = new Router({
 		},
 		{
 			path: '/f/validation/:uuid',
-			name: 'validationFile',
+			name: 'ValidationFile',
 			component: () => import('../views/Validation.vue'),
 			props: true,
 		},
@@ -154,6 +149,18 @@ const router = new Router({
 			},
 			component: () => import('../views/Request.vue'),
 		},
+		{
+			path: '/f/sign/:uuid/pdf',
+			name: 'SignPDF',
+			component: () => import('../views/SignPDF/SignPDF.vue'),
+			props: true,
+		},
+		{
+			path: '/f/account/files/approve/:uuid',
+			name: 'AccountFileApprove',
+			component: () => import('../views/SignPDF/SignPDF.vue'),
+			props: true,
+		},
 		{
 			path: '/f/account',
 			name: 'Account',
@@ -169,19 +176,31 @@ const router = new Router({
 			name: 'CreatePassword',
 			component: () => import('../views/CreatePassword.vue'),
 		},
+		{
+			path: '/f/reset-password',
+			name: 'ResetPassword',
+			component: () => import('../views/ResetPassword.vue'),
+		},
 	],
 })
 
 router.beforeEach((to, from, next) => {
-	const action = selectAction(loadState('libresign', 'action', ''))
-	if (action !== undefined) {
-		document.querySelector('#initial-state-libresign-action').remove()
+	if (Object.hasOwn(to, 'name') && typeof to.name === 'string' && !to.name.endsWith('External') && isExternal(to, from)) {
 		next({
-			name: action,
+			name: to.name + 'External',
 			params: to.params,
 		})
 	} else {
-		next()
+		const action = selectAction(loadState('libresign', 'action', ''), to, from)
+		if (action !== undefined) {
+			document.querySelector('#initial-state-libresign-action').remove()
+			next({
+				name: action,
+				params: to.params,
+			})
+		} else {
+			next()
+		}
 	}
 })
 
diff --git a/src/store/files.js b/src/store/files.js
index 6e7c7eca17..24d210fa41 100644
--- a/src/store/files.js
+++ b/src/store/files.js
@@ -24,6 +24,8 @@ import axios from '@nextcloud/axios'
 import { generateOcsUrl } from '@nextcloud/router'
 import { set } from 'vue'
 import Moment from '@nextcloud/moment'
+import { useSignStore } from './sign.js'
+import { useSidebarStore } from './sidebar.js'
 
 export const useFilesStore = defineStore('files', {
 	state: () => {
@@ -32,6 +34,7 @@ export const useFilesStore = defineStore('files', {
 			selectedNodeId: 0,
 			identifyingSigner: false,
 			loading: false,
+			filterActive: 'all',
 		}
 	},
 
@@ -42,6 +45,13 @@ export const useFilesStore = defineStore('files', {
 		},
 		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] ?? {}
@@ -156,27 +166,34 @@ export const useFilesStore = defineStore('files', {
 				this.files[this.selectedNodeId].signers.filter((i) => i.identify !== signer.identify),
 			)
 		},
-		async getAllFiles() {
-			try {
-				const response = await axios.get(generateOcsUrl('/apps/libresign/api/v1/file/list'))
-				response.data.data.forEach(file => {
-					this.addFile(file)
-				})
-			} catch (err) {
+		async getAllFiles(filter) {
+			const response = await axios.get(generateOcsUrl('/apps/libresign/api/v1/file/list'), {
+				params: {
+					filter,
+				},
+			})
+			this.files = {}
+			response.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)
 			}
-		},
-		pendingFilter() {
-			return Object.values(this.files).filter(
-				(a) => (a.status === 1 || a.status === 2)).sort(
-				(a, b) => (a.request_date < b.request_date) ? 1 : -1)
-		},
-		signedFilter() {
-			return Object.values(this.files).filter(
-				(a) => (a.status === 3)).sort(
-				(a, b) => (a.request_date < b.request_date) ? 1 : -1)
-		},
-		orderFiles() {
-			return Object.values(this.files).sort((a, b) => (a.request_date < b.request_date) ? 1 : -1)
 		},
 	},
 })
diff --git a/src/store/sidebar.js b/src/store/sidebar.js
index f0301d9880..394b14c29d 100644
--- a/src/store/sidebar.js
+++ b/src/store/sidebar.js
@@ -20,18 +20,42 @@
  */
 
 import { defineStore } from 'pinia'
+import { set } from 'vue'
 
 export const useSidebarStore = defineStore('sidebar', {
 	state: () => ({
 		show: false,
+		activeTab: '',
 	}),
 
 	actions: {
+		canShow() {
+			return this.show === false && this.activeTab.length > 0
+		},
+		isVisible() {
+			return this.show === true && this.activeTab.length > 0
+		},
 		showSidebar() {
-			this.show = true
+			set(this, 'show', true)
+		},
+		activeSignTab() {
+			set(this, 'activeTab', 'sign-tab')
+			this.showSidebar()
+		},
+		activeRequestSignatureTab() {
+			set(this, 'activeTab', 'request-signature-tab')
+			this.showSidebar()
+		},
+		setActiveTab(id) {
+			set(this, 'activeTab', id ?? '')
+			if (id) {
+				this.hideSidebar()
+			} else {
+				this.showSidebar()
+			}
 		},
 		hideSidebar() {
-			this.show = false
+			set(this, 'show', false)
 		},
 	},
 })
diff --git a/src/store/sign.js b/src/store/sign.js
index 8675beecd8..badba5fa09 100644
--- a/src/store/sign.js
+++ b/src/store/sign.js
@@ -20,37 +20,67 @@
  */
 
 import { defineStore } from 'pinia'
+import { set } from 'vue'
 import { loadState } from '@nextcloud/initial-state'
+import { useFilesStore } from './files.js'
+import { useSidebarStore } from './sidebar.js'
+import { useSignMethodsStore } from './signMethods.js'
+
+const defaultState = {
+	errors: [],
+	document: {
+		name: '',
+		description: '',
+		status: '',
+		statusText: '',
+		url: '',
+		nodeId: 0,
+		uuid: '',
+		signers: [],
+	},
+	mounted: false,
+}
 
 export const useSignStore = defineStore('sign', {
-	state: () => ({
-		errors: [],
-		document: {
-			name: '',
-			description: '',
-			status: '',
-			statusText: '',
-			url: '',
-			uuid: '',
-			signers: [],
-			visibleElements: [],
-		},
-	}),
+	state: () => ({ ...defaultState }),
 
 	actions: {
 		initFromState() {
 			this.errors = loadState('libresign', 'errors', [])
 			const pdf = loadState('libresign', 'pdf', [])
-			this.document = {
+			const file = {
 				name: loadState('libresign', 'filename'),
 				description: loadState('libresign', 'description', ''),
 				status: loadState('libresign', 'status'),
 				statusText: loadState('libresign', 'statusText'),
 				url: pdf.url,
+				nodeId: loadState('libresign', 'nodeId'),
 				uuid: loadState('libresign', 'uuid', null),
 				signers: loadState('libresign', 'signers', []),
-				visibleElements: loadState('libresign', 'visibleElements', []),
 			}
+			this.setDocumentToSign(file)
+			const filesStore = useFilesStore()
+			filesStore.addFile(file)
+			filesStore.selectedNodeId = file.nodeId
+		},
+		setDocumentToSign(document) {
+			if (document) {
+				set(this, 'document', document)
+
+				const sidebarStore = useSidebarStore()
+				sidebarStore.activeSignTab()
+
+				const signMethodsStore = useSignMethodsStore()
+				const signer = document.signers.find(row => row.me) || {}
+				signMethodsStore.settings = signer.signatureMethods
+				return
+			}
+			this.reset()
+		},
+		reset() {
+			set(this, 'document', defaultState)
+			const sidebarStore = useSidebarStore()
+			sidebarStore.setActiveTab()
 		},
 	},
 })
diff --git a/src/store/signMethods.js b/src/store/signMethods.js
index f590344221..6b203cda2f 100644
--- a/src/store/signMethods.js
+++ b/src/store/signMethods.js
@@ -21,7 +21,6 @@
 
 import { defineStore } from 'pinia'
 import { set } from 'vue'
-import { loadState } from '@nextcloud/initial-state'
 
 export const useSignMethodsStore = defineStore('signMethods', {
 	state: () => ({
@@ -33,7 +32,7 @@ export const useSignMethodsStore = defineStore('signMethods', {
 			createSignature: false,
 			sms: false,
 		},
-		settings: loadState('libresign', 'signature_methods', []),
+		settings: [],
 	}),
 	actions: {
 		closeModal(modalCode) {
diff --git a/src/store/signatureElements.js b/src/store/signatureElements.js
index 37067a1103..953a76ce7c 100644
--- a/src/store/signatureElements.js
+++ b/src/store/signatureElements.js
@@ -31,7 +31,7 @@ export const useSignatureElementsStore = function(...args) {
 		type: '',
 		file: {
 			url: '',
-			fileId: 0,
+			nodeId: 0,
 		},
 		starred: 0,
 		createdAt: '',
@@ -73,8 +73,8 @@ export const useSignatureElementsStore = function(...args) {
 			async save(type, base64) {
 				const config = {}
 				if (this.signs[type].id > 0) {
-					config.url = generateOcsUrl('/apps/libresign/api/v1/account/signature/elements/{elementId}', {
-						elementId: this.signs[type].id,
+					config.url = generateOcsUrl('/apps/libresign/api/v1/account/signature/elements/{nodeId}', {
+						nodeId: this.signs[type].file.nodeId,
 					})
 					config.data = {
 						type,
@@ -115,8 +115,8 @@ export const useSignatureElementsStore = function(...args) {
 			},
 			async delete(type) {
 				await axios.delete(
-					generateOcsUrl('/apps/libresign/api/v1/account/signature/elements/{elementId}', {
-						elementId: this.signs[type].id,
+					generateOcsUrl('/apps/libresign/api/v1/account/signature/elements/{nodeId}', {
+						nodeId: this.signs[type].file.nodeId,
 					}),
 				)
 					.then(({ data }) => {
diff --git a/src/views/Account/partials/Signature.vue b/src/views/Account/partials/Signature.vue
index 30a5bad40c..978202b73b 100644
--- a/src/views/Account/partials/Signature.vue
+++ b/src/views/Account/partials/Signature.vue
@@ -108,10 +108,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.signature-modal {
-	background-color: red;
-}
-
 .signature-fav{
 	margin: 10px;
 
diff --git a/src/views/Account/partials/Signatures.vue b/src/views/Account/partials/Signatures.vue
index e08f298fb0..ac6873425a 100644
--- a/src/views/Account/partials/Signatures.vue
+++ b/src/views/Account/partials/Signatures.vue
@@ -43,7 +43,7 @@ export default {
 <style lang="scss" scoped>
 .signatures {
 	align-items: flex-start;
-	width: 100%;
+	max-width: 350px;
 
 	h1{
 		font-size: 1.3rem;
diff --git a/src/views/DefaultPageError.vue b/src/views/DefaultPageError.vue
index d77add1c93..0c59e36dd5 100644
--- a/src/views/DefaultPageError.vue
+++ b/src/views/DefaultPageError.vue
@@ -30,26 +30,33 @@
 				{{ message || t('libresign', 'Page not found') }}
 			</h2>
 			<p>{{ paragth }}</p>
+			<NcNoteCard v-if="errors.length > 0" type="error" heading="Error">
+				<p v-for="error in errors" :key="error">
+					{{ error }}
+				</p>
+			</NcNoteCard>
 		</div>
 	</div>
 </template>
 
 <script>
 import { translate as t } from '@nextcloud/l10n'
-import { mapGetters } from 'vuex'
+import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
+import { loadState } from '@nextcloud/initial-state'
 
 export default {
 	name: 'DefaultPageError',
+	components: {
+		NcNoteCard,
+	},
 
 	data() {
 		return {
 			paragth: t('libresign', 'Sorry but the page you are looking for does not exist, has been removed, moved or is temporarily unavailable.'),
+			errors: loadState('libresign', 'errors', []),
 		}
 	},
 
-	computed: {
-		...mapGetters({ message: 'error/getErrorMessage', code: 'error/getErrorCode' }),
-	},
 }
 </script>
 
@@ -68,12 +75,6 @@ export default {
 		background-repeat: no-repeat;
 		background-size: cover;
 		line-height: 17.6px;
-
-		&::before {
-			content: '';
-			background-color: rgb(0, 245, 248);
-			border: 50%;
-		}
 	}
 
 }
@@ -81,8 +82,6 @@ export default {
 .content{
 	box-sizing: border-box;
 	font-family: 'Nunito', sans-serif;
-	text-transform: uppercase;
-	color: rgb(21, 23, 25);
 	max-width: 560px;
 	padding-left: 50px;
 
@@ -102,7 +101,7 @@ export default {
 		margin-bottom: 10px;
 	}
 	p{
-		color: rgb(153, 159, 165);
+		color: var(--color-main-text);
 		font-weight: 400;
 		line-height: 17.6px;
 	}
diff --git a/src/views/DefaultPageSuccess.vue b/src/views/DefaultPageSuccess.vue
deleted file mode 100644
index 70dc2851bc..0000000000
--- a/src/views/DefaultPageSuccess.vue
+++ /dev/null
@@ -1,157 +0,0 @@
-<!--
-- @copyright Copyright (c) 2021 Lyseon Tech <contato@lt.coop.br>
--
-- @author Lyseon Tech <contato@lt.coop.br>
-- @author Vinicios Gomes <viniciusgomesvaian@gmail.com>
--
-- @license GNU AGPL version 3 or any later version
--
-- This program is free software: you can redistribute it and/or modify
-- it under the terms of the GNU Affero General Public License as
-- published by the Free Software Foundation, either version 3 of the
-- License, or (at your option) any later version.
--
-- This program is distributed in the hope that it will be useful,
-- but WITHOUT ANY WARRANTY; without even the implied warranty of
-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-- GNU Affero General Public License for more details.
--
-- You should have received a copy of the GNU Affero General Public License
-- along with this program.  If not, see <http://www.gnu.org/licenses/>.
--
--->
-
-<template>
-	<div id="container">
-		<div id="bg">
-			<img :src="logo">
-			<h2>{{ subtitle }}</h2>
-
-			<button class="secondary btn-primary" @click="sendToView">
-				{{ t('libresign', 'See Document Validation') }}
-			</button>
-		</div>
-	</div>
-</template>
-
-<script>
-import icon from '../../img/logo-white.svg'
-import { translate as t } from '@nextcloud/l10n'
-import { getCurrentUser } from '@nextcloud/auth'
-import { loadState } from '@nextcloud/initial-state'
-export default {
-	name: 'DefaultPageSuccess',
-	data() {
-		return {
-			logo: icon,
-			subtitle: t('libresign', 'Congratulations you have digitally signed a document using LibreSign'),
-		}
-	},
-	computed: {
-		myUuid() {
-			const getUuid = this.$route.params.uuid
-			if (getUuid) {
-				return getUuid
-			}
-			return loadState('libresign', 'uuid')
-		},
-	},
-	methods: {
-		sendToView() {
-			const name = getCurrentUser() ? 'validationFile' : 'validationFilePublic'
-			const url = this.$router.resolve({
-				name,
-				params: {
-					uuid: this.myUuid,
-				},
-			})
-			window.location.href = url.href
-		},
-	},
-}
-</script>
-
-<style lang="scss" scoped>
-#container{
-	width: 100%;
-	height: 100%;
-}
-
-#bg{
-	background-image: url('../../img/frame4.png');
-	box-sizing: border-box;
-	-webkit-backgroung-size: cover;
-	-moz-background-size: cover;
-	-o-background-size: cover;
-	background-size: cover;
-	background-position: center center;
-	background-repeat: no-repeat;
-	background-attachment: fixed;
-
-	width: 100%;
-	height: 100%;
-
-	img {
-		position: absolute;
-		top: 10%;
-		left: 56px;
-	}
-
-	h1{
-		position: absolute;
-		top: 10%;
-		left: 56px;
-		line-height: normal;
-		font-size: 2.1rem;
-		font-weight: 800;
-		text-align: left;
-		color: #FFFFFF;
-		width: 30%;
-		text-shadow: 2px 2px rgba(0, 0, 0, .8);
-
-	}
-	h2{
-		position: absolute;
-		top: 30%;
-		left: 56px;
-		color: #FFFFFF;
-		font-size: 1.6rem;
-		font-weight: 600;
-		text-align: left;
-		line-height: normal;
-		width: 40%;
-		text-shadow: 2px 2px 3px rgba(0, 0, 0, 1);
-	}
-
-	button.btn-primary{
-		position: absolute;
-		top: 90%;
-		left: 56px;
-	}
-
-	span{
-		position: absolute;
-		top: 92%;
-		color: #fefefe;
-		left: 45%;
-		font-size: 1rem;
-		font-weight: 500;
-		text-align: center;
-	}
-	@media (max-width: 550px) {
-		h2{
-			width: 68%;
-		}
-	}
-	@media (max-width: 450px) {
-		h1{
-			font-size: 1.5rem;
-		}
-		h2{
-			font-size: 1.1rem;
-			width: 68%;
-		}
-	}
-}
-
-</style>
diff --git a/src/views/SignPDF/SignPDF.vue b/src/views/SignPDF/SignPDF.vue
index adadd7396c..fc96ef69f2 100644
--- a/src/views/SignPDF/SignPDF.vue
+++ b/src/views/SignPDF/SignPDF.vue
@@ -1,129 +1,85 @@
 <template>
-	<NcContent app-name="libresign" :class="isMobile ? 'container mobile' : 'container'">
-		<NcAppNavigation :aria-label="t('libresign', 'Signature tab')"
-			:class="{'icon-loading': loading}">
-			<div class="sign-pdf-sidebar">
-				<header>
-					<img class="pdf-icon" :src="PDFIcon">
-					<h1>
-						{{ signStore.document.name }}
-						<br>
-						<Chip>
-							{{ signStore.document.statusText }}
-						</Chip>
-					</h1>
-				</header>
-
-				<main>
-					<div v-if="loading" class="sidebar-loading">
-						<p>
-							{{ t('libresign', 'Loading …') }}
-						</p>
-					</div>
-					<div v-if="!signEnabled">
-						{{ t('libresign', 'Document not available for signature.') }}
-					</div>
-					<Sign v-else-if="!loading"
-						v-bind="{ docType }"
-						@signed="onSigned" />
-				</main>
-			</div>
-		</NcAppNavigation>
-		<NcAppContent>
-			<PdfEditor v-if="mounted"
-				ref="pdfEditor"
-				width="100%"
-				height="100%"
-				:file-src="signStore.document.url"
-				:read-only="true"
-				@pdf-editor:end-init="updateSigners" />
-		</NcAppContent>
-	</NcContent>
+	<div class="main-view">
+		<TopBar :sidebar-toggle="true" />
+		<PdfEditor v-if="mounted"
+			ref="pdfEditor"
+			width="100%"
+			height="100%"
+			:file-src="signStore.document.url"
+			:read-only="true"
+			@pdf-editor:end-init="updateSigners" />
+	</div>
 </template>
 
 <script>
-import NcContent from '@nextcloud/vue/dist/Components/NcContent.js'
-import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
-import NcAppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation.js'
-import isMobile from '@nextcloud/vue/dist/Mixins/isMobile.js'
 import { showErrors } from '../../helpers/errors.js'
 import PdfEditor from '../../Components/PdfEditor/PdfEditor.vue'
-import Chip from '../../Components/Chip.vue'
-import Sign from './_partials/Sign.vue'
-import PDFIcon from '../../../img/application-pdf.png'
-import { SIGN_STATUS } from '../../domains/sign/enum.js'
 import { useSignStore } from '../../store/sign.js'
+import { useFilesStore } from '../../store/files.js'
+import { useSignMethodsStore } from '../../store/signMethods.js'
+import TopBar from '../../Components/TopBar/TopBar.vue'
 
 export default {
 	name: 'SignPDF',
 	components: {
-		NcContent,
-		NcAppContent,
-		NcAppNavigation,
+		TopBar,
 		PdfEditor,
-		Chip,
-		Sign,
 	},
-	mixins: [
-		isMobile,
-	],
 	setup() {
 		const signStore = useSignStore()
-		return { signStore }
+		const fileStore = useFilesStore()
+		const signMethodsStore = useSignMethodsStore()
+		return { signStore, fileStore, signMethodsStore }
 	},
 	data() {
 		return {
-			loading: true,
 			mounted: false,
-			PDFIcon,
 		}
 	},
-	computed: {
-		docType() {
-			return this.$route.name === 'AccountFileApprove'
-				? 'document-validate'
-				: 'default'
-		},
-	},
 	mounted() {
-		if (this.signStore.document.uuid.length === 0) {
-			this.signStore.initFromState()
-			if (!this.signStore.document.uuid) {
-				this.signStore.document.uuid = this.$route.params.uuid
-			}
+		if (this.$route.name === 'SignPDFExternal') {
+			this.initSignExternal()
+		} else if (this.$route.name === 'SignPDF') {
+			this.initSignInternal()
 		}
-		this.mounted = true
 		showErrors(this.signStore.errors)
 	},
 	methods: {
-		signEnabled() {
-			return SIGN_STATUS.ABLE_TO_SIGN === this.signStore.document.status
-				|| SIGN_STATUS.PARTIAL_SIGNED === this.signStore.document.status
+		initSignExternal() {
+			this.signStore.initFromState()
+			if (!this.signStore.document.uuid) {
+				this.signStore.document.uuid = this.$route.params.uuid
+			}
+			this.mounted = true
+		},
+		async initSignInternal() {
+			const files = await this.fileStore.getAllFiles({
+				signer_uuid: this.$route.params.uuid,
+			})
+			for (const nodeId in files) {
+				const signer = files[nodeId].signers.find(row => row.me) || {}
+				if (Object.keys(signer).length > 0) {
+					this.signStore.setDocumentToSign(files[nodeId])
+					this.fileStore.selectedNodeId = nodeId
+					this.mounted = true
+					return true
+				}
+			}
 		},
 		updateSigners(data) {
 			this.signStore.document.signers.forEach(signer => {
-				if (this.signStore.document.visibleElements) {
-					this.signStore.document.visibleElements.forEach(element => {
-						if (element.signRequestId === signer.signRequestId) {
-							const object = structuredClone(signer)
-							object.readOnly = true
-							element.coordinates.ury = Math.round(data.measurement[element.coordinates.page].height)
-								- element.coordinates.ury
-							object.element = element
-							this.$refs.pdfEditor.addSigner(object)
-						}
+				if (signer.visibleElements.length > 0) {
+					signer.visibleElements.forEach(element => {
+						const object = structuredClone(signer)
+						object.readOnly = true
+						element.coordinates.ury = Math.round(data.measurement[element.coordinates.page].height)
+							- element.coordinates.ury
+						object.element = element
+						this.$refs.pdfEditor.addSigner(object)
 					})
 				}
 			})
-			this.loading = false
-		},
-		onSigned(data) {
-			this.$router.push({
-				name: 'DefaultPageSuccess',
-				params: {
-					uuid: data.file.uuid,
-				},
-			})
+			this.signStore.mounted = true
 		},
 	},
 }
@@ -135,53 +91,12 @@ export default {
 }
 </style>
 <style lang="scss" scoped>
-.app-navigation {
-	width: unset;
-}
-.container {
-	all: unset;
-	display: flex;
-	flex-direction: row;
-	width: 100%;
+.main-view {
 	height: 100%;
-
-	.sign-pdf-sidebar {
-		min-width: 380px;
-		max-width: 450px;
-		height: 100%;
-		display: flex;
-		align-items: flex-start;
-		flex-direction: column;
-		header {
-			display: block;
-			text-align: center;
-			width: 100%;
-			margin-top: 1em;
-			margin-bottom: 3em;
-			.pdf-icon {
-				max-height: 100px;
-			}
-			h1 {
-				font-size: 1.2em;
-				font-weight: bold;
-			}
-			img {
-				display: inline-block;
-				margin: 0 auto;
-			}
-			small {
-				display: block;
-			}
-		}
-		main {
-			flex-direction: column;
-			align-items: center;
-			width: 100%;
-			.sidebar-loading {
-				text-align: center;
-			}
-		}
-	}
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	align-content: space-between;
+	position: relative;
 }
-
 </style>
diff --git a/src/views/SignPDF/_partials/ModalEmailManager.vue b/src/views/SignPDF/_partials/ModalEmailManager.vue
index 0330d3e1bb..af3302e65c 100644
--- a/src/views/SignPDF/_partials/ModalEmailManager.vue
+++ b/src/views/SignPDF/_partials/ModalEmailManager.vue
@@ -1,6 +1,6 @@
 <template>
 	<NcModal size="normal"
-		:can-close="false"
+		:can-close="!loading"
 		@close="close">
 		<div class="modal__content">
 			<h2 class="modal__header">
diff --git a/src/views/SignPDF/_partials/Sign.vue b/src/views/SignPDF/_partials/Sign.vue
index f82777f150..bd5ad4841e 100644
--- a/src/views/SignPDF/_partials/Sign.vue
+++ b/src/views/SignPDF/_partials/Sign.vue
@@ -1,9 +1,7 @@
 <template>
 	<div class="document-sign">
 		<div class="sign-elements">
-			<figure v-for="element in elements" :key="`element-${element.documentElementId}`">
-				<PreviewSignature :src="element.url" />
-			</figure>
+			<Signatures v-if="hasSignatures" />
 		</div>
 		<div v-if="!loading" class="button-wrapper">
 			<div v-if="ableToSign" class="button-wrapper">
@@ -42,7 +40,7 @@
 				</p>
 			</div>
 		</div>
-		<NcModal v-if="signMethodsStore.needClickToSign() && signMethodsStore.modal.clickToSign"
+		<NcModal v-if="signMethodsStore.modal.clickToSign"
 			:can-close="!loading"
 			@close="signMethodsStore.closeModal('clickToSign')">
 			<div class="modal__content">
@@ -124,13 +122,14 @@ import { showError, showSuccess } from '@nextcloud/dialogs'
 import { onError } from '../../../helpers/errors.js'
 import SMSManager from './ModalSMSManager.vue'
 import EmailManager from './ModalEmailManager.vue'
-import PreviewSignature from '../../../Components/PreviewSignature/PreviewSignature.vue'
+import Signatures from '../../../views/Account/partials/Signatures.vue'
 import Draw from '../../../Components/Draw/Draw.vue'
 import NcPasswordField from '@nextcloud/vue/dist/Components/NcPasswordField.js'
 import CreatePassword from '../../../views/CreatePassword.vue'
 import { useSignStore } from '../../../store/sign.js'
 import { useSignMethodsStore } from '../../../store/signMethods.js'
 import { useSignatureElementsStore } from '../../../store/signatureElements.js'
+import { useSidebarStore } from '../../../store/sidebar.js'
 
 export default {
 	name: 'Sign',
@@ -142,21 +141,15 @@ export default {
 		CreatePassword,
 		SMSManager,
 		EmailManager,
-		PreviewSignature,
+		Signatures,
 		Draw,
 	},
-	props: {
-		docType: {
-			type: String,
-			required: false,
-			default: 'default',
-		},
-	},
 	setup() {
 		const signStore = useSignStore()
 		const signMethodsStore = useSignMethodsStore()
 		const signatureElementsStore = useSignatureElementsStore()
-		return { signStore, signMethodsStore, signatureElementsStore }
+		const sidebarStore = useSidebarStore()
+		return { signStore, signMethodsStore, signatureElementsStore, sidebarStore }
 	},
 	data() {
 		return {
@@ -164,8 +157,6 @@ export default {
 			user: {
 				account: { uid: '', displayName: '' },
 			},
-			modalCreatePassword: false,
-			modalSignWithPassword: false,
 			signPassword: '',
 		}
 	},
@@ -177,24 +168,20 @@ export default {
 				return []
 			}
 
-			const visibleElements = (this.signStore.document?.visibleElements || [])
+			const visibleElements = (signer.visibleElements || [])
 				.filter(row => {
 					return this.signatureElementsStore.hasSignatureOfType(row.type)
 						&& row.signRequestId === signer.signRequestId
 				})
-			const element = visibleElements
-				.map(el => ({
-					documentElementId: el.elementId,
-					profileFileId: this.signatureElementsStore.signs[el.type].file.fileId,
-					url: this.signatureElementsStore.signs[el.type].file.url + '?_t=' + Date.now(),
-				}))
-			return element
+			return visibleElements
 		},
 		hasSignatures() {
 			return this.elements.length > 0
 		},
 		needCreateSignature() {
-			return this.signStore.document?.visibleElements.length > 0
+			const signer = this.signStore.document?.signers.find(row => row.me) || {}
+			return !!signer.signRequestId
+				&& signer.visibleElements.length > 0
 				&& !this.hasSignatures
 		},
 		ableToSign() {
@@ -237,24 +224,24 @@ export default {
 			this.signMethodsStore.closeModal('createSignature')
 		},
 		async signWithClick() {
-			this.signDocument({
+			await this.signDocument({
 				method: 'clickToSign',
 			})
 		},
 		async signWithPassword() {
-			return this.signDocument({
+			await this.signDocument({
 				method: 'password',
 				token: this.signPassword,
 			})
 		},
 		async signWithSMSCode(token) {
-			return this.signDocument({
+			await this.signDocument({
 				method: 'sms',
 				token,
 			})
 		},
 		async signWithEmailToken() {
-			return this.signDocument({
+			await this.signDocument({
 				method: this.signMethodsStore.settings.emailToken.identifyMethod,
 				token: this.signMethodsStore.settings.emailToken.token,
 			})
@@ -264,25 +251,29 @@ export default {
 			if (this.elements.length > 0) {
 				payload.elements = this.elements
 					.map(row => ({
-						documentElementId: row.documentElementId,
-						profileFileId: row.profileFileId,
+						documentElementId: row.elementId,
+						profileNodeId: this.signatureElementsStore.signs[row.type].file.nodeId,
 					}))
 			}
-			try {
-				let url = ''
-				if (this.signStore.document.fileId > 0) {
-					url = generateOcsUrl('/apps/libresign/api/v1/sign/file_id/{fileId}', { fileId: this.signStore.document.fileId })
-				} else {
-					url = generateOcsUrl('/apps/libresign/api/v1/sign/uuid/{uuid}', { uuid: this.signStore.uuid })
-				}
-
-				const { data } = await axios.post(url, payload)
-				if (data?.action === 3500) { // ACTION_SIGNED
-					this.$emit('signed', data)
-				}
-			} catch (err) {
-				onError(err)
+			let url = ''
+			if (this.signStore.document.fileId > 0) {
+				url = generateOcsUrl('/apps/libresign/api/v1/sign/file_id/{nodeId}', { fileId: this.signStore.document.nodeId })
+			} else {
+				const signer = this.signStore.document.signers.find(row => row.me) || {}
+				url = generateOcsUrl('/apps/libresign/api/v1/sign/uuid/{uuid}', { uuid: signer.sign_uuid })
 			}
+
+			await axios.post(url, payload)
+				.then(({ data }) => {
+					if (data.action === 3500) { // ACTION_SIGNED
+						this.signMethodsStore.closeModal(payload.method)
+						this.sidebarStore.hideSidebar()
+						this.$emit('signed', data)
+					}
+				})
+				.catch((err) => {
+					onError(err)
+				})
 			this.loading = false
 		},
 		confirmSignDocument() {
@@ -299,7 +290,7 @@ export default {
 				return
 			}
 			if (this.signMethodsStore.needCreatePassword()) {
-				this.signMethodsStore.showModal('password')
+				this.signMethodsStore.showModal('createPassword')
 				return
 			}
 			if (this.signMethodsStore.needSignWithPassword()) {
diff --git a/src/views/Timeline/Timeline.vue b/src/views/Timeline/Timeline.vue
index 8bfc9431ae..1caba458ed 100644
--- a/src/views/Timeline/Timeline.vue
+++ b/src/views/Timeline/Timeline.vue
@@ -1,19 +1,23 @@
 <template>
 	<div class="container-timeline">
 		<div class="content-timeline">
-			<div class="filtered">
-				<a :class="filterActive === 3 ? 'allFiles active' : 'allFiles'" @click="changeFilter(3)">
-					{{ t('libresign', 'All Files') }}
-				</a>
-				<a :class="filterActive === 1 ? 'pending active': 'pending'" @click="changeFilter(1)">
-					{{ t('libresign', 'Pending') }}
-				</a>
-				<a :class="filterActive === 2 ? 'signed active' : 'signed'" @click="changeFilter(2)">
-					{{ t('libresign', 'Signed') }}
-				</a>
-			</div>
+			<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 filterFile"
+				<File v-for="file in fileList"
 					:key="file.nodeId"
 					:node-id="file.nodeId"
 					:class="{'file-details': true, 'active': file.nodeId === filesStore.file?.file?.nodeId}" />
@@ -32,11 +36,13 @@
 import File from '../../Components/File/File.vue'
 import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
 import FolderIcon from 'vue-material-design-icons/Folder.vue'
+import TopBar from '../../Components/TopBar/TopBar.vue'
 import { useFilesStore } from '../../store/files.js'
 
 export default {
 	name: 'Timeline',
 	components: {
+		TopBar,
 		File,
 		NcEmptyContent,
 		FolderIcon,
@@ -48,47 +54,31 @@ export default {
 	data() {
 		return {
 			loading: false,
-			fileFilter: [],
-			filterActive: 3,
+			filesFiltered: [],
 		}
 	},
 	computed: {
-		filterFile: {
+		fileList: {
 			get() {
-				return this.fileFilter.slice().sort(
+				return this.filesFiltered.slice().sort(
 					(a, b) => (a.request_date < b.request_date) ? 1 : -1,
 				)
 			},
 			set(value) {
-				this.fileFilter = value
+				this.filesFiltered = value
 			},
 		},
 		emptyContentFile() {
-			return this.filterFile.length <= 0
+			return this.fileList.length <= 0
 		},
 	},
 	async created() {
 		await this.filesStore.getAllFiles()
-		this.changeFilter(3)
+		this.changeFilter('all')
 	},
 	methods: {
-		changeFilter(filter) {
-			switch (filter) {
-			case 1:
-				this.filterFile = this.filesStore.pendingFilter()
-				this.filterActive = 1
-				break
-			case 2:
-				this.filterFile = this.filesStore.signedFilter()
-				this.filterActive = 2
-				break
-			case 3:
-				this.filterFile = this.filesStore.orderFiles()
-				this.filterActive = 3
-				break
-			default:
-				break
-			}
+		changeFilter(type) {
+			this.fileList = this.filesStore.filter(type)
 		},
 	},
 }
@@ -108,9 +98,8 @@ export default {
 
 		.filtered {
 			display: flex;
-			width: 100%;
 			justify-content: flex-end;
-			padding: 10px;
+			padding: 5px;
 
 			a {
 				padding: 6px;
diff --git a/src/views/Validation.vue b/src/views/Validation.vue
index 836961bf57..c1261b9e7e 100644
--- a/src/views/Validation.vue
+++ b/src/views/Validation.vue
@@ -7,8 +7,7 @@
 			<div id="dataUUID">
 				<form v-show="!hasInfo" @submit="(e) => e.preventDefault()">
 					<h1>{{ title }}</h1>
-					<h3>{{ legend }}</h3>
-					<input v-model="myUuid" type="text">
+					<NcTextField :value.sync="myUuid" :label="legend" />
 					<NcButton type="primary"
 						@click.prevent="validate(myUuid)">
 						<template #icon>
@@ -25,10 +24,12 @@
 								<h1>{{ infoDocument }}</h1>
 							</div>
 							<div class="info-document">
+								<NcNoteCard v-if="isAfterSigned" type="success">
+									{{ t('libresign', 'Congratulations you have digitally signed a document using LibreSign') }}
+								</NcNoteCard>
 								<p>
 									<b>{{ document.name }}</b>
 								</p>
-
 								<NcRichText class="legal-information"
 									:text="legalInformation"
 									:use-markdown="true" />
@@ -76,9 +77,12 @@
 <script>
 import axios from '@nextcloud/axios'
 import NcContent from '@nextcloud/vue/dist/Components/NcContent.js'
+import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 import NcRichText from '@nextcloud/vue/dist/Components/NcRichText.js'
+import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
+import JSConfetti from 'js-confetti'
 import { loadState } from '@nextcloud/initial-state'
 import BackgroundImage from '../../img/logo-gray.svg'
 import iconA from '../../img/info-circle-solid.svg'
@@ -89,14 +93,15 @@ import { translate as t } from '@nextcloud/l10n'
 import logger from '../logger.js'
 
 export default {
-	// eslint-disable-next-line vue/match-component-file-name
 	name: 'Validation',
 
 	components: {
+		NcTextField,
 		NcRichText,
 		NcContent,
 		NcButton,
 		NcLoadingIcon,
+		NcNoteCard,
 	},
 
 	data() {
@@ -118,6 +123,11 @@ export default {
 			legalInformation: '',
 		}
 	},
+	computed: {
+		isAfterSigned() {
+			return this.$route.params.isAfterSigned ?? false
+		},
+	},
 	watch: {
 		'$route.params.uuid'(uuid) {
 			this.validate(uuid)
@@ -150,6 +160,10 @@ export default {
 				this.document = response.data
 				this.hasInfo = true
 				this.hasLoading = false
+				if (this.isAfterSigned) {
+					const jsConfetti = new JSConfetti()
+					jsConfetti.addConfetti()
+				}
 			} catch (err) {
 				this.hasLoading = false
 				showError(err.response.data.errors[0])
@@ -163,6 +177,10 @@ export default {
 				this.document = response.data
 				this.hasInfo = true
 				this.hasLoading = false
+				if (this.isAfterSigned) {
+					const jsConfetti = new JSConfetti()
+					jsConfetti.addConfetti()
+				}
 			} catch (err) {
 				this.hasLoading = false
 				showError(err.response.data.errors[0])
@@ -205,8 +223,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-$text-color: #273849;
-$background: #ECEFFC;
 $title-font: 1.5rem;
 $title-font-mobile: 1.3rem;
 $date-signed-font: .7rem;
@@ -258,8 +274,8 @@ $date-signed-font: .7rem;
 }
 
 form{
-	background-color: $background;
-	color: $text-color;
+	background-color: var(--color-main-background);
+	color: var(--color-main-text);
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -268,7 +284,8 @@ form{
 	margin: 20px;
 	border-radius: 8px;
 	max-width: 500px;
-	box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
+	width: 100%;
+	box-shadow: 0 0 6px 0 var(--color-box-shadow);
 
 	@media screen and (max-width: 900px) {
 		width: 100%;
@@ -282,26 +299,12 @@ form{
 h1{
 	font-size: 24px;
 	font-weight: bold;
-	color: $text-color;
-}
-
-h3{
-	color: #337ab7;
-}
-
-input{
-	width: 100%;
-	margin: 20px 0px;
+	color: var(--color-main-text);
 }
 
 button{
-	background-color: #0082c9;
-	color: #FFF;
 	float: right;
 	margin-top: 20px;
-	&:hover{
-		background-color: #286090;
-	}
 }
 
 .infor{
@@ -318,10 +321,10 @@ button{
 }
 
 .infor-bg{
-	background-color: #FFF;
+	background-color: var(--color-main-background);
 	padding: 20px 60px 20px 20px;
 	border-radius: 8px;
-	box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
+	box-shadow: 0 0 6px 0 var(--color-box-shadow);
 
 	.infor-content{
 		display: flex;
@@ -334,7 +337,7 @@ button{
 }
 
 .info-document{
-	color: $text-color;
+	color: var(--color-main-text);
 	display: flex;
 	flex-direction: column;
 	width: 100%;
@@ -377,8 +380,8 @@ button{
 .subscriber {
 	display: flex;
 	flex-direction: column;
-	color: $text-color;
-	background-color: $background;
+	color: var(--color-main-text);
+	background-color: rgba(var(--color-info-rgb), 0.1);
 	border-radius: 8px;
 	padding: 5px 0px 5px 5px;
 	margin: 5px 5px 0px 0px;
@@ -409,6 +412,7 @@ button{
 .icon{
 	width: 30px;
 	margin-right: 10px;
+	filter: var(--background-invert-if-dark);
 }
 
 @media screen and (max-width: 700px) {
diff --git a/tests/integration/composer.json b/tests/integration/composer.json
index 73f1c43538..3f8aefacdc 100644
--- a/tests/integration/composer.json
+++ b/tests/integration/composer.json
@@ -9,7 +9,7 @@
         "rpkamp/mailhog-behat-extension": "^1.0"
     },
     "require-dev": {
-        "libresign/nextcloud-behat": "^0.14.1"
+        "libresign/nextcloud-behat": "^0"
     },
     "config": {
         "allow-plugins": {
diff --git a/tests/integration/composer.lock b/tests/integration/composer.lock
index be8007ea32..010bc9ef91 100644
--- a/tests/integration/composer.lock
+++ b/tests/integration/composer.lock
@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "980e59106d706cd9ffe23545da632cfd",
+    "content-hash": "e976ba554fd744a29aa6d73ab69b216e",
     "packages": [
         {
             "name": "behat/behat",
@@ -5184,16 +5184,16 @@
         },
         {
             "name": "libresign/nextcloud-behat",
-            "version": "v0.14.2",
+            "version": "v0.15.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/LibreSign/nextcloud-behat.git",
-                "reference": "114818c0f0f160ebe8345f77cf17252ebee71916"
+                "reference": "96829df411c2cffeb032281eb90acaf63531da70"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/LibreSign/nextcloud-behat/zipball/114818c0f0f160ebe8345f77cf17252ebee71916",
-                "reference": "114818c0f0f160ebe8345f77cf17252ebee71916",
+                "url": "https://api.github.com/repos/LibreSign/nextcloud-behat/zipball/96829df411c2cffeb032281eb90acaf63531da70",
+                "reference": "96829df411c2cffeb032281eb90acaf63531da70",
                 "shasum": ""
             },
             "require": {
@@ -5238,9 +5238,9 @@
             ],
             "support": {
                 "issues": "https://github.com/LibreSign/nextcloud-behat/issues",
-                "source": "https://github.com/LibreSign/nextcloud-behat/tree/v0.14.2"
+                "source": "https://github.com/LibreSign/nextcloud-behat/tree/v0.15.0"
             },
-            "time": "2024-04-05T20:28:06+00:00"
+            "time": "2024-04-10T13:35:20+00:00"
         },
         {
             "name": "symfony/process",
diff --git a/tests/integration/features/sign/request.feature b/tests/integration/features/sign/request.feature
index 2e38bda1ab..cf65c3ba6b 100644
--- a/tests/integration/features/sign/request.feature
+++ b/tests/integration/features/sign/request.feature
@@ -386,37 +386,27 @@ Feature: request-signature
     And as user ""
     And follow the link on opened email
     And the response should have a status code 200
-    Then the response should contain the initial state "libresign-signature_methods" with the following values:
-      """
-      {
-        "emailToken": {
-          "blurredEmail": "111***@***.test",
-          "hasConfirmCode": false,
-          "hashOfEmail": "c8cb84220c4cf19b723390f29b83a0f8",
-          "identifyMethod": "email",
-          "label": "Email token",
-          "needCode": true
-        }
-      }
-      """
+    Then the response should contain the initial state "libresign-signers" json that match with:
+      | key                                                 | value                            |
+      | (jq).[0].signatureMethods.emailToken.label          | Email token                      |
+      | (jq).[0].signatureMethods.emailToken.identifyMethod | email                            |
+      | (jq).[0].signatureMethods.emailToken.needCode       | true                             |
+      | (jq).[0].signatureMethods.emailToken.hasConfirmCode | false                            |
+      | (jq).[0].signatureMethods.emailToken.blurredEmail   | 111***@***.test                  |
+      | (jq).[0].signatureMethods.emailToken.hashOfEmail    | c8cb84220c4cf19b723390f29b83a0f8 |
     When I open the latest email to "22222@domain.test" with subject "LibreSign: There is a file for you to sign"
     And I fetch the signer UUID from opened email
     And as user ""
     And follow the link on opened email
     And the response should have a status code 200
-    Then the response should contain the initial state "libresign-signature_methods" with the following values:
-      """
-      {
-        "emailToken": {
-          "blurredEmail": "222***@***.test",
-          "hasConfirmCode": false,
-          "hashOfEmail": "d3ab1426f412df8b8bbb9cb2405fb39d",
-          "identifyMethod": "email",
-          "label": "Email token",
-          "needCode": true
-        }
-      }
-      """
+    Then the response should contain the initial state "libresign-signers" json that match with:
+      | key                                                 | value                            |
+      | (jq).[1].signatureMethods.emailToken.label          | Email token                      |
+      | (jq).[1].signatureMethods.emailToken.identifyMethod | email                            |
+      | (jq).[1].signatureMethods.emailToken.needCode       | true                             |
+      | (jq).[1].signatureMethods.emailToken.hasConfirmCode | false                            |
+      | (jq).[1].signatureMethods.emailToken.blurredEmail   | 222***@***.test                  |
+      | (jq).[1].signatureMethods.emailToken.hashOfEmail    | d3ab1426f412df8b8bbb9cb2405fb39d |
 
   Scenario: CRUD of identify methods
     Given run the command "libresign:configure:openssl --cn test" with result code 0