diff --git a/wwwroot/app.js b/wwwroot/app.js
index e30ba76..b0e0d58 100644
--- a/wwwroot/app.js
+++ b/wwwroot/app.js
@@ -271,11 +271,13 @@ function buildCard(s, { showAuthor }) {
     <div class="card-body">
       <div class="card-title-row">
         <h3>${s.name}</h3>
-        ${showAuthor && s.author ? `<span class="chip">${s.author}</span>` : ""}
+        <div class="title-meta">
+          ${s.youtubeUrl ? `<a class="link compact" href="${s.youtubeUrl}" target="_blank" rel="noopener">YouTube ↗</a>` : ""}
+          ${showAuthor && s.author ? `<span class="chip">${s.author}</span>` : ""}
+        </div>
       </div>
       ${s.genre ? `<p class="muted">${s.genre}</p>` : ""}
       ${s.description ? `<p>${s.description}</p>` : ""}
-      ${s.youtubeUrl ? `<a class="link" href="${s.youtubeUrl}" target="_blank" rel="noopener">YouTube ↗</a>` : ""}
     </div>
   `;
   if (hasImage) {
diff --git a/wwwroot/styles.css b/wwwroot/styles.css
index 1dcc610..876c0da 100644
--- a/wwwroot/styles.css
+++ b/wwwroot/styles.css
@@ -147,14 +147,16 @@ button.ghost {
 .card-title-row {
   display: flex;
   justify-content: space-between;
-  align-items: flex-start;
+  align-items: center;
   gap: 8px;
 }
 
 .card-title-row h3 { margin: 0; font-size: 18px; }
+.title-meta { display: flex; align-items: center; gap: 8px; }
 .muted { color: #9ca3af; margin: 0; }
 .link { color: #93c5fd; text-decoration: none; font-weight: 600; }
 .link:hover { text-decoration: underline; }
+.link.compact { font-size: 14px; }
 .chip {
   background: #1f2937;
   color: #e5e7eb;