diff --git a/public/style/signature.css b/public/style/signature.css
index ab907cf..6e3d5ce 100755
--- a/public/style/signature.css
+++ b/public/style/signature.css
@@ -1499,4 +1499,23 @@ input[type="file"] {
     z-index: 1000;
     display: none;
     animation: slideDown 0.3s ease-out;
+}
+
+.sign-button {
+    background-color: #4CAF50;
+    color: white;
+    padding: 8px 16px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    margin-top: 10px;
+}
+
+.sign-button:hover {
+    background-color: #45a049;
+}
+
+.sign-button:disabled {
+    background-color: #cccccc;
+    cursor: not-allowed;
 }
\ No newline at end of file
diff --git a/src/pages/signature/signature.ts b/src/pages/signature/signature.ts
index 1f25eb7..7fc6e14 100755
--- a/src/pages/signature/signature.ts
+++ b/src/pages/signature/signature.ts
@@ -13,6 +13,7 @@ declare global {
         submitDocumentRequest: typeof submitDocumentRequest;
         submitNewDocument: typeof submitNewDocument;
         submitCommonDocument: typeof submitCommonDocument;
+        signDocument: typeof signDocument;
     }
 }
 
@@ -28,7 +29,15 @@ import {
 } from '../../models/signature.models';
 import { messageStore } from '../../utils/messageMock';
 import { showAlert } from '../account/account';
