diff --git a/webui/index.html b/webui/index.html
index b879fe67..a817d2cf 100644
--- a/webui/index.html
+++ b/webui/index.html
@@ -3060,10 +3060,64 @@
                             <button class="discover-hero-view-all" id="discover-hero-view-all" onclick="openRecommendedArtistsModal()">
                                 View Recommended
                             </button>
-                            <button class="discover-hero-artist-map-btn" onclick="openArtistMap()">
-                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><circle cx="4" cy="6" r="2"/><circle cx="20" cy="6" r="2"/><circle cx="4" cy="18" r="2"/><circle cx="20" cy="18" r="2"/><line x1="6" y1="7" x2="10" y2="10"/><line x1="14" y1="10" x2="18" y2="7"/><line x1="6" y1="17" x2="10" y2="14"/><line x1="14" y1="14" x2="18" y2="17"/></svg>
-                                Artist Map
-                            </button>
+                        </div>
+                    </div>
+
+                    <!-- Artist Map Hub -->
+                    <div class="artmap-hub">
+                        <div class="artmap-hub-bg"></div>
+                        <div class="artmap-hub-content">
+                            <div class="artmap-hub-header">
+                                <svg class="artmap-hub-icon" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                                    <circle cx="12" cy="12" r="3"/><circle cx="4" cy="6" r="2"/><circle cx="20" cy="6" r="2"/>
+                                    <circle cx="4" cy="18" r="2"/><circle cx="20" cy="18" r="2"/>
+                                    <line x1="6" y1="7" x2="10" y2="10"/><line x1="14" y1="10" x2="18" y2="7"/>
+                                    <line x1="6" y1="17" x2="10" y2="14"/><line x1="14" y1="14" x2="18" y2="17"/>
+                                </svg>
+                                <div>
+                                    <h2 class="artmap-hub-title">Artist Map</h2>
+                                    <p class="artmap-hub-subtitle">Explore the connections between your artists</p>
+                                </div>
+                            </div>
+                            <div class="artmap-hub-cards">
+                                <div class="artmap-hub-card" onclick="openArtistMap()">
+                                    <div class="artmap-hub-card-icon">
+                                        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                                            <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
+                                        </svg>
+                                    </div>
+                                    <div class="artmap-hub-card-text">
+                                        <h3>Watchlist</h3>
+                                        <p>Your watched artists and their similar connections</p>
+                                    </div>
+                                    <svg class="artmap-hub-card-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg>
+                                </div>
+                                <div class="artmap-hub-card" onclick="openArtistMapGenre()">
+                                    <div class="artmap-hub-card-icon">
+                                        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                                            <circle cx="12" cy="12" r="10"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/><line x1="2" y1="12" x2="22" y2="12"/>
+                                        </svg>
+                                    </div>
+                                    <div class="artmap-hub-card-text">
+                                        <h3>Genres</h3>
+                                        <p>Artists clustered by genre across your library and cache</p>
+                                    </div>
+                                    <svg class="artmap-hub-card-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg>
+                                </div>
+                                <div class="artmap-hub-card" onclick="openArtistMapExplorer()">
+                                    <div class="artmap-hub-card-icon">
+                                        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                                            <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
+                                            <line x1="11" y1="8" x2="11" y2="14"/><line x1="8" y1="11" x2="14" y2="11"/>
+                                        </svg>
+                                    </div>
+                                    <div class="artmap-hub-card-text">
+                                        <h3>Explorer</h3>
+                                        <p>Pick any artist and explore outward through their connections</p>
+                                    </div>
+                                    <svg class="artmap-hub-card-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg>
+                                </div>
+                            </div>
                         </div>
                     </div>
 
diff --git a/webui/static/script.js b/webui/static/script.js
index df76930c..c7119dbd 100644
--- a/webui/static/script.js
+++ b/webui/static/script.js
@@ -56200,6 +56200,14 @@ function artMapShowShortcuts() {
     document.body.appendChild(overlay);
 }
 
+function openArtistMapGenre() {
+    showToast('Genre Map coming soon', 'info');
+}
+
+function openArtistMapExplorer() {
+    showToast('Artist Explorer coming soon', 'info');
+}
+
 function artMapToggleSimilar() {
     _artMap._hideSimilar = !_artMap._hideSimilar;
     _artMap.dirty = true;
diff --git a/webui/static/style.css b/webui/static/style.css
index 81c10bb1..d854fc6a 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -29680,16 +29680,97 @@ body.helper-mode-active #dashboard-activity-feed:hover {
 }
 .ya-info-footer { padding: 16px 24px; border-top: 1px solid rgba(255,255,255,0.05); display: flex; justify-content: center; gap: 10px; }
 
