diff --git a/src/routes/backoffice/project/+page.svelte b/src/routes/backoffice/project/+page.svelte
index 6e31f23..a2b4366 100644
--- a/src/routes/backoffice/project/+page.svelte
+++ b/src/routes/backoffice/project/+page.svelte
@@ -75,6 +75,39 @@
     let addToPoInProgress: Set<string> = new Set();
     let employees: any[] = [];
     let villas: any[] = [];
+    let showEditModal = false;
+
+    let editForm = {
+        po_number: "",
+        issue_name: "",
+        villa_id: "",
+        po_status: "",
+        prepared: null,
+        approved: null,
+        acknowledged: null,
+        completed: null,
+        received: null,
+        po_remark: ""
+    };
+    function openEditModal(row) {
+    selectedPO = row;
+
+    editForm = {
+        po_number: row.purchase_order_number || "",
+        issue_name: row.issue_name || "",
+        villa_id: row.villa_id || "",
+        po_status: row.po_status || "",
+        prepared: row.prepared,
+        approved: row.approved,
+        acknowledged: row.acknowledged,
+        completed: row.completed,
+        received: row.received,
+        po_remark: row.po_remark || ""
+    };
+
+    showEditModal = true;
+    }
+
 
     async function fetchVillas() {
         const { data, error } = await supabase
@@ -104,7 +137,28 @@
         else poItems = data;
     }
 
