diff --git a/src/App.svelte b/src/App.svelte
index 55473af..9072ad1 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -855,6 +855,28 @@
     await navigator.clipboard.writeText(`${serverAddress}/overlay/${overlaySlug}`).catch(() => (overlayError = 'Copy was unavailable; select the URL manually.'));
   }
 
+  async function deleteOverlay() {
+    if (!selectedOverlayId || !window.confirm(`Permanently delete overlay “${overlayName}”? Its browser-source URL will stop serving content.`)) return;
+    overlayBusy = true;
+    overlayError = '';
+    try {
+      const response = await fetch(`${serverAddress}/api/v1/overlays/${selectedOverlayId}`, { method: 'DELETE', headers: { authorization: `Bearer ${sessionToken}` } });
+      if (!response.ok) throw new Error('The overlay could not be deleted.');
+      selectedOverlayId = '';
+      overlayName = '';
+      overlaySlug = '';
+      overlayHtml = '';
+      overlayCss = '';
+      overlayJavascript = '';
+      pendingOverlayDraft = null;
+      await loadOverlays();
+    } catch (error) {
+      overlayError = error instanceof Error ? error.message : 'The overlay could not be deleted.';
+    } finally {
+      overlayBusy = false;
+    }
+  }
+
   async function revokeOAuth(identity: 'streamer' | 'bot') {
     oauthBusy = true;
     oauthError = '';
@@ -1042,6 +1064,9 @@
         <div class="settings-body"><span>A newer unsaved draft is available for this overlay.</span><div class="overlay-controls"><button class="primary" onclick={restorePendingOverlayDraft}>RESTORE LOCAL DRAFT</button><button class="secondary" onclick={discardPendingOverlayDraft}>DISCARD LOCAL DRAFT</button></div></div>
       </section>
     {/if}
+    {#if activeView === 'Overlays' && selectedOverlayId}
+      <section class="panel overlay-danger-panel"><div class="panel-header"><span>OVERLAY LIFECYCLE</span></div><div class="settings-body"><span class="micro">DELETION IS PERMANENT AND INVALIDATES THE BROWSER-SOURCE URL</span><button class="danger" onclick={deleteOverlay} disabled={overlayBusy}>DELETE OVERLAY</button></div></section>
+    {/if}
     {#if activeView === 'Overlays' && (selectedOverlayId || overlayName) && overlayVariableWarnings().length}
       <section class="panel overlay-diagnostics-panel">
         <div class="panel-header"><button class="diagnostics-toggle" onclick={() => (overlayDiagnosticsOpen = !overlayDiagnosticsOpen)} aria-expanded={overlayDiagnosticsOpen}>⚠ {overlayVariableWarnings().length} VARIABLE WARNING{overlayVariableWarnings().length === 1 ? '' : 'S'}</button></div>
diff --git a/src/styles.css b/src/styles.css
index f51adac..5d1e6d1 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -934,6 +934,19 @@ label {
 .overlay-diagnostics-panel {
   margin-top: 10px;
 }
+.overlay-danger-panel {
+  margin-top: 10px;
+}
+.danger {
+  border: 1px solid var(--ed-danger);
+  background: transparent;
+  color: var(--ed-danger);
+  padding: 7px 12px;
+  font: inherit;
+}
+.danger:hover {
+  background: color-mix(in srgb, var(--ed-danger) 16%, transparent);
+}
 .diagnostics-toggle {
   border: 0;
   background: transparent;