diff --git a/src/App.css b/src/App.css
index 60fdab0..0982618 100644
--- a/src/App.css
+++ b/src/App.css
@@ -74,3 +74,113 @@ ion-accordion ion-item::part(native) {
   --border-width: 0 0 1px 0 !important;
   --border-color: var(--ion-item-border-color, rgba(0, 0, 0, 0.13)) !important;
 }
+
+/* Top 100 Highlighting */
+.highlighted-song {
+  border: 3px solid #ff6b35 !important;
+  background: linear-gradient(135deg, rgba(255, 107, 53, 0.1) 0%, rgba(255, 107, 53, 0.05) 100%) !important;
+  border-radius: 12px !important;
+  margin: 8px 0 !important;
+  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1) !important;
+  position: relative !important;
+  backdrop-filter: blur(4px);
+}
+
+.highlighted-song::before {
+  content: "★ MOST PLAYED";
+  position: absolute;
+  top: -10px;
+  right: 12px;
+  background: linear-gradient(135deg, #ff6b35 0%, #ff8c42 100%);
+  color: white;
+  padding: 4px 12px;
+  border-radius: 20px;
+  font-size: 0.75rem;
+  font-weight: bold;
+  z-index: 10;
+  box-shadow: 0 2px 8px rgba(255, 107, 53, 0.4);
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+/* Dark mode support for highlighted song */
+@media (prefers-color-scheme: dark) {
+  .highlighted-song {
+    background: linear-gradient(135deg, rgba(255, 107, 53, 0.15) 0%, rgba(255, 107, 53, 0.08) 100%) !important;
+    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3), 0 2px 4px rgba(0, 0, 0, 0.3) !important;
+  }
+  
+  .highlighted-song::before {
+    background: linear-gradient(135deg, #ff6b35 0%, #ff8c42 100%);
+    box-shadow: 0 2px 8px rgba(255, 107, 53, 0.5);
+  }
+}
+
+/* Section headers styling */
+.section-header {
+  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
+  border-left: 4px solid #ff6b35 !important;
+  border-radius: 0 8px 8px 0 !important;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
+  --padding-start: 16px !important;
+  --padding-end: 16px !important;
+  --min-height: 48px !important;
+}
+
+.section-header h3 {
+  margin: 0;
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: #495057;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.section-header.other-variations {
+  border-left-color: #6c757d !important;
+}
+
+.section-header.other-variations h3 {
+  color: #6c757d;
+}
+
+/* Dark mode section headers */
+@media (prefers-color-scheme: dark) {
+  .section-header {
+    background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  }
+  
+  .section-header h3 {
+    color: #e2e8f0;
+  }
+  
+  .section-header.other-variations h3 {
+    color: #a0aec0;
+  }
+}
+
+/* Enhanced pill styling */
+.pill {
+  display: inline-block;
+  padding: 6px 12px;
+  border-radius: 16px;
+  font-size: 0.8rem;
+  font-weight: 600;
+  text-align: center;
+  white-space: nowrap;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  transition: all 0.2s ease;
+}
+
+.pill--count {
+  background: linear-gradient(135deg, #ff6b35 0%, #ff8c42 100%);
+  color: white;
+  margin-left: 8px;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+.pill--count:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(255, 107, 53, 0.3);
+}