diff --git a/ui/app.js b/ui/app.js
index 4dc4c24..e24a7dc 100644
--- a/ui/app.js
+++ b/ui/app.js
@@ -1,3 +1,7 @@
+/* ============================================================
+   Driver Booster Pro - Application Logic
+   ============================================================ */
+
 const App = {
     state: {
         sysInfo: null,
@@ -9,33 +13,45 @@ const App = {
         this.setupNavigation();
         this.setupFilters();
         this.refreshSysInfo();
+        // Re-render Lucide icons after DOM mutations
+        this.refreshIcons();
     },
 
+    refreshIcons() {
+        if (window.lucide) {
+            lucide.createIcons();
+        }
+    },
+
+    // ---- Navigation ----
     setupNavigation() {
-        document.querySelectorAll('.nav-item').forEach(item => {
-            item.addEventListener('click', () => {
-                const page = item.dataset.page;
-                document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
+        document.querySelectorAll('.nav-item[data-page]').forEach(function(item) {
+            item.addEventListener('click', function() {
+                var page = item.dataset.page;
+                document.querySelectorAll('.nav-item').forEach(function(n) { n.classList.remove('active'); });
                 item.classList.add('active');
-                document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
-                document.getElementById('page-' + page).classList.add('active');
+                document.querySelectorAll('.page').forEach(function(p) { p.classList.remove('active'); });
+                var target = document.getElementById('page-' + page);
+                if (target) target.classList.add('active');
             });
         });
     },
 
+    // ---- Filters ----
     setupFilters() {
-        document.querySelectorAll('.filter-btn').forEach(btn => {
-            btn.addEventListener('click', () => {
-                document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
+        var self = this;
+        document.querySelectorAll('.filter-btn').forEach(function(btn) {
+            btn.addEventListener('click', function() {
+                document.querySelectorAll('.filter-btn').forEach(function(b) { b.classList.remove('active'); });
                 btn.classList.add('active');
-                this.filterDrivers(btn.dataset.filter);
+                self.filterDrivers(btn.dataset.filter);
             });
         });
     },
 
     filterDrivers(filter) {
-        document.querySelectorAll('.driver-card').forEach(card => {
-            const show = filter === 'all' ||
+        document.querySelectorAll('.driver-card').forEach(function(card) {
+            var show = filter === 'all' ||
                 (filter === 'outdated' && card.classList.contains('outdated')) ||
                 (filter === 'error' && card.classList.contains('error')) ||
                 (filter === 'signed' && card.dataset.signed === 'true');
@@ -43,21 +59,23 @@ const App = {
         });
     },
 
+    // ---- Loading ----
     showLoading(text) {
         document.getElementById('loading-text').textContent = text;
         document.getElementById('loading-overlay').style.display = 'flex';
+        this.refreshIcons();
     },
 
     hideLoading() {
         document.getElementById('loading-overlay').style.display = 'none';
     },
 
-    // System Info
+    // ---- System Info ----
     async refreshSysInfo() {
         this.showLoading('Collecting system information...');
         try {
-            const res = await fetch('/api/sysinfo');
-            const info = await res.json();
+            var res = await fetch('/api/sysinfo');
+            var info = await res.json();
             this.state.sysInfo = info;
             this.renderSysInfo(info);
             this.updateDashboardResources(info);
@@ -68,44 +86,51 @@ const App = {
     },
 
     renderSysInfo(info) {
-        document.getElementById('sys-name').textContent = info.computerName || '--';
-        document.getElementById('sys-os').textContent = info.osName || '--';
-        document.getElementById('sys-version').textContent = info.osVersion || '--';
-        document.getElementById('sys-build').textContent = info.osBuild || '--';
-        document.getElementById('sys-arch').textContent = info.architecture || '--';
-        document.getElementById('sys-cpu').textContent = info.cpuName || '--';
-        document.getElementById('sys-cores').textContent = info.cpuCores || '--';
-        document.getElementById('sys-ram-total').textContent = info.totalRam || '--';
-        document.getElementById('sys-ram-used').textContent = info.usedRam || '--';
-        document.getElementById('sys-ram-free').textContent = info.freeRam || '--';
-        document.getElementById('sys-ram-pct').textContent = (info.ramPercent || 0) + '%';
-        document.getElementById('sys-disk-total').textContent = info.diskTotal || '--';
-        document.getElementById('sys-disk-used').textContent = info.diskUsed || '--';
-        document.getElementById('sys-disk-free').textContent = info.diskFree || '--';
-        document.getElementById('sys-disk-pct').textContent = (info.diskPercent || 0) + '%';
+        this.setText('sys-name', info.computerName);
+        this.setText('sys-os', info.osName);
+        this.setText('sys-version', info.osVersion);
+        this.setText('sys-build', info.osBuild);
+        this.setText('sys-arch', info.architecture);
+        this.setText('sys-cpu', info.cpuName);
+        this.setText('sys-cores', info.cpuCores);
+        this.setText('sys-ram-total', info.totalRam);
+        this.setText('sys-ram-used', info.usedRam);
+        this.setText('sys-ram-free', info.freeRam);
+        this.setText('sys-ram-pct', (info.ramPercent || 0) + '%');
+        this.setText('sys-disk-total', info.diskTotal);
+        this.setText('sys-disk-used', info.diskUsed);
+        this.setText('sys-disk-free', info.diskFree);
+        this.setText('sys-disk-pct', (info.diskPercent || 0) + '%');
     },
 
     updateDashboardResources(info) {
-        document.getElementById('dash-ram-percent').textContent = (info.ramPercent || 0) + '%';
-        document.getElementById('dash-ram-detail').textContent = (info.usedRam || '--') + ' / ' + (info.totalRam || '--');
+        this.setText('dash-ram-percent', (info.ramPercent || 0) + '%');
+        this.setText('dash-ram-detail', (info.usedRam || '--') + ' / ' + (info.totalRam || '--'));
         document.getElementById('dash-ram-bar').style.width = (info.ramPercent || 0) + '%';
-        document.getElementById('dash-disk-detail').textContent = (info.diskUsed || '--') + ' / ' + (info.diskTotal || '--');
+        this.setText('dash-disk-detail', (info.diskUsed || '--') + ' / ' + (info.diskTotal || '--'));
         document.getElementById('dash-disk-bar').style.width = (info.diskPercent || 0) + '%';
 
+        // Warn color for high usage
+        var ramBar = document.getElementById('dash-ram-bar');
+        var diskBar = document.getElementById('dash-disk-bar');
         if (info.ramPercent > 80) {
-            document.getElementById('dash-ram-bar').style.background = 'linear-gradient(90deg, #f59e0b, #ef4444)';
+            ramBar.style.background = 'linear-gradient(90deg, #f59e0b, #ef4444)';
+        } else {
+            ramBar.style.background = '';
         }
         if (info.diskPercent > 85) {
-            document.getElementById('dash-disk-bar').style.background = 'linear-gradient(90deg, #f59e0b, #ef4444)';
+            diskBar.style.background = 'linear-gradient(90deg, #f59e0b, #ef4444)';
+        } else {
+            diskBar.style.background = '';
         }
     },
 
-    // Drivers
+    // ---- Drivers ----
     async scanDrivers() {
         this.showLoading('Scanning drivers... This may take a moment.');
         try {
-            const res = await fetch('/api/drivers/scan');
-            const result = await res.json();
+            var res = await fetch('/api/drivers/scan');
+            var result = await res.json();
             this.state.drivers = result;
             this.renderDrivers(result);
             this.updateDashboardDrivers(result);
@@ -118,77 +143,107 @@ const App = {
     renderDrivers(result) {
         document.getElementById('driver-summary').style.display = 'flex';
         document.getElementById('driver-filters').style.display = 'flex';
-        document.getElementById('drv-total').textContent = result.totalCount;
-        document.getElementById('drv-outdated').textContent = result.outdatedCount;
-        document.getElementById('drv-errors').textContent = result.errorCount;
-        document.getElementById('drv-time').textContent = result.scanTime;
+        this.setText('drv-total', result.totalCount);
+        this.setText('drv-outdated', result.outdatedCount);
+        this.setText('drv-errors', result.errorCount);
+        this.setText('drv-time', result.scanTime);
 
-        const list = document.getElementById('driver-list');
+        var list = document.getElementById('driver-list');
         if (!result.drivers || result.drivers.length === 0) {
-            list.innerHTML = '<div class="empty-state"><p>No drivers found.</p></div>';
+            list.innerHTML =
+                '<div class="empty-state">' +
+                    '<div class="empty-icon"><i data-lucide="search-x"></i></div>' +
+                    '<h3>No Drivers Found</h3>' +
+                    '<p>No driver information was returned.</p>' +
+                '</div>';
+            this.refreshIcons();
             return;
         }
 
-        list.innerHTML = result.drivers.map(d => {
-            const classes = ['driver-card'];
+        var self = this;
+        list.innerHTML = result.drivers.map(function(d) {
+            var classes = ['driver-card'];
             if (d.needsUpdate) classes.push('outdated');
             if (d.status === 'Error' || d.status === 'Degraded') classes.push('error');
 
-            const icon = this.getClassIcon(d.deviceClass);
-            const badges = [];
-            if (d.isSigned) badges.push('<span class="badge badge-signed">Signed</span>');
-            else badges.push('<span class="badge badge-unsigned">Unsigned</span>');
-            if (d.needsUpdate) badges.push('<span class="badge badge-outdated">Outdated</span>');
-            else badges.push('<span class="badge badge-ok">OK</span>');
+            var iconName = self.getClassIconName(d.deviceClass);
+
+            var badges = '';
+            if (d.isSigned) {
+                badges += '<span class="badge badge-signed"><i data-lucide="shield-check"></i> Signed</span>';
+            } else {
+                badges += '<span class="badge badge-unsigned"><i data-lucide="shield-x"></i> Unsigned</span>';
+            }
+            if (d.needsUpdate) {
+                badges += '<span class="badge badge-outdated"><i data-lucide="clock"></i> Outdated</span>';
+            } else {
+                badges += '<span class="badge badge-ok"><i data-lucide="circle-check"></i> OK</span>';
+            }
 
             return '<div class="' + classes.join(' ') + '" data-signed="' + d.isSigned + '">' +
-                '<div class="driver-class-icon">' + icon + '</div>' +
+                '<div class="driver-class-icon"><i data-lucide="' + iconName + '"></i></div>' +
                 '<div class="driver-info">' +
-                    '<div class="driver-name">' + this.esc(d.deviceName) + '</div>' +
-                    '<div class="driver-meta">' + this.esc(d.manufacturer || 'Unknown') + ' &bull; v' + this.esc(d.driverVersion || '?') + ' &bull; ' + this.esc(d.driverDate) + '</div>' +
+                    '<div class="driver-name">' + self.esc(d.deviceName) + '</div>' +
+                    '<div class="driver-meta">' +
+                        self.esc(d.manufacturer || 'Unknown') +
+                        ' <span class="driver-meta-sep">&middot;</span> v' + self.esc(d.driverVersion || '?') +
+                        ' <span class="driver-meta-sep">&middot;</span> ' + self.esc(d.driverDate) +
+                    '</div>' +
                 '</div>' +
-                '<div class="driver-badges">' + badges.join('') + '</div>' +
+                '<div class="driver-badges">' + badges + '</div>' +
             '</div>';
         }).join('');
+
+        this.refreshIcons();
     },
 
     updateDashboardDrivers(result) {
-        document.getElementById('dash-driver-count').textContent = result.totalCount;
-        document.getElementById('dash-outdated-count').textContent = result.outdatedCount;
+        this.setText('dash-driver-count', result.totalCount);
+        this.setText('dash-outdated-count', result.outdatedCount);
     },
 
-    getClassIcon(cls) {
-        const icons = {
-            'DISPLAY': '\uD83D\uDDA5',
-            'MEDIA': '\uD83D\uDD0A',
-            'NET': '\uD83C\uDF10',
-            'USB': '\uD83D\uDD0C',
-            'HIDCLASS': '\uD83D\uDDB1',
-            'KEYBOARD': '\u2328',
-            'DISKDRIVE': '\uD83D\uDCBE',
-            'PROCESSOR': '\u26A1',
-            'SYSTEM': '\u2699',
-            'BLUETOOTH': '\uD83D\uDCE1',
-            'CAMERA': '\uD83D\uDCF7',
-            'PRINTER': '\uD83D\uDDA8',
-        };
-        if (!cls) return '\uD83D\uDCE6';
+    getClassIconName(cls) {
+        if (!cls) return 'package';
         var upper = cls.toUpperCase();
-        for (var key in icons) {
-            if (upper.indexOf(key) !== -1) return icons[key];
+        var map = {
+            'DISPLAY': 'monitor',
+            'MEDIA': 'volume-2',
+            'AUDIO': 'volume-2',
+            'SOUND': 'volume-2',
+            'NET': 'wifi',
+            'NETWORK': 'wifi',
+            'USB': 'usb',
+            'HID': 'mouse',
+            'KEYBOARD': 'keyboard',
+            'DISK': 'hard-drive',
+            'STORAGE': 'hard-drive',
+            'PROCESSOR': 'cpu',
+            'SYSTEM': 'settings',
+            'BLUETOOTH': 'bluetooth',
+            'CAMERA': 'camera',
+            'IMAGE': 'camera',
+            'PRINT': 'printer',
+            'BATTERY': 'battery-charging',
+            'BIOMETRIC': 'fingerprint',
+            'FIRMWARE': 'circuit-board',
+            'SECURITY': 'shield',
+            'SENSOR': 'thermometer',
+        };
+        for (var key in map) {
+            if (upper.indexOf(key) !== -1) return map[key];
         }
-        return '\uD83D\uDCE6';
+        return 'package';
     },
 
-    // Updates
+    // ---- Updates ----
     async checkUpdates() {
         this.showLoading('Checking for Windows updates...');
         try {
-            const res = await fetch('/api/updates/check');
-            const result = await res.json();
+            var res = await fetch('/api/updates/check');
+            var result = await res.json();
             this.state.updates = result;
             this.renderUpdates(result);
-            document.getElementById('dash-update-count').textContent = result.pendingCount;
+            this.setText('dash-update-count', result.pendingCount);
         } catch (e) {
             console.error('Failed to check updates:', e);
         }
@@ -196,57 +251,79 @@ const App = {
     },
 
     renderUpdates(result) {
-        const list = document.getElementById('update-list');
+        var list = document.getElementById('update-list');
 
         if (result.error) {
-            list.innerHTML = '<div class="empty-state"><p style="color:var(--danger)">' + this.esc(result.error) + '</p></div>';
+            list.innerHTML =
+                '<div class="empty-state">' +
+                    '<div class="empty-icon"><i data-lucide="alert-circle"></i></div>' +
+                    '<h3>Error</h3>' +
+                    '<p style="color:var(--danger)">' + this.esc(result.error) + '</p>' +
+                '</div>';
+            this.refreshIcons();
             return;
         }
 
         if (!result.updates || result.updates.length === 0) {
-            list.innerHTML = '<div class="empty-state"><p>Your system is up to date!</p></div>';
+            list.innerHTML =
+                '<div class="empty-state">' +
+                    '<div class="empty-icon"><i data-lucide="circle-check"></i></div>' +
+                    '<h3>All Up to Date</h3>' +
+                    '<p>Your system is fully updated.</p>' +
+                '</div>';
+            this.refreshIcons();
             return;
         }
 
-        const pending = result.updates.filter(u => !u.isInstalled);
-        const installed = result.updates.filter(u => u.isInstalled);
-
-        let html = '';
+        var pending = result.updates.filter(function(u) { return !u.isInstalled; });
+        var installed = result.updates.filter(function(u) { return u.isInstalled; });
+        var self = this;
+        var html = '';
 
         if (pending.length > 0) {
-            html += '<h3 style="margin:8px 0;font-size:14px;color:var(--info)">Pending Updates (' + pending.length + ')</h3>';
-            html += pending.map(u =>
-                '<div class="update-card pending">' +
-                    '<div class="update-title">' + this.esc(u.title) + '</div>' +
+            html += '<div class="update-section-title pending"><i data-lucide="download"></i> Pending Updates (' + pending.length + ')</div>';
+            html += pending.map(function(u) {
+                return '<div class="update-card pending">' +
+                    '<div class="update-title">' + self.esc(u.title) + '</div>' +
                     '<div class="update-meta">' +
-                        (u.kbArticle ? '<span>' + this.esc(u.kbArticle) + '</span>' : '') +
-                        (u.category ? '<span>' + this.esc(u.category) + '</span>' : '') +
-                        (u.size ? '<span>' + this.esc(u.size) + '</span>' : '') +
-                        (u.severity && u.severity !== 'Unspecified' ? '<span>' + this.esc(u.severity) + '</span>' : '') +
-                        (u.isMandatory ? '<span style="color:var(--danger)">Mandatory</span>' : '') +
+                        (u.kbArticle ? '<span class="update-tag"><i data-lucide="file-text"></i> ' + self.esc(u.kbArticle) + '</span>' : '') +
+                        (u.category ? '<span class="update-tag"><i data-lucide="folder"></i> ' + self.esc(u.category) + '</span>' : '') +
+                        (u.size ? '<span class="update-tag"><i data-lucide="hard-drive"></i> ' + self.esc(u.size) + '</span>' : '') +
+                        (u.severity && u.severity !== 'Unspecified' ? '<span class="update-tag"><i data-lucide="alert-triangle"></i> ' + self.esc(u.severity) + '</span>' : '') +
+                        (u.isMandatory ? '<span class="update-tag" style="color:var(--danger)"><i data-lucide="alert-circle"></i> Mandatory</span>' : '') +
                     '</div>' +
-                '</div>'
-            ).join('');
+                '</div>';
+            }).join('');
         }
 
         if (installed.length > 0) {
-            html += '<h3 style="margin:16px 0 8px;font-size:14px;color:var(--success)">Recently Installed (' + installed.length + ')</h3>';
-            html += installed.map(u =>
-                '<div class="update-card installed">' +
-                    '<div class="update-title">' + this.esc(u.title) + '</div>' +
-                '</div>'
-            ).join('');
+            html += '<div class="update-section-title installed"><i data-lucide="check-circle"></i> Recently Installed (' + installed.length + ')</div>';
+            html += installed.map(function(u) {
+                return '<div class="update-card installed">' +
+                    '<div class="update-title">' + self.esc(u.title) + '</div>' +
+                '</div>';
+            }).join('');
         }
 
         list.innerHTML = html;
+        this.refreshIcons();
+    },
+
+    // ---- Utility ----
+    setText(id, value) {
+        var el = document.getElementById(id);
+        if (el) el.textContent = (value != null && value !== '') ? value : '--';
     },
 
     esc(str) {
         if (!str) return '';
-        const div = document.createElement('div');
+        var div = document.createElement('div');
         div.textContent = str;
         return div.innerHTML;
     },
 };
 
-document.addEventListener('DOMContentLoaded', function() { App.init(); });
+// Boot
+document.addEventListener('DOMContentLoaded', function() {
+    App.init();
+});
diff --git a/ui/index.html b/ui/index.html
index b952866..43dade2 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -5,40 +5,66 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Driver Booster Pro</title>
     <link rel="stylesheet" href="style.css">
+    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
 </head>
 <body>
+    <!-- Animated background -->
+    <div class="bg-grid"></div>
+    <div class="bg-glow bg-glow-1"></div>
+    <div class="bg-glow bg-glow-2"></div>
+
     <div class="app">
         <!-- Sidebar -->
         <nav class="sidebar">
             <div class="sidebar-header">
                 <div class="logo">
-                    <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
-                        <rect width="32" height="32" rx="8" fill="url(#logo-grad)"/>
-                        <path d="M8 16L14 22L24 10" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
-                        <defs><linearGradient id="logo-grad" x1="0" y1="0" x2="32" y2="32"><stop stop-color="#6366f1"/><stop offset="1" stop-color="#8b5cf6"/></linearGradient></defs>
-                    </svg>
-                    <span class="logo-text">Driver Booster</span>
+                    <div class="logo-icon">
+                        <i data-lucide="shield-check"></i>
+                    </div>
+                    <div class="logo-text-wrap">
+                        <span class="logo-text">Driver Booster</span>
+                        <span class="logo-sub">System Toolkit</span>
+                    </div>
                 </div>
             </div>
+
+            <div class="nav-section-label">Main</div>
             <ul class="nav-items">
                 <li class="nav-item active" data-page="dashboard">
-                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
+                    <i data-lucide="layout-dashboard"></i>
                     <span>Dashboard</span>
+                    <div class="nav-indicator"></div>
                 </li>
                 <li class="nav-item" data-page="drivers">
-                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
+                    <i data-lucide="cpu"></i>
                     <span>Drivers</span>
+                    <div class="nav-indicator"></div>
                 </li>
                 <li class="nav-item" data-page="updates">
-                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12a9 9 0 11-6.219-8.56"/><polyline points="21 3 21 9 15 9"/></svg>
+                    <i data-lucide="download-cloud"></i>
                     <span>Windows Update</span>
+                    <div class="nav-indicator"></div>
                 </li>
                 <li class="nav-item" data-page="system">
-                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
+                    <i data-lucide="monitor"></i>
                     <span>System Info</span>
+                    <div class="nav-indicator"></div>
                 </li>
             </ul>
+
+            <div class="nav-section-label">Tools</div>
+            <ul class="nav-items">
+                <li class="nav-item" data-page="dashboard" onclick="App.scanDrivers()">
+                    <i data-lucide="scan-search"></i>
+                    <span>Quick Scan</span>
+                </li>
+            </ul>
+
             <div class="sidebar-footer">
+                <div class="app-status" id="app-status">
+                    <div class="status-dot online"></div>
+                    <span>System Online</span>
+                </div>
                 <div class="version-badge">v1.0.0</div>
             </div>
         </nav>
@@ -48,89 +74,142 @@
             <!-- Dashboard Page -->
             <div class="page active" id="page-dashboard">
                 <div class="page-header">
-                    <h1>Dashboard</h1>
-                    <p class="subtitle">System health overview</p>
+                    <div>
+                        <h1><i data-lucide="layout-dashboard" class="page-icon"></i> Dashboard</h1>
+                        <p class="subtitle">Monitor your system health at a glance</p>
+                    </div>
+                    <div class="header-actions">
+                        <button class="icon-btn" onclick="App.refreshSysInfo()" title="Refresh">
+                            <i data-lucide="refresh-cw"></i>
+                        </button>
+                    </div>
                 </div>
+
                 <div class="stats-grid">
-                    <div class="stat-card">
-                        <div class="stat-icon drivers-icon">
-                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
+                    <div class="stat-card stat-drivers">
+                        <div class="stat-card-bg"></div>
+                        <div class="stat-icon">
+                            <i data-lucide="cpu"></i>
                         </div>
                         <div class="stat-info">
                             <span class="stat-value" id="dash-driver-count">--</span>
                             <span class="stat-label">Total Drivers</span>
                         </div>
+                        <div class="stat-trend">
+                            <i data-lucide="layers"></i>
+                        </div>
                     </div>
-                    <div class="stat-card">
-                        <div class="stat-icon outdated-icon">
-                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
+                    <div class="stat-card stat-outdated">
+                        <div class="stat-card-bg"></div>
+                        <div class="stat-icon">
+                            <i data-lucide="alert-triangle"></i>
                         </div>
                         <div class="stat-info">
                             <span class="stat-value" id="dash-outdated-count">--</span>
-                            <span class="stat-label">Outdated Drivers</span>
+                            <span class="stat-label">Outdated</span>
+                        </div>
+                        <div class="stat-trend">
+                            <i data-lucide="triangle-alert"></i>
                         </div>
                     </div>
-                    <div class="stat-card">
-                        <div class="stat-icon updates-icon">
-                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12a9 9 0 11-6.219-8.56"/><polyline points="21 3 21 9 15 9"/></svg>
+                    <div class="stat-card stat-updates">
+                        <div class="stat-card-bg"></div>
+                        <div class="stat-icon">
+                            <i data-lucide="download-cloud"></i>
                         </div>
                         <div class="stat-info">
                             <span class="stat-value" id="dash-update-count">--</span>
                             <span class="stat-label">Pending Updates</span>
                         </div>
+                        <div class="stat-trend">
+                            <i data-lucide="cloud-download"></i>
+                        </div>
                     </div>
-                    <div class="stat-card">
-                        <div class="stat-icon ram-icon">
-                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><line x1="9" y1="1" x2="9" y2="4"/><line x1="15" y1="1" x2="15" y2="4"/><line x1="9" y1="20" x2="9" y2="23"/><line x1="15" y1="20" x2="15" y2="23"/></svg>
+                    <div class="stat-card stat-ram">
+                        <div class="stat-card-bg"></div>
+                        <div class="stat-icon">
+                            <i data-lucide="memory-stick"></i>
                         </div>
                         <div class="stat-info">
                             <span class="stat-value" id="dash-ram-percent">--</span>
                             <span class="stat-label">RAM Usage</span>
                         </div>
+                        <div class="stat-trend">
+                            <i data-lucide="activity"></i>
+                        </div>
                     </div>
                 </div>
 
                 <div class="dashboard-panels">
-                    <div class="panel">
+                    <div class="panel glass-panel">
                         <div class="panel-header">
-                            <h3>Quick Actions</h3>
+                            <div class="panel-title">
+                                <i data-lucide="zap"></i>
+                                <h3>Quick Actions</h3>
+                            </div>
                         </div>
                         <div class="quick-actions">
                             <button class="action-btn primary" onclick="App.scanDrivers()">
-                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
-                                Scan Drivers
+                                <div class="action-btn-icon"><i data-lucide="scan-search"></i></div>
+                                <div class="action-btn-text">
+                                    <span class="action-btn-title">Scan Drivers</span>
+                                    <span class="action-btn-desc">Detect outdated & missing drivers</span>
+                                </div>
+                                <i data-lucide="chevron-right" class="action-arrow"></i>
                             </button>
-                            <button class="action-btn secondary" onclick="App.checkUpdates()">
-                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12a9 9 0 11-6.219-8.56"/><polyline points="21 3 21 9 15 9"/></svg>
-                                Check Updates
+                            <button class="action-btn blue" onclick="App.checkUpdates()">
+                                <div class="action-btn-icon"><i data-lucide="cloud-download"></i></div>
+                                <div class="action-btn-text">
+                                    <span class="action-btn-title">Check Updates</span>
+                                    <span class="action-btn-desc">Search for Windows updates</span>
+                                </div>
+                                <i data-lucide="chevron-right" class="action-arrow"></i>
                             </button>
-                            <button class="action-btn accent" onclick="App.refreshSysInfo()">
-                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 11-2.12-9.36L23 10"/></svg>
-                                Refresh System
+                            <button class="action-btn green" onclick="App.refreshSysInfo()">
+                                <div class="action-btn-icon"><i data-lucide="monitor-check"></i></div>
+                                <div class="action-btn-text">
+                                    <span class="action-btn-title">System Health</span>
+                                    <span class="action-btn-desc">Refresh system information</span>
+                                </div>
+                                <i data-lucide="chevron-right" class="action-arrow"></i>
                             </button>
                         </div>
                     </div>
-                    <div class="panel">
+
+                    <div class="panel glass-panel">
                         <div class="panel-header">
-                            <h3>System Resources</h3>
+                            <div class="panel-title">
+                                <i data-lucide="gauge"></i>
+                                <h3>System Resources</h3>
+                            </div>
                         </div>
                         <div class="resource-bars">
                             <div class="resource-item">
-                                <div class="resource-label">
-                                    <span>RAM</span>
-                                    <span id="dash-ram-detail">-- / --</span>
+                                <div class="resource-header">
+                                    <div class="resource-label-group">
+                                        <i data-lucide="memory-stick" class="resource-icon"></i>
+                                        <span class="resource-name">Memory (RAM)</span>
+                                    </div>
+                                    <span class="resource-value" id="dash-ram-detail">-- / --</span>
                                 </div>
                                 <div class="progress-bar">
-                                    <div class="progress-fill ram-fill" id="dash-ram-bar" style="width: 0%"></div>
+                                    <div class="progress-fill ram-fill" id="dash-ram-bar" style="width: 0%">
+                                        <div class="progress-shine"></div>
+                                    </div>
                                 </div>
                             </div>
                             <div class="resource-item">
-                                <div class="resource-label">
-                                    <span>Disk (C:)</span>
-                                    <span id="dash-disk-detail">-- / --</span>
+                                <div class="resource-header">
+                                    <div class="resource-label-group">
+                                        <i data-lucide="hard-drive" class="resource-icon"></i>
+                                        <span class="resource-name">Storage (C:)</span>
+                                    </div>
+                                    <span class="resource-value" id="dash-disk-detail">-- / --</span>
                                 </div>
                                 <div class="progress-bar">
-                                    <div class="progress-fill disk-fill" id="dash-disk-bar" style="width: 0%"></div>
+                                    <div class="progress-fill disk-fill" id="dash-disk-bar" style="width: 0%">
+                                        <div class="progress-shine"></div>
+                                    </div>
                                 </div>
                             </div>
                         </div>
@@ -141,29 +220,45 @@
             <!-- Drivers Page -->
             <div class="page" id="page-drivers">
                 <div class="page-header">
-                    <h1>Driver Manager</h1>
-                    <div class="page-actions">
-                        <button class="action-btn primary" onclick="App.scanDrivers()">
-                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
-                            Scan Now
+                    <div>
+                        <h1><i data-lucide="cpu" class="page-icon"></i> Driver Manager</h1>
+                        <p class="subtitle">Scan and manage your system drivers</p>
+                    </div>
+                    <div class="header-actions">
+                        <button class="action-btn primary compact" onclick="App.scanDrivers()">
+                            <i data-lucide="scan-search"></i>
+                            <span>Scan Now</span>
                         </button>
                     </div>
                 </div>
-                <div class="driver-summary" id="driver-summary" style="display:none">
-                    <div class="summary-item"><strong id="drv-total">0</strong> Total</div>
-                    <div class="summary-item warning"><strong id="drv-outdated">0</strong> Outdated</div>
-                    <div class="summary-item error"><strong id="drv-errors">0</strong> Errors</div>
-                    <div class="summary-item muted">Scanned in <span id="drv-time">--</span></div>
+                <div class="driver-summary glass-panel" id="driver-summary" style="display:none">
+                    <div class="summary-item">
+                        <i data-lucide="layers" class="sum-icon"></i>
+                        <strong id="drv-total">0</strong> <span>Total</span>
+                    </div>
+                    <div class="summary-item warning">
+                        <i data-lucide="alert-triangle" class="sum-icon"></i>
+                        <strong id="drv-outdated">0</strong> <span>Outdated</span>
+                    </div>
+                    <div class="summary-item error">
+                        <i data-lucide="alert-circle" class="sum-icon"></i>
+                        <strong id="drv-errors">0</strong> <span>Errors</span>
+                    </div>
+                    <div class="summary-item muted">
+                        <i data-lucide="timer" class="sum-icon"></i>
+                        <span id="drv-time">--</span>
+                    </div>
                 </div>
                 <div class="filter-bar" id="driver-filters" style="display:none">
-                    <button class="filter-btn active" data-filter="all">All</button>
-                    <button class="filter-btn" data-filter="outdated">Outdated</button>
-                    <button class="filter-btn" data-filter="error">Errors</button>
-                    <button class="filter-btn" data-filter="signed">Signed</button>
+                    <button class="filter-btn active" data-filter="all"><i data-lucide="list"></i> All</button>
+                    <button class="filter-btn" data-filter="outdated"><i data-lucide="alert-triangle"></i> Outdated</button>
+                    <button class="filter-btn" data-filter="error"><i data-lucide="x-circle"></i> Errors</button>
+                    <button class="filter-btn" data-filter="signed"><i data-lucide="shield-check"></i> Signed</button>
                 </div>
                 <div id="driver-list" class="driver-list">
                     <div class="empty-state">
-                        <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" opacity="0.3"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
+                        <div class="empty-icon"><i data-lucide="cpu"></i></div>
+                        <h3>No Scan Results</h3>
                         <p>Click <strong>Scan Now</strong> to detect installed drivers</p>
                     </div>
                 </div>
@@ -172,17 +267,21 @@
             <!-- Updates Page -->
             <div class="page" id="page-updates">
                 <div class="page-header">
-                    <h1>Windows Update</h1>
-                    <div class="page-actions">
-                        <button class="action-btn primary" onclick="App.checkUpdates()">
-                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12a9 9 0 11-6.219-8.56"/><polyline points="21 3 21 9 15 9"/></svg>
-                            Check Now
+                    <div>
+                        <h1><i data-lucide="download-cloud" class="page-icon"></i> Windows Update</h1>
+                        <p class="subtitle">Keep your system up to date</p>
+                    </div>
+                    <div class="header-actions">
+                        <button class="action-btn primary compact" onclick="App.checkUpdates()">
+                            <i data-lucide="refresh-cw"></i>
+                            <span>Check Now</span>
                         </button>
                     </div>
                 </div>
                 <div id="update-list" class="update-list">
                     <div class="empty-state">
-                        <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" opacity="0.3"><path d="M21 12a9 9 0 11-6.219-8.56"/><polyline points="21 3 21 9 15 9"/></svg>
+                        <div class="empty-icon"><i data-lucide="cloud-download"></i></div>
+                        <h3>No Updates Checked</h3>
                         <p>Click <strong>Check Now</strong> to search for Windows updates</p>
                     </div>
                 </div>
@@ -191,41 +290,56 @@
             <!-- System Info Page -->
             <div class="page" id="page-system">
                 <div class="page-header">
-                    <h1>System Information</h1>
-                    <div class="page-actions">
-                        <button class="action-btn primary" onclick="App.refreshSysInfo()">
-                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 11-2.12-9.36L23 10"/></svg>
-                            Refresh
+                    <div>
+                        <h1><i data-lucide="monitor" class="page-icon"></i> System Information</h1>
+                        <p class="subtitle">Detailed hardware and software overview</p>
+                    </div>
+                    <div class="header-actions">
+                        <button class="action-btn primary compact" onclick="App.refreshSysInfo()">
+                            <i data-lucide="refresh-cw"></i>
+                            <span>Refresh</span>
                         </button>
                     </div>
                 </div>
                 <div class="sysinfo-grid" id="sysinfo-grid">
-                    <div class="info-card">
-                        <h4>Computer</h4>
-                        <div class="info-row"><span class="info-key">Name</span><span class="info-val" id="sys-name">--</span></div>
-                        <div class="info-row"><span class="info-key">OS</span><span class="info-val" id="sys-os">--</span></div>
-                        <div class="info-row"><span class="info-key">Version</span><span class="info-val" id="sys-version">--</span></div>
-                        <div class="info-row"><span class="info-key">Build</span><span class="info-val" id="sys-build">--</span></div>
-                        <div class="info-row"><span class="info-key">Architecture</span><span class="info-val" id="sys-arch">--</span></div>
+                    <div class="info-card glass-panel">
+                        <div class="info-card-header">
+                            <i data-lucide="laptop"></i>
+                            <h4>Computer</h4>
+                        </div>
+                        <div class="info-row"><span class="info-key"><i data-lucide="tag"></i> Name</span><span class="info-val" id="sys-name">--</span></div>
+                        <div class="info-row"><span class="info-key"><i data-lucide="app-window"></i> OS</span><span class="info-val" id="sys-os">--</span></div>
+                        <div class="info-row"><span class="info-key"><i data-lucide="hash"></i> Version</span><span class="info-val" id="sys-version">--</span></div>
+                        <div class="info-row"><span class="info-key"><i data-lucide="wrench"></i> Build</span><span class="info-val" id="sys-build">--</span></div>
+                        <div class="info-row"><span class="info-key"><i data-lucide="boxes"></i> Architecture</span><span class="info-val" id="sys-arch">--</span></div>
                     </div>
-                    <div class="info-card">
-                        <h4>Processor</h4>
-                        <div class="info-row"><span class="info-key">CPU</span><span class="info-val" id="sys-cpu">--</span></div>
-                        <div class="info-row"><span class="info-key">Cores</span><span class="info-val" id="sys-cores">--</span></div>
+                    <div class="info-card glass-panel">
+                        <div class="info-card-header">
+                            <i data-lucide="cpu"></i>
+                            <h4>Processor</h4>
+                        </div>
+                        <div class="info-row"><span class="info-key"><i data-lucide="microchip"></i> CPU</span><span class="info-val" id="sys-cpu">--</span></div>
+                        <div class="info-row"><span class="info-key"><i data-lucide="layers"></i> Cores</span><span class="info-val" id="sys-cores">--</span></div>
                     </div>
-                    <div class="info-card">
-                        <h4>Memory</h4>
-                        <div class="info-row"><span class="info-key">Total</span><span class="info-val" id="sys-ram-total">--</span></div>
-                        <div class="info-row"><span class="info-key">Used</span><span class="info-val" id="sys-ram-used">--</span></div>
-                        <div class="info-row"><span class="info-key">Free</span><span class="info-val" id="sys-ram-free">--</span></div>
-                        <div class="info-row"><span class="info-key">Usage</span><span class="info-val" id="sys-ram-pct">--</span></div>
+                    <div class="info-card glass-panel">
+                        <div class="info-card-header">
+                            <i data-lucide="memory-stick"></i>
+                            <h4>Memory</h4>
+                        </div>
+                        <div class="info-row"><span class="info-key"><i data-lucide="database"></i> Total</span><span class="info-val" id="sys-ram-total">--</span></div>
+                        <div class="info-row"><span class="info-key"><i data-lucide="flame"></i> Used</span><span class="info-val" id="sys-ram-used">--</span></div>
+                        <div class="info-row"><span class="info-key"><i data-lucide="leaf"></i> Free</span><span class="info-val" id="sys-ram-free">--</span></div>
+                        <div class="info-row"><span class="info-key"><i data-lucide="percent"></i> Usage</span><span class="info-val" id="sys-ram-pct">--</span></div>
                     </div>
-                    <div class="info-card">
-                        <h4>Storage (C:)</h4>
-                        <div class="info-row"><span class="info-key">Total</span><span class="info-val" id="sys-disk-total">--</span></div>
-                        <div class="info-row"><span class="info-key">Used</span><span class="info-val" id="sys-disk-used">--</span></div>
-                        <div class="info-row"><span class="info-key">Free</span><span class="info-val" id="sys-disk-free">--</span></div>
-                        <div class="info-row"><span class="info-key">Usage</span><span class="info-val" id="sys-disk-pct">--</span></div>
+                    <div class="info-card glass-panel">
+                        <div class="info-card-header">
+                            <i data-lucide="hard-drive"></i>
+                            <h4>Storage (C:)</h4>
+                        </div>
+                        <div class="info-row"><span class="info-key"><i data-lucide="database"></i> Total</span><span class="info-val" id="sys-disk-total">--</span></div>
+                        <div class="info-row"><span class="info-key"><i data-lucide="flame"></i> Used</span><span class="info-val" id="sys-disk-used">--</span></div>
+                        <div class="info-row"><span class="info-key"><i data-lucide="leaf"></i> Free</span><span class="info-val" id="sys-disk-free">--</span></div>
+                        <div class="info-row"><span class="info-key"><i data-lucide="percent"></i> Usage</span><span class="info-val" id="sys-disk-pct">--</span></div>
                     </div>
                 </div>
             </div>
@@ -234,8 +348,15 @@
 
     <!-- Loading Overlay -->
     <div class="loading-overlay" id="loading-overlay" style="display:none">
-        <div class="spinner"></div>
-        <p id="loading-text">Scanning...</p>
+        <div class="loading-card">
+            <div class="loading-spinner">
+                <div class="spinner-ring"></div>
+                <i data-lucide="shield-check" class="spinner-icon"></i>
+            </div>
+            <p class="loading-title" id="loading-text">Scanning...</p>
+            <p class="loading-sub">Please wait while we analyze your system</p>
+            <div class="loading-dots"><span></span><span></span><span></span></div>
+        </div>
     </div>
 
     <script src="app.js"></script>
diff --git a/ui/style.css b/ui/style.css
index 2256af9..484e932 100644
--- a/ui/style.css
+++ b/ui/style.css
@@ -1,129 +1,354 @@
+/* ============================================================
+   Driver Booster Pro - Professional Dark Theme
+   ============================================================ */
+
 :root {
-    --bg-primary: #0f0f1a;
-    --bg-secondary: #1a1a2e;
-    --bg-card: #16213e;
-    --bg-hover: #1f2b4d;
-    --border: #2a2a4a;
-    --text-primary: #e8e8f0;
-    --text-secondary: #9ca3af;
-    --text-muted: #6b7280;
-    --accent-primary: #6366f1;
-    --accent-secondary: #8b5cf6;
-    --accent-glow: rgba(99, 102, 241, 0.15);
+    /* Core palette */
+    --bg-base: #080b14;
+    --bg-primary: #0c1021;
+    --bg-secondary: #111827;
+    --bg-card: rgba(17, 24, 39, 0.7);
+    --bg-card-solid: #111827;
+    --bg-elevated: rgba(30, 41, 59, 0.5);
+    --bg-hover: rgba(55, 65, 81, 0.3);
+    --bg-active: rgba(99, 102, 241, 0.08);
+
+    /* Borders */
+    --border: rgba(255, 255, 255, 0.06);
+    --border-light: rgba(255, 255, 255, 0.1);
+    --border-accent: rgba(99, 102, 241, 0.3);
+
+    /* Text */
+    --text-primary: #f1f5f9;
+    --text-secondary: #94a3b8;
+    --text-muted: #64748b;
+    --text-dim: #475569;
+
+    /* Brand */
+    --accent: #6366f1;
+    --accent-light: #818cf8;
+    --accent-dark: #4f46e5;
+    --accent-glow: rgba(99, 102, 241, 0.2);
+    --accent-glow-strong: rgba(99, 102, 241, 0.4);
+
+    /* Semantic */
     --success: #10b981;
+    --success-bg: rgba(16, 185, 129, 0.12);
     --warning: #f59e0b;
+    --warning-bg: rgba(245, 158, 11, 0.12);
     --danger: #ef4444;
+    --danger-bg: rgba(239, 68, 68, 0.12);
     --info: #3b82f6;
-    --radius: 12px;
-    --radius-sm: 8px;
-    --sidebar-width: 240px;
-    --transition: 0.2s ease;
+    --info-bg: rgba(59, 130, 246, 0.12);
+
+    /* Layout */
+    --radius: 14px;
+    --radius-sm: 10px;
+    --radius-xs: 6px;
+    --sidebar-width: 260px;
+
+    /* Motion */
+    --ease: cubic-bezier(0.4, 0, 0.2, 1);
+    --duration: 0.2s;
 }
 
-* { margin: 0; padding: 0; box-sizing: border-box; }
+/* ---- Reset ---- */
+*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
 
 body {
-    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
-    background: var(--bg-primary);
+    font-family: 'Segoe UI Variable', 'Segoe UI', -apple-system, BlinkMacSystemFont, Inter, sans-serif;
+    background: var(--bg-base);
     color: var(--text-primary);
     overflow: hidden;
     height: 100vh;
     -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
-.app { display: flex; height: 100vh; }
+/* ---- Animated Background ---- */
+.bg-grid {
+    position: fixed;
+    inset: 0;
+    background-image:
+        linear-gradient(rgba(99, 102, 241, 0.03) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(99, 102, 241, 0.03) 1px, transparent 1px);
+    background-size: 60px 60px;
+    z-index: 0;
+    pointer-events: none;
+}
 
-/* Sidebar */
+.bg-glow {
+    position: fixed;
+    border-radius: 50%;
+    filter: blur(120px);
+    opacity: 0.4;
+    z-index: 0;
+    pointer-events: none;
+    animation: glowFloat 20s ease-in-out infinite;
+}
+
+.bg-glow-1 {
+    width: 500px;
+    height: 500px;
+    background: radial-gradient(circle, rgba(99, 102, 241, 0.15), transparent 70%);
+    top: -100px;
+    right: -100px;
+}
+
+.bg-glow-2 {
+    width: 400px;
+    height: 400px;
+    background: radial-gradient(circle, rgba(139, 92, 246, 0.1), transparent 70%);
+    bottom: -100px;
+    left: 20%;
+    animation-delay: -10s;
+}
+
+@keyframes glowFloat {
+    0%, 100% { transform: translate(0, 0) scale(1); }
+    33% { transform: translate(30px, -20px) scale(1.05); }
+    66% { transform: translate(-20px, 15px) scale(0.95); }
+}
+
+/* ---- App Layout ---- */
+.app {
+    display: flex;
+    height: 100vh;
+    position: relative;
+    z-index: 1;
+}
+
+/* ---- Sidebar ---- */
 .sidebar {
     width: var(--sidebar-width);
-    background: var(--bg-secondary);
+    background: rgba(8, 11, 20, 0.85);
+    backdrop-filter: blur(20px) saturate(180%);
     border-right: 1px solid var(--border);
     display: flex;
     flex-direction: column;
     flex-shrink: 0;
+    z-index: 10;
 }
 
-.sidebar-header { padding: 20px; border-bottom: 1px solid var(--border); }
+.sidebar-header {
+    padding: 24px 20px 20px;
+    border-bottom: 1px solid var(--border);
+}
 
-.logo { display: flex; align-items: center; gap: 10px; }
+.logo {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.logo-icon {
+    width: 40px;
+    height: 40px;
+    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    box-shadow: 0 4px 12px var(--accent-glow-strong);
+}
+
+.logo-icon svg { width: 22px; height: 22px; }
+
+.logo-text-wrap { display: flex; flex-direction: column; }
 
 .logo-text {
-    font-size: 16px;
+    font-size: 15px;
     font-weight: 700;
-    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
+    color: var(--text-primary);
+    letter-spacing: -0.3px;
 }
 
-.nav-items { list-style: none; padding: 12px; flex: 1; }
+.logo-sub {
+    font-size: 11px;
+    color: var(--text-muted);
+    letter-spacing: 0.5px;
+    text-transform: uppercase;
+}
+
+.nav-section-label {
+    font-size: 10px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 1.2px;
+    color: var(--text-dim);
+    padding: 20px 24px 8px;
+}
+
+.nav-items { list-style: none; padding: 0 12px; }
 
 .nav-item {
     display: flex;
     align-items: center;
     gap: 12px;
-    padding: 12px 16px;
+    padding: 10px 14px;
     border-radius: var(--radius-sm);
     cursor: pointer;
     color: var(--text-secondary);
-    transition: all var(--transition);
-    margin-bottom: 4px;
-    font-size: 14px;
+    transition: all var(--duration) var(--ease);
+    margin-bottom: 2px;
+    font-size: 13.5px;
+    font-weight: 500;
     user-select: none;
+    position: relative;
+    overflow: hidden;
 }
 
-.nav-item:hover { background: var(--bg-hover); color: var(--text-primary); }
+.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.7; }
+
+.nav-item:hover {
+    background: var(--bg-hover);
+    color: var(--text-primary);
+}
+
+.nav-item:hover svg { opacity: 1; }
 
 .nav-item.active {
-    background: var(--accent-glow);
-    color: var(--accent-primary);
+    background: var(--bg-active);
+    color: var(--accent-light);
     font-weight: 600;
 }
 
-.nav-item.active svg { stroke: var(--accent-primary); }
+.nav-item.active svg { opacity: 1; color: var(--accent-light); }
 
-.sidebar-footer { padding: 16px 20px; border-top: 1px solid var(--border); }
+.nav-indicator {
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%) scaleY(0);
+    width: 3px;
+    height: 20px;
+    border-radius: 0 3px 3px 0;
+    background: var(--accent);
+    transition: transform var(--duration) var(--ease);
+}
+
+.nav-item.active .nav-indicator { transform: translateY(-50%) scaleY(1); }
+
+.sidebar-footer {
+    padding: 16px 20px;
+    border-top: 1px solid var(--border);
+    margin-top: auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.app-status {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 12px;
+    color: var(--text-muted);
+}
+
+.status-dot {
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: var(--success);
+    box-shadow: 0 0 8px var(--success);
+    animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+}
 
 .version-badge {
     font-size: 11px;
-    color: var(--text-muted);
-    background: var(--bg-primary);
-    padding: 4px 10px;
+    color: var(--text-dim);
+    background: var(--bg-elevated);
+    padding: 3px 10px;
     border-radius: 20px;
-    display: inline-block;
+    border: 1px solid var(--border);
 }
 
-/* Content */
+/* ---- Content Area ---- */
 .content {
     flex: 1;
     overflow-y: auto;
-    padding: 32px;
-    background: var(--bg-primary);
+    padding: 32px 36px;
+    position: relative;
 }
 
-.content::-webkit-scrollbar { width: 6px; }
+.content::-webkit-scrollbar { width: 5px; }
 .content::-webkit-scrollbar-track { background: transparent; }
-.content::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+.content::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 3px; }
+.content::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }
 
-.page { display: none; animation: fadeIn 0.3s ease; }
+/* ---- Pages ---- */
+.page { display: none; animation: pageIn 0.4s var(--ease); }
 .page.active { display: block; }
 
-@keyframes fadeIn {
-    from { opacity: 0; transform: translateY(8px); }
+@keyframes pageIn {
+    from { opacity: 0; transform: translateY(12px); }
     to { opacity: 1; transform: translateY(0); }
 }
 
 .page-header {
     display: flex;
     justify-content: space-between;
-    align-items: center;
+    align-items: flex-start;
     margin-bottom: 28px;
 }
 
-.page-header h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.5px; }
+.page-header h1 {
+    font-size: 22px;
+    font-weight: 700;
+    letter-spacing: -0.5px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
 
-.subtitle { color: var(--text-secondary); font-size: 14px; margin-top: 4px; }
+.page-icon { width: 24px; height: 24px; color: var(--accent-light); }
 
-/* Stats Grid */
+.subtitle {
+    color: var(--text-muted);
+    font-size: 13px;
+    margin-top: 4px;
+}
+
+.header-actions { display: flex; gap: 8px; }
+
+.icon-btn {
+    width: 38px;
+    height: 38px;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    background: var(--bg-card);
+    color: var(--text-secondary);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all var(--duration) var(--ease);
+}
+
+.icon-btn:hover {
+    border-color: var(--accent);
+    color: var(--accent-light);
+    background: var(--bg-active);
+}
+
+.icon-btn svg { width: 16px; height: 16px; }
+
+/* ---- Glass Panel ---- */
+.glass-panel {
+    background: var(--bg-card);
+    backdrop-filter: blur(12px);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+}
+
+/* ---- Stats Grid ---- */
 .stats-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
@@ -135,154 +360,316 @@ body {
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: var(--radius);
-    padding: 20px;
+    padding: 22px 20px;
     display: flex;
     align-items: center;
     gap: 16px;
-    transition: all var(--transition);
+    transition: all 0.3s var(--ease);
+    position: relative;
+    overflow: hidden;
 }
 
+.stat-card-bg {
+    position: absolute;
+    top: -30px;
+    right: -30px;
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    opacity: 0;
+    transition: opacity 0.3s var(--ease);
+}
+
+.stat-card:hover .stat-card-bg { opacity: 1; }
+
+.stat-drivers .stat-card-bg { background: radial-gradient(circle, var(--accent-glow), transparent 70%); }
+.stat-outdated .stat-card-bg { background: radial-gradient(circle, var(--warning-bg), transparent 70%); }
+.stat-updates .stat-card-bg { background: radial-gradient(circle, var(--info-bg), transparent 70%); }
+.stat-ram .stat-card-bg { background: radial-gradient(circle, var(--success-bg), transparent 70%); }
+
 .stat-card:hover {
-    border-color: var(--accent-primary);
-    box-shadow: 0 0 20px var(--accent-glow);
+    border-color: var(--border-light);
     transform: translateY(-2px);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
 }
 
 .stat-icon {
     width: 48px;
     height: 48px;
-    border-radius: var(--radius-sm);
+    border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
 }
 
-.drivers-icon { background: rgba(99, 102, 241, 0.15); color: var(--accent-primary); }
-.outdated-icon { background: rgba(245, 158, 11, 0.15); color: var(--warning); }
-.updates-icon { background: rgba(59, 130, 246, 0.15); color: var(--info); }
-.ram-icon { background: rgba(16, 185, 129, 0.15); color: var(--success); }
+.stat-icon svg { width: 22px; height: 22px; }
 
-.stat-value { font-size: 28px; font-weight: 700; display: block; line-height: 1.1; }
-.stat-label { font-size: 12px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
+.stat-drivers .stat-icon { background: var(--accent-glow); color: var(--accent-light); }
+.stat-outdated .stat-icon { background: var(--warning-bg); color: var(--warning); }
+.stat-updates .stat-icon { background: var(--info-bg); color: var(--info); }
+.stat-ram .stat-icon { background: var(--success-bg); color: var(--success); }
 
-/* Panels */
-.dashboard-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
+.stat-info { flex: 1; }
 
-.panel {
-    background: var(--bg-card);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    overflow: hidden;
+.stat-value {
+    font-size: 26px;
+    font-weight: 800;
+    display: block;
+    line-height: 1.1;
+    letter-spacing: -0.5px;
 }
 
-.panel-header { padding: 16px 20px; border-bottom: 1px solid var(--border); }
+.stat-label {
+    font-size: 11.5px;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-top: 2px;
+}
 
-.panel-header h3 {
-    font-size: 14px;
+.stat-trend {
+    color: var(--text-dim);
+    opacity: 0.3;
+}
+
+.stat-trend svg { width: 32px; height: 32px; }
+
+/* ---- Dashboard Panels ---- */
+.dashboard-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
+
+.panel { overflow: hidden; }
+
+.panel-header {
+    padding: 18px 22px;
+    border-bottom: 1px solid var(--border);
+}
+
+.panel-title {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.panel-title svg { width: 16px; height: 16px; color: var(--accent-light); }
+
+.panel-title h3 {
+    font-size: 13px;
     font-weight: 600;
     color: var(--text-secondary);
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }
 
-/* Quick Actions */
-.quick-actions { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
+/* ---- Action Buttons ---- */
+.quick-actions { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
 
 .action-btn {
     display: flex;
     align-items: center;
-    gap: 10px;
-    padding: 12px 20px;
-    border: none;
+    gap: 14px;
+    padding: 14px 18px;
+    border: 1px solid transparent;
     border-radius: var(--radius-sm);
     font-size: 14px;
     font-weight: 600;
     cursor: pointer;
-    transition: all var(--transition);
+    transition: all var(--duration) var(--ease);
     font-family: inherit;
+    text-align: left;
+    position: relative;
+    overflow: hidden;
+    color: white;
+    background: none;
 }
 
+.action-btn.compact {
+    padding: 10px 18px;
+    gap: 8px;
+    border-radius: var(--radius-sm);
+    font-size: 13px;
+}
+
+.action-btn.compact svg { width: 16px; height: 16px; }
+
+.action-btn-icon {
+    width: 40px;
+    height: 40px;
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+.action-btn-icon svg { width: 20px; height: 20px; }
+
+.action-btn-text { flex: 1; display: flex; flex-direction: column; }
+
+.action-btn-title { font-size: 13.5px; font-weight: 600; }
+
+.action-btn-desc { font-size: 11.5px; opacity: 0.6; font-weight: 400; margin-top: 1px; }
+
+.action-arrow { width: 16px; height: 16px; opacity: 0.4; transition: all var(--duration) var(--ease); }
+
+.action-btn:hover .action-arrow { opacity: 1; transform: translateX(3px); }
+
 .action-btn.primary {
-    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
-    color: white;
+    background: linear-gradient(135deg, var(--accent-dark), var(--accent));
+    border-color: var(--accent);
+    box-shadow: 0 2px 8px var(--accent-glow);
 }
 
 .action-btn.primary:hover {
-    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4);
+    box-shadow: 0 4px 20px var(--accent-glow-strong);
     transform: translateY(-1px);
 }
 
-.action-btn.secondary {
+.action-btn.primary .action-btn-icon { background: rgba(255,255,255,0.15); }
+
+.action-btn.blue {
+    background: rgba(59, 130, 246, 0.08);
+    border-color: rgba(59, 130, 246, 0.2);
+    color: var(--text-primary);
+}
+
+.action-btn.blue .action-btn-icon { background: var(--info-bg); color: var(--info); }
+
+.action-btn.blue:hover {
     background: rgba(59, 130, 246, 0.15);
-    color: var(--info);
-    border: 1px solid rgba(59, 130, 246, 0.3);
+    border-color: rgba(59, 130, 246, 0.3);
 }
 
-.action-btn.secondary:hover { background: rgba(59, 130, 246, 0.25); }
+.action-btn.green {
+    background: rgba(16, 185, 129, 0.08);
+    border-color: rgba(16, 185, 129, 0.2);
+    color: var(--text-primary);
+}
 
-.action-btn.accent {
+.action-btn.green .action-btn-icon { background: var(--success-bg); color: var(--success); }
+
+.action-btn.green:hover {
     background: rgba(16, 185, 129, 0.15);
-    color: var(--success);
-    border: 1px solid rgba(16, 185, 129, 0.3);
+    border-color: rgba(16, 185, 129, 0.3);
 }
 
-.action-btn.accent:hover { background: rgba(16, 185, 129, 0.25); }
+.action-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none !important; }
 
-.action-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }
+/* ---- Resource Bars ---- */
+.resource-bars { padding: 22px; display: flex; flex-direction: column; gap: 20px; }
 
-/* Resource Bars */
-.resource-bars { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
+.resource-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+}
 
-.resource-label { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; }
-.resource-label span:first-child { font-weight: 600; }
-.resource-label span:last-child { color: var(--text-secondary); }
+.resource-label-group { display: flex; align-items: center; gap: 8px; }
+.resource-icon { width: 14px; height: 14px; color: var(--text-muted); }
+.resource-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
+.resource-value { font-size: 12px; color: var(--text-muted); font-weight: 500; }
 
-.progress-bar { height: 8px; background: var(--bg-primary); border-radius: 4px; overflow: hidden; }
+.progress-bar {
+    height: 6px;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 3px;
+    overflow: hidden;
+    position: relative;
+}
+
+.progress-fill {
+    height: 100%;
+    border-radius: 3px;
+    transition: width 1s var(--ease);
+    position: relative;
+    overflow: hidden;
+}
+
+.progress-shine {
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+    animation: shine 3s ease-in-out infinite;
+}
+
+@keyframes shine {
+    0% { left: -100%; }
+    50% { left: 100%; }
+    100% { left: 100%; }
+}
 
-.progress-fill { height: 100%; border-radius: 4px; transition: width 0.8s ease; }
 .ram-fill { background: linear-gradient(90deg, var(--success), #34d399); }
 .disk-fill { background: linear-gradient(90deg, var(--info), #60a5fa); }
 
-/* Driver List */
+/* ---- Driver List ---- */
 .driver-summary {
     display: flex;
-    gap: 24px;
+    gap: 28px;
     margin-bottom: 16px;
-    padding: 14px 20px;
-    background: var(--bg-card);
-    border: 1px solid var(--border);
-    border-radius: var(--radius-sm);
+    padding: 16px 22px;
+    align-items: center;
 }
 
-.summary-item { font-size: 13px; color: var(--text-secondary); }
-.summary-item strong { color: var(--text-primary); font-size: 16px; margin-right: 4px; }
-.summary-item.warning strong { color: var(--warning); }
-.summary-item.error strong { color: var(--danger); }
+.summary-item {
+    font-size: 13px;
+    color: var(--text-secondary);
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
 
-.filter-bar { display: flex; gap: 8px; margin-bottom: 16px; }
+.sum-icon { width: 14px; height: 14px; }
+
+.summary-item strong {
+    color: var(--text-primary);
+    font-size: 18px;
+    font-weight: 700;
+}
+
+.summary-item.warning .sum-icon { color: var(--warning); }
+.summary-item.warning strong { color: var(--warning); }
+.summary-item.error .sum-icon { color: var(--danger); }
+.summary-item.error strong { color: var(--danger); }
+.summary-item.muted .sum-icon { color: var(--text-dim); }
+
+.filter-bar { display: flex; gap: 6px; margin-bottom: 16px; }
 
 .filter-btn {
-    padding: 6px 16px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 7px 14px;
     border: 1px solid var(--border);
     border-radius: 20px;
     background: transparent;
-    color: var(--text-secondary);
-    font-size: 13px;
+    color: var(--text-muted);
+    font-size: 12.5px;
+    font-weight: 500;
     cursor: pointer;
-    transition: all var(--transition);
+    transition: all var(--duration) var(--ease);
     font-family: inherit;
 }
 
-.filter-btn:hover { border-color: var(--accent-primary); color: var(--accent-primary); }
+.filter-btn svg { width: 13px; height: 13px; }
 
-.filter-btn.active {
-    background: var(--accent-primary);
-    border-color: var(--accent-primary);
-    color: white;
+.filter-btn:hover {
+    border-color: var(--border-accent);
+    color: var(--accent-light);
+    background: var(--bg-active);
 }
 
-.driver-list, .update-list { display: flex; flex-direction: column; gap: 8px; }
+.filter-btn.active {
+    background: var(--accent);
+    border-color: var(--accent);
+    color: white;
+    box-shadow: 0 2px 8px var(--accent-glow);
+}
+
+.driver-list, .update-list { display: flex; flex-direction: column; gap: 6px; }
 
 .driver-card {
     background: var(--bg-card);
@@ -291,133 +678,298 @@ body {
     padding: 16px 20px;
     display: flex;
     align-items: center;
-    gap: 16px;
-    transition: all var(--transition);
+    gap: 14px;
+    transition: all var(--duration) var(--ease);
+}
+
+.driver-card:hover {
+    border-color: var(--border-light);
+    background: var(--bg-elevated);
 }
 
-.driver-card:hover { border-color: var(--accent-primary); background: var(--bg-hover); }
 .driver-card.outdated { border-left: 3px solid var(--warning); }
 .driver-card.error { border-left: 3px solid var(--danger); }
 
 .driver-class-icon {
-    width: 40px;
-    height: 40px;
-    border-radius: var(--radius-sm);
-    background: rgba(99, 102, 241, 0.1);
+    width: 42px;
+    height: 42px;
+    border-radius: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--accent-primary);
-    font-size: 18px;
     flex-shrink: 0;
+    background: var(--accent-glow);
+    color: var(--accent-light);
 }
 
+.driver-class-icon svg { width: 20px; height: 20px; }
+
 .driver-info { flex: 1; min-width: 0; }
 
 .driver-name {
     font-weight: 600;
-    font-size: 14px;
+    font-size: 13.5px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    color: var(--text-primary);
 }
 
-.driver-meta { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
+.driver-meta {
+    font-size: 12px;
+    color: var(--text-muted);
+    margin-top: 3px;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.driver-meta-sep { color: var(--text-dim); }
+
 .driver-badges { display: flex; gap: 6px; flex-shrink: 0; }
 
-.badge { font-size: 11px; padding: 3px 10px; border-radius: 20px; font-weight: 600; }
-.badge-signed { background: rgba(16, 185, 129, 0.15); color: var(--success); }
-.badge-unsigned { background: rgba(239, 68, 68, 0.15); color: var(--danger); }
-.badge-outdated { background: rgba(245, 158, 11, 0.15); color: var(--warning); }
-.badge-ok { background: rgba(16, 185, 129, 0.15); color: var(--success); }
+.badge {
+    font-size: 11px;
+    padding: 3px 10px;
+    border-radius: 20px;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    border: 1px solid transparent;
+}
+
+.badge svg { width: 11px; height: 11px; }
+
+.badge-signed { background: var(--success-bg); color: var(--success); border-color: rgba(16,185,129,0.2); }
+.badge-unsigned { background: var(--danger-bg); color: var(--danger); border-color: rgba(239,68,68,0.2); }
+.badge-outdated { background: var(--warning-bg); color: var(--warning); border-color: rgba(245,158,11,0.2); }
+.badge-ok { background: var(--success-bg); color: var(--success); border-color: rgba(16,185,129,0.2); }
+
+/* ---- Update Cards ---- */
+.update-section-title {
+    font-size: 13px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin: 20px 0 10px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.update-section-title svg { width: 16px; height: 16px; }
+.update-section-title.pending { color: var(--info); }
+.update-section-title.installed { color: var(--success); }
 
-/* Update Cards */
 .update-card {
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: var(--radius-sm);
     padding: 16px 20px;
-    transition: all var(--transition);
+    transition: all var(--duration) var(--ease);
 }
 
-.update-card:hover { border-color: var(--accent-primary); }
-.update-card.installed { opacity: 0.6; }
+.update-card:hover { border-color: var(--border-light); }
+.update-card.installed { opacity: 0.5; }
 .update-card.pending { border-left: 3px solid var(--info); }
 
-.update-title { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
-.update-meta { font-size: 12px; color: var(--text-secondary); display: flex; gap: 16px; flex-wrap: wrap; }
-
-/* System Info Grid */
-.sysinfo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
-
-.info-card {
-    background: var(--bg-card);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    padding: 20px;
+.update-title {
+    font-weight: 600;
+    font-size: 13.5px;
+    margin-bottom: 6px;
+    color: var(--text-primary);
 }
 
-.info-card h4 {
+.update-meta {
+    font-size: 12px;
+    color: var(--text-muted);
+    display: flex;
+    gap: 14px;
+    flex-wrap: wrap;
+    align-items: center;
+}
+
+.update-tag {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.update-tag svg { width: 12px; height: 12px; }
+
+/* ---- System Info ---- */
+.sysinfo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
+
+.info-card { padding: 0; overflow: hidden; }
+
+.info-card-header {
+    padding: 16px 22px;
+    border-bottom: 1px solid var(--border);
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    background: rgba(255, 255, 255, 0.02);
+}
+
+.info-card-header svg { width: 18px; height: 18px; color: var(--accent-light); }
+
+.info-card-header h4 {
     font-size: 13px;
     text-transform: uppercase;
     letter-spacing: 0.5px;
-    color: var(--accent-primary);
-    margin-bottom: 16px;
-    padding-bottom: 10px;
-    border-bottom: 1px solid var(--border);
+    color: var(--text-secondary);
+    font-weight: 600;
 }
 
 .info-row {
     display: flex;
     justify-content: space-between;
-    padding: 8px 0;
+    align-items: center;
+    padding: 12px 22px;
     font-size: 13px;
-    border-bottom: 1px solid rgba(42, 42, 74, 0.5);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
+    transition: background var(--duration) var(--ease);
 }
 
 .info-row:last-child { border-bottom: none; }
-.info-key { color: var(--text-secondary); }
+
+.info-row:hover { background: rgba(255, 255, 255, 0.02); }
+
+.info-key {
+    color: var(--text-muted);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.info-key svg { width: 14px; height: 14px; opacity: 0.5; }
 
 .info-val {
     font-weight: 600;
     text-align: right;
-    max-width: 60%;
+    max-width: 55%;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    color: var(--text-primary);
 }
 
-/* Empty State */
-.empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); }
-.empty-state p { margin-top: 16px; font-size: 14px; }
+/* ---- Empty State ---- */
+.empty-state {
+    text-align: center;
+    padding: 80px 20px;
+    color: var(--text-muted);
+}
 
-/* Loading Overlay */
+.empty-icon {
+    width: 80px;
+    height: 80px;
+    border-radius: 20px;
+    background: var(--bg-elevated);
+    border: 1px solid var(--border);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto 20px;
+}
+
+.empty-icon svg { width: 36px; height: 36px; color: var(--text-dim); }
+
+.empty-state h3 {
+    font-size: 16px;
+    color: var(--text-secondary);
+    margin-bottom: 6px;
+}
+
+.empty-state p { font-size: 13px; }
+
+/* ---- Loading Overlay ---- */
 .loading-overlay {
     position: fixed;
     inset: 0;
-    background: rgba(15, 15, 26, 0.85);
-    backdrop-filter: blur(4px);
+    background: rgba(8, 11, 20, 0.9);
+    backdrop-filter: blur(8px);
     display: flex;
-    flex-direction: column;
     align-items: center;
     justify-content: center;
     z-index: 1000;
 }
 
-.spinner {
-    width: 40px;
-    height: 40px;
+.loading-card {
+    text-align: center;
+    padding: 48px;
+    background: var(--bg-card-solid);
+    border: 1px solid var(--border);
+    border-radius: 20px;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+}
+
+.loading-spinner {
+    width: 72px;
+    height: 72px;
+    margin: 0 auto 24px;
+    position: relative;
+}
+
+.spinner-ring {
+    position: absolute;
+    inset: 0;
     border: 3px solid var(--border);
-    border-top-color: var(--accent-primary);
+    border-top-color: var(--accent);
     border-radius: 50%;
-    animation: spin 0.8s linear infinite;
+    animation: spin 1s linear infinite;
 }
 
 @keyframes spin { to { transform: rotate(360deg); } }
 
-.loading-overlay p { margin-top: 16px; color: var(--text-secondary); font-size: 14px; }
+.spinner-icon {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: var(--accent-light);
+}
 
-@media (max-width: 900px) {
+.spinner-icon svg { width: 28px; height: 28px; }
+
+.loading-title {
+    font-size: 16px;
+    font-weight: 700;
+    color: var(--text-primary);
+    margin-bottom: 4px;
+}
+
+.loading-sub {
+    font-size: 13px;
+    color: var(--text-muted);
+    margin-bottom: 20px;
+}
+
+.loading-dots {
+    display: flex;
+    justify-content: center;
+    gap: 6px;
+}
+
+.loading-dots span {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: var(--accent);
+    animation: dotPulse 1.4s ease-in-out infinite;
+}
+
+.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
+.loading-dots span:nth-child(3) { animation-delay: 0.4s; }
+
+@keyframes dotPulse {
+    0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
+    40% { opacity: 1; transform: scale(1); }
+}
+
+/* ---- Responsive ---- */
+@media (max-width: 1000px) {
     .stats-grid { grid-template-columns: repeat(2, 1fr); }
     .dashboard-panels { grid-template-columns: 1fr; }
     .sysinfo-grid { grid-template-columns: 1fr; }