diff --git a/src/components/ProcessesViewer.tsx b/src/components/ProcessesViewer.tsx
index 03c955f..46d3a39 100644
--- a/src/components/ProcessesViewer.tsx
+++ b/src/components/ProcessesViewer.tsx
@@ -89,39 +89,105 @@ function ProcessesViewer({ processes, myProcesses, onProcessesUpdate }: Processe
   const formatValue = (key: string, value: string | number[] | FileBlob) => {
     if (isFileBlob(value)) {
       return (
-        <div>
-          <span>{key}</span>
-          <button onClick={() => handleDownload(key, value)}>Download</button>
-        </div>
+        <button 
+          className="download-button"
+          onClick={() => handleDownload(key, value)}
+          title="Télécharger le fichier"
+        >
+          📥 Télécharger
+        </button>
       );
     }
-    return JSON.stringify(value || ''); // TODO handle most common cases
+    return JSON.stringify(value || '');
   };
 
-  const formatName = (name: string | number[] | undefined): string => {
-    if (!name) return "Nom non disponible";
+  const getDataIcon = (value: any) => {
+    if (isFileBlob(value)) return '📄';
+    if (typeof value === 'string') return '📝';
+    if (typeof value === 'number') return '🔢';
+    if (Array.isArray(value)) return '📋';
+    if (typeof value === 'boolean') return '✅';
+    return '📦'; // object
+  };
 
-    if (Array.isArray(name)) {
-      if (name.length === 1 && name[0] === 96) {
-        return "`"; // Caractère spécial
-      }
-      try {
-        const chars = name.map(code => String.fromCharCode(Number(code)));
-        return chars.join('');
-      } catch (e) {
-        return "Nom encodé (format non supporté)";
-      }
-    } else if (typeof name === 'string') {
-      return name;
-    }
+  const renderDataField = (
+    key: string,
+    value: any,
+    hash: string | undefined,
+    isPrivate: boolean,
+    processId: string,
+    stateId: string
+  ) => {
+    const isEditing = editingField?.key === key && 
+                     editingField?.processId === processId && 
+                     editingField?.stateId === stateId;
 
-    return "Format de nom inconnu";
+    const handleFieldClick = (e: React.MouseEvent) => {
+      e.stopPropagation();
+      e.preventDefault();
+    };
+
+    return (
+      <div 
+        className="data-field" 
+        key={key}
+        onClick={handleFieldClick}
+        onMouseDown={handleFieldClick}
+      >
+        <div className="data-field-header">
+          <span className="data-type-icon" title={isPrivate ? 'Donnée privée' : 'Donnée publique'}>
+            {isPrivate ? '🔒' : '🌐'}
+          </span>
+          <span className="data-value-icon">{getDataIcon(value)}</span>
+          <span className="data-label">{key}</span>
+          <button
+            className="field-update-button"
+            onClick={(e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              setEditingField({ processId, stateId, key, value });
+            }}
+            title="Mettre à jour cette valeur"
+          >
+            {isEditing ? '✕' : '🔄'}
+          </button>
+        </div>
+        <div 
+          className="data-field-content"
+          onClick={handleFieldClick}
+          onMouseDown={handleFieldClick}
+        >
+          {isEditing ? (
+            <div onClick={handleFieldClick} onMouseDown={handleFieldClick}>
+              {renderEditForm(
+                key,
+                value,
+                async (newValue) => {
+                  await handleFieldUpdate(processId, stateId, key, newValue);
+                  setEditingField(null);
+                },
+                () => setEditingField(null)
+              )}
+            </div>
+          ) : (
+            <>
+              {formatValue(key, value)}
+              {hash && (
+                <div className="hash-tooltip" title={`Hash: ${hash}`}>
+                  🔑
+                </div>
+              )}
+            </>
+          )}
+        </div>
+      </div>
+    );
   };
 
   return (
     <div className="processes-viewer">
       <h2>Processus</h2>
-      <button onClick = {handleFilterClick}>
+      <button onClick={handleFilterClick}>
         {isFiltered ? 'Show All Processes' : 'Filter Processes'}
       </button>
       <p className="block-count">
@@ -132,11 +198,8 @@ function ProcessesViewer({ processes, myProcesses, onProcessesUpdate }: Processe
 
       <div className="block-list">
         {Object.entries(processes).map(([processId, process]) => {
-          if (isFiltered) {
-            // skip processes that are not in myProcesses
-            if (!myProcesses.includes(processId)) {
-              return;
-            }
+          if (isFiltered && !myProcesses.includes(processId)) {
+            return null;
           }
           const isExpanded = expandedBlocks.includes(processId);
           const stateCount = process.states.length - 1; // We just ignore the last state, which is always empty
@@ -161,6 +224,16 @@ function ProcessesViewer({ processes, myProcesses, onProcessesUpdate }: Processe
 
                   {process.states.map((state, index) => {
                     if (index === stateCount) return null;
+                    
+                    // Fetch private data if needed
+                    if (myProcesses.includes(processId) && !privateData[state.state_id]) {
+                      console.log('Fetching private data for state:', state.state_id);
+                      fetchPrivateData(processId, state.state_id);
+                    }
+
+                    const statePrivateData = privateData[state.state_id] || {};
+                    console.log(statePrivateData);
+
                     return (
                       <div key={`${processId}-state-${index}`} className="state-item">
                         <h4>État {index + 1}</h4>
@@ -170,57 +243,27 @@ function ProcessesViewer({ processes, myProcesses, onProcessesUpdate }: Processe
                         <div className="state-detail">
                           <strong>Empreinte totale de l'état:</strong> {state.state_id}
                         </div>
-                        <div className="state-detail">
-                          <strong>Empreinte par information:</strong>
-                          <ul>
-                            {Object.entries(state.pcd_commitment).map(([key, value]) => (
-                              <div key={key}>
-                                <strong>{key}:</strong> {value}
-                              </div>
-                            ))}
-                          </ul>
-                        </div>
 
-                        <div className="state-private-data">
-                          <h5>Données privées</h5>
-                          <div className="private-data-item">
-                            {!myProcesses.includes(processId) ? (
-                              <div className="no-data-message">
-                                Vous n'avez pas accès aux données privées de ce processus
-                              </div>
-                            ) : !privateData[state.state_id] ? (
-                              (() => {
-                                fetchPrivateData(processId, state.state_id);
-                                return <div>Chargement...</div>;
-                              })()
-                            ) : Object.keys(privateData[state.state_id]).length > 0 ? (
-                              Object.entries(privateData[state.state_id]).map(([key, value]) => (
-                                <div key={key}>
-                                  <strong>{key}:</strong> {formatValue(key, value)}
-                                </div>
-                              ))
+                        <div className="data-fields-container">
+                          {/* Public Data */}
+                          {Object.entries(state.public_data).map(([key, value]) => 
+                            renderDataField(key, value, state.pcd_commitment[key], false, processId, state.state_id)
+                          )}
+
+                          {/* Private Data */}
+                          {myProcesses.includes(processId) ? (
+                            Object.keys(statePrivateData).length > 0 ? (
+                              Object.entries(statePrivateData).map(([key, value]) =>
+                                renderDataField(key, value, state.pcd_commitment[key], true, processId, state.state_id)
+                              )
                             ) : (
-                              <div className="no-data-message">
-                                Aucune donnée privée disponible
-                              </div>
-                            )}
-                          </div>
-                        </div>
-                        <div className="state-public-data">
-                          <h5>Données publiques</h5>
-                          <div className="public-data-item">
-                            {Object.keys(state.public_data).length > 0 ? (
-                              Object.entries(state.public_data).map(([key, value]) => (
-                                <div key={key}>
-                                  <strong>{key}:</strong> {formatValue(key, value)}
-                                </div>
-                              ))
-                            ) : (
-                              <div className="no-data-message">
-                                Aucune donnée publique disponible
-                              </div>
-                            )}
-                          </div>
+                              <div className="loading-message">Chargement des données privées...</div>
+                            )
+                          ) : (
+                            <div className="no-access-message">
+                              🔒 Vous n'avez pas accès aux données privées de ce processus
+                            </div>
+                          )}
                         </div>
                       </div>
                     );
@@ -233,7 +276,7 @@ function ProcessesViewer({ processes, myProcesses, onProcessesUpdate }: Processe
       </div>
     </div>
   );
-};
+}
 
 ProcessesViewer.displayName = 'ProcessesViewer';
 export default memo(ProcessesViewer);