diff --git a/components/ProcessesViewer.tsx b/components/ProcessesViewer.tsx
new file mode 100644
index 0000000..f3b996b
--- /dev/null
+++ b/components/ProcessesViewer.tsx
@@ -0,0 +1,325 @@
+import { useState, memo } from 'react';
+import { isFileBlob, type FileBlob } from '@/lib/4nk/models/Data';
+import { iframeUrl } from "@/app/page";
+import MessageBus from '@/lib/4nk/MessageBus';
+
+interface BlockState {
+  commited_in: string;
+  state_id: string;
+  pcd_commitment: Record<string, string>;
+  public_data: Record<string, any>;
+}
+
+interface Block {
+  states: BlockState[];
+}
+
+interface Processes {
+  [key: string]: Block;
+}
+
+interface ProcessesViewerProps {
+  processes: Processes | null;
+  myProcesses: string[];
+  onProcessesUpdate?: (processes: Processes) => void;
+}
+
+const compareStates = (
+  currentState: BlockState,
+  index: number,
+  previousState?: BlockState,
+  currentPrivateData?: Record<string, any>,
+  previousPrivateData?: Record<string, any>
+) => {
+  const result: Record<string, { 
+    value: any, 
+    status: 'unchanged' | 'modified',
+    hash?: string,
+    isPrivate: boolean,
+    stateId: string
+  }> = {};
+
+  Object.keys(currentState.public_data).forEach(key => {
+    const currentValue = currentState.public_data[key];
+    const previousValue = previousState?.public_data[key];
+    const isModified = index > 0 && previousValue !== undefined && JSON.stringify(currentValue) !== JSON.stringify(previousValue);
+
+    result[key] = {
+      value: currentValue,
+      status: isModified ? 'modified' : 'unchanged',
+      hash: currentState.pcd_commitment[key],
+      isPrivate: false,
+      stateId: currentState.state_id
+    };
+  });
+
+  if (index === 0 && currentPrivateData) {
+    Object.entries(currentPrivateData).forEach(([key, value]) => {
+      result[key] = {
+        value,
+        status: 'unchanged',
+        hash: currentState.pcd_commitment[key],
+        isPrivate: true,
+        stateId: currentState.state_id
+      };
+    });
+  } else if (previousPrivateData) {
+    Object.entries(previousPrivateData).forEach(([key, value]) => {
+      result[key] = {
+        value,
+        status: 'unchanged',
+        hash: previousState?.pcd_commitment[key],
+        isPrivate: true,
+        stateId: previousState!.state_id
+      };
+    });
+    if (currentPrivateData) {
+      Object.entries(currentPrivateData).forEach(([key, value]) => {
+        result[key] = {
+          value,
+          status: 'modified',
+          hash: currentState.pcd_commitment[key],
+          isPrivate: true,
+          stateId: currentState.state_id
+        };
+      });
+    }
+  }
+
+  return result;
+};
+
+function ProcessesViewer({ processes, myProcesses, onProcessesUpdate }: ProcessesViewerProps) {
+  const [expandedBlocks, setExpandedBlocks] = useState<string[]>([]);
+  const [isFiltered, setIsFiltered] = useState<boolean>(false);
+  const [privateData, setPrivateData] = useState<Record<string, Record<string, any>>>({});
+  const [editingField, setEditingField] = useState<{processId: string; stateId: string; key: string; value: any;} | null>(null);
+  const [tempValue, setTempValue] = useState<any>(null);
+
+  const toggleBlock = (blockId: string) => {
+    setExpandedBlocks(prev => prev.includes(blockId) ? prev.filter(id => id !== blockId) : [...prev, blockId]);
+  };
+
+  const handleFilterClick = () => setIsFiltered(prev => !prev);
+
+  if (!processes || Object.keys(processes).length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center py-12 text-gray-500">
+        <h3 className="text-lg font-medium mb-2">Aucun processus disponible</h3>
+        <p>Connectez-vous pour voir vos processus</p>
+      </div>
+    );
+  }
+
+  const fetchPrivateData = async (processId: string, stateId: string) => {
+    if (!expandedBlocks.includes(processId) || !myProcesses.includes(processId)) return;
+    try {
+      const messageBus = MessageBus.getInstance(iframeUrl);
+      await messageBus.isReady();
+      const data = await messageBus.getData(processId, stateId);
+      setPrivateData(prev => ({ ...prev, [stateId]: data }));
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  const handleDownload = (name: string | undefined, fileBlob: FileBlob) => {
+    const blob = new Blob([fileBlob.data], { type: fileBlob.type });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = name || 'download';
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+
+  const formatValue = (key: string, value: string | number[] | FileBlob) => {
+    if (isFileBlob(value)) {
+      return (
+        <button className="text-blue-600 hover:underline" onClick={() => handleDownload(key, value)}>
+          📥 Télécharger
+        </button>
+      );
+    }
+    return <span>{JSON.stringify(value || '')}</span>;
+  };
+
+  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 '📦';
+  };
+
+  const handleFieldUpdate = async (processId: string, stateId: string, key: string, value: any) => {
+    try {
+      const messageBus = MessageBus.getInstance(iframeUrl);
+      await messageBus.isReady();
+      const updatedProcess = await messageBus.updateProcess(processId, stateId, { [key]: value }, [], null);
+      if (!updatedProcess) throw new Error('No updated process found');
+      const newStateId = updatedProcess.diffs[0]?.state_id;
+      if (!newStateId) throw new Error('No new state id found');
+      await messageBus.notifyProcessUpdate(processId, newStateId);
+      await messageBus.validateState(processId, newStateId);
+      const updatedProcesses = await messageBus.getProcesses();
+      onProcessesUpdate?.(updatedProcesses);
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  const renderEditForm = (key: string, value: any, onSave: (v: any) => void, onCancel: () => void) => {
+    if (tempValue === null) setTempValue(value);
+
+    const handleFormClick = (e: React.MouseEvent) => { e.stopPropagation(); e.preventDefault(); };
+
+    if (isFileBlob(value)) {
+      return (
+        <div className="flex flex-col space-y-2" onClick={handleFormClick}>
+          <input type="file" onChange={(e) => {
+            e.stopPropagation();
+            const file = e.target.files?.[0];
+            if (file) {
+              const reader = new FileReader();
+              reader.onload = (event) => {
+                if (event.target?.result) {
+                  setTempValue({ type: file.type, data: new Uint8Array(event.target.result as ArrayBuffer) });
+                }
+              };
+              reader.readAsArrayBuffer(file);
+            }
+          }}/>
+          <div className="flex space-x-2">
+            <button className="px-2 py-1 bg-blue-500 text-white rounded" onClick={() => { onSave(tempValue); setTempValue(null); }}>Sauvegarder</button>
+            <button className="px-2 py-1 bg-gray-300 rounded" onClick={() => { onCancel(); setTempValue(null); }}>Annuler</button>
+          </div>
+        </div>
+      );
+    }
+
+    if (typeof value === 'boolean') {
+      return (
+        <div className="flex items-center space-x-2" onClick={handleFormClick}>
+          <select className="border rounded px-2 py-1" value={tempValue.toString()} onChange={(e) => setTempValue(e.target.value === 'true')}>
+            <option value="true">Vrai</option>
+            <option value="false">Faux</option>
+          </select>
+          <div className="flex space-x-2">
+            <button className="px-2 py-1 bg-blue-500 text-white rounded" onClick={() => onSave(tempValue)}>Sauvegarder</button>
+            <button className="px-2 py-1 bg-gray-300 rounded" onClick={() => onCancel()}>Annuler</button>
+          </div>
+        </div>
+      );
+    }
+
+    if (Array.isArray(value)) {
+      return (
+        <div className="flex flex-col space-y-2" onClick={handleFormClick}>
+          <textarea className="border rounded p-2" rows={4} value={JSON.stringify(tempValue, null, 2)} onChange={(e) => {
+            try { const parsed = JSON.parse(e.target.value); if (Array.isArray(parsed)) setTempValue(parsed); } catch {}
+          }}/>
+          <div className="flex space-x-2">
+            <button className="px-2 py-1 bg-blue-500 text-white rounded" onClick={() => onSave(tempValue)}>Sauvegarder</button>
+            <button className="px-2 py-1 bg-gray-300 rounded" onClick={() => onCancel()}>Annuler</button>
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <div className="flex space-x-2 items-center" onClick={handleFormClick}>
+        <input className="border rounded px-2 py-1" type={typeof value === 'number' ? 'number' : 'text'} value={tempValue} onChange={(e) => setTempValue(typeof value === 'number' ? parseFloat(e.target.value) : e.target.value)} autoFocus />
+        <div className="flex space-x-2">
+          <button className="px-2 py-1 bg-blue-500 text-white rounded" onClick={() => onSave(tempValue)}>Sauvegarder</button>
+          <button className="px-2 py-1 bg-gray-300 rounded" onClick={() => onCancel()}>Annuler</button>
+        </div>
+      </div>
+    );
+  };
+
+  const renderDataField = (key: string, value: any, hash: string | undefined, isPrivate: boolean, processId: string, stateId: string, status: 'unchanged' | 'modified' = 'unchanged', originStateId?: string) => {
+    const isEditing = editingField?.key === key && editingField?.processId === processId && editingField?.stateId === stateId;
+    return (
+      <div key={key} className={`border rounded p-2 mb-2 transition-colors ${status === 'modified' ? 'bg-green-100' : 'bg-white'}`}>
+        <div className="flex items-center justify-between mb-1">
+          <div className="flex items-center space-x-1">
+            <span title={isPrivate ? 'Donnée privée' : 'Donnée publique'}>{isPrivate ? '🔒' : '🌐'}</span>
+            <span>{getDataIcon(value)}</span>
+            <span className="font-medium">{key}</span>
+            {originStateId && originStateId !== stateId && <span title={`Propagé depuis l'état ${originStateId}`}>↺</span>}
+          </div>
+          <button className="text-sm text-gray-500 hover:text-gray-700" onClick={(e) => { e.stopPropagation(); setEditingField({ processId, stateId, key, value }); }}>
+            {isEditing ? '✕' : '🔄'}
+          </button>
+        </div>
+        <div>
+          {isEditing ? renderEditForm(key, value, async (v) => { await handleFieldUpdate(processId, stateId, key, v); setEditingField(null); setTempValue(null); }, () => { setEditingField(null); setTempValue(null); }) : (
+            <div className="flex items-center space-x-1">
+              <span>{formatValue(key, value)}</span>
+              {hash && <span title={`Hash: ${hash}`}>🔑</span>}
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div className="w-full h-full overflow-auto p-2">
+      <div className="flex justify-between items-center mb-4">
+        <h2 className="text-xl font-semibold">Processus</h2>
+        <button className="px-2 py-1 border rounded text-sm" onClick={handleFilterClick}>{isFiltered ? 'Show All' : 'Filter'}</button>
+      </div>
+      <p className="mb-2 text-sm text-gray-500">{isFiltered ? Object.keys(processes).filter(p => myProcesses.includes(p)).length : Object.keys(processes).length} processus disponible(s)</p>
+      <div className="space-y-4">
+        {Object.entries(processes).map(([processId, process]) => {
+          if (isFiltered && !myProcesses.includes(processId)) return null;
+          const isExpanded = expandedBlocks.includes(processId);
+          const stateCount = process.states.length - 1;
+
+          return (
+            <div key={processId} className="border rounded shadow-sm">
+              <div className="flex justify-between items-center p-2 cursor-pointer bg-gray-50" onClick={() => toggleBlock(processId)}>
+                <div className="font-mono">{processId.slice(0,8)}...{processId.slice(-4)}</div>
+                <div>{stateCount} état(s)</div>
+                <div>{isExpanded ? '▼' : '▶'}</div>
+              </div>
+
+              {isExpanded && (
+                <div className="p-2 space-y-2 bg-white">
+                  <div><strong>Process ID:</strong> {processId}</div>
+                  {process.states.map((state, index) => {
+                    if (index === stateCount) return null;
+                    if (myProcesses.includes(processId) && !privateData[state.state_id]) setTimeout(() => fetchPrivateData(processId, state.state_id), 0);
+                    const statePrivateData = privateData[state.state_id] || {};
+                    const stateData = compareStates(state, index, index > 0 ? process.states[index-1] : undefined, statePrivateData, index > 0 ? privateData[process.states[index-1].state_id] : undefined);
+
+                    return (
+                      <div key={`${processId}-state-${index}`} className="border-t pt-2">
+                        <h4 className="font-medium mb-1">État {index+1}</h4>
+                        <div className="text-sm mb-1"><strong>TransactionId:</strong> {state.commited_in}</div>
+                        <div className="text-sm mb-2"><strong>Empreinte totale de l'état:</strong> {state.state_id}</div>
+                        <div className="space-y-1">
+                          {Object.entries(stateData).map(([key, { value, status, hash, isPrivate, stateId }]) => renderDataField(key, value, hash, isPrivate, processId, stateId, status, state.state_id))}
+                          {myProcesses.includes(processId) && Object.keys(statePrivateData).length === 0 && <div className="text-gray-400 text-sm">Chargement des données privées...</div>}
+                          {!myProcesses.includes(processId) && <div className="text-gray-400 text-sm">🔒 Vous n'avez pas accès aux données privées de ce processus</div>}
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+ProcessesViewer.displayName = 'ProcessesViewer';
+export default memo(ProcessesViewer);