diff --git a/static/app.js b/static/app.js
index 84dadee..699dee5 100644
--- a/static/app.js
+++ b/static/app.js
@@ -186,6 +186,7 @@ function filterChart(d) {
   );
 })();
 let lastSyn = null;
+let synSwapped = false;
 
 /* ---------------- tabs ---------------- */
 document.querySelectorAll("#tabs button").forEach((b) =>
@@ -502,6 +503,7 @@ $("#syn-go").addEventListener("click", async () => {
     });
     const d = await res.json();
     if (d.error) throw new Error(d.error);
+    synSwapped = false;
     renderSynastry(d);
   } catch (ex) {
     err.textContent = ex.message;
@@ -534,9 +536,18 @@ function renderSynastry(d0, scroll = true) {
      <div class="gauge"><div class="num" style="color:var(--green)">${sc.harmony}</div><div class="lbl">harmony</div></div>
      <div class="gauge"><div class="num" style="color:var(--red)">${sc.tension}</div><div class="lbl">tension</div></div>
      <div class="gauge"><div class="num" style="color:var(--ink)">${sc.contacts}</div><div class="lbl">contacts</div></div>
-     <div id="syn-blendbar"><div style="width:${sc.blend}%"></div></div>
-     <p class="hint" style="flex-basis:100%">Biwheel: <span style="color:#e8e4f0">${esc(nameA)} outer</span> · <span style="color:var(--gold)">${esc(nameB)} inner</span>, in ${esc(nameA)}'s houses.</p>`;
-  $("#syn-wheel").innerHTML = wheelSVG(d.chart_a, d.chart_b);
+     <div id="syn-blendbar"><div style="width:${sc.blend}%"></div></div>`;
+  const base = synSwapped ? d.chart_b : d.chart_a;
+  const over = synSwapped ? d.chart_a : d.chart_b;
+  const baseName = synSwapped ? nameB : nameA;
+  const overName = synSwapped ? nameA : nameB;
+  if (base.time_unknown && !over.time_unknown) {
+    $("#syn-legend").innerHTML = `<span class="hint">${esc(baseName)}'s birth time is unknown — houses/rotation are its noon solar chart. Swap to frame by ${esc(overName)}.</span>`;
+  } else {
+    $("#syn-legend").innerHTML =
+      `Biwheel: <span style="color:#e8e4f0">${esc(baseName)} outer</span> · <span style="color:var(--gold)">${esc(overName)} inner</span>, in ${esc(baseName)}'s houses.`;
+  }
+  $("#syn-wheel").innerHTML = wheelSVG(base, over);
 
   // inter-aspect grid: rows = A points, cols = B points
   const cls = (a) => ({ Conjunction: "asp-gold", Opposition: "asp-red", Square: "asp-red", Trine: "asp-blue", Sextile: "asp-green" }[a.aspect] || "asp-dim");
@@ -568,6 +579,10 @@ function renderSynastry(d0, scroll = true) {
   if (scroll) $("#syn-results").scrollIntoView({ behavior: "smooth" });
 }
 $("#syn-print").addEventListener("click", () => window.print());
+$("#syn-swap").addEventListener("click", () => {
+  synSwapped = !synSwapped;
+  if (lastSyn) renderSynastry(lastSyn, false);
+});
 
 /* ---------------- aspect reference ---------------- */
 (async function loadReference() {
diff --git a/static/index.html b/static/index.html
index a0c3765..b0f2b02 100644
--- a/static/index.html
+++ b/static/index.html
@@ -127,6 +127,10 @@
       </div>
       <div id="syn-results" hidden>
         <div id="syn-scores"></div>
+        <div id="syn-wheelbar">
+          <span id="syn-legend"></span>
+          <button type="button" id="syn-swap" title="flip which chart is the outer wheel (houses follow the outer chart)">⇄ Swap inner/outer</button>
+        </div>
         <div id="syn-wheel"></div>
         <h3>Inter-Aspect Grid <span class="hint">(rows = first chart, columns = partner)</span></h3>
         <div class="scrollx"><table id="syn-grid"></table></div>
diff --git a/static/style.css b/static/style.css
index cf8245b..85c1857 100644
--- a/static/style.css
+++ b/static/style.css
@@ -140,6 +140,9 @@ td.dign { color: var(--gold); font-size: 12px; }
 .gauge .lbl { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: 1px; }
 #syn-blendbar { flex: 1; min-width: 220px; height: 14px; border-radius: 7px; background: var(--red); overflow: hidden; }
 #syn-blendbar div { height: 100%; background: linear-gradient(90deg, #5cc58a, #5fa8e0); }
+#syn-wheelbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; font-size: 13px; color: var(--dim); }
+#syn-swap { font-size: 13px; padding: 6px 12px; background: #1a1a2e; }
+#syn-swap:hover { background: #262640; }
 #syn-wheel svg { width: 100%; max-width: 720px; height: auto; display: block; margin: 0 auto; }
 #syn-grid th { color: var(--gold); }
 #syn-grid td, #syn-grid th { text-align: center; padding: 4px 6px; min-width: 30px; }
@@ -152,7 +155,7 @@ td.dign { color: var(--gold); font-size: 12px; }
 
 @media print {
   body { background: #fff; color: #000; font-size: 12px; }
-  header, #form-card, #tabs, footer, #print-btn, #toolbar, #layers, #syn-picker, #syn-print { display: none !important; }
+  header, #form-card, #tabs, footer, #print-btn, #toolbar, #layers, #syn-picker, #syn-print, #syn-swap { display: none !important; }
   #results { border: none; background: none; }
   .tab { display: block !important; }
   #report .item b, #report h4, h3 { color: #000; }