diff --git a/src/pages/account/key-value-section.ts b/src/pages/account/key-value-section.ts
index 9a8d35e..081a228 100644
--- a/src/pages/account/key-value-section.ts
+++ b/src/pages/account/key-value-section.ts
@@ -32,6 +32,12 @@ export function createKeyValueSection(title: string, id: string, isRoleSection =
     storagesInput: HTMLInputElement;
     validationRules: ValidationRule[];
   }[] = [];
+  const nonRoleRowStates: { 
+    keyInput: HTMLInputElement, 
+    valueInput: HTMLInputElement, 
+    fileInput: HTMLInputElement, 
+    fileBlob: File | null 
+  }[] = [];
 
   const inputStyle = 'flex: 1; height: 2.5rem; padding: 0.5rem; border: 1px solid #ccc; border-radius: 0.375rem;';
 
@@ -80,8 +86,36 @@ export function createKeyValueSection(title: string, id: string, isRoleSection =
 
       roleRowStates.push({ roleNameInput: roleName, membersInput: members, storagesInput: storages, validationRules: rules });
     } else {
+      const fileInput = document.createElement('input');
+      fileInput.type = 'file';
+      fileInput.style.display = 'none';
+      fileInput.onchange = async () => {
+        const file = fileInput.files?.[0];
+        if (!file) return;
+        rowState.fileBlob = file;
+
+        valueInput.value = `📄 ${file.name}`;
+        valueInput.disabled = true;
+        attachBtn.textContent = `📎 ${file.name}`;
+      };
+
+      const attachBtn = document.createElement('button');
+      attachBtn.textContent = '📎 Attach';
+      attachBtn.style.cssText = 'padding: 0.3rem 0.75rem; border: 1px solid #ccc; border-radius: 0.375rem; background: #f0f0f0; cursor: pointer;';
+      attachBtn.onclick = () => fileInput.click();
+
+
       const keyInput = document.createElement('input');
       const valueInput = document.createElement('input');
+
+      const rowState = {
+        keyInput,
+        valueInput,
+        fileInput,
+        fileBlob: null as File | null
+      };
+      nonRoleRowStates.push(rowState);
+
       keyInput.placeholder = 'Key';
       valueInput.placeholder = 'Value';
       [keyInput, valueInput].forEach(input => {
@@ -91,6 +125,10 @@ export function createKeyValueSection(title: string, id: string, isRoleSection =
 
       row.appendChild(keyInput);
       row.appendChild(valueInput);
+
+      row.appendChild(attachBtn);
+      row.appendChild(fileInput);
+
       row.appendChild(deleteBtn);
     }
 
@@ -131,13 +169,16 @@ export function createKeyValueSection(title: string, id: string, isRoleSection =
         }
         return data;
       } else {
-        const data: Record<string, string> = {};
-        rowContainer.querySelectorAll('div').forEach(row => {
-          const inputs = row.querySelectorAll('input');
-          const k = inputs[0]?.value.trim();
-          const v = inputs[1]?.value.trim();
-          if (k) data[k] = v;
-        });
+        const data: Record<string, string | Blob> = {};
+        for (const row of nonRoleRowStates) {
+          const key = row.keyInput.value.trim();
+          if (!key) continue;
+          if (row.fileBlob) {
+            data[key] = row.fileBlob; // return the File as Blob
+          } else {
+            data[key] = row.valueInput.value.trim();
+          }
+        }
         return data;
       }
     }