diff --git a/src/app.css b/src/app.css
index bd9a1ff..4fa3ae5 100644
--- a/src/app.css
+++ b/src/app.css
@@ -37,7 +37,7 @@
   --app-select-option-bg: #171d2b;
   --app-panel-highlight: linear-gradient(180deg, rgba(255,255,255,0.038), transparent 70%);
   --app-panel-shadow: 0 18px 48px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.045);
-  --app-dialog-backdrop: #070a10;
+  --app-dialog-backdrop: rgba(4, 7, 12, 0.58);
   --app-dialog-bg: #101622;
   --app-dialog-chrome: #141b29;
   --app-dialog-shadow: 0 24px 68px rgba(0, 0, 0, 0.54), 0 2px 12px rgba(0,0,0,0.32);
@@ -103,7 +103,7 @@
   --app-select-option-bg: #ffffff;
   --app-panel-highlight: linear-gradient(180deg, rgba(255,255,255,0.72), transparent 70%);
   --app-panel-shadow: 0 18px 48px rgba(28, 44, 74, 0.12), inset 0 1px 0 rgba(255,255,255,0.86);
-  --app-dialog-backdrop: rgba(232, 238, 248, 0.96);
+  --app-dialog-backdrop: rgba(222, 229, 241, 0.56);
   --app-dialog-bg: #ffffff;
   --app-dialog-chrome: #f4f7fc;
   --app-dialog-shadow: 0 24px 72px rgba(28, 44, 74, 0.2), 0 2px 12px rgba(28,44,74,0.1);
@@ -3057,6 +3057,8 @@
     padding: 24px;
     background-color: var(--app-dialog-backdrop);
     background-image: none;
+    -webkit-backdrop-filter: blur(10px) saturate(0.78);
+    backdrop-filter: blur(10px) saturate(0.78);
   }
 
   .app-chrome-backdrop {
@@ -3249,6 +3251,16 @@
     max-height: calc(100vh - 32px);
     overflow: auto;
   }
+  .branch-delete-dialog {
+    display: grid;
+    grid-template-rows: auto auto auto;
+    width: min(500px, calc(100vw - 32px));
+    height: auto;
+    max-height: calc(100vh - 32px);
+    border-color: rgba(255, 90, 103, 0.22);
+    box-shadow: var(--app-dialog-shadow), 0 0 0 1px rgba(255, 90, 103, 0.04);
+    overflow: auto;
+  }
   .ai-settings-dialog {
     display: block;
     width: min(560px, calc(100vw - 32px));
@@ -3753,7 +3765,30 @@
     display: grid;
     grid-template-columns: auto minmax(0, 1fr);
     gap: 14px;
-    padding: 18px 16px 16px;
+    padding: 20px 18px 18px;
+  }
+  .branch-delete-header {
+    padding: 15px 16px;
+    background:
+      linear-gradient(90deg, rgba(255, 90, 103, 0.08), transparent 42%),
+      var(--app-dialog-chrome);
+  }
+  .branch-delete-heading { display: flex; align-items: center; gap: 11px; }
+  .branch-delete-heading-icon {
+    display: grid;
+    place-items: center;
+    width: 32px;
+    height: 32px;
+    flex: 0 0 auto;
+    border: 1px solid rgba(255, 90, 103, 0.28);
+    border-radius: 8px;
+    color: #ff9aa4;
+    background: rgba(255, 90, 103, 0.09);
+  }
+  .branch-delete-heading-icon.force {
+    border-color: rgba(255, 174, 92, 0.34);
+    color: #ffc07a;
+    background: rgba(255, 151, 61, 0.1);
   }
   .discard-warning-icon {
     display: grid;
@@ -3794,6 +3829,61 @@
     align-items: center;
     gap: 6px;
   }