-/* ── Artist Map ── */
-.discover-hero-artist-map-btn {
-    display: flex; align-items: center; gap: 6px;
-    padding: 8px 16px; border-radius: 10px; font-size: 12px; font-weight: 600;
-    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
-    color: rgba(255,255,255,0.6); cursor: pointer; transition: all 0.2s;
+/* ── Artist Map Hub ── */
+.artmap-hub {
+    position: relative; border-radius: 16px; overflow: hidden;
+    margin-bottom: 24px;
+    border: 1px solid rgba(255,255,255,0.06);
 }
-.discover-hero-artist-map-btn:hover {
-    background: rgba(138,43,226,0.15); border-color: rgba(138,43,226,0.3);
-    color: #fff; transform: translateY(-1px);
+.artmap-hub-bg {
+    position: absolute; inset: 0; z-index: 0;
+    background: linear-gradient(135deg, #0d0d1a 0%, #1a0a2e 30%, #0a1628 60%, #0d0d1a 100%);
+}
+.artmap-hub-bg::after {
+    content: ''; position: absolute; inset: 0;
+    background: radial-gradient(ellipse at 30% 50%, rgba(138,43,226,0.08) 0%, transparent 60%),
+                radial-gradient(ellipse at 70% 50%, rgba(59,130,246,0.06) 0%, transparent 60%);
+}
+/* Animated dot grid overlay */
+.artmap-hub-bg::before {
+    content: ''; position: absolute; inset: 0; z-index: 1;
+    background-image: radial-gradient(rgba(138,43,226,0.15) 1px, transparent 1px);
+    background-size: 24px 24px;
+    opacity: 0.3;
+    animation: artmap-dots-drift 20s linear infinite;
+}
+@keyframes artmap-dots-drift {
+    0% { background-position: 0 0; }
+    100% { background-position: 24px 48px; }
+}
+.artmap-hub-content {
+    position: relative; z-index: 1; padding: 28px 32px;
+}
+.artmap-hub-header {
+    display: flex; align-items: center; gap: 14px; margin-bottom: 20px;
+}
+.artmap-hub-icon { color: rgba(138,43,226,0.7); }
+.artmap-hub-title {
+    font-size: 20px; font-weight: 800; color: #fff; margin: 0;
+    letter-spacing: -0.3px;
+}
+.artmap-hub-subtitle {
+    font-size: 13px; color: rgba(255,255,255,0.35); margin: 2px 0 0;
+}
+.artmap-hub-cards {
+    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
+}
+@media (max-width: 768px) {
+    .artmap-hub-cards { grid-template-columns: 1fr; }
+}
+.artmap-hub-card {
+    display: flex; align-items: center; gap: 14px;
+    padding: 18px 20px; border-radius: 14px;
+    background: rgba(255,255,255,0.03);
+    border: 1px solid rgba(255,255,255,0.06);
+    cursor: pointer; transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
+    position: relative; overflow: hidden;
+}
+.artmap-hub-card::before {
+    content: ''; position: absolute; inset: 0;
+    background: linear-gradient(135deg, rgba(138,43,226,0.06) 0%, transparent 50%);
+    opacity: 0; transition: opacity 0.25s;
+}
+.artmap-hub-card:hover {
+    border-color: rgba(138,43,226,0.25);
+    transform: translateY(-2px);
+    box-shadow: 0 8px 24px rgba(0,0,0,0.3), 0 0 20px rgba(138,43,226,0.08);
+}
+.artmap-hub-card:hover::before { opacity: 1; }
+.artmap-hub-card-icon {
+    width: 52px; height: 52px; border-radius: 12px;
+    background: rgba(138,43,226,0.1); border: 1px solid rgba(138,43,226,0.15);
+    display: flex; align-items: center; justify-content: center;
+    flex-shrink: 0; color: rgba(138,43,226,0.7);
+    transition: all 0.25s;
+}
+.artmap-hub-card:hover .artmap-hub-card-icon {
+    background: rgba(138,43,226,0.15); color: rgba(138,43,226,0.9);
+    transform: scale(1.05);
+}
+.artmap-hub-card-text { flex: 1; min-width: 0; position: relative; z-index: 1; }
+.artmap-hub-card-text h3 {
+    font-size: 15px; font-weight: 700; color: #fff; margin: 0;
+}
+.artmap-hub-card-text p {
+    font-size: 11px; color: rgba(255,255,255,0.3); margin: 4px 0 0;
+    line-height: 1.4;
+}
+.artmap-hub-card-arrow {
+    color: rgba(255,255,255,0.15); flex-shrink: 0;
+    transition: all 0.2s; position: relative; z-index: 1;
+}
+.artmap-hub-card:hover .artmap-hub-card-arrow {
+    color: rgba(138,43,226,0.6); transform: translateX(4px);
 }
 .artist-map-container {
     position: fixed; inset: 0; z-index: 100;