diff --git a/webui/index.html b/webui/index.html
index 86be8508..5f116c57 100644
--- a/webui/index.html
+++ b/webui/index.html
@@ -740,7 +740,7 @@
                 </div>
 
                 <!-- Artist Hero Section -->
-                <div class="artist-hero-section">
+                <div class="artist-hero-section" id="artist-hero-section">
                     <div class="artist-hero-content">
                         <div class="artist-image-container">
                             <img class="artist-image" id="artist-detail-image" src="" alt="Artist Image" />
diff --git a/webui/static/script.js b/webui/static/script.js
index 5fcdb278..cb41d3f6 100644
--- a/webui/static/script.js
+++ b/webui/static/script.js
@@ -14373,13 +14373,13 @@ function initializeArtistDetailPage() {
 async function loadArtistDetailData(artistId, artistName) {
     console.log(`🔄 Loading artist detail data for: ${artistName} (ID: ${artistId})`);
 
-    // Show loading state
+    // Show loading state and hide all content
     showArtistDetailLoading(true);
     showArtistDetailError(false);
     showArtistDetailMain(false);
+    showArtistDetailHero(false);
 
-    // Update header with artist name
-    updateArtistDetailPageHeader(artistName);
+    // Don't update header until data loads to avoid showing stale data
 
     try {
         // Call API to get artist discography data
@@ -14397,22 +14397,27 @@ async function loadArtistDetailData(artistId, artistName) {
 
         console.log(`✅ Loaded artist detail data:`, data);
 
-        // Hide loading and show main content
+        // Hide loading and show all content
         showArtistDetailLoading(false);
         showArtistDetailMain(true);
+        showArtistDetailHero(true);
 
         console.log(`🎨 Main content visibility:`, document.getElementById('artist-detail-main'));
         console.log(`🎨 Albums section:`, document.getElementById('albums-section'));
 
+        // Update header with artist name now that data is loaded
+        updateArtistDetailPageHeader(data.artist.name);
+
         // Populate the page with data
         populateArtistDetailPage(data);
 
     } catch (error) {
         console.error(`❌ Error loading artist detail data:`, error);
 
-        // Show error state
+        // Show error state (keep hero section hidden)
         showArtistDetailLoading(false);
         showArtistDetailError(true, error.message);
+        showArtistDetailHero(false);
 
         showToast(`Failed to load artist details: ${error.message}`, "error");
     }
@@ -14931,3 +14936,14 @@ function showArtistDetailMain(show) {
         }
     }
 }
+
+function showArtistDetailHero(show) {
+    const heroElement = document.getElementById("artist-hero-section");
+    if (heroElement) {
+        if (show) {
+            heroElement.classList.remove("hidden");
+        } else {
+            heroElement.classList.add("hidden");
+        }
+    }
+}