diff --git a/index.html b/index.html
index 7a5753b..72c09a7 100644
--- a/index.html
+++ b/index.html
@@ -401,7 +401,7 @@ <h3 class="text-3xl font-bold text-slate-900 mb-2">BI / Analytics Styles</h3>
             <p class="text-slate-600 mb-8">商業智慧與數據分析儀表板專用風格</p>
             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6">
                 <!-- 28. Data-Dense -->
-                <a href="styles/28-data-dense.html" class="card-hover bg-white rounded-2xl overflow-hidden border border-slate-200 cursor-pointer">
+                <a href="styles/28-data-dense-dashboard.html" class="card-hover bg-white rounded-2xl overflow-hidden border border-slate-200 cursor-pointer">
                     <div class="h-40 bg-slate-100 flex items-center justify-center p-3">
                         <div class="grid grid-cols-3 gap-1 w-full">
                             <div class="bg-white rounded p-1 text-center text-xs">KPI</div>
@@ -417,7 +417,7 @@ <h4 class="text-lg font-semibold text-slate-900">Data-Dense Dashboard</h4>
                     </div>
                 </a>
                 <!-- 29. Heatmap -->
-                <a href="styles/29-heatmap.html" class="card-hover bg-white rounded-2xl overflow-hidden border border-slate-200 cursor-pointer">
+                <a href="styles/29-heatmap-density.html" class="card-hover bg-white rounded-2xl overflow-hidden border border-slate-200 cursor-pointer">
                     <div class="h-40 flex items-center justify-center p-3">
                         <div class="grid grid-cols-5 gap-1">
                             <div class="w-6 h-6 bg-blue-200 rounded"></div>
@@ -438,7 +438,7 @@ <h4 class="text-lg font-semibold text-slate-900">Heat Map Style</h4>
                     </div>
                 </a>
                 <!-- 30. Executive -->
-                <a href="styles/30-executive.html" class="card-hover bg-white rounded-2xl overflow-hidden border border-slate-200 cursor-pointer">
+                <a href="styles/30-executive-summary.html" class="card-hover bg-white rounded-2xl overflow-hidden border border-slate-200 cursor-pointer">
                     <div class="h-40 bg-slate-800 flex items-center justify-center">
                         <div class="text-center text-white">
                             <div class="text-3xl font-bold">$2.4M</div>
@@ -451,7 +451,7 @@ <h4 class="text-lg font-semibold text-slate-900">Executive Dashboard</h4>
                     </div>
                 </a>
                 <!-- 31. Real-Time -->
-                <a href="styles/31-realtime.html" class="card-hover bg-white rounded-2xl overflow-hidden border border-slate-200 cursor-pointer">
+                <a href="styles/31-real-time-monitoring.html" class="card-hover bg-white rounded-2xl overflow-hidden border border-slate-200 cursor-pointer">
                     <div class="h-40 bg-slate-900 flex items-center justify-center">
                         <div class="flex items-center gap-2">
                             <div class="w-3 h-3 bg-green-500 rounded-full animate-pulse"></div>
@@ -464,7 +464,7 @@ <h4 class="text-lg font-semibold text-slate-900">Real-Time Monitoring</h4>
                     </div>
                 </a>
                 <!-- 32. Drill-Down -->
-                <a href="styles/32-drilldown.html" class="card-hover bg-white rounded-2xl overflow-hidden border border-slate-200 cursor-pointer">
+                <a href="styles/32-drill-down-analytics.html" class="card-hover bg-white rounded-2xl overflow-hidden border border-slate-200 cursor-pointer">
                     <div class="h-40 bg-slate-100 flex items-center justify-center">
                         <div class="text-center">
                             <div class="text-sm text-slate-500">Region → Country → City</div>
@@ -477,7 +477,7 @@ <h4 class="text-lg font-semibold text-slate-900">Drill-Down Analytics</h4>
                     </div>
                 </a>
                 <!-- 33. Comparative -->
-                <a href="styles/33-comparative.html" class="card-hover bg-white rounded-2xl overflow-hidden border border-slate-200 cursor-pointer">
+                <a href="styles/33-comparative-analytics.html" class="card-hover bg-white rounded-2xl overflow-hidden border border-slate-200 cursor-pointer">
                     <div class="h-40 bg-slate-100 flex items-center justify-center gap-4">
                         <div class="text-center">
                             <div class="text-blue-600 font-bold">A</div>
@@ -495,7 +495,7 @@ <h4 class="text-lg font-semibold text-slate-900">Comparative Analysis</h4>
                     </div>
                 </a>
                 <!-- 34. Predictive -->
-                <a href="styles/34-predictive.html" class="card-hover bg-white rounded-2xl overflow-hidden border border-slate-200 cursor-pointer">
+                <a href="styles/34-predictive-analytics.html" class="card-hover bg-white rounded-2xl overflow-hidden border border-slate-200 cursor-pointer">
                     <div class="h-40 bg-slate-900 flex items-center justify-center">
                         <div class="text-center">
                             <div class="text-purple-400 text-sm">Forecast</div>