+    async function saveEdit() {
+        const { error } = await supabase
+            .from("vb_purchase_orders")
+            .update({
+            prepared: editForm.prepared,
+            approved: editForm.approved,
+            acknowledged: editForm.acknowledged,
+            completed: editForm.completed,
+            received: editForm.received,
+            po_remark: editForm.po_remark
+            })
+            .eq("id", selectedPO.id);
 
+        if (error) {
+            console.error("Error saving edit:", error);
+            alert("Failed to save changes.");
+            return;
+        }
+
+        showEditModal = false;
+        await fetchPurchaseOrder();
+    }
     function handleFileChange(event: Event) {
         const input = event.target as HTMLInputElement;
         if (input.files && input.files.length > 0) {
@@ -974,4 +1028,63 @@
       </form>
     </div>
   </div>
+{/if}
+
+{#if showEditModal}
+  <div class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 overflow-y-auto">
+    <div class="min-h-screen flex items-center justify-center p-4">
+      <div class="bg-white rounded-lg shadow-lg w-full max-w-2xl max-h-[90vh] overflow-y-auto p-6 space-y-4">
+        <h2 class="text-xl font-bold">Edit Purchase Order</h2>
+
+        <!-- PO Number -->
+        <label>PO Number</label>
+        <input type="text" value={editForm.po_number} disabled class="w-full border p-2 bg-gray-100"/>
+
+        <!-- Issue Name -->
+        <label>Issue Name</label>
+        <input type="text" value={editForm.issue_name} disabled class="w-full border p-2 bg-gray-100"/>
+
+        <!-- Villa ID -->
+        <label>Villa ID</label>
+        <input type="text" value={editForm.villa_id} disabled class="w-full border p-2 bg-gray-100"/>
+
+        <!-- PO Status -->
+        <label>PO Status</label>
+        <input type="text" value={editForm.po_status} disabled class="w-full border p-2 bg-gray-100"/>
+
+        <!-- Status Toggles -->
+        <div class="space-y-2">
+          {#each ['prepared','approved','acknowledged','completed','received'] as key}
+            <div class="flex items-center gap-2">
+              <label class="w-32 capitalize">{key}</label>
+              <select bind:value={editForm[key]} class="w-40 border p-2">
+                <option value={null}>Unset</option>
+                <option value={true}>True</option>
+                <option value={false}>False</option>
+              </select>
+              <button
+                type="button"
+                class="text-xs text-blue-600 underline"
+                on:click={() => editForm[key] = null}
+              >Reset</button>
+            </div>
+          {/each}
+        </div>
+
+        <!-- PO Remark -->
+        <label>PO Remark</label>
+        <textarea
+          bind:value={editForm.po_remark}
+          class="w-full border p-2"
+          rows="3"
+        ></textarea>
+
+        <!-- Actions -->
+        <div class="flex justify-end space-x-2 pt-4">
+          <button on:click={saveEdit} class="bg-blue-600 text-white px-4 py-2 rounded">Save</button>
+          <button on:click={() => showEditModal = false} class="px-4 py-2 rounded border">Cancel</button>
+        </div>
+      </div>
+    </div>
+  </div>
 {/if}
\ No newline at end of file
diff --git a/src/routes/backoffice/purchaseorder/+page.svelte b/src/routes/backoffice/purchaseorder/+page.svelte
index 2a6dd6a..aab1b52 100644
--- a/src/routes/backoffice/purchaseorder/+page.svelte
+++ b/src/routes/backoffice/purchaseorder/+page.svelte
@@ -36,6 +36,38 @@
         updated_by: "",
         updated_at: new Date().toISOString(),
     };
+    let showEditModal = false;
+
+        let editForm = {
+        po_number: "",
+        issue_name: "",
+        villa_name: "",
+        po_status: "",
+        prepared: null,
+        approved: null,
+        acknowledged: null,
+        completed: null,
+        received: null,
+        po_remark: ""
+    };
+    function openEditModal(row) {
+        selectedPO = row;
+
+        editForm = {
+            po_number: row.purchase_order_number || "",
+            issue_name: row.issue_name || "",
+            villa_name: row.villa_data || "",
+            po_status: row.po_status || "",
+            prepared: row.prepared,
+            approved: row.approved,
+            acknowledged: row.acknowledged,
+            completed: row.completed,
+            received: row.received,
+            po_remark: row.po_remark || ""
+        };
+
+        showEditModal = true;
+    }
 
     type PurchaseOrders = {
         id: string;
@@ -164,6 +196,30 @@
             }
         }
     }
+    async function saveEdit() {
+        const { error } = await supabase
+            .from("vb_purchase_orders")
+            .update({
+            prepared: editForm.prepared,
+            approved: editForm.approved,
+            acknowledged: editForm.acknowledged,
+            completed: editForm.completed,
+            received: editForm.received,
+            po_remark: editForm.po_remark,
+            updated_at: new Date().toISOString(),   // ✅ safe current timestamp
+            updated_by: currentUserId               // ✅ user UUID
+            })
+            .eq("id", selectedPO.id);
+
+        if (error) {
+            console.error("Error saving edit:", error);
+            alert("Failed to save changes.");
+            return;
+        }
+
+        showEditModal = false;
+        await fetchPurchaseOrder();
+    }
     function openApprovalModal(row) {
         selectedPO = row;
 
@@ -290,7 +346,8 @@
             .update({
             completed: completedForm.completed === "completed",
             completed_by: completedForm.completed === "completed" ? currentUserId : null,
-            completed_date: completedForm.completed_date
+            completed_date: completedForm.completed_date,
+            po_status: "completed"
             })
             .eq("id", selectedPO.id);
 
@@ -710,7 +767,8 @@
             .update({
             received: receivedForm.received === "received",
             received_by: receivedForm.received === "received" ? currentUserId : null,
-            received_date: receivedForm.received_date
+            received_date: receivedForm.received_date,
+            po_status: "received",
             })
             .eq("id", selectedPO.id);
 
@@ -850,7 +908,8 @@
             .update({
             acknowledged: acknowledgedForm.acknowledged === "acknowledged",
             acknowledge_by: acknowledgedForm.acknowledged === "acknowledged" ? currentUserId : null,
-            acknowledged_date: acknowledgedForm.acknowledged_date
+            acknowledged_date: acknowledgedForm.acknowledged_date,
+            po_status: "acknowledged"
             })
             .eq("id", selectedPO.id);
 
@@ -1261,7 +1320,7 @@
                         <td class="px-4 py-2">
                           <button
                             class="inline-flex items-center gap-1 rounded bg-blue-600 px-3 py-1.5 text-white text-xs font-medium hover:bg-blue-700"
-                            on:click={() => openModal(row)}
+                            on:click={() => openEditModal(row)}
                           >
                             ✏️ Edit
                           </button>
@@ -1840,3 +1899,61 @@
     </div>
   </div>
 {/if}
+{#if showEditModal}
+  <div class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 overflow-y-auto">
+    <div class="min-h-screen flex items-center justify-center p-4">
+      <div class="bg-white rounded-lg shadow-lg w-full max-w-2xl max-h-[90vh] overflow-y-auto p-6 space-y-4">
+        <h2 class="text-xl font-bold">Edit Purchase Order</h2>
+
+        <!-- PO Number -->
+        <label>PO Number</label>
+        <input type="text" value={editForm.po_number} disabled class="w-full border p-2 bg-gray-100"/>
+
+        <!-- Issue Name -->
+        <label>Issue Name</label>
+        <input type="text" value={editForm.issue_name} disabled class="w-full border p-2 bg-gray-100"/>
+
+        <!-- Villa ID -->
+        <label>Villa ID</label>
+        <input type="text" value={editForm.villa_name} disabled class="w-full border p-2 bg-gray-100"/>
+
+        <!-- PO Status -->
+        <label>PO Status</label>
+        <input type="text" value={editForm.po_status} disabled class="w-full border p-2 bg-gray-100"/>
+
+        <!-- Status Toggles -->
+        <div class="space-y-2">
+          {#each ['prepared','approved','acknowledged','completed','received'] as key}
+            <div class="flex items-center gap-2">
+              <label class="w-32 capitalize">{key}</label>
+              <select bind:value={editForm[key]} class="w-40 border p-2">
+                <option value={null}>Unset</option>
+                <option value={true}>True</option>
+                <option value={false}>False</option>
+              </select>
+              <button
+                type="button"
+                class="text-xs text-blue-600 underline"
+                on:click={() => editForm[key] = null}
+              >Reset</button>
+            </div>
+          {/each}
+        </div>
+
+        <!-- PO Remark -->
+        <label>PO Remark</label>
+        <textarea
+          bind:value={editForm.po_remark}
+          class="w-full border p-2"
+          rows="3"
+        ></textarea>
+
+        <!-- Actions -->
+        <div class="flex justify-end space-x-2 pt-4">
+          <button on:click={saveEdit} class="bg-blue-600 text-white px-4 py-2 rounded">Save</button>
+          <button on:click={() => showEditModal = false} class="px-4 py-2 rounded border">Cancel</button>
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}