.

frontend/src/App.jsx

@@ -1094,7 +1094,7 @@ export default function App() {
                         disabled={templateLoading || !!templateDeletingName}
                         onClick={() => handleDeleteTemplate(t)}
                       >
-                        ×
+                        {templateDeletingName === t.name ? 'Deleting…' : 'Delete'}
                       </button>
                     </div>
                   ))}

frontend/src/index.css

@@ -948,30 +948,26 @@ a:hover {
 }
 
 .template-example-delete {
-  position: absolute;
-  top: 0.45rem;
-  right: 0.45rem;
-  z-index: 2;
-  width: 1.75rem;
-  height: 1.75rem;
-  padding: 0;
-  border-radius: 50%;
-  border: 1px solid rgba(255, 255, 255, 0.35);
-  background: rgba(15, 23, 42, 0.72);
-  color: #fff;
-  font-size: 1.25rem;
-  font-weight: 400;
-  line-height: 1;
+  margin-top: 0.45rem;
+  width: 100%;
+  padding: 0.4rem 0.55rem;
+  border-radius: 8px;
+  border: 1px solid var(--error);
+  background: transparent;
+  color: var(--error);
+  font-size: 0.78rem;
+  font-weight: 600;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: background 0.15s ease, transform 0.15s ease;
+  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
 }
 
 .template-example-delete:hover:not(:disabled) {
   background: var(--error);
-  transform: scale(1.06);
+  color: #fff;
+  border-color: var(--error);
 }
 
 .template-example-delete:disabled {