diff --git a/webui/static/style.css b/webui/static/style.css
index 6e1076ef..72c9a90b 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -30,15 +30,31 @@ body {
 }
 
 /* ======================================
-   SIDEBAR STYLING - Matching ModernSidebar
+   SIDEBAR STYLING - Premium Glassmorphic Design
    ====================================== */
 
 .sidebar {
     width: 240px;
-    background: linear-gradient(135deg, #0d1117 0%, #121212 30%, #0a0a0a 100%);
-    border-right: 1px solid rgba(29, 185, 84, 0.1);
-    border-top-right-radius: 12px;
-    border-bottom-right-radius: 12px;
+    
+    /* Premium glassmorphic foundation */
+    background: linear-gradient(135deg, 
+        rgba(20, 20, 20, 0.95) 0%, 
+        rgba(12, 12, 12, 0.98) 100%);
+    backdrop-filter: blur(20px) saturate(1.2);
+    
+    /* Enhanced borders */
+    border-right: 1px solid rgba(255, 255, 255, 0.12);
+    border-top: 1px solid rgba(255, 255, 255, 0.18);
+    border-top-right-radius: 20px;
+    border-bottom-right-radius: 20px;
+    
+    /* Premium shadow effect */
+    box-shadow: 
+        0 20px 60px rgba(0, 0, 0, 0.6),
+        0 8px 32px rgba(0, 0, 0, 0.4),
+        0 0 40px rgba(29, 185, 84, 0.1),
+        inset 0 1px 0 rgba(255, 255, 255, 0.15);
+    
     display: flex;
     flex-direction: column;
     overflow: hidden;
@@ -47,14 +63,22 @@ body {
 /* Sidebar Header */
 .sidebar-header {
     height: 95px;
-    background: linear-gradient(180deg, rgba(29, 185, 84, 0.08) 0%, rgba(29, 185, 84, 0.03) 40%, transparent 100%);
-    border-bottom: 1px solid rgba(29, 185, 84, 0.15);
-    border-top-right-radius: 12px;
-    padding: 24px;
+    background: linear-gradient(180deg, 
+        rgba(29, 185, 84, 0.12) 0%, 
+        rgba(29, 185, 84, 0.08) 30%,
+        rgba(29, 185, 84, 0.03) 70%, 
+        transparent 100%);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+    border-top-right-radius: 20px;
+    padding: 28px 24px;
     display: flex;
     flex-direction: column;
     justify-content: center;
-    gap: 4px;
+    gap: 6px;
+    position: relative;
+    
+    /* Subtle inner glow */
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
 }
 
 .app-name {
@@ -91,34 +115,61 @@ body {
     height: 52px;
     width: 216px;
     background: transparent;
-    border: none;
+    border: 1px solid transparent;
     border-radius: 16px;
     cursor: pointer;
     display: flex;
     align-items: center;
     gap: 16px;
     padding: 0 18px;
-    transition: all 0.3s ease;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     font-family: 'SF Pro Text', -apple-system, sans-serif;
     font-size: 12px;
     font-weight: 500;
+    position: relative;
+    overflow: hidden;
 }
 
 .nav-button:hover {
-    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.03) 100%);
-    border-left: 2px solid rgba(255, 255, 255, 0.2);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    background: linear-gradient(135deg, 
+        rgba(255, 255, 255, 0.08) 0%, 
+        rgba(255, 255, 255, 0.04) 100%);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    transform: translateX(4px);
+    box-shadow: 
+        0 4px 16px rgba(0, 0, 0, 0.3),
+        0 2px 8px rgba(0, 0, 0, 0.2),
+        inset 0 1px 0 rgba(255, 255, 255, 0.1);
 }
 
 .nav-button.active {
-    background: linear-gradient(135deg, rgba(29, 185, 84, 0.18) 0%, rgba(29, 185, 84, 0.12) 50%, rgba(29, 185, 84, 0.08) 100%);
-    border-left: 3px solid #1ed760;
-    border: 1px solid rgba(29, 185, 84, 0.2);
+    background: linear-gradient(135deg, 
+        rgba(29, 185, 84, 0.20) 0%, 
+        rgba(29, 185, 84, 0.15) 50%, 
+        rgba(29, 185, 84, 0.10) 100%);
+    border: 1px solid rgba(29, 185, 84, 0.3);
+    transform: translateX(6px);
+    box-shadow: 
+        0 6px 20px rgba(29, 185, 84, 0.4),
+        0 4px 12px rgba(29, 185, 84, 0.3),
+        0 2px 6px rgba(0, 0, 0, 0.3),
+        inset 0 1px 0 rgba(255, 255, 255, 0.15),
+        inset -1px 0 0 rgba(29, 185, 84, 0.8);
 }
 
 .nav-button.active:hover {
-    background: linear-gradient(135deg, rgba(29, 185, 84, 0.25) 0%, rgba(29, 185, 84, 0.18) 50%, rgba(29, 185, 84, 0.12) 100%);
-    border: 1px solid rgba(29, 185, 84, 0.3);
+    background: linear-gradient(135deg, 
+        rgba(29, 185, 84, 0.28) 0%, 
+        rgba(29, 185, 84, 0.22) 50%, 
+        rgba(29, 185, 84, 0.15) 100%);
+    border: 1px solid rgba(29, 185, 84, 0.4);
+    transform: translateX(8px);
+    box-shadow: 
+        0 8px 24px rgba(29, 185, 84, 0.5),
+        0 6px 16px rgba(29, 185, 84, 0.4),
+        0 3px 8px rgba(0, 0, 0, 0.3),
+        inset 0 1px 0 rgba(255, 255, 255, 0.2),
+        inset -1px 0 0 rgba(29, 185, 84, 0.9);
 }
 
 .nav-icon {
@@ -130,16 +181,28 @@ body {
     font-size: 16px;
     font-weight: 600;
     border-radius: 14px;
-    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
-    border: 1px solid rgba(255, 255, 255, 0.05);
-    color: rgba(255, 255, 255, 0.7);
+    background: linear-gradient(135deg, 
+        rgba(255, 255, 255, 0.10) 0%, 
+        rgba(255, 255, 255, 0.06) 100%);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    color: rgba(255, 255, 255, 0.8);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 
+        0 2px 6px rgba(0, 0, 0, 0.2),
+        inset 0 1px 0 rgba(255, 255, 255, 0.1);
 }
 
 .nav-button.active .nav-icon {
     color: #1ed760;
-    background: linear-gradient(135deg, rgba(29, 185, 84, 0.25) 0%, rgba(30, 215, 96, 0.2) 100%);
-    border: 1px solid rgba(29, 185, 84, 0.3);
+    background: linear-gradient(135deg, 
+        rgba(29, 185, 84, 0.30) 0%, 
+        rgba(30, 215, 96, 0.25) 100%);
+    border: 1px solid rgba(29, 185, 84, 0.4);
     font-weight: 700;
+    box-shadow: 
+        0 4px 12px rgba(29, 185, 84, 0.4),
+        0 2px 6px rgba(29, 185, 84, 0.3),
+        inset 0 1px 0 rgba(255, 255, 255, 0.2);
 }
 
 .nav-text {
@@ -157,20 +220,39 @@ body {
     flex: 1;
 }
 
-/* Media Player Section - Matching MediaPlayer widget */
+/* Media Player Section - Premium Glassmorphic Design */
 .media-player {
-    background: linear-gradient(180deg, rgba(26, 26, 26, 0.95) 0%, rgba(18, 18, 18, 0.98) 50%, rgba(12, 12, 12, 1.0) 100%);
-    border: 1px solid rgba(255, 255, 255, 0.05);
-    border-radius: 12px;
-    margin: 8px 10px;
-    padding: 18px 18px 12px 18px;
+    background: linear-gradient(180deg, 
+        rgba(28, 28, 28, 0.95) 0%, 
+        rgba(20, 20, 20, 0.98) 50%, 
+        rgba(14, 14, 14, 1.0) 100%);
+    backdrop-filter: blur(12px) saturate(1.1);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-top: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 16px;
+    margin: 12px 14px;
+    padding: 20px;
     min-height: 150px;
-    transition: all 0.3s ease;
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 
+        0 8px 24px rgba(0, 0, 0, 0.4),
+        0 4px 12px rgba(0, 0, 0, 0.3),
+        inset 0 1px 0 rgba(255, 255, 255, 0.1);
 }
 
 .media-player:hover {
-    border: 1px solid rgba(29, 185, 84, 0.2);
-    background: linear-gradient(180deg, rgba(29, 185, 84, 0.08) 0%, rgba(26, 26, 26, 0.95) 50%, rgba(18, 18, 18, 1.0) 100%);
+    border: 1px solid rgba(29, 185, 84, 0.25);
+    border-top: 1px solid rgba(29, 185, 84, 0.3);
+    background: linear-gradient(180deg, 
+        rgba(29, 185, 84, 0.10) 0%, 
+        rgba(28, 28, 28, 0.95) 40%, 
+        rgba(20, 20, 20, 0.98) 70%,
+        rgba(14, 14, 14, 1.0) 100%);
+    box-shadow: 
+        0 12px 32px rgba(0, 0, 0, 0.5),
+        0 6px 16px rgba(29, 185, 84, 0.2),
+        0 4px 12px rgba(0, 0, 0, 0.3),
+        inset 0 1px 0 rgba(255, 255, 255, 0.15);
 }
 
 .loading-animation {
@@ -549,12 +631,21 @@ body {
     opacity: 0.85;
 }
 
-/* Crypto Donation Section - Matching CryptoDonationWidget */
+/* Crypto Donation Section - Premium Glassmorphic Design */
 .crypto-donation {
-    background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.02) 30%, rgba(255, 255, 255, 0.04) 100%);
-    border-top: 1px solid rgba(255, 255, 255, 0.08);
-   
-    padding: 15px 0;
+    background: linear-gradient(180deg, 
+        rgba(18, 18, 18, 0.95) 0%, 
+        rgba(22, 22, 22, 0.98) 50%, 
+        rgba(16, 16, 16, 1.0) 100%);
+    backdrop-filter: blur(8px) saturate(1.1);
+    border-top: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 12px;
+    margin: 8px 14px;
+    padding: 18px 20px;
+    box-shadow: 
+        0 4px 16px rgba(0, 0, 0, 0.3),
+        0 2px 8px rgba(0, 0, 0, 0.2),
+        inset 0 1px 0 rgba(255, 255, 255, 0.08);
 }
 
 .donation-header {
@@ -630,17 +721,24 @@ body {
     font-style: italic;
 }
 
-/* Version Section - Matching version widget */
+/* Version Section - Premium Glassmorphic Design */
 .version-section {
     height: 45px;
-    background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.02) 30%, rgba(255, 255, 255, 0.04) 100%);
+    background: linear-gradient(180deg, 
+        rgba(18, 18, 18, 0.95) 0%, 
+        rgba(14, 14, 14, 0.98) 100%);
+    backdrop-filter: blur(8px) saturate(1.1);
     border-top: 1px solid rgba(255, 255, 255, 0.08);
-    
-    margin: 0;
+    border-radius: 12px;
+    margin: 8px 14px;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 12px 20px;
+    box-shadow: 
+        0 3px 12px rgba(0, 0, 0, 0.25),
+        0 1px 6px rgba(0, 0, 0, 0.15),
+        inset 0 1px 0 rgba(255, 255, 255, 0.06);
 }
 
 .version-button {
@@ -668,13 +766,22 @@ body {
     background: rgba(29, 185, 84, 0.15);
 }
 
-/* Status Section - Matching status indicators */
+/* Status Section - Premium Glassmorphic Design */
 .status-section {
     height: fit-content;
-    background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.02) 30%, rgba(255, 255, 255, 0.04) 100%);
+    background: linear-gradient(180deg, 
+        rgba(18, 18, 18, 0.95) 0%, 
+        rgba(14, 14, 14, 0.98) 100%);
+    backdrop-filter: blur(8px) saturate(1.1);
     border-top: 1px solid rgba(255, 255, 255, 0.08);
-    border-bottom-right-radius: 12px;
-    padding: 20px 0;
+    border-bottom-right-radius: 20px;
+    border-radius: 12px;
+    margin: 8px 14px 0 14px;
+    padding: 24px 0;
+    box-shadow: 
+        0 4px 16px rgba(0, 0, 0, 0.3),
+        0 2px 8px rgba(0, 0, 0, 0.2),
+        inset 0 1px 0 rgba(255, 255, 255, 0.08);
 }
 
 .status-title {