diff --git a/tech/tabs/02-backlog/05_content.html.php b/tech/tabs/02-backlog/05_content.html.php
index ca65f96..bb0c2df 100644
--- a/tech/tabs/02-backlog/05_content.html.php
+++ b/tech/tabs/02-backlog/05_content.html.php
@@ -91,29 +91,24 @@
                     </td>
                     <td><?= htmlspecialchars($item['created']) ?></td>
                     <td>
-                        <button class="btn btn-outline-info" onclick="viewBacklog(
-                            '<?= htmlspecialchars($item['id']) ?>',
-                            '<?= htmlspecialchars(addslashes($item['title'])) ?>',
-                            '<?= htmlspecialchars(addslashes($item['desc'])) ?>',
-                            '<?= htmlspecialchars($status) ?>',
-                            '<?= htmlspecialchars($item['type'] ?? '') ?>',
-                            '<?= htmlspecialchars($item['created']) ?>'
-                        )" title="View Details"><i class="bi bi-info-circle"></i></button>
-                        <button class="btn btn-outline-secondary" onclick="editBacklog(
-                            '<?= htmlspecialchars($item['id']) ?>',
-                            '<?= htmlspecialchars(addslashes($item['title'])) ?>',
-                            '<?= htmlspecialchars(addslashes($item['desc'])) ?>',
-                            '<?= htmlspecialchars($status) ?>',
-                            '<?= htmlspecialchars($item['type'] ?? '') ?>'
-                        )" title="Edit"><i class="bi bi-pencil"></i></button>
-                        <form method="POST" class="d-inline" onsubmit="return confirm('Delete this backlog item?');" action="?tab=backlog">
-                            <input type="hidden" name="delete_backlog_id" value="<?= htmlspecialchars($item['id']) ?>">
-                            <button class="btn btn-outline-danger" title="Delete"><i class="bi bi-trash"></i></button>
-                        </form>
-                        &nbsp;&nbsp;&nbsp;&nbsp;
+                      <button class="btn btn-outline-info" onclick="viewBacklog('<?= $item['id'] ?>')">
+                          <i class="bi bi-info-circle"></i>
+                      </button>
+                      <button class="btn btn-outline-secondary" onclick="editBacklog('<?= $item['id'] ?>')">
+                          <i class="bi bi-pencil"></i>
+                      </button>
+                       <form method="POST" class="d-inline" onsubmit="return confirm('Delete this backlog item?');" action="?tab=backlog">
+                           <input type="hidden" name="delete_backlog_id" value="<?= htmlspecialchars($item['id']) ?>">
+                           <button class="btn btn-outline-danger" title="Delete"><i class="bi bi-trash"></i></button>
+                       </form>
+                       &nbsp;&nbsp;&nbsp;&nbsp;
                     </td>
                 </tr>
             <?php endforeach; ?>
         </tbody>
     </table>
 </div>
+
+<script>
+const backlogTickets = <?= json_encode(array_column($backlog, null, 'id'), JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP) ?>;
+</script>
diff --git a/tech/tabs/02-backlog/07_javascript.js b/tech/tabs/02-backlog/07_javascript.js
index 6a9edb0..a7165c3 100644
--- a/tech/tabs/02-backlog/07_javascript.js
+++ b/tech/tabs/02-backlog/07_javascript.js
@@ -1,15 +1,3 @@
-function editBacklog(id, title, desc, status, type) {
-    document.getElementById('editBacklogId').value = id;
-    document.getElementById('editBacklogTitle').value = title;
-    document.getElementById('editBacklogDesc').value = desc;
-    document.getElementById('editBacklogStatus').value = status;
-    document.getElementById('editBacklogType').value = type;
-
-    const modalEl = document.getElementById('editBacklogModal');
-    const modal = new bootstrap.Modal(modalEl);
-    modal.show();
-
-}
 
 /**
  * Escape HTML special characters in a string.
@@ -23,34 +11,40 @@ function escapeHtml(unsafe) {
         .replace(/'/g, '&#039;');
 }
 
-/**
- * Show modal with backlog item details.
- */
-function viewBacklog(id, title, desc, status, type, created) {
-    document.getElementById('viewBacklogTitle').textContent = title;
-    const descEl = document.getElementById('viewBacklogDesc');
-    const escapedDesc = escapeHtml(desc);
-    descEl.innerHTML = escapedDesc.replace(/\n/g, '<br>');
-    const statusBadge = document.getElementById('viewBacklogStatusBadge');
+function editBacklog(id) {
+    const item = backlogTickets[id];
+    if (!item) return;
+
+    document.getElementById('editBacklogId').value = item.id;
+    document.getElementById('editBacklogTitle').value = item.title;
+    document.getElementById('editBacklogDesc').value = item.desc;
+    document.getElementById('editBacklogStatus').value = item.status;
+    document.getElementById('editBacklogType').value = item.type;
+
+    new bootstrap.Modal(document.getElementById('editBacklogModal')).show();
+}
+
+function viewBacklog(id) {
+    const item = backlogTickets[id];
+    if (!item) return;
+
+    document.getElementById('viewBacklogTitle').textContent = item.title;
+    document.getElementById('viewBacklogDesc').innerHTML = escapeHtml(item.desc).replace(/\n/g, '<br>');
+    document.getElementById('viewBacklogCreated').textContent = item.created;
+
     const statusMap = { 'in progress': 'warning', 'done': 'success', 'cancelled': 'secondary' };
-    statusBadge.textContent = status.charAt(0).toUpperCase() + status.slice(1);
-    statusBadge.className = 'badge bg-' + (statusMap[status] || 'light');
-    document.getElementById('viewBacklogCreated').textContent = created;
+    const badge = document.getElementById('viewBacklogStatusBadge');
+    badge.className = 'badge bg-' + (statusMap[item.status] || 'light');
+    badge.textContent = item.status.charAt(0).toUpperCase() + item.status.slice(1);
 
     const typeMap = {
         'bug': 'bi-bug-fill text-danger',
         'improvement': 'bi-tools text-success',
         'nice-to-have': 'bi-star text-secondary'
     };
-    const typeIcon = typeMap[type] || '';
+    const icon = typeMap[item.type] || '';
     const typeEl = document.getElementById('viewBacklogType');
-    if (typeIcon) {
-        typeEl.innerHTML = `<i class="bi ${typeIcon}"></i> ${type.charAt(0).toUpperCase() + type.slice(1)}`;
-    } else {
-        typeEl.textContent = '';
-    }
+    typeEl.innerHTML = icon ? `<i class="bi ${icon}"></i> ${item.type}` : '';
 
-    const modalEl = document.getElementById('viewBacklogModal');
-    const modal = new bootstrap.Modal(modalEl);
-    modal.show();
+    new bootstrap.Modal(document.getElementById('viewBacklogModal')).show();
 }