diff --git a/img/file-signature-solid.svg b/img/file-signature-solid.svg
deleted file mode 100644
index 6c8b7f9f33..0000000000
--- a/img/file-signature-solid.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path d="M6.818 13.254a.35.35 0 0 0-.318-.203.34.34 0 0 0-.313.193l-.24.48a.5.5 0 0 1-.921-.066L4.5 12.081l-.332.996a1.35 1.35 0 0 1-1.28.923H2.5a.5.5 0 1 1 0-1h.387a.35.35 0 0 0 .333-.24l.568-1.707a.75.75 0 0 1 1.424 0l.433 1.301c.618-.506 1.69-.303 2.063.443a.35.35 0 0 0 .292.195v-2.566l4-3.971V5H7.75A.75.75 0 0 1 7 4.25V0H.75A.75.75 0 0 0 0 .75v14.5c0 .416.334.75.75.75h10.5c.416 0 .75-.334.75-.75V14l-4-.003a1.34 1.34 0 0 1-1.182-.743M12 3.81a.75.75 0 0 0-.219-.528L8.721.22A.75.75 0 0 0 8.192 0H8v4h4zm-3 7.033V13h2.156l5.052-5.087-2.12-2.121zm8.767-5.613-.996-.996a.796.796 0 0 0-1.125 0l-.852.852 2.121 2.12.852-.85a.795.795 0 0 0 0-1.126" fill="#273849"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h18v16H0z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/img/info-circle-solid.svg b/img/info-circle-solid.svg
deleted file mode 100644
index 4d2e4aa88d..0000000000
--- a/img/info-circle-solid.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 .281A8.72 8.72 0 0 0 .281 9 8.72 8.72 0 0 0 9 17.719 8.72 8.72 0 0 0 17.719 9 8.72 8.72 0 0 0 9 .281m0 3.867a1.477 1.477 0 1 1 0 2.954 1.477 1.477 0 0 1 0-2.954m1.969 8.93a.42.42 0 0 1-.422.422H7.453a.42.42 0 0 1-.422-.422v-.844c0-.233.19-.421.422-.421h.422v-2.25h-.422a.42.42 0 0 1-.422-.422v-.844c0-.233.19-.422.422-.422h2.25c.233 0 .422.189.422.422v3.515h.422c.233 0 .422.19.422.422z" fill="#273849"/></svg>
\ No newline at end of file
diff --git a/lib/ResponseDefinitions.php b/lib/ResponseDefinitions.php
index 48af32f2e8..e28042c1d7 100644
--- a/lib/ResponseDefinitions.php
+++ b/lib/ResponseDefinitions.php
@@ -143,11 +143,18 @@
  *     emailToken?: LibresignSignatureMethodEmailToken,
  *     password?: LibresignSignatureMethodPassword,
  * }
+ * @psalm-type LibresignNotify = array{
+ *     date: int,
+ *     method: "activity"|"notify"|"mail",
+ * }
  * @psalm-type LibresignSigner = array{
  *     description: ?string,
  *     displayName: string,
  *     request_sign_date: string,
  *     email?: string,
+ *     remote_address?: string,
+ *     user_agent?: string,
+ *     notify?: LibresignNotify[],
  *     userId?: string,
  *     signed: ?string,
  *     sign_date?: ?string,
diff --git a/lib/Service/FileService.php b/lib/Service/FileService.php
index fd991d9670..d71955369b 100644
--- a/lib/Service/FileService.php
+++ b/lib/Service/FileService.php
@@ -187,6 +187,16 @@ private function getSigners(): array {
 					->setTimestamp($signer->getCreatedAt())
 					->format('Y-m-d H:i:s'),
 			];
+			$metadata = $signer->getMetadata();
+			if (!empty($metadata['remote-address'])) {
+				$signatureToShow['remote_address'] = $metadata['remote-address'];
+			}
+			if (!empty($metadata['user-agent'])) {
+				$signatureToShow['user_agent'] = $metadata['user-agent'];
+			}
+			if (!empty($metadata['notify'])) {
+				$signatureToShow['notify'] = $metadata['notify'];
+			}
 			if ($signer->getSigned()) {
 				$data['sign_date'] = (new \DateTime())
 					->setTimestamp($signer->getSigned())
diff --git a/openapi-full.json b/openapi-full.json
index fdd71cc001..2d5199b7d3 100644
--- a/openapi-full.json
+++ b/openapi-full.json
@@ -465,6 +465,27 @@
                     }
                 }
             },
