diff --git a/src/pages/signature/signature.ts b/src/pages/signature/signature.ts
index 2ae5370..aded98c 100755
--- a/src/pages/signature/signature.ts
+++ b/src/pages/signature/signature.ts
@@ -44,6 +44,10 @@ interface Group {
         name: string;
         visibility: string;
         description: string;
+        createdAt?: string | null;
+        deadline?: string | null;
+        signatures?: DocumentSignature[];
+        status?: string;
     }>;
 }
 
@@ -533,30 +537,62 @@ function showProcessDetails(group: Group, groupId: number) {
                     <p>${group.description || 'No description available'}</p>
                 </div>
                 <div class="details-section">
-                                <div class="details-section">
                     <h3>Documents Communs</h3>
                     <div class="documents-grid">
-                        ${group.commonDocuments.map(document => `
-                            <div class="document-card ${document.visibility} vierge">
-                                <div class="document-header">
-                                    <h4>⚠️ ${document.name}</h4>
-                                    <span class="document-visibility">${document.visibility}</span>
+                        ${group.commonDocuments.map(document => {
+                            const totalSignatures = document.signatures?.length || 0;
+                            const signedCount = document.signatures?.filter((sig: DocumentSignature) => sig.signed).length || 0;
+                            const percentage = totalSignatures > 0 ? (signedCount / totalSignatures) * 100 : 0;
+                            const isVierge = !document.createdAt || !document.deadline || !document.signatures?.length;
+
+                            return `
+                                <div class="document-card ${document.visibility} ${isVierge ? 'vierge' : ''}">
+                                    <div class="document-header">
+                                        <h4>${isVierge ? `⚠️ ${document.name}` : document.name}</h4>
+                                        <span class="document-visibility">${document.visibility}</span>
+                                    </div>
+                                    <div class="document-info">
+                                        ${!isVierge ? `
+                                            <p class="document-date">Created on: ${document.createdAt ? new Date(document.createdAt).toLocaleDateString() : 'N/A'}</p>
+                                            <p class="document-deadline">Deadline: ${document.deadline ? new Date(document.deadline).toLocaleDateString() : 'N/A'}</p>
+                                            <p class="document-duration">Duration: ${calculateDuration(document.createdAt || '', document.deadline || '')} days</p>
+                                            <div class="document-signatures">
+                                                <h5>Signatures:</h5>
+                                                <div class="signatures-list">
+                                                    ${document.signatures?.map((sig: DocumentSignature) => `
+                                                        <div class="signature-item ${sig.signed ? 'signed' : 'pending'}">
+                                                            <span class="signer-name">${sig.member.name}</span>
+                                                            <span class="signature-status">
+                                                                ${sig.signed ?
+                                                                    `✓ Signed on ${sig.signedAt ? new Date(sig.signedAt).toLocaleDateString() : 'Unknown date'}` : 
+                                                                    '⌛ Pending'}
+                                                            </span>
+                                                        </div>
+                                                    `).join('')}
+                                                </div>
+                                                <div class="progress-bar">
+                                                    <div class="progress" style="width: ${percentage}%;"></div>
+                                                </div>
+                                                <p>${signedCount} out of ${totalSignatures} signed (${percentage.toFixed(0)}%)</p>
+                                            </div>
+                                        ` : `
+                                            <p>Document vierge - En attente de création</p>
+                                            <button class="new-request-btn" onclick="newRequest({
+                                                processId: ${group.id},
+                                                processName: '${group.name}',
+                                                roleId: 0,
+                                                roleName: 'common',
+                                                documentId: ${document.id},
+                                                documentName: '${document.name}'
+                                            })">New request</button>
+                                        `}
+                                    </div>
                                 </div>
-                                <div class="document-info">
-                                    <p>${document.description}</p>
-                                    <button class="new-request-btn" onclick="newRequest({
-                                        processId: ${group.id},
-                                        processName: '${group.name}',
-                                        roleId: 0,
-                                        roleName: 'common',
-                                        documentId: ${document.id},
-                                        documentName: '${document.name}'
-                                    })">New request</button>
-                                </div>
-                            </div>
-                        `).join('')}
+                            `;
+                        }).join('')}
                     </div>
                 </div>
+                <div class="details-section">
                     <h3>Roles and Documents</h3>
                     ${group.roles.map(role => `
                         <div class="role-section">
@@ -1058,7 +1094,6 @@ function submitNewDocument(event: Event) {
             deadline: deadline,
             visibility: visibility,
             status: "pending",
-            // Ajouter les signatures pour tous les membres du rôle
             signatures: role.members.map((member: { id: string | number; name: string }) => ({
                 member: member,
                 signed: false,
@@ -1137,6 +1172,11 @@ function submitCommonDocument(event: Event) {
             return;
         }
 
+        // Récupérer tous les membres de tous les rôles du groupe
+        const allMembers = group.roles.reduce((acc: any[], role: any) => {
+            return acc.concat(role.members);
+        }, []);
+
         const updatedDocument = {
             id: documentId,
             name: documentName,
@@ -1144,7 +1184,12 @@ function submitCommonDocument(event: Event) {
             createdAt: new Date().toISOString(),
             deadline: deadline,
             visibility: visibility,
-            status: "pending"
+            status: "pending",
+            signatures: allMembers.map((member: { id: string | number; name: string }) => ({
+                member: member,
+                signed: false,
+                signedAt: null
+            }))
         };
 
         // Mettre à jour le document commun