-let currentUser = membersMock[0]; 
+
+interface Member {
+    id: string | number;
+    name: string;
+    email?: string;
+    avatar?: string;
+}
+
+let currentUser: Member = membersMock[0]; 
 
 interface Group {
     id: number;
@@ -546,19 +555,19 @@ function showProcessDetails(group: Group, groupId: number) {
                 <div class="details-section">
                     <h3>Documents Communs</h3>
                     <div class="documents-grid">
-                        ${displayGroup.commonDocuments.map((document: {
-                            signatures?: DocumentSignature[];
-                            name: string;
-                            visibility: string;
-                            createdAt?: string | null;
-                            deadline?: string | null;
-                            id: number;
-                        }) => {
+                        ${displayGroup.commonDocuments.map((document: any) => {
                             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;
 
+                            // Ajouter le bouton de signature pour tous les documents non vierges en mode dev
+                            const signButton = !isVierge ? `
+                                <button class="sign-button" onclick="signDocument(${document.id}, ${groupId}, true)">
+                                    Signer le document
+                                </button>
+                            ` : '';
+
                             return `
                                 <div class="document-card ${document.visibility} ${isVierge ? 'vierge' : ''}">
                                     <div class="document-header">
@@ -600,6 +609,7 @@ function showProcessDetails(group: Group, groupId: number) {
                                                 documentName: '${document.name}'
                                             })">New request</button>
                                         `}
+                                        ${signButton}
                                     </div>
                                 </div>
                             `;
@@ -614,14 +624,16 @@ function showProcessDetails(group: Group, groupId: number) {
                             <div class="documents-grid">
                                 ${(role.documents || []).length > 0 ? 
                                     (role.documents || []).map(document => {
-                                        const totalSignatures = document.signatures.length;
-                                        const signedCount = document.signatures.filter((sig: DocumentSignature) => sig.signed).length;
-                                        const percentage = totalSignatures > 0 ? (signedCount / totalSignatures) * 100 : 0;
-
-                                        // Détection d'un document vierge
                                         const isVierge = !document.createdAt || 
-                                                        !document.deadline || 
-                                                        document.signatures.length === 0;
+                                                       !document.deadline || 
+                                                       document.signatures.length === 0;
+
+                                        // Ajouter le bouton de signature pour tous les documents non vierges en mode dev
+                                        const signButton = !isVierge ? `
+                                            <button class="sign-button" onclick="signDocument(${document.id}, ${groupId}, false)">
+                                                Signer le document
+                                            </button>
+                                        ` : '';
 
                                         return `
                                             <div class="document-card ${document.visibility} ${isVierge ? 'vierge' : ''}">
@@ -652,11 +664,12 @@ function showProcessDetails(group: Group, groupId: number) {
                                                             `).join('')}
                                                         </div>
                                                         <div class="progress-bar">
-                                                            <div class="progress" style="width: ${percentage}%;"></div>
+                                                            <div class="progress" style="width: ${document.signatures.filter((sig: DocumentSignature) => sig.signed).length / document.signatures.length * 100}%;"></div>
                                                         </div>
-                                                        <p>${signedCount} out of ${totalSignatures} signed (${percentage.toFixed(0)}%)</p>
+                                                            <p>${document.signatures.filter((sig: DocumentSignature) => sig.signed).length} out of ${document.signatures.length} signed (${(document.signatures.filter((sig: DocumentSignature) => sig.signed).length / document.signatures.length * 100).toFixed(0)}%)</p>
                                                     </div>
                                                 ` : ''}
+                                                ${signButton}
                                             </div>
                                         `;
                                     }).join('') 
@@ -1437,3 +1450,122 @@ export function initSignature() {
         });
     }
 }
+
+// Ajouter cette interface pour la signature
+interface SignatureResponse {
+    success: boolean;
+    message: string;
+    documentId: number;
+    memberId: string | number;
+    signedAt: string;
+}
+
+// Ajouter cette fonction pour signer un document
+function signDocument(documentId: number, processId: number, isCommonDocument: boolean = false) {
+    try {
+        const groups = JSON.parse(localStorage.getItem('groups') || JSON.stringify(groupsMock));
+        const group = groups.find((g: Group) => g.id === processId);
+        
+        if (!group) {
+            throw new Error('Processus non trouvé');
+        }
+
+        let document;
+        let documentList;
+        
+        if (isCommonDocument) {
+            documentList = group.commonDocuments;
+            document = group.commonDocuments.find((d: any) => d.id === documentId);
+        } else {
+            // Chercher dans les documents des rôles
+            for (const role of group.roles) {
+                if (role.documents) {
+                    document = role.documents.find((d: any) => d.id === documentId);
+                    if (document) {
+                        documentList = role.documents;
+                        break;
+                    }
+                }
+            }
+        }
+
+        if (!document) {
+            throw new Error('Document non trouvé');
+        }
+
+        // Trouver la signature correspondant à l'utilisateur courant
+        const userSignature = document.signatures.find((sig: DocumentSignature) => 
+            sig.member.name === currentUser.name
+        );
+
+        if (!userSignature) {
+            throw new Error('Signature non trouvée pour cet utilisateur');
+        }
+
+        if (userSignature.signed) {
+            throw new Error('Document déjà signé par cet utilisateur');
+        }
+
+        // Mettre à jour la signature
+        userSignature.signed = true;
+        userSignature.signedAt = new Date().toISOString();
+
+        // Sauvegarder les modifications
+        localStorage.setItem('groups', JSON.stringify(groups));
+
+        // Rafraîchir l'affichage
+        if (isCommonDocument) {
+            showProcessDetails(group, processId);
+        } else {
+            const role = group.roles.find((r: any) => r.documents?.includes(document));
+            if (role) {
+                showRoleDocuments(role, group);
+            }
+        }
+
+        showAlert('Document signé avec succès!');
+        return {
+            success: true,
+            message: 'Document signé avec succès',
+            documentId,
+            memberId: currentUser.id,
+            signedAt: userSignature.signedAt
+        };
+
+    } catch (error) {
+        console.error('Erreur lors de la signature:', error);
+        showAlert(error instanceof Error ? error.message : 'Erreur lors de la signature');
+        return {
+            success: false,
+            message: error instanceof Error ? error.message : 'Erreur lors de la signature',
+            documentId,
+            memberId: currentUser.id,
+            signedAt: ''
+        };
+    }
+}
+
+// Modifier la fonction qui génère les cartes de documents pour ajouter le bouton de signature
+function generateDocumentCard(document: any, isCommonDocument: boolean = false) {
+    // ... code existant de la carte ...
+    
+    // Ajouter le bouton de signature si l'utilisateur n'a pas encore signé
+    const userSignature = document.signatures?.find((sig: DocumentSignature) => 
+        sig.member?.name === currentUser?.name
+    );
+    
+    const signatureButton = !userSignature?.signed ? `
+        <button class="sign-button" onclick="signDocument('${document.id}', '${document.processId}', ${isCommonDocument})">
+            Signer le document
+        </button>
+    ` : '';
+    return `
+        <div class="document-card ${document.visibility}">
+            // ... reste du code de la carte ...
+            ${signatureButton}
+        </div>
+    `;
+}
+
+// Ajouter la fonction au scope global
+window.signDocument = signDocument;