diff --git a/webui/index.html b/webui/index.html
index 9ffb73f4..e1151258 100644
--- a/webui/index.html
+++ b/webui/index.html
@@ -511,37 +511,29 @@
                                             </div>
                                         </div>
 
-                                        <!-- DJ Charts Section (Always Visible) -->
+                                        <!-- DJ Charts Section -->
                                         <div class="homepage-dj-charts-section">
                                             <h3 class="section-title">🎧 DJ Charts Collection</h3>
                                             <p class="section-description">DJ curated chart collections</p>
-
-                                            <!-- Always Visible Charts List -->
-                                            <div class="dj-charts-content" id="dj-charts-content">
-                                                <div class="charts-loading-inline" id="dj-charts-loading-inline">
-                                                    <div class="loading-spinner-small"></div>
-                                                    <p>Loading DJ chart collections...</p>
-                                                </div>
-                                                <div class="dj-charts-grid" id="dj-charts-grid">
-                                                    <!-- Charts will be populated here -->
-                                                </div>
+                                            <div class="charts-loading-inline" id="dj-charts-loading-inline">
+                                                <div class="loading-spinner-small"></div>
+                                                <p>Loading DJ chart collections...</p>
+                                            </div>
+                                            <div class="dj-charts-grid" id="dj-charts-grid">
+                                                <!-- Charts will be populated here -->
                                             </div>
                                         </div>
 
-                                        <!-- Featured Charts Section (Always Visible) -->
+                                        <!-- Featured Charts Section -->
                                         <div class="homepage-featured-charts-section">
                                             <h3 class="section-title">⭐ Featured Charts Collection</h3>
                                             <p class="section-description">Editor curated chart collections</p>
-
-                                            <!-- Always Visible Charts List -->
-                                            <div class="featured-charts-content" id="featured-charts-content">
-                                                <div class="charts-loading-inline" id="featured-charts-loading-inline">
-                                                    <div class="loading-spinner-small"></div>
-                                                    <p>Loading featured chart collections...</p>
-                                                </div>
-                                                <div class="featured-charts-grid" id="featured-charts-grid">
-                                                    <!-- Charts will be populated here -->
-                                                </div>
+                                            <div class="charts-loading-inline" id="featured-charts-loading-inline">
+                                                <div class="loading-spinner-small"></div>
+                                                <p>Loading featured chart collections...</p>
+                                            </div>
+                                            <div class="featured-charts-grid" id="featured-charts-grid">
+                                                <!-- Charts will be populated here -->
                                             </div>
                                         </div>
                                     </div>
diff --git a/webui/static/script.js b/webui/static/script.js
index c83e9ca9..d43df836 100644
--- a/webui/static/script.js
+++ b/webui/static/script.js
@@ -11616,7 +11616,7 @@ async function loadDJChartsInline() {
         }
 
         const data = await response.json();
-        if (!data.success || !data.tracks || data.tracks.length === 0) {
+        if (!data.success || !data.charts || data.charts.length === 0) {
             // Show empty state
             chartsGrid.innerHTML = `
                 <div class="new-charts-empty">
@@ -11630,7 +11630,7 @@ async function loadDJChartsInline() {
         }
 
         // Create chart items using New Charts structure
-        const chartsHTML = data.tracks.map(chart => {
+        const chartsHTML = data.charts.map(chart => {
             const chartName = chart.name || chart.title || 'Untitled Chart';
             const artistName = chart.artist || chart.curator || 'Various Artists';
             const chartUrl = chart.url || chart.chart_url || '';
@@ -11664,7 +11664,7 @@ async function loadDJChartsInline() {
         // Setup click handlers for chart items
         setupDJChartItemHandlers();
 
-        console.log(`✅ Loaded ${data.tracks.length} DJ charts`);
+        console.log(`✅ Loaded ${data.charts.length} DJ charts`);
 
     } catch (error) {
         console.error('❌ Error loading DJ charts:', error);
diff --git a/webui/static/style.css b/webui/static/style.css
index df8e4ab3..327fea31 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -4897,7 +4897,9 @@ body {
 .homepage-genre-section,
 .homepage-main-charts-section,
 .homepage-releases-section,
-.homepage-hype-section {
+.homepage-hype-section,
+.homepage-dj-charts-section,
+.homepage-featured-charts-section {
     margin-bottom: 40px;
     padding: 20px;
     background: linear-gradient(135deg,