+  .branch-delete-lead { color: var(--color-ink); font-weight: 600; }
+  .branch-delete-target {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    min-width: 0;
+    padding: 10px 11px;
+    border: 1px solid var(--color-border-subtle);
+    border-radius: 8px;
+    background: rgba(0, 0, 0, 0.16);
+    box-shadow: inset 3px 0 0 rgba(255, 90, 103, 0.48);
+  }
+  .branch-delete-target-icon {
+    display: grid;
+    place-items: center;
+    width: 28px;
+    height: 28px;
+    flex: 0 0 auto;
+    border-radius: 7px;
+    color: var(--color-accent);
+    background: rgba(77, 182, 214, 0.1);
+  }
+  .branch-delete-target-copy { display: grid; gap: 2px; min-width: 0; flex: 1; }
+  .branch-delete-target-copy code {
+    overflow: hidden;
+    color: var(--color-ink);
+    font-family: var(--font-mono);
+    font-size: 12px;
+    font-weight: 700;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .branch-delete-target-copy > span { color: var(--color-ink-faint); font-size: 10.5px; }
+  .branch-delete-scope {
+    flex: 0 0 auto;
+    padding: 3px 7px;
+    border: 1px solid rgba(77, 182, 214, 0.22);
+    border-radius: 999px;
+    color: #8ed8ee;
+    background: rgba(77, 182, 214, 0.08);
+    font-size: 9.5px;
+    font-weight: 800;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+  }
+  .branch-delete-scope.remote { border-color: rgba(167, 126, 255, 0.25); color: #c2a9ff; background: rgba(132, 88, 232, 0.1); }
+  .branch-delete-body .discard-warning-text {
+    padding: 9px 10px;
+    border-left: 2px solid rgba(255, 90, 103, 0.55);
+    color: #f2aeb5;
+    background: rgba(255, 90, 103, 0.055);
+    font-size: 11.5px;
+    font-weight: 600;
+  }
+  .branch-delete-confirm { min-width: 116px; }
   .discard-target-list {
     display: grid;
     gap: 4px;
diff --git a/src/lib/components/BranchDeleteConfirmDialog.svelte b/src/lib/components/BranchDeleteConfirmDialog.svelte
index 3aea620..46ea768 100644
--- a/src/lib/components/BranchDeleteConfirmDialog.svelte
+++ b/src/lib/components/BranchDeleteConfirmDialog.svelte
@@ -20,15 +20,22 @@
 
   let title = $derived(branch.remote ? "Delete remote branch?" : force ? "Force delete branch?" : "Delete branch?");
   let remoteParts = $derived(branch.remote ? branch.name.split(/\/(.+)/) : []);
+  let branchName = $derived(branch.remote ? remoteParts[1] || branch.name : branch.name);
+  let branchLocation = $derived(branch.remote ? remoteParts[0] || "Remote" : "Local repository");
 
 </script>
 
 <div class="dialog-backdrop" role="presentation">
-  <div class="dialog branch-delete-dialog" role="dialog" aria-modal="true" aria-label={title}>
-    <header class="dialog-header">
-      <div>
+  <div class="dialog branch-delete-dialog" role="dialog" aria-modal="true" aria-labelledby="branch-delete-title">
+    <header class="dialog-header branch-delete-header">
+      <div class="branch-delete-heading">
+        <span class:force class="branch-delete-heading-icon" aria-hidden="true">
+          <Trash2 size={16} />
+        </span>
+        <div>
         <span class="eyebrow">{branch.remote ? "Remote branch" : force ? "Force delete" : "Delete branch"}</span>
-        <p class="dialog-title">{title}</p>
+          <p class="dialog-title" id="branch-delete-title">{title}</p>
+        </div>
       </div>
       <button class="btn-sm dialog-close" type="button" onclick={onClose} disabled={isBusy} aria-label="Close">
         <X size={16} aria-hidden="true" />
@@ -36,31 +43,35 @@
     </header>
 
     <div class="branch-delete-body">
-      <div class="discard-warning-icon" aria-hidden="true">
+      <div class:force class="discard-warning-icon branch-delete-warning-icon" aria-hidden="true">
         <AlertTriangle size={22} />
       </div>
 
       <div class="discard-confirm-copy">
-        <p>
+        <p class="branch-delete-lead">
           {#if branch.remote}
-            Delete this branch from the remote server?
+            This branch will be removed from the shared remote repository.
           {:else if force}
-            This branch is not fully merged. Force deleting removes the branch pointer even if some commits are only reachable from this branch.
+            This branch is not fully merged. Some commits may only exist here.
           {:else}
-            Delete this local branch from the repository?
+            This branch will be removed from your local repository.
           {/if}
         </p>
-        <code class="discard-target" title={branch.name}>
-          <GitBranch size={13} aria-hidden="true" />
-          {branch.name}
-        </code>
+        <div class="branch-delete-target" title={branch.name}>
+          <span class="branch-delete-target-icon" aria-hidden="true"><GitBranch size={16} /></span>
+          <span class="branch-delete-target-copy">
+            <code>{branchName}</code>
+            <span>{branchLocation}</span>
+          </span>
+          <span class:remote={branch.remote} class="branch-delete-scope">{branch.remote ? "Remote" : "Local"}</span>
+        </div>
         <p class="discard-warning-text">
           {#if branch.remote}
-            This affects everyone using <strong>{remoteParts[0] || "the remote"}</strong>. Your local commits and local branches are kept.
+            This affects everyone using <strong>{remoteParts[0] || "the remote"}</strong>. Your local branch is kept.
           {:else if force}
-            Make sure you no longer need the unique commits on this branch.
+            Force deletion can make unmerged commits difficult to recover.
           {:else}
-            Git will refuse if the branch is not fully merged.
+            Git will stop the deletion if the branch contains unmerged commits.
           {/if}
         </p>
       </div>
@@ -68,7 +79,7 @@
 
     <footer class="discard-confirm-actions">
       <button class="btn-secondary" type="button" onclick={onClose} disabled={isBusy}>Cancel</button>
-      <button class="btn-danger" type="button" onclick={onConfirm} disabled={isBusy}>
+      <button class="btn-danger branch-delete-confirm" type="button" onclick={onConfirm} disabled={isBusy}>
         {#if isBusy}
           <LoaderCircle class="spin" size={15} aria-hidden="true" />
         {:else}