diff --git a/src/app/template/web/service.go b/src/app/template/web/service.go
index b3131a49b496ede4b3b7f6a7ad0375e0ff42a150..0ad518f8870e06f9e6d3f427aee458fd491ea9cb 100644
--- a/src/app/template/web/service.go
+++ b/src/app/template/web/service.go
@@ -4,6 +4,9 @@ import (
 	"context"
 	"encoding/json"
 	"errors"
+	"os"
+	"path/filepath"
+
 	"github.com/google/uuid"
 	"github.com/org-harmony/harmony/src/app/template"
 	"github.com/org-harmony/harmony/src/app/user"
@@ -12,8 +15,6 @@ import (
 	"github.com/org-harmony/harmony/src/core/trace"
 	"github.com/org-harmony/harmony/src/core/validation"
 	"github.com/org-harmony/harmony/src/core/web"
-	"os"
-	"path/filepath"
 )
 
 var (
diff --git a/templates/project/_detail.go.html b/templates/project/_detail.go.html
index 763df23fdb0103372cdac96ed6fc15c6e09cc3e5..4e58997a7916e1deaf6680d129a7bd9c0cc4cd38 100644
--- a/templates/project/_detail.go.html
+++ b/templates/project/_detail.go.html
@@ -28,17 +28,20 @@
                            class="btn btn-outline-primary">
                             ✏️ Bearbeiten
                         </a>
+                        <!-- Delete button with custom confirmation modal -->
+                        <button class="btn btn-outline-danger"
+                                onclick="showDeleteConfirmation('{{ .Data.Project.Name }}', '{{ .Data.Project.ID.Hex }}')">
+                            🗑️ Löschen
+                        </button>
                         <!-- Dropdown toggle for additional actions -->
                         <button class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" 
                                 data-bs-toggle="dropdown">
                             <span class="visually-hidden">Toggle Dropdown</span>
                         </button>
-                        <!-- Dropdown menu with export and delete options -->
+                        <!-- Dropdown menu with export options -->
                         <ul class="dropdown-menu">
                             <li><a class="dropdown-item" href="#">📄 Export als JSON</a></li>
                             <li><a class="dropdown-item" href="#">📄 Export als TXT</a></li>
-                            <li><hr class="dropdown-divider"></li>
-                            <li><a class="dropdown-item text-danger" href="#">🗑️ Projekt löschen</a></li>
                         </ul>
                     </div>
                 </div>
@@ -80,6 +83,55 @@
             {{ end }}
         </div>
     </div>
+
+    <!-- Delete Confirmation Modal -->
+    <div class="modal fade" id="deleteConfirmModal" tabindex="-1" aria-labelledby="deleteConfirmModalLabel" aria-hidden="true">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="deleteConfirmModalLabel">Projekt löschen</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <p>Möchten Sie das Projekt <strong id="projectNameToDelete"></strong> wirklich löschen?</p>
+                    <div class="alert alert-warning d-flex align-items-center" role="alert">
+                        <div class="me-2">⚠️</div>
+                        <div>
+                            <strong>Achtung:</strong> Alle zugehörigen Anforderungen werden ebenfalls gelöscht!
+                        </div>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
+                    <button type="button" class="btn btn-danger" id="confirmDeleteBtn">Projekt löschen</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        function showDeleteConfirmation(projectName, projectId) {
+            // Set project name in modal
+            document.getElementById('projectNameToDelete').textContent = '"' + projectName + '"';
+            
+            // Set up confirm button
+            const confirmBtn = document.getElementById('confirmDeleteBtn');
+            confirmBtn.onclick = function() {
+                // Execute HTMX delete request
+                htmx.ajax('DELETE', '/project/' + projectId, {
+                    target: 'body',
+                    headers: {
+                        'HX-Push-Url': '/projects'
+                    }
+                });
+                // Close modal
+                bootstrap.Modal.getInstance(document.getElementById('deleteConfirmModal')).hide();
+            };
+            
+            // Show modal
+            new bootstrap.Modal(document.getElementById('deleteConfirmModal')).show();
+        }
+    </script>
 {{ end }}
 
 <!-- General Tab Template: Detailed project information display -->