+            "Notify": {
+                "type": "object",
+                "required": [
+                    "date",
+                    "method"
+                ],
+                "properties": {
+                    "date": {
+                        "type": "integer",
+                        "format": "int64"
+                    },
+                    "method": {
+                        "type": "string",
+                        "enum": [
+                            "activity",
+                            "notify",
+                            "mail"
+                        ]
+                    }
+                }
+            },
             "OCSMeta": {
                 "type": "object",
                 "required": [
@@ -704,6 +725,18 @@
                     "email": {
                         "type": "string"
                     },
+                    "remote_address": {
+                        "type": "string"
+                    },
+                    "user_agent": {
+                        "type": "string"
+                    },
+                    "notify": {
+                        "type": "array",
+                        "items": {
+                            "$ref": "#/components/schemas/Notify"
+                        }
+                    },
                     "userId": {
                         "type": "string"
                     },
diff --git a/openapi.json b/openapi.json
index 37090de13c..9001abafcf 100644
--- a/openapi.json
+++ b/openapi.json
@@ -402,6 +402,27 @@
                     }
                 }
             },
+            "Notify": {
+                "type": "object",
+                "required": [
+                    "date",
+                    "method"
+                ],
+                "properties": {
+                    "date": {
+                        "type": "integer",
+                        "format": "int64"
+                    },
+                    "method": {
+                        "type": "string",
+                        "enum": [
+                            "activity",
+                            "notify",
+                            "mail"
+                        ]
+                    }
+                }
+            },
             "OCSMeta": {
                 "type": "object",
                 "required": [
@@ -608,6 +629,18 @@
                     "email": {
                         "type": "string"
                     },
+                    "remote_address": {
+                        "type": "string"
+                    },
+                    "user_agent": {
+                        "type": "string"
+                    },
+                    "notify": {
+                        "type": "array",
+                        "items": {
+                            "$ref": "#/components/schemas/Notify"
+                        }
+                    },
                     "userId": {
                         "type": "string"
                     },
diff --git a/src/types/openapi/openapi-full.ts b/src/types/openapi/openapi-full.ts
index 45fc4e040a..08820028e9 100644
--- a/src/types/openapi/openapi-full.ts
+++ b/src/types/openapi/openapi-full.ts
@@ -1172,6 +1172,12 @@ export type components = {
             path: string;
             type: string;
         };
+        Notify: {
+            /** Format: int64 */
+            date: number;
+            /** @enum {string} */
+            method: "activity" | "notify" | "mail";
+        };
         OCSMeta: {
             status: string;
             statuscode: number;
@@ -1234,6 +1240,9 @@ export type components = {
             displayName: string;
             request_sign_date: string;
             email?: string;
+            remote_address?: string;
+            user_agent?: string;
+            notify?: components["schemas"]["Notify"][];
             userId?: string;
             signed: string | null;
             sign_date?: string | null;
diff --git a/src/types/openapi/openapi.ts b/src/types/openapi/openapi.ts
index ef3d3ce084..eb79f9e0d6 100644
--- a/src/types/openapi/openapi.ts
+++ b/src/types/openapi/openapi.ts
@@ -1034,6 +1034,12 @@ export type components = {
             path: string;
             type: string;
         };
+        Notify: {
+            /** Format: int64 */
+            date: number;
+            /** @enum {string} */
+            method: "activity" | "notify" | "mail";
+        };
         OCSMeta: {
             status: string;
             statuscode: number;
@@ -1088,6 +1094,9 @@ export type components = {
             displayName: string;
             request_sign_date: string;
             email?: string;
+            remote_address?: string;
+            user_agent?: string;
+            notify?: components["schemas"]["Notify"][];
             userId?: string;
             signed: string | null;
             sign_date?: string | null;
diff --git a/src/views/Validation.vue b/src/views/Validation.vue
index 88091a7b40..c3996b607d 100644
--- a/src/views/Validation.vue
+++ b/src/views/Validation.vue
@@ -4,68 +4,132 @@
 -->
 <template>
 	<div class="container">
-		<div class="image">
-			<img :src="image" draggable="false">
+		<div class="logo">
+			<img :src="logo" draggable="false">
 		</div>
 		<div id="dataUUID">
 			<form v-show="!hasInfo" @submit="(e) => e.preventDefault()">
-				<h1>{{ title }}</h1>
-				<NcTextField v-model="myUuid" :label="legend" />
+				<h1>{{ t('libresign', 'Validate signature') }}</h1>
+				<NcTextField v-model="uuidToValidate" :label="t('libresign', 'Enter the ID or UUID of the document to validate.')" />
 				<NcButton type="primary"
-					@click.prevent="clickedValidate = true;validate(myUuid)">
+					:disabled="loading"
+					@click.prevent="clickedValidate = true;validate(uuidToValidate)">
 					<template #icon>
-						<NcLoadingIcon v-if="hasLoading" :size="20" />
+						<NcLoadingIcon v-if="loading" :size="20" />
 					</template>
-					{{ buttonTitle }}
+					{{ t('libresign', 'Validation') }}
 				</NcButton>
 			</form>
 			<div v-if="hasInfo" class="infor-container">
-				<div class="infor-bg">
-					<div class="infor">
-						<div class="header">
-							<img class="icon" :src="infoIcon">
-							<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" />
+				<div class="section">
+					<div class="header">
+						<NcIconSvgWrapper :path="mdiInformationSlabCircle" :size="30" />
+						<h1>{{ t('libresign', 'Document informations') }}</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" />
 
-							<NcButton type="primary"
-								@click="viewDocument()">
-								<template #icon>
-									<NcLoadingIcon v-if="hasLoading" :size="20" />
-								</template>
-								{{ t('libresign', 'View') }}
-							</NcButton>
-						</div>
+						<NcButton type="primary"
+							@click="viewDocument()">
+							<template #icon>
+								<NcLoadingIcon v-if="loading" :size="20" />
+							</template>
+							{{ t('libresign', 'View') }}
+						</NcButton>
 					</div>
 				</div>
-				<div class="infor-bg signed">
+				<div class="section">
 					<div class="header">
-						<img class="icon" :src="signatureIcon">
+						<NcIconSvgWrapper :path="mdiSignatureFreehand" :size="30" />
 						<h1>{{ t('libresign', 'Signatories:') }}</h1>
 					</div>
-					<div class="infor-content">
-						<div v-for="item in document.signers"
-							id="sign"
-							:key="item.displayName"
-							class="scroll">
-							<div class="subscriber">
-								<span><b>{{ getName(item) }}</b></span>
-								<span v-if="item.signed" class="data-signed">
-									{{ item.signed }}
-								</span>
-								<span v-else>{{ noDateMessage }}</span>
-							</div>
-						</div>
-					</div>
+					<ul>
+						<span v-for="(signer, signerIndex) in document.signers"
+							:key="signerIndex">
+							<NcListItem :name="getName(signer)"
+								:active="signer.opened"
+								@click="toggleDetail(signer)">
+								<template #icon>
+									<NcAvatar disable-menu
+										:is-no-user="!signer.userId"
+										:size="44"
+										:user="signer.userId ? signer.userId : getName(signer)"
+										:display-name="getName(signer)" />
+								</template>
+								<template #subname>
+									<strong>{{ t('LibreSign', 'Date signed:') }}</strong>
+									<span v-if="signer.signed" class="data-signed">
+										{{ signer.signed }}
+									</span>
+									<span v-else>{{ t('libresign', 'No date') }}</span>
+								</template>
+								<template #extra-actions>
+									<NcButton type="tertiary"
+										@click="toggleDetail(signer)">
+										<template #icon>
+											<NcIconSvgWrapper v-if="signer.opened"
+												:path="mdiUnfoldLessHorizontal"
+												:size="20" />
+											<NcIconSvgWrapper v-else
+												:path="mdiUnfoldMoreHorizontal"
+												:size="20" />
+										</template>
+									</NcButton>
+								</template>
+							</NcListItem>
+							<NcListItem v-if="signer.opened"
+								class="extra"
+								compact
+								:name="t('libresign', 'Requested on:')">
+								<template #name>
+									<strong>{{ t('libresign', 'Requested on:')}}</strong>
+									{{ dateFromSqlAnsi(signer.request_sign_date) }}
+								</template>
+							</NcListItem>
+							<NcListItem v-if="signer.opened && signer.remote_address"
+								class="extra"
+								compact
+								:name="t('libresign', 'Remote address:')">
+								<template #name>
+									<strong>{{ t('libresign', 'Remote address:')}}</strong>
+									{{ signer.remote_address }}
+								</template>
+							</NcListItem>
+							<NcListItem v-if="signer.opened && signer.user_agent"
+								class="extra"
+								compact
+								:name="t('libresign', 'User agent:')">
+								<template #name>
+									<strong>{{ t('libresign', 'User agent:')}}</strong>
+									{{ signer.user_agent }}
+								</template>
+							</NcListItem>
+							<NcListItem v-if="signer.opened && signer.notify"
+								class="extra"
+								compact
+								:name="t('libresign', 'Notifications:')">
+								<template #name>
+									<strong>{{ t('libresign', 'Notifications:')}}</strong>
+								</template>
+								<template #subname>
+									<ul>
+										<li v-for="(notify, notifyIndex) in signer.notify"
+											:key="notifyIndex">
+											<strong>{{ notify.method }}</strong>: {{ dateFromUnixTimestamp(notify.date) }}
+										</li>
+									</ul>
+								</template>
+							</NcListItem>
+						</span>
+					</ul>
 				</div>
 				<NcButton v-if="clickedValidate"
 					type="primary"
@@ -78,24 +142,32 @@
 </template>
 
 <script>
+import {
+	mdiInformationSlabCircle,
+	mdiSignatureFreehand,
+	mdiUnfoldMoreHorizontal,
+	mdiUnfoldLessHorizontal,
+} from '@mdi/js'
 import JSConfetti from 'js-confetti'
 
 import axios from '@nextcloud/axios'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { loadState } from '@nextcloud/initial-state'
 import { translate as t } from '@nextcloud/l10n'
+import Moment from '@nextcloud/moment'
 import { generateUrl, generateOcsUrl } from '@nextcloud/router'
 
+import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
+import NcListItem from '@nextcloud/vue/dist/Components/NcListItem.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
 // eslint-disable-next-line import/no-named-as-default
 import NcRichText from '@nextcloud/vue/dist/Components/NcRichText.js'
 import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 
-import iconB from '../../img/file-signature-solid.svg'
-import iconA from '../../img/info-circle-solid.svg'
-import BackgroundImage from '../../img/logo-gray.svg'
+import logoGray from '../../img/logo-gray.svg'
 import logger from '../logger.js'
 
 export default {
@@ -106,26 +178,24 @@ export default {
 		NcRichText,
 		NcButton,
 		NcLoadingIcon,
+		NcListItem,
+		NcAvatar,
+		NcIconSvgWrapper,
 		NcNoteCard,
 	},
 
 	data() {
-		const fileInfo = loadState('libresign', 'file_info', {})
 		return {
-			image: BackgroundImage,
-			infoDocument: t('libresign', 'Document informations'),
-			infoIcon: iconA,
-			signatureIcon: iconB,
-			title: t('libresign', 'Validate signature'),
-			legend: t('libresign', 'Enter the ID or UUID of the document to validate.'),
-			buttonTitle: t('libresign', 'Validation'),
-			noDateMessage: t('libresign', 'No date'),
-			myUuid: this.$route.params?.uuid ?? '',
-			hasInfo: Object.keys(fileInfo).length > 0,
-			hasLoading: false,
-			document: fileInfo,
-			documentUuid: '',
-			legalInformation: '',
+			logo: logoGray,
+			mdiUnfoldMoreHorizontal,
+			mdiInformationSlabCircle,
+			mdiUnfoldLessHorizontal,
+			mdiSignatureFreehand,
+			uuidToValidate: this.$route.params?.uuid ?? '',
+			hasInfo: false,
+			loading: false,
+			document: {},
+			legalInformation: loadState('libresign', 'legal_information', ''),
 			clickedValidate: false,
 		}
 	},
@@ -140,61 +210,77 @@ export default {
 		},
 	},
 	created() {
-		this.getData()
-		if (this.myUuid.length > 0) {
-			this.validate(this.myUuid)
+		if (this.uuidToValidate.length > 0) {
+			this.validate(this.uuidToValidate)
+		} else {
+			this.$set(this, 'document', loadState('libresign', 'file_info', {}))
+			this.hasInfo = Object.keys(this.document).length > 0
+			if (this.hasInfo) {
+				this.document.signers.forEach(signer => {
+					this.$set(signer, 'opened', false)
+				})
+			}
 		}
 	},
 	methods: {
+		dateFromSqlAnsi(date) {
+			return Moment(Date.parse(date)).format('LL LTS')
+		},
+		dateFromUnixTimestamp(date) {
+			return Moment(date * 1000).format('LL LTS')
+		},
+		toggleDetail(signer) {
+			this.$set(signer, 'opened', !signer.opened)
+		},
 		validate(id) {
 			if (id === this.document?.uuid) {
 				showSuccess(t('libresign', 'This document is valid'))
 				this.hasInfo = true
 				return
 			}
-			if (id.length >= 8) {
+			if (id.length === 36) {
 				this.validateByUUID(id)
 			} else {
 				this.validateByNodeID(id)
 			}
 		},
 		async validateByUUID(uuid) {
-			this.hasLoading = true
+			this.loading = true
 			try {
 				const response = await axios.get(generateOcsUrl(`/apps/libresign/api/v1/file/validate/uuid/${uuid}`))
 				showSuccess(t('libresign', 'This document is valid'))
-				this.document = response.data.ocs.data
+				this.$set(this, 'document', response.data.ocs.data)
+				this.document.signers.forEach(signer => {
+					this.$set(signer, 'opened', false)
+				})
 				this.hasInfo = true
-				this.hasLoading = false
+				this.loading = false
 				if (this.isAfterSigned) {
 					const jsConfetti = new JSConfetti()
 					jsConfetti.addConfetti()
 				}
 			} catch (err) {
-				this.hasLoading = false
+				this.loading = false
 				showError(err.response.data.ocs.data.errors[0])
 			}
 		},
 		async validateByNodeID(nodeId) {
-			this.hasLoading = true
+			this.loading = true
 			try {
 				const response = await axios.get(generateOcsUrl(`/apps/libresign/api/v1/file/validate/file_id/${nodeId}`))
 				showSuccess(t('libresign', 'This document is valid'))
-				this.document = response.data.ocs.data
+				this.$set(this, 'document', response.data.ocs.data)
 				this.hasInfo = true
-				this.hasLoading = false
+				this.loading = false
 				if (this.isAfterSigned) {
 					const jsConfetti = new JSConfetti()
 					jsConfetti.addConfetti()
 				}
 			} catch (err) {
-				this.hasLoading = false
+				this.loading = false
 				showError(err.response.data.ocs.data.errors[0])
 			}
 		},
-		async getData() {
-			this.legalInformation = loadState('libresign', 'legal_information', '')
-		},
 		getName(user) {
 			if (user.displayName) {
 				return user.displayName
@@ -232,25 +318,14 @@ export default {
 				}
 			}
 			this.hasInfo = !this.hasInfo
-			this.myUuid = this.$route.params.uuid
+			this.uuidToValidate = this.$route.params.uuid
 		},
 	},
 }
 </script>
 
 <style lang="scss" scoped>
-$title-font: 1.5rem;
-$title-font-mobile: 1.3rem;
-$date-signed-font: .7rem;
-
-.jumbotron{
-	padding: 0;
-	margin: unset;
-	width: unset;
-	height: 100%;
-}
-
-.container{
+.container {
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -258,12 +333,12 @@ $date-signed-font: .7rem;
 	width: 100%;
 	height: 100%;
 
-	.image{
+	.logo {
 		width: 100%;
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		img{
+		img {
 			width: 50%;
 			max-width: 422px;
 		}
@@ -273,7 +348,7 @@ $date-signed-font: .7rem;
 		}
 
 	}
-	#dataUUID{
+	#dataUUID {
 		width: 100%;
 		display: flex;
 		align-items: center;
@@ -281,178 +356,99 @@ $date-signed-font: .7rem;
 		@media screen and (max-width: 900px){
 			width: 100%;
 		}
-	}
-	.legal-information{
-		opacity: 0.8;
-		align-self: center;
-		font-size: 1rem;
-		overflow: scroll;
-	}
-}
-
-form{
-	background-color: var(--color-main-background);
-	color: var(--color-main-text);
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	padding: 20px;
-	margin: 20px;
-	border-radius: 8px;
-	max-width: 500px;
-	width: 100%;
-	box-shadow: 0 0 6px 0 var(--color-box-shadow);
-
-	@media screen and (max-width: 900px) {
-		width: 100%;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		max-width: 100%;
-	}
-}
-
-h1{
-	font-size: 24px;
-	font-weight: bold;
-	color: var(--color-main-text);
-}
-
-button{
-	float: right;
-	margin-top: 20px;
-}
-
-.infor{
-	display: flex;
-	flex-direction: column;
-	h1{
-		font-size: $title-font;
-	}
-}
-
-.infor-container{
-	width: 100%;
-	margin-right: 20px;
-}
-
-.infor-bg{
-	background-color: var(--color-main-background);
-	padding: 20px 60px 20px 20px;
-	border-radius: 8px;
-	box-shadow: 0 0 6px 0 var(--color-box-shadow);
-
-	.infor-content{
-		display: flex;
-		flex-direction: row;
-		flex-wrap: wrap;
-		overflow: scroll;
-		height: 80%;
-		width: 98%;
-	}
-}
-
-.info-document{
-	color: var(--color-main-text);
-	display: flex;
-	flex-direction: column;
-	width: 100%;
-	margin-left: 30px;
-	justify-content: center;
-	overflow: scroll;
-
-	p{
-		font-size: 1rem;
-	}
-	button{
-		align-self: flex-end;
-	}
-	#sign {
-		display: flex;
-	}
-}
+		h1 {
+			font-size: 24px;
+			font-weight: bold;
+			color: var(--color-main-text);
+		}
+		form {
+			background-color: var(--color-main-background);
+			color: var(--color-main-text);
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			padding: 20px;
+			margin: 20px;
+			border-radius: 8px;
+			max-width: 500px;
+			width: 100%;
+			box-shadow: 0 0 6px 0 var(--color-box-shadow);
 
-.signed {
-	margin-top: 10px;
-	padding-right: 2px;
-	strong {
-		font-size: 22px;
-		margin-bottom: 10px;
-	}
-	button {
-		float: right;
-	}
-}
+			@media screen and (max-width: 900px) {
+				width: 100%;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				max-width: 100%;
+			}
+		}
+		button {
+			float: right;
+			margin-top: 20px;
+			align-self: flex-end;
+		}
+		.infor-container {
+			width: 100%;
+			margin-right: 20px;
+			.section {
+				background-color: var(--color-main-background);
+				padding: 20px;
+				border-radius: 8px;
+				box-shadow: 0 0 6px 0 var(--color-box-shadow);
+				margin-bottom: 10px;
 
-.scroll {
-	max-height: 200px;
-	display: flex;
-	flex-wrap: wrap;
-	min-width: 200px;
-	max-width: 200px;
-}
+				.header {
+					display: flex;
+					margin-bottom: 2rem;
+				}
+				h1 {
+					font-size: 1.5rem;
+				}
 
-.subscriber {
-	display: flex;
-	flex-direction: column;
-	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;
-	min-height: 50px;
-	max-height: 60px;
-	padding-left: 10px;
-	width: 100%;
-	max-width: 98%;
+				.info-document {
+					color: var(--color-main-text);
+					display: flex;
+					flex-direction: column;
+					overflow: scroll;
+					.legal-information {
+						opacity: 0.8;
+						align-self: center;
+						font-size: 1rem;
+						overflow: scroll;
+					}
 
-	.data-signed {
-		font-size: $date-signed-font;
-	}
-	b{
-		display: block;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-}
+					p {
+						font-size: 1rem;
+					}
+				}
 
-.header {
-	display: flex;
-	margin-bottom: 2rem;
-	h1{
-		font-size: $title-font;
+				.extra {
+					margin-left: 44px;
+					padding-right: 44px;
+					:deep(.list-item-content__name) {
+						white-space: unset;
+					}
+					:deep(.list-item__anchor) {
+						height: unset;
+					}
+				}
+			}
+		}
 	}
 }
 
-.icon{
-	width: 30px;
-	margin-right: 10px;
-	filter: var(--background-invert-if-dark);
-}
-
 @media screen and (max-width: 700px) {
-	.signed {
-		width: 100%;
-	}
-	.infor-container {
-		margin-right: 0px;
-		width: 100%;
-	}
-	.infor-bg {
-		box-shadow: none;
-	}
 	.container {
 		align-items: flex-start;
-	}
-	.infor {
 		h1 {
-			font-size: $title-font-mobile;
+			font-size: 1.3rem;
 		}
-	}
-	.header {
-		h1 {
-			font-size: $title-font-mobile;
+		.infor-container {
+			margin-right: 0px;
+			.section {
+				box-shadow: none;
+			}
 		}
 	}
 }