diff --git a/ui/static/style.css b/ui/static/style.css
--- a/ui/static/style.css
+++ b/ui/static/style.css
@@ -333,6 +333,12 @@ }
 .flag-link:hover{color:var(--accent);background:var(--border);text-decoration:none}
 .flag-link.flagged{color:#dc2626}
 .flag-link.flagged svg{fill:currentColor}
+#flag-dialog{border:none;border-radius:var(--radius);padding:1.5rem;max-width:320px;box-shadow:0 25px 50px -12px rgba(0,0,0,.25);margin:auto}
+#flag-dialog h3{font-family:'Poppins',system-ui,sans-serif;font-size:1.1rem;font-weight:600;margin-bottom:.5rem}
+#flag-dialog p{color:var(--text-muted);font-size:.9rem;margin-bottom:1.25rem}
+#flag-dialog::backdrop{background:rgba(0,0,0,.3)}
+.flag-dialog-actions{display:flex;gap:.5rem;justify-content:flex-end}
+.flag-dialog-actions button{padding:.4rem .9rem;border-radius:4px;font-size:.85rem;cursor:pointer;font-family:'Poppins',system-ui,sans-serif}
 
 .meta-link{
   font-family:'Poppins',system-ui,sans-serif;
@@ -376,7 +382,7 @@ }
 .btn-primary{background:var(--accent);color:#fff;border:none}
 .btn-primary:hover{background:var(--accent-hover);text-decoration:none}
 .btn-secondary{background:var(--surface);color:var(--text);border:1px solid var(--border)}
-.btn-secondary:hover{border-color:var(--accent);text-decoration:none}
+.btn-secondary:hover{background:var(--btn-hover);text-decoration:none}
 
 .error-box{
   text-align:center;
diff --git a/ui/templates/recipe.html b/ui/templates/recipe.html
--- a/ui/templates/recipe.html
+++ b/ui/templates/recipe.html
@@ -40,7 +40,7 @@ {{if .Recipe.PrepTime}}<span><svg class="meta-icon" xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg> {{fmtDuration .Recipe.PrepTime}} prep</span>{{end}}
     {{if .Recipe.CookTime}}<span><svg class="meta-icon" xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg> {{fmtDuration .Recipe.CookTime}} cook</span>{{end}}
     {{if .Recipe.Yield}}<span>Serves {{.Recipe.Yield}}</span>{{end}}
     <a href="/cook?url={{.TargetURL | urlquery}}" class="cook-link">.cook</a>
-    <a href="/flag?url={{.TargetURL | urlquery}}" class="flag-link{{if .IsFlagged}} flagged{{end}}" title="Flag as problematic – saves recipe for review"><svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 22V4a1 1 0 0 1 .4-.8A6 6 0 0 1 8 2c3 0 5 2 7.333 2q2 0 3.067-.8A1 1 0 0 1 20 4v10a1 1 0 0 1-.4.8A6 6 0 0 1 16 16c-3 0-5-2-8-2a6 6 0 0 0-4 1.528"/></svg></a>
+    <a href="/flag?url={{.TargetURL | urlquery}}" class="flag-link{{if .IsFlagged}} flagged{{end}}" data-flag-url="/flag?url={{.TargetURL | urlquery}}" title="Flag as problematic – saves recipe for review"><svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 22V4a1 1 0 0 1 .4-.8A6 6 0 0 1 8 2c3 0 5 2 7.333 2q2 0 3.067-.8A1 1 0 0 1 20 4v10a1 1 0 0 1-.4.8A6 6 0 0 1 16 16c-3 0-5-2-8-2a6 6 0 0 0-4 1.528"/></svg></a>
   </div>
   {{if .Recipe.Description}}<p class="description">{{.Recipe.Description}}</p>{{end}}
 </div>
@@ -86,7 +86,29 @@
 <div class="actions">
 </div>
 
+<dialog id="flag-dialog">
+  <h3>Flag this recipe?</h3>
+  <p>This recipe will be saved for review.</p>
+  <div class="flag-dialog-actions">
+    <button class="btn-secondary" onclick="document.getElementById('flag-dialog').close()">Cancel</button>
+    <button class="btn-primary" id="flag-confirm-btn">Flag</button>
+  </div>
+</dialog>
+
 <script>
+const flagLink = document.querySelector('.flag-link:not(.flagged)');
+const flagDialog = document.getElementById('flag-dialog');
+const flagConfirmBtn = document.getElementById('flag-confirm-btn');
+if (flagLink) {
+  flagLink.addEventListener('click', function(e) {
+    e.preventDefault();
+    flagDialog.showModal();
+  });
+  flagConfirmBtn.addEventListener('click', function() {
+    location.href = flagLink.dataset.flagUrl;
+  });
+}
+
 function toggleCheck(li) {
   const cb = li.querySelector('input[type="checkbox"]');
   cb.checked = !cb.checked;