diff --git a/app.js b/app.js
index 05af8c4..d490b2d 100644
--- a/app.js
+++ b/app.js
@@ -215,8 +215,8 @@ function renderDashboard(pid) {
   ).join("");
   app.innerHTML = `
     <div class="crumbs fade">
-      <button class="back-btn" onclick="location.hash='#/'">&#8592; Back</button>
       <a onclick="location.hash='#/'">BrowserStack Demo Hub</a><span>›</span><span>${esc(p.name)}</span>
+      <button class="back-btn" onclick="location.hash='#/'">&#8592; Back</button>
     </div>
     <header class="hero fade" style="text-align:left;margin-bottom:32px;">
       <h1 style="font-size:2.4rem;display:flex;align-items:center;gap:12px;">
@@ -269,10 +269,10 @@ function renderVideo(pid, vid) {
     .join("");
   app.innerHTML = `
     <div class="crumbs fade">
-      <button class="back-btn" onclick="location.hash='#/product/${p.id}'">&#8592; Back</button>
       <a onclick="location.hash='#/'">BrowserStack Demo Hub</a><span>›</span>
       <a onclick="location.hash='#/product/${p.id}'">${esc(p.name)}</a><span>›</span>
       <span>${esc(v.title)}</span>
+      <button class="back-btn" onclick="location.hash='#/product/${p.id}'">&#8592; Back</button>
     </div>
     <div class="detail fade">
       <div class="main-col">
diff --git a/styles.css b/styles.css
index 6c81fa0..a1ab2a3 100644
--- a/styles.css
+++ b/styles.css
@@ -254,6 +254,7 @@ header.hero p { color: var(--muted); margin-top: 16px; font-size: 1.15rem; max-w
 
 /* Breadcrumb */
 .crumbs { display: flex; gap: 8px; align-items: center; margin-bottom: 28px; font-size: 0.92rem; }
+.crumbs .back-btn { margin-left: auto; }
 .crumbs a { color: var(--muted); cursor: pointer; text-decoration: none; transition: color 0.2s; }
 .crumbs a:hover { color: var(--orange); }
 .crumbs span { color: #b9bccb; }