@@ -509,7 +509,7 @@ <h4 class="text-lg font-semibold text-slate-900">Predictive Analytics</h4>
                     </div>
                 </a>
                 <!-- 35. User Behavior -->
-                <a href="styles/35-user-behavior.html" class="card-hover bg-white rounded-2xl overflow-hidden border border-slate-200 cursor-pointer">
+                <a href="styles/35-user-behavior-analytics.html" class="card-hover bg-white rounded-2xl overflow-hidden border border-slate-200 cursor-pointer">
                     <div class="h-40 bg-slate-100 flex items-center justify-center">
                         <div class="flex flex-col items-center gap-1">
                             <div class="w-20 h-4 bg-blue-500 rounded-full"></div>
@@ -524,7 +524,7 @@ <h4 class="text-lg font-semibold text-slate-900">User Behavior Analytics</h4>
                     </div>
                 </a>
                 <!-- 36. Financial -->
-                <a href="styles/36-financial.html" class="card-hover bg-white rounded-2xl overflow-hidden border border-slate-200 cursor-pointer">
+                <a href="styles/36-financial-analytics.html" class="card-hover bg-white rounded-2xl overflow-hidden border border-slate-200 cursor-pointer">
                     <div class="h-40 bg-slate-800 flex items-center justify-center">
                         <div class="font-mono text-green-400 text-lg">$$$</div>
                     </div>
@@ -582,7 +582,7 @@ <h4 class="text-lg font-semibold text-slate-900">Bento Box Grid</h4>
                     </div>
                 </a>
                 <!-- 40. Y2K -->
-                <a href="styles/40-y2k.html" class="card-hover bg-white rounded-2xl overflow-hidden border border-slate-200 cursor-pointer">
+                <a href="styles/40-y2k-revival.html" class="card-hover bg-white rounded-2xl overflow-hidden border border-slate-200 cursor-pointer">
                     <div class="h-40 bg-gradient-to-br from-pink-400 via-purple-400 to-cyan-400 flex items-center justify-center">
                         <div class="text-white font-bold text-2xl" style="text-shadow: 2px 2px 0 #ff00ff;">Y2K</div>
                     </div>
@@ -628,7 +628,7 @@ <h4 class="text-lg font-semibold text-slate-900">AI-Native UI</h4>
                     </div>
                 </a>
                 <!-- 44. Memphis -->
-                <a href="styles/44-memphis.html" class="card-hover bg-white rounded-2xl overflow-hidden border border-slate-200 cursor-pointer">
+                <a href="styles/44-memphis-revival.html" class="card-hover bg-white rounded-2xl overflow-hidden border border-slate-200 cursor-pointer">
                     <div class="h-40 bg-pink-300 flex items-center justify-center gap-3">
                         <div class="w-8 h-8 bg-yellow-400 rounded-full"></div>
                         <div class="w-8 h-8 bg-teal-400" style="transform: rotate(45deg);"></div>
@@ -779,7 +779,7 @@ <h4 class="text-lg font-semibold text-slate-900">Spatial UI (VisionOS)</h4>
                     </div>
                 </a>
                 <!-- 56. E-Ink Paper -->
-                <a href="styles/56-eink-paper.html" class="card-hover bg-white rounded-2xl overflow-hidden border border-slate-200 cursor-pointer">
+                <a href="styles/56-e-ink-paper.html" class="card-hover bg-white rounded-2xl overflow-hidden border border-slate-200 cursor-pointer">
                     <div class="h-40 bg-stone-100 flex items-center justify-center" style="background-image: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"4\" height=\"4\"><rect width=\"4\" height=\"4\" fill=\"%23f5f5f0\"/><rect width=\"1\" height=\"1\" fill=\"%23e8e8e3\"/></svg>'); background-size: 4px 4px;">
                         <div class="text-slate-800 font-serif text-lg">E-Ink</div>
                     </div>
@@ -789,7 +789,7 @@ <h4 class="text-lg font-semibold text-slate-900">E-Ink / Paper</h4>
                     </div>
                 </a>
                 <!-- 57. Gen Z Chaos -->
-                <a href="styles/57-genz-chaos.html" class="card-hover bg-white rounded-2xl overflow-hidden border border-slate-200 cursor-pointer">
+                <a href="styles/57-gen-z-chaos.html" class="card-hover bg-white rounded-2xl overflow-hidden border border-slate-200 cursor-pointer">
                     <div class="h-40 bg-gradient-to-br from-pink-500 via-yellow-400 to-green-400 flex items-center justify-center overflow-hidden">
                         <div class="text-white font-bold text-xl transform rotate-12">CHAOS!!!</div>
                     </div>