diff --git a/frontend/build.mjs b/frontend/build.mjs
index 75a21d6..86504a8 100644
--- a/frontend/build.mjs
+++ b/frontend/build.mjs
@@ -71,6 +71,10 @@ for (const f of fs.readdirSync('js')) {
     fs.copyFileSync(`js/${f}`, `${dist}/js/${f}`)
   }
 }
+// Service Worker doit être servi depuis la racine pour avoir le bon scope
+if (fs.existsSync('js/ws.sw.js')) {
+  fs.copyFileSync('js/ws.sw.js', `${dist}/ws.sw.js`)
+}
 
 // 5. Copy CSS
 for (const f of fs.readdirSync('css')) {
diff --git a/frontend/css/neu.css b/frontend/css/neu.css
index c4e950a..620d7e3 100644
--- a/frontend/css/neu.css
+++ b/frontend/css/neu.css
@@ -78,7 +78,7 @@ input, select, textarea { font-family: inherit; font-size: inherit; }
 
   /* Sidebar */
   --sidebar-width:         240px;
-  --sidebar-width-collapsed: 64px;
+  --sidebar-width-collapsed: 52px;
 
   /* Z-index */
   --z-sidebar:  100;
@@ -215,6 +215,14 @@ input, select, textarea { font-family: inherit; font-size: inherit; }
   border-radius: var(--neu-radius-md);
 }
 
+/* Bouton icône carré taille sm — se déclenche automatiquement si le bouton
+   ne contient qu'un <i> (ex: theme, logout, edit mode) */
+.neu-btn--sm:has(> i:only-child) {
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+}
+
 .neu-btn--ghost {
   background: transparent;
   box-shadow: none;
@@ -423,6 +431,12 @@ input, select, textarea { font-family: inherit; font-size: inherit; }
   width: var(--sidebar-width-collapsed);
 }
 
+.sidebar.collapsed .sidebar-link {
+  justify-content: center;
+  padding-left: 0;
+  padding-right: 0;
+}
+
 .sidebar-header {
   display: flex;
   align-items: center;
@@ -619,3 +633,13 @@ html.is-animating .transition-fade {
     margin-right: var(--sidebar-width-collapsed);
   }
 }
