diff --git a/frontend/public/js/app.js b/frontend/public/js/app.js
index 927b41d..53d23ff 100644
--- a/frontend/public/js/app.js
+++ b/frontend/public/js/app.js
@@ -428,23 +428,25 @@ function renderGallery(container, items) {
                     <span>${formatDate(item.createdAt)}</span>
                     <div class="gallery-item-actions">
                         ${item.status === 'completed' ? `<a href="/api/content/${item.id}/download" class="btn btn-sm btn-secondary">Download</a>` : ''}
-                        <button class="btn btn-sm btn-danger" onclick="deleteContent(${item.id})">Delete</button>
+                        <button class="btn btn-sm btn-danger delete-content-btn" data-content-id="${item.id}">Delete</button>
                     </div>
                 </div>
             </div>
         </div>
     `).join('');
-}
 
-async function deleteContent(id) {
-    if (!confirm('Are you sure you want to delete this content?')) return;
-
-    try {
-        await api(`/content/${id}`, { method: 'DELETE' });
-        loadGallery(currentPage);
-    } catch (error) {
-        alert(error.message);
-    }
+    container.querySelectorAll('.delete-content-btn').forEach(btn => {
+        btn.addEventListener('click', async function() {
+            const contentId = parseInt(this.dataset.contentId, 10);
+            if (!confirm('Are you sure you want to delete this content?')) return;
+            try {
+                await api(`/content/${contentId}`, { method: 'DELETE' });
+                loadGallery(currentPage);
+            } catch (error) {
+                alert(error.message);
+            }
+        });
+    });
 }
 
 // Admin