diff --git a/public/style/chat.css b/public/style/chat.css
index c5c2dce..c42681b 100755
--- a/public/style/chat.css
+++ b/public/style/chat.css
@@ -335,8 +335,46 @@ body {
     border-radius: 10px;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
     margin: 1% 0% 0.5% 1%;
+    transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s;
+    visibility: visible;
 }
 
+.signature-area.hidden {
+    opacity: 0;
+    visibility: hidden;
+    display: none;
+}
+
+.signature-header {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--primary-color);
+    color: white;
+    border-radius: 10px 10px 0 0;
+    padding-left: 4%;
+}
+
+#close-signature {
+    cursor: pointer;
+    align-items: center;
+    margin-left: auto;
+    margin-right: 2%;
+    border-radius: 50%;
+    background-color: var(--primary-color);
+    color: white;
+    border: none;
+    padding: -3%;
+    margin-top: -5%;
+    font-size: 1em;
+    font-weight: bold;
+  }
+
+  #close-signature:hover {
+    background-color: var(--secondary-color);
+    color: var(--primary-color);
+  }
+
 #message-input {
     width: 100%;
     height: 50px;
diff --git a/src/pages/chat/chat.ts b/src/pages/chat/chat.ts
index 1b7395b..f145f2e 100755
--- a/src/pages/chat/chat.ts
+++ b/src/pages/chat/chat.ts
@@ -93,7 +93,7 @@ class ChatElement extends HTMLElement {
                 <div class="signature-area">
                     <div class="signature-header">
                         <h1>Signature</h1>
-                        <button id="close-signature">x</button>
+                        <button id="close-signature" class="close-signature">x</button>
                     </div>
                     <div class="signature-content">
                         <div class="signature-description">
@@ -953,6 +953,8 @@ class ChatElement extends HTMLElement {
         console.log('🎯 Loading all processes');
         console.log("Je suis le processSet dans loadAllProcesses :", processSet);
 
+        this.closeSignature();
+        
         const dbRequest = indexedDB.open('4nk');
         
         return new Promise((resolve, reject) => {
@@ -1029,6 +1031,17 @@ class ChatElement extends HTMLElement {
                         }
 
                         li.setAttribute('data-process-id', oneProcess);
+                        li.onclick = async (event) => {
+                            event.stopPropagation();
+                            console.log("CLICKED ON PROCESS:", oneProcess);
+                            //viser le h1 de signature-header
+                            const signatureHeader = this.shadowRoot?.querySelector('.signature-header h1');
+                            if (signatureHeader) {
+                                const emoji = await addressToEmoji(oneProcess);
+                                signatureHeader.textContent = `Signature of ${emoji}`;
+                            }
+                            this.openSignature();
+                        };
                         groupList.appendChild(li);
 
                         const container = document.createElement('div');
@@ -1132,6 +1145,25 @@ class ChatElement extends HTMLElement {
         });
     }
 
+    //fonction qui ferme la signature
+    private closeSignature() {
+        const closeSignature = this.shadowRoot?.querySelector('#close-signature');  
+        const signatureArea = this.shadowRoot?.querySelector('.signature-area');
+        if (closeSignature && signatureArea) {
+            closeSignature.addEventListener('click', () => {
+                signatureArea.classList.add('hidden');
+            });
+        }
+    }
+
+    //fonction qui ouvre la signature
+    private openSignature() {
+        const signatureArea = this.shadowRoot?.querySelector('.signature-area');
+        if (signatureArea) {
+            signatureArea.classList.remove('hidden');
+        }
+    }
+
     //Load tous les processus où le sp_adress est impliqué et renvoie un tableau d'adresses de processus
     private async getMyProcessId() {
         const service = await Services.getInstance();
@@ -1233,6 +1265,8 @@ class ChatElement extends HTMLElement {
         const li = document.createElement('li');
         li.className = 'group-list-item';
         li.setAttribute('data-process-id', processId);
+
+
         
         const container = document.createElement('div');
         container.className = 'group-item-container';