+
+/* ── Couleurs icônes contextuelles ─────────────────────────────────────────── */
+
+/* Navbar : logout, thème, édition */
+.navbar .lnid-power-button    { color: var(--neu-danger);  }
+.navbar .lnid-sun-1            { color: #f59e0b;            }
+.navbar .lnid-moon-half-left-1 { color: #60a5fa;            }
+
+/* Sidebar footer : utilisateur */
+.sidebar-footer .sidebar-icon { color: var(--neu-primary); }
diff --git a/frontend/css/pages.css b/frontend/css/pages.css
index 424d76a..1fb9cde 100644
--- a/frontend/css/pages.css
+++ b/frontend/css/pages.css
@@ -621,6 +621,7 @@
   transition: color .15s;
 }
 .widget-panel-toggle:hover { color: var(--neu-primary); }
+.widget-panel-item.is-visible .widget-panel-toggle { color: var(--neu-success); }
 
 /* Resize handle (coin bas-droit de la tuile, edit mode) */
 .widget-resize-handle {
diff --git a/frontend/dashboard.html b/frontend/dashboard.html
index 7d98c9b..76b29b7 100644
--- a/frontend/dashboard.html
+++ b/frontend/dashboard.html
@@ -25,7 +25,7 @@
   <nav class="sidebar-nav">
     <template x-for="item in navItems" :key="item.id">
       <a class="sidebar-link" :class="{ active: isActive(item.id) }" :href="item.href" @click.prevent="navigate(item.href)">
-        <i class="sidebar-icon" :class="item.iconClass"></i>
+        <i class="sidebar-icon" :class="item.iconClass" :style="iconStyle(item)"></i>
         <span class="sidebar-label" x-show="!collapsed" x-text="t(item.labelKey)"></span>
       </a>
     </template>
diff --git a/frontend/js/app.js b/frontend/js/app.js
index 45dfe22..946d7ec 100644
--- a/frontend/js/app.js
+++ b/frontend/js/app.js
@@ -13,7 +13,7 @@ const WsProxy = {
 
   init() {
     if (!('serviceWorker' in navigator)) return
-    navigator.serviceWorker.register('/js/ws.sw.js')
+    navigator.serviceWorker.register('/ws.sw.js')
       .catch(e => console.warn('[WsProxy] SW registration failed:', e))
     navigator.serviceWorker.addEventListener('message', event => {
       const { channel, type, data, status } = event.data || {}
@@ -253,14 +253,18 @@ document.addEventListener('alpine:init', () => {
     get currentPage() { return Alpine.store('ui').currentPage },
 
     navItems: [
-      { id: 'dashboard', iconClass: 'lnid-dashboard-square-1', labelKey: 'nav.dashboard', href: '/dashboard.html' },
-      { id: 'proxmox',   iconClass: 'lnid-server-1',           labelKey: 'nav.proxmox',   href: '/proxmox.html'   },
-      { id: 'updates',   iconClass: 'lnid-arrow-upward',        labelKey: 'nav.updates',   href: '/updates.html'   },
-      { id: 'terminal',  iconClass: 'lnid-terminal',            labelKey: 'nav.terminal',  href: '/terminal.html'  },
-      { id: 'settings',  iconClass: 'lnid-gear-1',              labelKey: 'nav.settings',  href: '/settings.html'  },
-      { id: 'modules',   iconClass: 'lnid-puzzle',              labelKey: 'nav.modules',   href: '/modules.html'   },
+      { id: 'dashboard', iconClass: 'lnid-dashboard-square-1', iconColor: '#6c8ef4', labelKey: 'nav.dashboard', href: '/dashboard.html' },
+      { id: 'proxmox',   iconClass: 'lnid-server-1',           iconColor: '#22c55e', labelKey: 'nav.proxmox',   href: '/proxmox.html'   },
+      { id: 'updates',   iconClass: 'lnid-arrow-upward',        iconColor: '#f59e0b', labelKey: 'nav.updates',   href: '/updates.html'   },
+      { id: 'terminal',  iconClass: 'lnid-terminal',            iconColor: '#a78bfa', labelKey: 'nav.terminal',  href: '/terminal.html'  },
+      { id: 'settings',  iconClass: 'lnid-gear-1',              iconColor: '#94a3b8', labelKey: 'nav.settings',  href: '/settings.html'  },
+      { id: 'modules',   iconClass: 'lnid-puzzle',              iconColor: '#f472b6', labelKey: 'nav.modules',   href: '/modules.html'   },
     ],
 
+    iconStyle(item) {
+      return this.isActive(item.id) ? '' : `color: ${item.iconColor}`
+    },
+
     isActive(id) {
       return this.currentPage === id
     },
@@ -282,6 +286,7 @@ document.addEventListener('alpine:init', () => {
     get theme() { return Alpine.store('ui').theme },
     get user() { return Alpine.store('auth').user },
     get lang() { return Alpine.store('i18n').lang },
+    set lang(v) { /* x-model a besoin d'un setter ; @change gère la vraie MAJ */ },
 
     toggleTheme() { Alpine.store('ui').toggleTheme() },
     logout() { Alpine.store('auth').logout() },
@@ -657,15 +662,19 @@ document.addEventListener('alpine:init', () => {
     },
 
     async checkTarget(target) {
+      if (target.status !== 'running') return  // container arrêté → pas de SSH possible
       target.checking = true
       target.packages = null
       try {
         const res = await apiFetch(`/api/updates/packages?target=${encodeURIComponent(target.id)}`)
         if (res.ok) {
           target.packages = await res.json()
+        } else {
+          target.packages = []
         }
       } catch(e) {
         console.error('checkTarget', e)
+        target.packages = []
       } finally {
         target.checking = false
       }
diff --git a/frontend/modules.html b/frontend/modules.html
index 863640f..73e123c 100644
--- a/frontend/modules.html
+++ b/frontend/modules.html
@@ -25,7 +25,7 @@
   <nav class="sidebar-nav">
     <template x-for="item in navItems" :key="item.id">
       <a class="sidebar-link" :class="{ active: isActive(item.id) }" :href="item.href" @click.prevent="navigate(item.href)">
-        <i class="sidebar-icon" :class="item.iconClass"></i>
+        <i class="sidebar-icon" :class="item.iconClass" :style="iconStyle(item)"></i>
         <span class="sidebar-label" x-show="!collapsed" x-text="t(item.labelKey)"></span>
       </a>
     </template>
diff --git a/frontend/profile.html b/frontend/profile.html
index 3da7a3d..3668292 100644
--- a/frontend/profile.html
+++ b/frontend/profile.html
@@ -25,7 +25,7 @@
   <nav class="sidebar-nav">
     <template x-for="item in navItems" :key="item.id">
       <a class="sidebar-link" :class="{ active: isActive(item.id) }" :href="item.href" @click.prevent="navigate(item.href)">
-        <i class="sidebar-icon" :class="item.iconClass"></i>
+        <i class="sidebar-icon" :class="item.iconClass" :style="iconStyle(item)"></i>
         <span class="sidebar-label" x-show="!collapsed" x-text="t(item.labelKey)"></span>
       </a>
     </template>
diff --git a/frontend/proxmox.html b/frontend/proxmox.html
index da704e6..0127eb6 100644
--- a/frontend/proxmox.html
+++ b/frontend/proxmox.html
@@ -25,7 +25,7 @@
   <nav class="sidebar-nav">
     <template x-for="item in navItems" :key="item.id">
       <a class="sidebar-link" :class="{ active: isActive(item.id) }" :href="item.href" @click.prevent="navigate(item.href)">
-        <i class="sidebar-icon" :class="item.iconClass"></i>
+        <i class="sidebar-icon" :class="item.iconClass" :style="iconStyle(item)"></i>
         <span class="sidebar-label" x-show="!collapsed" x-text="t(item.labelKey)"></span>
       </a>
     </template>
diff --git a/frontend/settings.html b/frontend/settings.html
index 58b9896..2cd4797 100644
--- a/frontend/settings.html
+++ b/frontend/settings.html
@@ -25,7 +25,7 @@
   <nav class="sidebar-nav">
     <template x-for="item in navItems" :key="item.id">
       <a class="sidebar-link" :class="{ active: isActive(item.id) }" :href="item.href" @click.prevent="navigate(item.href)">
-        <i class="sidebar-icon" :class="item.iconClass"></i>
+        <i class="sidebar-icon" :class="item.iconClass" :style="iconStyle(item)"></i>
         <span class="sidebar-label" x-show="!collapsed" x-text="t(item.labelKey)"></span>
       </a>
     </template>
diff --git a/frontend/terminal.html b/frontend/terminal.html
index 6756c0e..7ca6385 100644
--- a/frontend/terminal.html
+++ b/frontend/terminal.html
@@ -28,7 +28,7 @@
   <nav class="sidebar-nav">
     <template x-for="item in navItems" :key="item.id">
       <a class="sidebar-link" :class="{ active: isActive(item.id) }" :href="item.href" @click.prevent="navigate(item.href)">
-        <i class="sidebar-icon" :class="item.iconClass"></i>
+        <i class="sidebar-icon" :class="item.iconClass" :style="iconStyle(item)"></i>
         <span class="sidebar-label" x-show="!collapsed" x-text="t(item.labelKey)"></span>
       </a>
     </template>
diff --git a/frontend/updates.html b/frontend/updates.html
index 5a75dcc..cf87ce3 100644
--- a/frontend/updates.html
+++ b/frontend/updates.html
@@ -25,7 +25,7 @@
   <nav class="sidebar-nav">
     <template x-for="item in navItems" :key="item.id">
       <a class="sidebar-link" :class="{ active: isActive(item.id) }" :href="item.href" @click.prevent="navigate(item.href)">
-        <i class="sidebar-icon" :class="item.iconClass"></i>
+        <i class="sidebar-icon" :class="item.iconClass" :style="iconStyle(item)"></i>
         <span class="sidebar-label" x-show="!collapsed" x-text="t(item.labelKey)"></span>
       </a>
     </template>