diff --git a/ui/app.js b/ui/app.js
index 1bbfa38..77be587 100644
--- a/ui/app.js
+++ b/ui/app.js
@@ -1,6 +1,5 @@
 /* ============================================================
-   Driver Booster Pro - Application Logic
-   Driver Navigator Style: tabs, driver rows, action buttons
+   Driver Booster Pro - PNG Icons Edition
    ============================================================ */
 
 var App = {
@@ -10,16 +9,9 @@ var App = {
         this.setupTabs();
         this.setupFilters();
         this.refreshSysInfo();
-        this.refreshIcons();
     },
 
-    refreshIcons: function() {
-        if (window.lucide) lucide.createIcons();
-    },
-
-    // ---- Tab Navigation ----
     setupTabs: function() {
-        var self = this;
         document.querySelectorAll('.toolbar-tab').forEach(function(tab) {
             tab.addEventListener('click', function() {
                 var id = tab.dataset.tab;
@@ -32,7 +24,6 @@ var App = {
         });
     },
 
-    // ---- Filter Pills ----
     setupFilters: function() {
         var self = this;
         document.querySelectorAll('.pill').forEach(function(btn) {
@@ -54,17 +45,15 @@ var App = {
         });
     },
 
-    // ---- Loading ----
     showLoading: function(text) {
         document.getElementById('loading-text').textContent = text;
         document.getElementById('loading-overlay').style.display = 'flex';
-        this.refreshIcons();
     },
     hideLoading: function() {
         document.getElementById('loading-overlay').style.display = 'none';
     },
 
-    // ---- System Info ----
+    // System Info
     refreshSysInfo: function() {
         var self = this;
         this.showLoading('Collecting system information...');
@@ -72,10 +61,7 @@ var App = {
             self.state.sysInfo = info;
             self.renderSysInfo(info);
             self.hideLoading();
-        }).catch(function(e) {
-            console.error(e);
-            self.hideLoading();
-        });
+        }).catch(function(e) { console.error(e); self.hideLoading(); });
     },
 
     renderSysInfo: function(d) {
@@ -100,17 +86,15 @@ var App = {
         if(db) db.style.width = (d.diskPercent||0)+'%';
     },
 
-    // ---- Driver Scan ----
+    // Driver Scan
     scanDrivers: function() {
         var self = this;
-        this.showLoading('Scanning drivers... This may take a moment.');
+        this.showLoading('Scanning drivers...');
         // Switch to drivers tab
         document.querySelectorAll('.toolbar-tab').forEach(function(t){ t.classList.remove('active'); });
         document.querySelector('[data-tab="drivers"]').classList.add('active');
         document.querySelectorAll('.tab-page').forEach(function(p){ p.classList.remove('active'); });
         document.getElementById('tab-drivers').classList.add('active');
-
-        // Update steps
         this.setStep(2);
 
         fetch('/api/drivers/scan').then(function(r){ return r.json(); }).then(function(result) {
@@ -118,10 +102,7 @@ var App = {
             self.renderDrivers(result);
             self.updateScanStats(result);
             self.hideLoading();
-        }).catch(function(e) {
-            console.error(e);
-            self.hideLoading();
-        });
+        }).catch(function(e) { console.error(e); self.hideLoading(); });
     },
 
     updateScanStats: function(r) {
@@ -139,8 +120,7 @@ var App = {
 
         var list = document.getElementById('driver-list');
         if (!result.drivers || result.drivers.length === 0) {
-            list.innerHTML = '<div class="placeholder-msg"><i data-lucide="search-x"></i><p>No drivers found</p></div>';
-            this.refreshIcons();
+            list.innerHTML = '<div class="placeholder-msg"><img src="icon-scan.png" class="placeholder-img"><p>No drivers found</p></div>';
             return;
         }
 
@@ -150,32 +130,31 @@ var App = {
             if (d.needsUpdate) cls.push('outdated');
             if (d.status === 'Error' || d.status === 'Degraded') cls.push('error');
 
-            var icon = self.driverIcon(d.deviceClass);
+            var iconFile = self.driverIconFile(d.deviceClass);
             var barClass = d.needsUpdate ? 'warn' : (d.status === 'Error' ? 'err' : 'ok');
 
             var signBadge = d.isSigned
-                ? '<span class="drv-badge signed"><i data-lucide="shield-check"></i> Signed</span>'
-                : '<span class="drv-badge unsigned"><i data-lucide="shield-x"></i></span>';
+                ? '<span class="drv-badge signed"><img src="icon-shield.png" class="drv-badge-img" style="width:10px;height:10px"> Signed</span>'
+                : '<span class="drv-badge unsigned">Unsigned</span>';
 
             var actionBtn = d.needsUpdate
-                ? '<button class="drv-btn install-btn"><i data-lucide="download"></i> Download</button>' +
-                  '<button class="drv-btn"><i data-lucide="play"></i> Install</button>'
-                : '<button class="drv-btn installed-btn"><i data-lucide="circle-check"></i> Up to date</button>';
+                ? '<button class="drv-btn install-btn"><img src="icon-download.png" style="width:13px;height:13px"> Download</button>' +
+                  '<button class="drv-btn"><img src="icon-install.png" style="width:13px;height:13px"> Install</button>'
+                : '<button class="drv-btn ok-btn"><img src="icon-checkmark.png" style="width:13px;height:13px"> Up to date</button>';
 
             return '<div class="' + cls.join(' ') + '" data-signed="' + d.isSigned + '">' +
-                '<div class="drv-icon"><i data-lucide="' + icon + '"></i></div>' +
+                '<div class="drv-icon"><img src="icon-' + iconFile + '" class="drv-icon-img"></div>' +
                 '<div class="drv-info">' +
                     '<div class="drv-name">' + self.esc(d.deviceName) + '</div>' +
-                    '<div class="drv-meta">' + self.esc(d.manufacturer||'Unknown') + ' &middot; v' + self.esc(d.driverVersion||'?') + ' &middot; ' + self.esc(d.driverDate) + ' ' + signBadge + '</div>' +
-                '</div>' +
-                '<div class="drv-progress">' +
-                    '<div class="drv-bar"><div class="drv-bar-fill ' + barClass + '"></div></div>' +
+                    '<div class="drv-meta">' + self.esc(d.manufacturer||'Unknown') +
+                        ' &middot; v' + self.esc(d.driverVersion||'?') +
+                        ' &middot; ' + self.esc(d.driverDate) + ' ' + signBadge + '</div>' +
                 '</div>' +
+                '<div class="drv-progress"><div class="drv-bar"><div class="drv-bar-fill ' + barClass + '"></div></div></div>' +
                 '<div class="drv-actions">' + actionBtn + '</div>' +
             '</div>';
         }).join('');
 
-        // Show CTA if there are outdated drivers
         var cta = document.getElementById('cta-update-all');
         if (result.outdatedCount > 0) {
             cta.style.display = 'flex';
@@ -183,30 +162,27 @@ var App = {
         } else {
             cta.style.display = 'none';
         }
-
-        this.refreshIcons();
     },
 
-    driverIcon: function(cls) {
-        if (!cls) return 'package';
+    driverIconFile: function(cls) {
+        if (!cls) return 'package.png';
         var u = cls.toUpperCase();
         var m = {
-            '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','FIRMWARE':'circuit-board','SECURITY':'shield',
-            'SENSOR':'thermometer'
+            'DISPLAY':'monitor.png','MEDIA':'speaker.png','AUDIO':'speaker.png','SOUND':'speaker.png',
+            'NET':'wifi.png','NETWORK':'wifi.png','USB':'usb.png','HID':'mouse.png',
+            'KEYBOARD':'keyboard.png','DISK':'harddrive.png','STORAGE':'harddrive.png',
+            'PROCESSOR':'cpu.png','SYSTEM':'settings.png','BLUETOOTH':'bluetooth.png',
+            'CAMERA':'camera.png','IMAGE':'camera.png','PRINT':'printer.png',
+            'BATTERY':'battery.png'
         };
         for (var k in m) { if (u.indexOf(k) !== -1) return m[k]; }
-        return 'package';
+        return 'package.png';
     },
 
-    // ---- Windows Update ----
+    // Windows Update
     checkUpdates: function() {
         var self = this;
         this.showLoading('Checking for Windows updates...');
-        // Switch to updates tab
         document.querySelectorAll('.toolbar-tab').forEach(function(t){ t.classList.remove('active'); });
         document.querySelector('[data-tab="updates"]').classList.add('active');
         document.querySelectorAll('.tab-page').forEach(function(p){ p.classList.remove('active'); });
@@ -216,24 +192,18 @@ var App = {
             self.state.updates = result;
             self.renderUpdates(result);
             self.hideLoading();
-        }).catch(function(e) {
-            console.error(e);
-            self.hideLoading();
-        });
+        }).catch(function(e) { console.error(e); self.hideLoading(); });
     },
 
     renderUpdates: function(result) {
         var list = document.getElementById('update-list');
 
         if (result.error) {
-            list.innerHTML = '<div class="placeholder-msg"><i data-lucide="alert-circle"></i><p style="color:var(--red)">' + this.esc(result.error) + '</p></div>';
-            this.refreshIcons();
+            list.innerHTML = '<div class="placeholder-msg"><img src="icon-error.png" class="placeholder-img"><p style="color:var(--red)">' + this.esc(result.error) + '</p></div>';
             return;
         }
-
         if (!result.updates || result.updates.length === 0) {
-            list.innerHTML = '<div class="placeholder-msg"><i data-lucide="circle-check"></i><p>Your system is fully up to date!</p></div>';
-            this.refreshIcons();
+            list.innerHTML = '<div class="placeholder-msg"><img src="icon-checkmark.png" class="placeholder-img"><p>Your system is fully up to date!</p></div>';
             return;
         }
 
@@ -243,32 +213,28 @@ var App = {
         var html = '';
 
         if (pending.length > 0) {
-            html += '<div class="upd-section pend"><i data-lucide="download"></i> Pending (' + pending.length + ')</div>';
+            html += '<div class="upd-section pend"><img src="icon-download.png" style="width:16px;height:16px"> Pending (' + pending.length + ')</div>';
             html += pending.map(function(u) {
                 return '<div class="upd-row pending">' +
                     '<div class="upd-title">' + self.esc(u.title) + '</div>' +
                     '<div class="upd-meta">' +
-                        (u.kbArticle ? '<span class="upd-tag"><i data-lucide="file-text"></i> '+self.esc(u.kbArticle)+'</span>' : '') +
-                        (u.category ? '<span class="upd-tag"><i data-lucide="folder"></i> '+self.esc(u.category)+'</span>' : '') +
-                        (u.size ? '<span class="upd-tag"><i data-lucide="hard-drive"></i> '+self.esc(u.size)+'</span>' : '') +
-                        (u.severity && u.severity !== 'Unspecified' ? '<span class="upd-tag"><i data-lucide="alert-triangle"></i> '+self.esc(u.severity)+'</span>' : '') +
-                    '</div>' +
-                '</div>';
+                        (u.kbArticle ? '<span class="upd-tag"><img src="icon-info.png" style="width:12px;height:12px"> '+self.esc(u.kbArticle)+'</span>' : '') +
+                        (u.category ? '<span class="upd-tag"><img src="icon-package.png" style="width:12px;height:12px"> '+self.esc(u.category)+'</span>' : '') +
+                        (u.size ? '<span class="upd-tag"><img src="icon-harddrive.png" style="width:12px;height:12px"> '+self.esc(u.size)+'</span>' : '') +
+                        (u.severity && u.severity !== 'Unspecified' ? '<span class="upd-tag"><img src="icon-warning.png" style="width:12px;height:12px"> '+self.esc(u.severity)+'</span>' : '') +
+                    '</div></div>';
             }).join('');
         }
 
         if (installed.length > 0) {
-            html += '<div class="upd-section inst"><i data-lucide="check-circle"></i> Recently Installed (' + installed.length + ')</div>';
+            html += '<div class="upd-section inst"><img src="icon-checkmark.png" style="width:16px;height:16px"> Recently Installed (' + installed.length + ')</div>';
             html += installed.map(function(u) {
                 return '<div class="upd-row done"><div class="upd-title">' + self.esc(u.title) + '</div></div>';
             }).join('');
         }
-
         list.innerHTML = html;
-        this.refreshIcons();
     },
 
-    // ---- Step bar ----
     setStep: function(n) {
         for (var i = 1; i <= 3; i++) {
             var el = document.getElementById('step-' + i);
@@ -279,7 +245,6 @@ var App = {
         }
     },
 
-    // ---- Helpers ----
     set: function(id, val) {
         var el = document.getElementById(id);
         if (el) el.textContent = (val != null && val !== '') ? val : '--';
diff --git a/ui/icon-battery.png b/ui/icon-battery.png
new file mode 100644
index 0000000..b1bae70
Binary files /dev/null and b/ui/icon-battery.png differ
diff --git a/ui/icon-bluetooth.png b/ui/icon-bluetooth.png
new file mode 100644
index 0000000..18e8e4a
Binary files /dev/null and b/ui/icon-bluetooth.png differ
diff --git a/ui/icon-camera.png b/ui/icon-camera.png
new file mode 100644
index 0000000..411bac8
Binary files /dev/null and b/ui/icon-camera.png differ
diff --git a/ui/icon-checkmark.png b/ui/icon-checkmark.png
new file mode 100644
index 0000000..7ca088a
Binary files /dev/null and b/ui/icon-checkmark.png differ
diff --git a/ui/icon-cloud.png b/ui/icon-cloud.png
new file mode 100644
index 0000000..19d7f75
Binary files /dev/null and b/ui/icon-cloud.png differ
diff --git a/ui/icon-cpu.png b/ui/icon-cpu.png
new file mode 100644
index 0000000..80628c2
Binary files /dev/null and b/ui/icon-cpu.png differ
diff --git a/ui/icon-download.png b/ui/icon-download.png
new file mode 100644
index 0000000..5b90e12
Binary files /dev/null and b/ui/icon-download.png differ
diff --git a/ui/icon-error.png b/ui/icon-error.png
new file mode 100644
index 0000000..fc00b23
Binary files /dev/null and b/ui/icon-error.png differ
diff --git a/ui/icon-harddrive.png b/ui/icon-harddrive.png
new file mode 100644
index 0000000..d4b03ee
Binary files /dev/null and b/ui/icon-harddrive.png differ
diff --git a/ui/icon-help.png b/ui/icon-help.png
new file mode 100644
index 0000000..c18cf86
Binary files /dev/null and b/ui/icon-help.png differ
diff --git a/ui/icon-info.png b/ui/icon-info.png
new file mode 100644
index 0000000..75ffe11
Binary files /dev/null and b/ui/icon-info.png differ
diff --git a/ui/icon-install.png b/ui/icon-install.png
new file mode 100644
index 0000000..25bd613
Binary files /dev/null and b/ui/icon-install.png differ
diff --git a/ui/icon-keyboard.png b/ui/icon-keyboard.png
new file mode 100644
index 0000000..836a6ef
Binary files /dev/null and b/ui/icon-keyboard.png differ
diff --git a/ui/icon-laptop.png b/ui/icon-laptop.png
new file mode 100644
index 0000000..4467d95
Binary files /dev/null and b/ui/icon-laptop.png differ
diff --git a/ui/icon-monitor.png b/ui/icon-monitor.png
new file mode 100644
index 0000000..7e564b4
Binary files /dev/null and b/ui/icon-monitor.png differ
diff --git a/ui/icon-mouse.png b/ui/icon-mouse.png
new file mode 100644
index 0000000..75d0178
Binary files /dev/null and b/ui/icon-mouse.png differ
diff --git a/ui/icon-package.png b/ui/icon-package.png
new file mode 100644
index 0000000..d768706
Binary files /dev/null and b/ui/icon-package.png differ
diff --git a/ui/icon-printer.png b/ui/icon-printer.png
new file mode 100644
index 0000000..d3cc846
Binary files /dev/null and b/ui/icon-printer.png differ
diff --git a/ui/icon-ram.png b/ui/icon-ram.png
new file mode 100644
index 0000000..97d13c8
Binary files /dev/null and b/ui/icon-ram.png differ
diff --git a/ui/icon-refresh.png b/ui/icon-refresh.png
new file mode 100644
index 0000000..890b888
Binary files /dev/null and b/ui/icon-refresh.png differ
diff --git a/ui/icon-scan.png b/ui/icon-scan.png
new file mode 100644
index 0000000..7e38cb6
Binary files /dev/null and b/ui/icon-scan.png differ
diff --git a/ui/icon-settings.png b/ui/icon-settings.png
new file mode 100644
index 0000000..06fc5cb
Binary files /dev/null and b/ui/icon-settings.png differ
diff --git a/ui/icon-shield.png b/ui/icon-shield.png
new file mode 100644
index 0000000..f8db22f
Binary files /dev/null and b/ui/icon-shield.png differ
diff --git a/ui/icon-speaker.png b/ui/icon-speaker.png
new file mode 100644
index 0000000..f06db17
Binary files /dev/null and b/ui/icon-speaker.png differ
diff --git a/ui/icon-usb.png b/ui/icon-usb.png
new file mode 100644
index 0000000..17bd668
Binary files /dev/null and b/ui/icon-usb.png differ
diff --git a/ui/icon-warning.png b/ui/icon-warning.png
new file mode 100644
index 0000000..2baa822
Binary files /dev/null and b/ui/icon-warning.png differ
diff --git a/ui/icon-wifi.png b/ui/icon-wifi.png
new file mode 100644
index 0000000..2526e57
Binary files /dev/null and b/ui/icon-wifi.png differ
diff --git a/ui/index.html b/ui/index.html
index 6636d5f..bc1c08f 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -5,23 +5,20 @@
     <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>
     <div class="app">
         <!-- Title Bar -->
         <div class="titlebar">
             <div class="titlebar-left">
-                <div class="app-logo">
-                    <i data-lucide="shield-check"></i>
-                </div>
+                <img src="icon-shield.png" class="app-logo-img" alt="">
                 <div class="app-title">
                     <span class="app-name">DRIVER BOOSTER</span>
                     <span class="app-edition">PRO</span>
                 </div>
             </div>
             <div class="titlebar-right">
-                <div class="sys-status" id="sys-status">
+                <div class="sys-status">
                     <div class="status-led"></div>
                     <span>System Protected</span>
                 </div>
@@ -31,27 +28,19 @@
         <!-- Toolbar Tabs -->
         <div class="toolbar">
             <button class="toolbar-tab active" data-tab="scan">
-                <div class="tab-icon-wrap scan-icon-wrap">
-                    <i data-lucide="scan-search"></i>
-                </div>
+                <img src="icon-scan.png" class="tab-img" alt="">
                 <span>Scan</span>
             </button>
             <button class="toolbar-tab" data-tab="drivers">
-                <div class="tab-icon-wrap drivers-icon-wrap">
-                    <i data-lucide="cpu"></i>
-                </div>
+                <img src="icon-cpu.png" class="tab-img" alt="">
                 <span>Drivers</span>
             </button>
             <button class="toolbar-tab" data-tab="updates">
-                <div class="tab-icon-wrap updates-icon-wrap">
-                    <i data-lucide="download-cloud"></i>
-                </div>
+                <img src="icon-download.png" class="tab-img" alt="">
                 <span>Download</span>
             </button>
             <button class="toolbar-tab" data-tab="system">
-                <div class="tab-icon-wrap settings-icon-wrap">
-                    <i data-lucide="monitor-cog"></i>
-                </div>
+                <img src="icon-settings.png" class="tab-img" alt="">
                 <span>System</span>
             </button>
         </div>
@@ -63,72 +52,35 @@
             <div class="tab-page active" id="tab-scan">
                 <div class="scan-hero">
                     <div class="scan-illustration">
-                        <!-- Computer SVG Illustration -->
-                        <svg viewBox="0 0 200 180" class="computer-svg">
-                            <defs>
-                                <linearGradient id="screen-grad" x1="0" y1="0" x2="0" y2="1">
-                                    <stop offset="0%" stop-color="#1e40af"/>
-                                    <stop offset="100%" stop-color="#3b82f6"/>
-                                </linearGradient>
-                                <linearGradient id="body-grad" x1="0" y1="0" x2="0" y2="1">
-                                    <stop offset="0%" stop-color="#e2e8f0"/>
-                                    <stop offset="100%" stop-color="#cbd5e1"/>
-                                </linearGradient>
-                                <linearGradient id="shield-grad" x1="0" y1="0" x2="1" y2="1">
-                                    <stop offset="0%" stop-color="#10b981"/>
-                                    <stop offset="100%" stop-color="#059669"/>
-                                </linearGradient>
-                            </defs>
-                            <!-- Monitor -->
-                            <rect x="30" y="10" width="140" height="100" rx="8" fill="url(#body-grad)" stroke="#94a3b8" stroke-width="2"/>
-                            <rect x="38" y="18" width="124" height="76" rx="4" fill="url(#screen-grad)"/>
-                            <!-- Screen content lines -->
-                            <rect x="50" y="34" width="60" height="4" rx="2" fill="rgba(255,255,255,0.3)"/>
-                            <rect x="50" y="44" width="80" height="4" rx="2" fill="rgba(255,255,255,0.2)"/>
-                            <rect x="50" y="54" width="45" height="4" rx="2" fill="rgba(255,255,255,0.3)"/>
-                            <rect x="50" y="64" width="70" height="4" rx="2" fill="rgba(255,255,255,0.2)"/>
-                            <rect x="50" y="74" width="55" height="4" rx="2" fill="rgba(255,255,255,0.3)"/>
-                            <!-- Check marks -->
-                            <circle cx="46" cy="36" r="3" fill="#10b981"/>
-                            <circle cx="46" cy="46" r="3" fill="#10b981"/>
-                            <circle cx="46" cy="56" r="3" fill="#10b981"/>
-                            <circle cx="46" cy="66" r="3" fill="#f59e0b"/>
-                            <circle cx="46" cy="76" r="3" fill="#ef4444"/>
-                            <!-- Stand -->
-                            <rect x="85" y="110" width="30" height="12" rx="2" fill="#94a3b8"/>
-                            <rect x="70" y="120" width="60" height="6" rx="3" fill="#94a3b8"/>
-                            <!-- Shield overlay -->
-                            <path d="M145 55 L145 35 C145 35 155 30 165 35 C175 30 185 35 185 35 L185 55 C185 70 165 82 165 82 C165 82 145 70 145 55Z" fill="url(#shield-grad)" opacity="0.9"/>
-                            <polyline points="157,55 163,62 175,48" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
-                        </svg>
+                        <img src="icon-monitor.png" class="hero-img" alt="">
+                        <img src="icon-shield.png" class="hero-shield" alt="">
                     </div>
                     <div class="scan-info">
                         <h2>Scan Your System</h2>
                         <p>Detect outdated, missing, and faulty drivers. Keep your PC running at peak performance.</p>
-                        <div class="scan-stats" id="scan-stats">
+                        <div class="scan-stats">
                             <div class="mini-stat">
-                                <i data-lucide="cpu"></i>
+                                <img src="icon-cpu.png" class="mini-icon" alt="">
                                 <span id="scan-stat-total">--</span>
                                 <label>Drivers</label>
                             </div>
                             <div class="mini-stat warn">
-                                <i data-lucide="alert-triangle"></i>
+                                <img src="icon-warning.png" class="mini-icon" alt="">
                                 <span id="scan-stat-outdated">--</span>
                                 <label>Outdated</label>
                             </div>
                             <div class="mini-stat danger">
-                                <i data-lucide="x-circle"></i>
+                                <img src="icon-error.png" class="mini-icon" alt="">
                                 <span id="scan-stat-errors">--</span>
                                 <label>Errors</label>
                             </div>
                         </div>
-                        <button class="big-scan-btn" id="btn-scan" onclick="App.scanDrivers()">
-                            <i data-lucide="scan-search"></i>
+                        <button class="big-scan-btn" onclick="App.scanDrivers()">
+                            <img src="icon-scan.png" class="btn-icon" alt="">
                             <span>SCAN NOW</span>
                         </button>
                     </div>
                 </div>
-
                 <!-- Step Indicator -->
                 <div class="step-bar">
                     <div class="step active" id="step-1">
@@ -152,7 +104,7 @@
             <div class="tab-page" id="tab-drivers">
                 <div class="tab-header">
                     <div class="tab-header-left">
-                        <h2><i data-lucide="cpu"></i> Installed Drivers</h2>
+                        <h2><img src="icon-cpu.png" class="h2-icon" alt=""> Installed Drivers</h2>
                         <div class="result-count" id="driver-result-count" style="display:none">
                             <span id="drv-total-2">0</span> found &bull;
                             <span class="warn-text" id="drv-outdated-2">0</span> outdated &bull;
@@ -160,25 +112,25 @@
                         </div>
                     </div>
                     <button class="header-btn" onclick="App.scanDrivers()">
-                        <i data-lucide="refresh-cw"></i> Rescan
+                        <img src="icon-refresh.png" class="hdr-icon" alt=""> Rescan
                     </button>
                 </div>
                 <div class="filter-strip" id="driver-filter-strip" style="display:none">
                     <button class="pill active" data-filter="all">All</button>
-                    <button class="pill" data-filter="outdated"><i data-lucide="alert-triangle"></i> Outdated</button>
-                    <button class="pill" data-filter="error"><i data-lucide="x-circle"></i> Errors</button>
-                    <button class="pill" data-filter="signed"><i data-lucide="shield-check"></i> Signed</button>
+                    <button class="pill" data-filter="outdated"><img src="icon-warning.png" class="pill-icon" alt=""> Outdated</button>
+                    <button class="pill" data-filter="error"><img src="icon-error.png" class="pill-icon" alt=""> Errors</button>
+                    <button class="pill" data-filter="signed"><img src="icon-shield.png" class="pill-icon" alt=""> Signed</button>
                 </div>
                 <div class="driver-scroll" id="driver-list">
                     <div class="placeholder-msg">
-                        <i data-lucide="scan-search"></i>
+                        <img src="icon-scan.png" class="placeholder-img" alt="">
                         <p>Click <strong>Scan</strong> to detect your drivers</p>
                     </div>
                 </div>
                 <!-- Update All CTA -->
                 <div class="cta-bar" id="cta-update-all" style="display:none">
                     <button class="cta-btn" onclick="App.scanDrivers()">
-                        <i data-lucide="download"></i>
+                        <img src="icon-install.png" class="cta-icon" alt="">
                         <span>Update All Drivers</span>
                         <span class="cta-count" id="cta-count">0</span>
                     </button>
@@ -189,15 +141,15 @@
             <div class="tab-page" id="tab-updates">
                 <div class="tab-header">
                     <div class="tab-header-left">
-                        <h2><i data-lucide="download-cloud"></i> Windows Update</h2>
+                        <h2><img src="icon-cloud.png" class="h2-icon" alt=""> Windows Update</h2>
                     </div>
                     <button class="header-btn" onclick="App.checkUpdates()">
-                        <i data-lucide="refresh-cw"></i> Check Now
+                        <img src="icon-refresh.png" class="hdr-icon" alt=""> Check Now
                     </button>
                 </div>
                 <div class="driver-scroll" id="update-list">
                     <div class="placeholder-msg">
-                        <i data-lucide="cloud-download"></i>
+                        <img src="icon-cloud.png" class="placeholder-img" alt="">
                         <p>Click <strong>Check Now</strong> to search for updates</p>
                     </div>
                 </div>
@@ -207,15 +159,15 @@
             <div class="tab-page" id="tab-system">
                 <div class="tab-header">
                     <div class="tab-header-left">
-                        <h2><i data-lucide="monitor-cog"></i> System Information</h2>
+                        <h2><img src="icon-settings.png" class="h2-icon" alt=""> System Information</h2>
                     </div>
                     <button class="header-btn" onclick="App.refreshSysInfo()">
-                        <i data-lucide="refresh-cw"></i> Refresh
+                        <img src="icon-refresh.png" class="hdr-icon" alt=""> Refresh
                     </button>
                 </div>
                 <div class="sys-grid">
                     <div class="sys-card">
-                        <div class="sys-card-head"><i data-lucide="laptop"></i> Computer</div>
+                        <div class="sys-card-head"><img src="icon-laptop.png" class="sys-head-icon" alt=""> Computer</div>
                         <div class="sys-row"><span>Name</span><span id="sys-name">--</span></div>
                         <div class="sys-row"><span>OS</span><span id="sys-os">--</span></div>
                         <div class="sys-row"><span>Version</span><span id="sys-version">--</span></div>
@@ -223,12 +175,12 @@
                         <div class="sys-row"><span>Arch</span><span id="sys-arch">--</span></div>
                     </div>
                     <div class="sys-card">
-                        <div class="sys-card-head"><i data-lucide="cpu"></i> Processor</div>
+                        <div class="sys-card-head"><img src="icon-cpu.png" class="sys-head-icon" alt=""> Processor</div>
                         <div class="sys-row"><span>CPU</span><span id="sys-cpu">--</span></div>
                         <div class="sys-row"><span>Cores</span><span id="sys-cores">--</span></div>
                     </div>
                     <div class="sys-card">
-                        <div class="sys-card-head"><i data-lucide="memory-stick"></i> Memory</div>
+                        <div class="sys-card-head"><img src="icon-ram.png" class="sys-head-icon" alt=""> Memory</div>
                         <div class="sys-row"><span>Total</span><span id="sys-ram-total">--</span></div>
                         <div class="sys-row"><span>Used</span><span id="sys-ram-used">--</span></div>
                         <div class="sys-row"><span>Free</span><span id="sys-ram-free">--</span></div>
@@ -238,7 +190,7 @@
                         </div>
                     </div>
                     <div class="sys-card">
-                        <div class="sys-card-head"><i data-lucide="hard-drive"></i> Storage (C:)</div>
+                        <div class="sys-card-head"><img src="icon-harddrive.png" class="sys-head-icon" alt=""> Storage (C:)</div>
                         <div class="sys-row"><span>Total</span><span id="sys-disk-total">--</span></div>
                         <div class="sys-row"><span>Used</span><span id="sys-disk-used">--</span></div>
                         <div class="sys-row"><span>Free</span><span id="sys-disk-free">--</span></div>
@@ -253,10 +205,10 @@
 
         <!-- Footer -->
         <div class="app-footer">
-            <span>Driver Booster Pro v1.0.0</span>
+            <span>Driver Booster Pro v1.0.0 &mdash; Made by <a href="https://imtaqin.id" class="credit-link" target="_blank">IMTAQIN</a></span>
             <span class="footer-right">
-                <button class="footer-btn" onclick="App.refreshSysInfo()"><i data-lucide="info"></i> About</button>
-                <button class="footer-btn"><i data-lucide="life-buoy"></i> Help</button>
+                <button class="footer-btn" onclick="App.refreshSysInfo()"><img src="icon-info.png" class="footer-icon" alt=""> About</button>
+                <button class="footer-btn"><img src="icon-help.png" class="footer-icon" alt=""> Help</button>
             </span>
         </div>
     </div>
@@ -266,7 +218,7 @@
         <div class="loading-card">
             <div class="loading-spinner">
                 <div class="spinner-ring"></div>
-                <i data-lucide="shield-check" class="spinner-icon"></i>
+                <img src="icon-shield.png" class="spinner-img" alt="">
             </div>
             <p class="loading-title" id="loading-text">Scanning...</p>
             <div class="loading-dots"><span></span><span></span><span></span></div>
diff --git a/ui/style.css b/ui/style.css
index 20033b5..7e7ac3d 100644
--- a/ui/style.css
+++ b/ui/style.css
@@ -1,613 +1,388 @@
 /* ============================================================
-   Driver Booster Pro - Driver Navigator Style
-   Toolbar tabs + driver list + Download/Install buttons
+   Driver Booster Pro - Windows 11 WinUI3 + PNG Icons
+   Mica/Acrylic materials, rounded corners, native look
    ============================================================ */
 
 :root {
-    --bg: linear-gradient(180deg, #0a1628 0%, #0f1d32 50%, #0a1628 100%);
-    --surface: #111d33;
-    --surface-light: #162442;
-    --surface-hover: #1a2d50;
-    --border: rgba(255,255,255,0.07);
-    --border-accent: rgba(59,130,246,0.3);
+    /* Windows 11 Dark Mica palette */
+    --bg: #202020;
+    --mica: #2c2c2c;
+    --surface: #2d2d2d;
+    --surface-light: #383838;
+    --surface-hover: #3a3a3a;
+    --card: #323232;
+    --border: rgba(255,255,255,0.0578);
+    --border-light: rgba(255,255,255,0.0837);
+    --border-top: rgba(255,255,255,0.093);
 
-    --text: #e8edf5;
-    --text-sec: #8899b4;
-    --text-dim: #56687e;
+    --text: #ffffffde;
+    --text-sec: #ffffffa0;
+    --text-dim: #ffffff60;
 
-    --accent: #3b82f6;
-    --accent-light: #60a5fa;
-    --accent-dark: #2563eb;
-    --accent-glow: rgba(59,130,246,0.25);
+    /* Windows 11 accent (Blue) */
+    --accent: #60cdff;
+    --accent-bg: #0078d4;
+    --accent-hover: #429ce3;
+    --accent-press: #005a9e;
+    --accent-subtle: rgba(96,205,255,0.08);
 
-    --green: #10b981;
-    --green-bg: rgba(16,185,129,0.12);
-    --yellow: #f59e0b;
-    --yellow-bg: rgba(245,158,11,0.12);
-    --red: #ef4444;
-    --red-bg: rgba(239,68,68,0.12);
-    --cyan: #06b6d4;
+    --green: #6ccb5f;
+    --green-bg: rgba(108,203,95,0.1);
+    --yellow: #fce100;
+    --yellow-bg: rgba(252,225,0,0.1);
+    --red: #ff99a4;
+    --red-bg: rgba(255,153,164,0.1);
 
-    --r: 10px;
-    --r-sm: 6px;
+    --radius: 8px;
+    --radius-lg: 12px;
+    --radius-sm: 4px;
 }
 
-* { margin:0; padding:0; box-sizing:border-box; }
+*{margin:0;padding:0;box-sizing:border-box}
 
 body {
-    font-family: 'Segoe UI Variable','Segoe UI',-apple-system,BlinkMacSystemFont,sans-serif;
-    background: var(--bg);
-    background-attachment: fixed;
-    color: var(--text);
-    height: 100vh;
-    overflow: hidden;
-    -webkit-font-smoothing: antialiased;
+    font-family:'Segoe UI Variable Display','Segoe UI Variable','Segoe UI',-apple-system,sans-serif;
+    background:var(--bg);
+    color:var(--text);
+    height:100vh;overflow:hidden;
+    font-size:14px;
+    -webkit-font-smoothing:antialiased;
 }
 
+/* ---- Shared icon sizes ---- */
+.app-logo-img { width:24px; height:24px; }
+.tab-img { width:32px; height:32px; }
+.h2-icon { width:20px; height:20px; vertical-align:middle; margin-right:6px; }
+.hdr-icon { width:14px; height:14px; vertical-align:middle; }
+.pill-icon { width:12px; height:12px; vertical-align:middle; }
+.mini-icon { width:20px; height:20px; }
+.btn-icon { width:20px; height:20px; }
+.placeholder-img { width:48px; height:48px; opacity:.35; }
+.sys-head-icon { width:16px; height:16px; vertical-align:middle; }
+.footer-icon { width:12px; height:12px; vertical-align:middle; }
+.cta-icon { width:20px; height:20px; }
+.drv-icon-img { width:24px; height:24px; }
+.spinner-img { width:24px; height:24px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
+
 /* ---- App Shell ---- */
-.app {
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
-}
+.app { display:flex; flex-direction:column; height:100vh; background:var(--mica); }
 
-/* ---- Title Bar ---- */
+/* ---- Title Bar (Win11 style) ---- */
 .titlebar {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 14px 24px 10px;
-    border-bottom: 1px solid var(--border);
-    background: rgba(10,22,40,0.8);
-    backdrop-filter: blur(12px);
-    flex-shrink: 0;
-}
-
-.titlebar-left { display:flex; align-items:center; gap:12px; }
-
-.app-logo {
-    width: 36px; height: 36px;
-    background: linear-gradient(135deg, var(--accent), var(--cyan));
-    border-radius: 10px;
-    display: flex; align-items:center; justify-content:center;
-    box-shadow: 0 2px 12px var(--accent-glow);
-}
-.app-logo svg { width:20px; height:20px; color:white; }
-
-.app-title { display:flex; align-items:baseline; gap:6px; }
-.app-name {
-    font-size: 18px; font-weight: 800;
-    letter-spacing: 2px;
-    background: linear-gradient(90deg, #fff, #94a3b8);
-    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+    display:flex; justify-content:space-between; align-items:center;
+    padding:10px 16px;
+    background:var(--bg);
+    border-bottom:1px solid var(--border);
+    flex-shrink:0;
+    -webkit-app-region:drag;
 }
+.titlebar-left { display:flex; align-items:center; gap:10px; -webkit-app-region:no-drag; }
+.app-title { display:flex; align-items:center; gap:8px; }
+.app-name { font-size:13px; font-weight:600; color:var(--text); letter-spacing:.3px; }
 .app-edition {
-    font-size: 11px; font-weight: 700;
-    color: var(--cyan);
-    background: rgba(6,182,212,0.15);
-    padding: 2px 8px; border-radius: 4px;
-    letter-spacing: 1px;
-}
-
-.sys-status {
-    display:flex; align-items:center; gap:6px;
-    font-size: 12px; color: var(--text-sec);
+    font-size:10px; font-weight:600; color:var(--accent);
+    background:var(--accent-subtle); padding:1px 6px;
+    border-radius:var(--radius-sm); letter-spacing:.5px;
 }
+.sys-status { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-sec); }
 .status-led {
     width:8px; height:8px; border-radius:50%;
-    background: var(--green);
-    box-shadow: 0 0 8px var(--green);
-    animation: pulse 2s ease-in-out infinite;
+    background:var(--green); box-shadow:0 0 6px var(--green);
+    animation:pulse 2.5s ease-in-out infinite;
 }
-@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
+@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
 
-/* ---- Toolbar ---- */
+/* ---- Toolbar (Win11 Tabs / NavigationView) ---- */
 .toolbar {
-    display: flex;
-    gap: 4px;
-    padding: 12px 24px;
-    border-bottom: 1px solid var(--border);
-    background: rgba(10,22,40,0.5);
-    flex-shrink: 0;
+    display:flex; gap:2px; padding:6px 12px;
+    background:var(--mica);
+    border-bottom:1px solid var(--border);
+    flex-shrink:0;
 }
-
 .toolbar-tab {
-    display: flex; flex-direction: column;
-    align-items: center; gap: 6px;
-    padding: 12px 28px;
-    border: 1px solid transparent;
-    border-radius: var(--r);
-    background: transparent;
-    color: var(--text-sec);
-    font-size: 11.5px; font-weight: 600;
-    letter-spacing: 0.5px;
-    text-transform: uppercase;
-    cursor: pointer;
-    transition: all .2s ease;
-    font-family: inherit;
-    position: relative;
+    display:flex; flex-direction:column; align-items:center; gap:4px;
+    padding:8px 20px;
+    border:none; border-radius:var(--radius);
+    background:transparent; color:var(--text-sec);
+    font-size:11px; font-weight:500;
+    cursor:pointer; transition:all .15s ease; font-family:inherit;
+    position:relative;
 }
-
-.toolbar-tab:hover { background: var(--surface); color: var(--text); }
-
+.toolbar-tab:hover { background:var(--surface-hover); color:var(--text); }
 .toolbar-tab.active {
-    background: linear-gradient(180deg, var(--surface-light), var(--surface));
-    border-color: var(--border-accent);
-    color: var(--accent-light);
-    box-shadow: 0 2px 12px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.05);
+    background:var(--surface);
+    color:var(--text);
+    border:1px solid var(--border-light);
+    border-top:1px solid var(--border-top);
+}
+.toolbar-tab.active::after {
+    content:'';
+    position:absolute; bottom:4px; left:50%; transform:translateX(-50%);
+    width:16px; height:3px; border-radius:2px;
+    background:var(--accent);
 }
 
-.tab-icon-wrap {
-    width: 44px; height: 44px;
-    border-radius: 12px;
-    display: flex; align-items:center; justify-content:center;
-    transition: all .2s ease;
-}
-
-.tab-icon-wrap svg { width: 22px; height: 22px; }
-
-.scan-icon-wrap { background: rgba(59,130,246,0.1); color: var(--accent); }
-.drivers-icon-wrap { background: rgba(6,182,212,0.1); color: var(--cyan); }
-.updates-icon-wrap { background: rgba(16,185,129,0.1); color: var(--green); }
-.settings-icon-wrap { background: rgba(245,158,11,0.1); color: var(--yellow); }
-
-.toolbar-tab.active .scan-icon-wrap { background: rgba(59,130,246,0.2); }
-.toolbar-tab.active .drivers-icon-wrap { background: rgba(6,182,212,0.2); }
-.toolbar-tab.active .updates-icon-wrap { background: rgba(16,185,129,0.2); }
-.toolbar-tab.active .settings-icon-wrap { background: rgba(245,158,11,0.2); }
-
-/* ---- Content Area ---- */
-.content-area {
-    flex: 1;
-    overflow: hidden;
-    position: relative;
-}
-
-.tab-page {
-    display: none;
-    height: 100%;
-    animation: fadeUp .3s ease;
-}
-.tab-page.active { display: flex; flex-direction: column; }
-
-@keyframes fadeUp {
-    from { opacity:0; transform:translateY(8px); }
-    to { opacity:1; transform:translateY(0); }
-}
+/* ---- Content ---- */
+.content-area { flex:1; overflow:hidden; position:relative; }
+.tab-page { display:none; height:100%; animation:fadeUp .25s ease; }
+.tab-page.active { display:flex; flex-direction:column; }
+@keyframes fadeUp{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
 
 /* ---- Scan Hero ---- */
 .scan-hero {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 60px;
-    padding: 40px;
+    flex:1; display:flex; align-items:center; justify-content:center;
+    gap:48px; padding:32px;
 }
-
-.scan-illustration { flex-shrink:0; }
-.computer-svg { width: 220px; height: 200px; }
-
-.scan-info { max-width: 380px; }
-.scan-info h2 { font-size: 28px; font-weight: 800; margin-bottom: 10px; letter-spacing:-0.5px; }
-.scan-info p { color: var(--text-sec); font-size: 14px; line-height: 1.6; margin-bottom: 24px; }
-
-.scan-stats {
-    display: flex; gap: 20px;
-    margin-bottom: 28px;
+.scan-illustration { position:relative; flex-shrink:0; }
+.hero-img { width:120px; height:120px; filter:drop-shadow(0 4px 16px rgba(0,0,0,0.3)); }
+.hero-shield {
+    width:48px; height:48px; position:absolute; bottom:-6px; right:-12px;
+    filter:drop-shadow(0 2px 8px rgba(108,203,95,0.4));
+    animation:shieldBob 3s ease-in-out infinite;
 }
+@keyframes shieldBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
 
+.scan-info { max-width:360px; }
+.scan-info h2 { font-size:28px; font-weight:600; margin-bottom:8px; }
+.scan-info p { color:var(--text-sec); font-size:14px; line-height:1.5; margin-bottom:20px; }
+
+.scan-stats { display:flex; gap:10px; margin-bottom:24px; }
 .mini-stat {
-    display: flex; align-items:center; gap: 8px;
-    background: var(--surface);
-    border: 1px solid var(--border);
-    border-radius: var(--r);
-    padding: 10px 16px;
+    display:flex; align-items:center; gap:8px;
+    background:var(--surface); border:1px solid var(--border);
+    border-radius:var(--radius); padding:10px 14px;
 }
-.mini-stat svg { width:16px; height:16px; color: var(--accent-light); }
-.mini-stat span { font-size:20px; font-weight:700; }
-.mini-stat label { font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.5px; }
-.mini-stat.warn svg { color: var(--yellow); }
-.mini-stat.warn span { color: var(--yellow); }
-.mini-stat.danger svg { color: var(--red); }
-.mini-stat.danger span { color: var(--red); }
+.mini-stat span { font-size:18px; font-weight:700; }
+.mini-stat label { font-size:10px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.4px; }
+.mini-stat.warn span { color:var(--yellow); }
+.mini-stat.danger span { color:var(--red); }
 
+/* Win11 accent button */
 .big-scan-btn {
-    display: flex; align-items:center; gap:12px;
-    padding: 16px 48px;
-    background: linear-gradient(135deg, var(--accent-dark), var(--accent));
-    border: none; border-radius: 12px;
-    color: white; font-size: 16px; font-weight: 700;
-    letter-spacing: 2px;
-    cursor: pointer;
-    transition: all .25s ease;
-    font-family: inherit;
-    box-shadow: 0 4px 20px var(--accent-glow);
+    display:flex; align-items:center; gap:10px;
+    padding:12px 40px;
+    background:var(--accent-bg); border:none;
+    border-radius:var(--radius); color:white;
+    font-size:14px; font-weight:600;
+    cursor:pointer; transition:all .15s ease; font-family:inherit;
 }
-.big-scan-btn svg { width:22px; height:22px; }
-.big-scan-btn:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 6px 30px rgba(59,130,246,0.4);
-}
-.big-scan-btn:active { transform:translateY(0); }
+.big-scan-btn:hover { background:var(--accent-hover); }
+.big-scan-btn:active { background:var(--accent-press); transform:scale(0.98); }
 
 /* ---- Step Bar ---- */
 .step-bar {
-    display: flex; align-items:center; justify-content:center;
-    gap: 0;
-    padding: 18px 24px;
-    border-top: 1px solid var(--border);
-    background: rgba(10,22,40,0.5);
-    flex-shrink: 0;
-}
-
-.step {
-    display:flex; align-items:center; gap:8px;
-    font-size: 12px; color: var(--text-dim);
-    font-weight: 500;
-}
-.step.active { color: var(--accent-light); }
-.step.done { color: var(--green); }
-
-.step-num {
-    width:24px; height:24px;
-    border-radius:50%;
-    border: 2px solid var(--text-dim);
     display:flex; align-items:center; justify-content:center;
-    font-size: 11px; font-weight:700;
+    padding:12px 16px;
+    border-top:1px solid var(--border); background:var(--bg);
+    flex-shrink:0;
 }
-.step.active .step-num { border-color: var(--accent); background: var(--accent); color:white; }
-.step.done .step-num { border-color: var(--green); background: var(--green); color:white; }
-
-.step-line {
-    width: 60px; height: 2px;
-    background: var(--text-dim);
-    margin: 0 12px;
-    opacity: 0.3;
+.step { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-dim); font-weight:500; }
+.step.active { color:var(--accent); }
+.step.done { color:var(--green); }
+.step-num {
+    width:22px; height:22px; border-radius:50%;
+    border:2px solid var(--text-dim);
+    display:flex; align-items:center; justify-content:center;
+    font-size:11px; font-weight:600;
 }
+.step.active .step-num { border-color:var(--accent-bg); background:var(--accent-bg); color:white; }
+.step.done .step-num { border-color:var(--green); background:var(--green); color:#000; }
+.step-line { width:48px; height:1px; background:var(--text-dim); margin:0 10px; opacity:.3; }
 
-/* ---- Tab Headers ---- */
+/* ---- Tab Header ---- */
 .tab-header {
-    display: flex; justify-content:space-between; align-items:center;
-    padding: 18px 24px;
-    border-bottom: 1px solid var(--border);
-    flex-shrink: 0;
+    display:flex; justify-content:space-between; align-items:center;
+    padding:14px 20px; border-bottom:1px solid var(--border); flex-shrink:0;
 }
-.tab-header-left h2 {
-    font-size: 16px; font-weight: 700;
-    display:flex; align-items:center; gap:8px;
-}
-.tab-header-left h2 svg { width:20px; height:20px; color:var(--accent-light); }
-.result-count { font-size:12px; color:var(--text-dim); margin-top:3px; }
-.warn-text { color: var(--yellow); }
+.tab-header-left h2 { font-size:16px; font-weight:600; display:flex; align-items:center; }
+.result-count { font-size:12px; color:var(--text-dim); margin-top:2px; }
+.warn-text { color:var(--yellow); }
 
+/* Win11 subtle button */
 .header-btn {
-    display:flex; align-items:center; gap:6px;
-    padding: 8px 18px;
-    background: var(--surface);
-    border: 1px solid var(--border);
-    border-radius: var(--r-sm);
-    color: var(--text-sec);
-    font-size: 12.5px; font-weight:600;
-    cursor:pointer;
-    transition: all .2s ease;
-    font-family: inherit;
-}
-.header-btn svg { width:14px; height:14px; }
-.header-btn:hover { border-color: var(--accent); color: var(--accent-light); background: var(--surface-light); }
-
-/* ---- Filter Strip ---- */
-.filter-strip {
-    display:flex; gap:6px;
-    padding: 12px 24px;
-    border-bottom: 1px solid var(--border);
-    flex-shrink: 0;
-}
-
-.pill {
     display:flex; align-items:center; gap:5px;
-    padding: 5px 14px;
-    border:1px solid var(--border);
-    border-radius:20px;
-    background:transparent;
-    color: var(--text-dim);
-    font-size:12px; font-weight:500;
-    cursor:pointer;
-    transition: all .15s ease;
-    font-family:inherit;
+    padding:6px 14px; background:var(--surface);
+    border:1px solid var(--border); border-radius:var(--radius);
+    color:var(--text-sec); font-size:12px; font-weight:500;
+    cursor:pointer; transition:all .15s ease; font-family:inherit;
 }
-.pill svg { width:12px; height:12px; }
-.pill:hover { border-color: var(--accent); color: var(--accent-light); }
-.pill.active { background:var(--accent); border-color:var(--accent); color:white; }
+.header-btn:hover { background:var(--surface-hover); color:var(--text); }
 
-/* ---- Driver Scroll List ---- */
-.driver-scroll {
-    flex: 1;
-    overflow-y: auto;
-    padding: 12px 24px;
+/* ---- Filter ---- */
+.filter-strip { display:flex; gap:4px; padding:8px 20px; border-bottom:1px solid var(--border); flex-shrink:0; }
+.pill {
+    display:flex; align-items:center; gap:4px;
+    padding:4px 12px; border:1px solid var(--border); border-radius:var(--radius);
+    background:transparent; color:var(--text-dim);
+    font-size:12px; font-weight:500; cursor:pointer;
+    transition:all .12s ease; font-family:inherit;
 }
-.driver-scroll::-webkit-scrollbar { width:5px; }
-.driver-scroll::-webkit-scrollbar-track { background:transparent; }
-.driver-scroll::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
+.pill:hover { background:var(--surface-hover); color:var(--text); }
+.pill.active { background:var(--accent-bg); border-color:var(--accent-bg); color:white; }
 
-/* Placeholder */
-.placeholder-msg {
-    text-align:center;
-    padding: 80px 20px;
-    color: var(--text-dim);
-}
-.placeholder-msg svg { width:48px; height:48px; margin-bottom:12px; opacity:.3; }
-.placeholder-msg p { font-size:14px; }
+/* ---- Driver Scroll ---- */
+.driver-scroll { flex:1; overflow-y:auto; padding:8px 20px; }
+.driver-scroll::-webkit-scrollbar{width:6px}
+.driver-scroll::-webkit-scrollbar-track{background:transparent}
+.driver-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:3px}
+.driver-scroll::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.15)}
 
-/* ---- Driver Row (like Driver Navigator) ---- */
+.placeholder-msg { text-align:center; padding:64px 20px; color:var(--text-dim); }
+.placeholder-msg p { font-size:14px; margin-top:8px; }
+
+/* ---- Driver Row (WinUI3 ListItem) ---- */
 .drv-row {
-    display: flex;
-    align-items: center;
-    gap: 14px;
-    padding: 14px 18px;
-    background: var(--surface);
-    border: 1px solid var(--border);
-    border-radius: var(--r);
-    margin-bottom: 8px;
-    transition: all .2s ease;
+    display:flex; align-items:center; gap:12px;
+    padding:10px 14px;
+    background:var(--card); border:1px solid var(--border);
+    border-radius:var(--radius); margin-bottom:4px;
+    transition:background .12s ease;
 }
-.drv-row:hover { border-color: rgba(59,130,246,0.2); background: var(--surface-hover); }
-.drv-row.outdated { border-left: 3px solid var(--yellow); }
-.drv-row.error { border-left: 3px solid var(--red); }
+.drv-row:hover { background:var(--surface-hover); }
+.drv-row.outdated { border-left:3px solid var(--yellow); }
+.drv-row.error { border-left:3px solid var(--red); }
 
 .drv-icon {
-    width:40px; height:40px;
-    border-radius: 10px;
-    display:flex; align-items:center; justify-content:center;
-    flex-shrink:0;
-    background: rgba(59,130,246,0.1);
-    color: var(--accent-light);
+    width:36px; height:36px; border-radius:var(--radius);
+    display:flex; align-items:center; justify-content:center; flex-shrink:0;
+    background:var(--accent-subtle);
 }
-.drv-icon svg { width:20px; height:20px; }
 
 .drv-info { flex:1; min-width:0; }
-.drv-name {
-    font-size: 13.5px; font-weight:600;
-    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
-}
-.drv-meta { font-size:11.5px; color:var(--text-dim); margin-top:2px; }
+.drv-name { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+.drv-meta { font-size:11px; color:var(--text-dim); margin-top:1px; display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
 
-/* Progress bar per driver */
-.drv-progress {
-    width: 120px;
-    flex-shrink: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 3px;
-}
-.drv-bar {
-    height:4px;
-    background: rgba(255,255,255,0.05);
-    border-radius:2px;
-    overflow:hidden;
-}
-.drv-bar-fill {
-    height:100%;
-    border-radius:2px;
-    transition: width .6s ease;
-}
-.drv-bar-fill.ok { background: var(--green); width:100%; }
-.drv-bar-fill.warn { background: var(--yellow); width:60%; }
-.drv-bar-fill.err { background: var(--red); width:30%; }
-.drv-size { font-size:10px; color:var(--text-dim); text-align:right; }
-
-/* Action buttons per driver */
-.drv-actions {
-    display:flex; gap:6px; flex-shrink:0;
-}
+.drv-progress { width:100px; flex-shrink:0; }
+.drv-bar { height:3px; background:rgba(255,255,255,0.06); border-radius:2px; overflow:hidden; }
+.drv-bar-fill { height:100%; border-radius:2px; transition:width .5s ease; }
+.drv-bar-fill.ok { background:var(--green); width:100%; }
+.drv-bar-fill.warn { background:var(--yellow); width:60%; }
+.drv-bar-fill.err { background:var(--red); width:30%; }
 
+.drv-actions { display:flex; gap:4px; flex-shrink:0; }
 .drv-btn {
-    display:flex; align-items:center; gap:5px;
-    padding: 6px 14px;
-    border-radius: var(--r-sm);
-    border: 1px solid var(--border);
-    background: var(--surface-light);
-    color: var(--text-sec);
-    font-size: 11.5px; font-weight:600;
-    cursor:pointer;
-    transition: all .15s ease;
-    font-family:inherit;
+    display:flex; align-items:center; gap:4px;
+    padding:5px 10px; border-radius:var(--radius);
+    border:1px solid var(--border); background:var(--surface);
+    color:var(--text-sec); font-size:11px; font-weight:500;
+    cursor:pointer; transition:all .12s ease; font-family:inherit;
 }
-.drv-btn svg { width:13px; height:13px; }
-.drv-btn:hover { border-color: var(--accent); color: var(--accent-light); }
+.drv-btn img { width:13px; height:13px; }
+.drv-btn:hover { background:var(--surface-hover); color:var(--text); }
 
 .drv-btn.install-btn {
-    background: linear-gradient(135deg, var(--accent-dark), var(--accent));
-    border-color: var(--accent);
-    color: white;
+    background:var(--accent-bg); border-color:var(--accent-bg); color:white;
 }
-.drv-btn.install-btn:hover { box-shadow: 0 2px 8px var(--accent-glow); }
+.drv-btn.install-btn:hover { background:var(--accent-hover); }
 
-.drv-btn.installed-btn {
-    background: var(--green-bg);
-    border-color: rgba(16,185,129,0.3);
-    color: var(--green);
-    cursor: default;
+.drv-btn.ok-btn {
+    background:var(--green-bg); border-color:rgba(108,203,95,0.2);
+    color:var(--green); cursor:default;
 }
 
-/* Status badges */
 .drv-badge {
-    font-size:10px; font-weight:600;
-    padding: 2px 8px; border-radius:12px;
+    font-size:10px; font-weight:500; padding:1px 6px; border-radius:var(--radius-sm);
     display:inline-flex; align-items:center; gap:3px;
 }
-.drv-badge svg { width:10px; height:10px; }
 .drv-badge.signed { background:var(--green-bg); color:var(--green); }
 .drv-badge.unsigned { background:var(--red-bg); color:var(--red); }
 
-/* ---- CTA Bar (Download All) ---- */
+/* ---- CTA Bar ---- */
 .cta-bar {
-    padding: 16px 24px;
-    border-top: 1px solid var(--border);
-    background: rgba(10,22,40,0.8);
-    display: flex;
-    justify-content: center;
-    flex-shrink: 0;
+    padding:12px 20px; border-top:1px solid var(--border);
+    background:var(--bg); display:flex; justify-content:center; flex-shrink:0;
 }
-
 .cta-btn {
-    display:flex; align-items:center; gap:10px;
-    padding: 14px 48px;
-    background: linear-gradient(135deg, #059669, var(--green));
-    border:none; border-radius:12px;
-    color:white; font-size:15px; font-weight:700;
-    letter-spacing:1px;
-    cursor:pointer;
-    transition: all .25s ease;
-    font-family:inherit;
-    box-shadow: 0 4px 20px rgba(16,185,129,0.3);
+    display:flex; align-items:center; gap:8px;
+    padding:10px 36px;
+    background:var(--accent-bg); border:none;
+    border-radius:var(--radius); color:white;
+    font-size:14px; font-weight:600;
+    cursor:pointer; transition:all .15s ease; font-family:inherit;
 }
-.cta-btn svg { width:20px; height:20px; }
-.cta-btn:hover { transform:translateY(-2px); box-shadow:0 6px 30px rgba(16,185,129,0.4); }
+.cta-btn:hover { background:var(--accent-hover); }
+.cta-btn:active { background:var(--accent-press); transform:scale(.98); }
+.cta-count { background:rgba(255,255,255,0.15); padding:2px 8px; border-radius:var(--radius-sm); font-size:11px; }
 
-.cta-count {
-    background: rgba(255,255,255,0.2);
-    padding: 2px 10px; border-radius:10px;
-    font-size:12px;
-}
-
-/* ---- Update Card ---- */
+/* ---- Update Rows ---- */
 .upd-row {
-    padding: 14px 18px;
-    background: var(--surface);
-    border: 1px solid var(--border);
-    border-radius: var(--r);
-    margin-bottom: 8px;
-    transition: all .2s ease;
+    padding:10px 14px; background:var(--card); border:1px solid var(--border);
+    border-radius:var(--radius); margin-bottom:4px; transition:background .12s ease;
 }
-.upd-row:hover { border-color: rgba(59,130,246,0.2); }
-.upd-row.pending { border-left: 3px solid var(--accent); }
-.upd-row.done { opacity:.5; }
-
-.upd-title { font-size:13.5px; font-weight:600; margin-bottom:5px; }
-.upd-meta {
-    display:flex; gap:14px; flex-wrap:wrap;
-    font-size:11.5px; color:var(--text-dim);
-}
-.upd-tag { display:flex; align-items:center; gap:4px; }
-.upd-tag svg { width:12px; height:12px; }
-.upd-section {
-    font-size:12px; font-weight:700; text-transform:uppercase;
-    letter-spacing:.5px; margin:16px 0 8px;
-    display:flex; align-items:center; gap:6px;
-}
-.upd-section svg { width:14px; height:14px; }
-.upd-section.pend { color:var(--accent-light); }
+.upd-row:hover { background:var(--surface-hover); }
+.upd-row.pending { border-left:3px solid var(--accent-bg); }
+.upd-row.done { opacity:.45; }
+.upd-title { font-size:13px; font-weight:600; margin-bottom:3px; }
+.upd-meta { display:flex; gap:12px; flex-wrap:wrap; font-size:11px; color:var(--text-dim); }
+.upd-tag { display:flex; align-items:center; gap:3px; }
+.upd-tag img { width:12px; height:12px; }
+.upd-section { font-size:12px; font-weight:600; margin:12px 0 6px; display:flex; align-items:center; gap:6px; }
+.upd-section img { width:14px; height:14px; }
+.upd-section.pend { color:var(--accent); }
 .upd-section.inst { color:var(--green); }
 
 /* ---- System Grid ---- */
-.sys-grid {
-    display:grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 14px;
-    padding: 20px 24px;
-    overflow-y: auto;
-    flex: 1;
-}
-
-.sys-card {
-    background: var(--surface);
-    border: 1px solid var(--border);
-    border-radius: var(--r);
-    overflow: hidden;
-}
-
+.sys-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:12px 20px; overflow-y:auto; flex:1; }
+.sys-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
 .sys-card-head {
-    display:flex; align-items:center; gap:8px;
-    padding: 12px 18px;
-    background: rgba(255,255,255,0.02);
-    border-bottom: 1px solid var(--border);
-    font-size: 12px; font-weight:700;
-    text-transform:uppercase; letter-spacing:.5px;
-    color: var(--text-sec);
-}
-.sys-card-head svg { width:16px; height:16px; color:var(--accent-light); }
-
-.sys-row {
-    display:flex; justify-content:space-between;
-    padding: 10px 18px;
-    font-size: 12.5px;
-    border-bottom: 1px solid rgba(255,255,255,0.03);
+    display:flex; align-items:center; gap:6px;
+    padding:10px 14px; background:rgba(255,255,255,0.02);
+    border-bottom:1px solid var(--border);
+    font-size:12px; font-weight:600; color:var(--text-sec);
 }
+.sys-row { display:flex; justify-content:space-between; padding:7px 14px; font-size:12px; border-bottom:1px solid var(--border); }
 .sys-row:last-of-type { border-bottom:none; }
 .sys-row span:first-child { color:var(--text-dim); }
 .sys-row span:last-child { font-weight:600; max-width:55%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
-
-.sys-bar-wrap { padding:8px 18px 14px; }
-.sys-bar { height:6px; background:rgba(255,255,255,0.05); border-radius:3px; overflow:hidden; }
-.sys-bar-fill { height:100%; border-radius:3px; transition:width .8s ease; }
-.ram-bar { background: linear-gradient(90deg, var(--green), #34d399); }
-.disk-bar { background: linear-gradient(90deg, var(--accent), var(--accent-light)); }
+.sys-bar-wrap { padding:6px 14px 10px; }
+.sys-bar { height:4px; background:rgba(255,255,255,0.06); border-radius:2px; overflow:hidden; }
+.sys-bar-fill { height:100%; border-radius:2px; transition:width .8s ease; }
+.ram-bar { background:linear-gradient(90deg,var(--green),#6ccb5f); }
+.disk-bar { background:linear-gradient(90deg,var(--accent-bg),var(--accent)); }
 
 /* ---- Footer ---- */
 .app-footer {
     display:flex; justify-content:space-between; align-items:center;
-    padding: 8px 24px;
-    border-top: 1px solid var(--border);
-    background: rgba(10,22,40,0.6);
-    font-size: 11px; color: var(--text-dim);
-    flex-shrink: 0;
+    padding:6px 16px; border-top:1px solid var(--border);
+    background:var(--bg); font-size:11px; color:var(--text-dim); flex-shrink:0;
 }
-.footer-right { display:flex; gap:4px; }
+.footer-right { display:flex; gap:2px; }
 .footer-btn {
-    display:flex; align-items:center; gap:4px;
-    padding:4px 12px;
-    background:transparent; border:1px solid transparent;
-    border-radius:4px;
-    color:var(--text-dim); font-size:11px;
-    cursor:pointer;
-    font-family:inherit;
-    transition: all .15s ease;
+    display:flex; align-items:center; gap:4px; padding:3px 8px;
+    background:transparent; border:1px solid transparent; border-radius:var(--radius-sm);
+    color:var(--text-dim); font-size:11px; cursor:pointer;
+    font-family:inherit; transition:all .12s ease;
 }
-.footer-btn svg { width:12px; height:12px; }
-.footer-btn:hover { color:var(--text-sec); border-color:var(--border); }
+.footer-btn:hover { color:var(--text-sec); background:var(--surface-hover); }
+.credit-link { color:var(--accent); text-decoration:none; font-weight:600; }
+.credit-link:hover { text-decoration:underline; }
 
 /* ---- Loading ---- */
 .loading-overlay {
     position:fixed; inset:0;
-    background: rgba(8,12,24,0.92);
-    backdrop-filter: blur(6px);
-    display:flex; align-items:center; justify-content:center;
-    z-index:1000;
+    background:rgba(32,32,32,0.85); backdrop-filter:blur(20px);
+    display:flex; align-items:center; justify-content:center; z-index:1000;
 }
 .loading-card {
-    text-align:center;
-    padding: 44px 56px;
-    background: var(--surface);
-    border:1px solid var(--border);
-    border-radius:16px;
-    box-shadow: 0 16px 48px rgba(0,0,0,.5);
-}
-.loading-spinner {
-    width:64px; height:64px;
-    margin:0 auto 20px;
-    position:relative;
+    text-align:center; padding:36px 48px;
+    background:var(--card); border:1px solid var(--border-light);
+    border-radius:var(--radius-lg);
+    box-shadow:0 8px 32px rgba(0,0,0,.5);
 }
+.loading-spinner { width:56px; height:56px; margin:0 auto 16px; position:relative; }
 .spinner-ring {
     position:absolute; inset:0;
     border:3px solid var(--border);
-    border-top-color: var(--accent);
-    border-radius:50%;
-    animation: spin 1s linear infinite;
+    border-top-color:var(--accent-bg);
+    border-radius:50%; animation:spin .9s linear infinite;
 }
-@keyframes spin { to{transform:rotate(360deg)} }
-.spinner-icon { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:var(--accent-light); }
-.spinner-icon svg { width:24px; height:24px; }
-.loading-title { font-size:15px; font-weight:700; margin-bottom:14px; }
-.loading-dots { display:flex; justify-content:center; gap:5px; }
+@keyframes spin{to{transform:rotate(360deg)}}
+.loading-title { font-size:14px; font-weight:600; margin-bottom:10px; }
+.loading-dots { display:flex; justify-content:center; gap:4px; }
 .loading-dots span {
-    width:5px; height:5px; border-radius:50%;
-    background:var(--accent);
-    animation: dotPulse 1.4s ease-in-out infinite;
+    width:4px; height:4px; border-radius:50%; background:var(--accent-bg);
+    animation:dotPulse 1.4s ease-in-out infinite;
 }
 .loading-dots span:nth-child(2){animation-delay:.2s}
 .loading-dots span:nth-child(3){animation-delay:.4s}
-@keyframes dotPulse {
-    0%,80%,100%{opacity:.3;transform:scale(.8)}
-    40%{opacity:1;transform:scale(1)}
-}
+@keyframes dotPulse{0%,80%,100%{opacity:.3;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}