diff --git a/ui/src/views/version/swRegistration.ts b/ui/src/views/version/swRegistration.ts
index 77ac567..00a6c16 100644
--- a/ui/src/views/version/swRegistration.ts
+++ b/ui/src/views/version/swRegistration.ts
@@ -1,12 +1,93 @@
 import { registerSW } from 'virtual:pwa-register'
 
+function showUpdateOverlay() {
+  if (document.getElementById('sw-update-overlay')) return
+
+  const style = document.createElement('style')
+  style.id = 'sw-update-overlay-style'
+  style.textContent = `
+    #sw-update-overlay {
+      position: fixed;
+      inset: 0;
+      z-index: 99999;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: rgba(0, 0, 0, 0.65);
+      backdrop-filter: blur(4px);
+      -webkit-backdrop-filter: blur(4px);
+    }
+    #sw-update-overlay .sw-update-card {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 20px;
+      background: #fff;
+      border-radius: 16px;
+      padding: 40px 56px;
+      box-shadow: 0 8px 40px rgba(0,0,0,0.25);
+      text-align: center;
+      max-width: 360px;
+      width: 90%;
+    }
+    #sw-update-overlay .sw-update-spinner {
+      width: 56px;
+      height: 56px;
+      border: 5px solid #e5e7eb;
+      border-top-color: #6366f1;
+      border-radius: 50%;
+      animation: sw-spin 0.8s linear infinite;
+    }
+    @keyframes sw-spin {
+      to { transform: rotate(360deg); }
+    }
+    #sw-update-overlay .sw-update-title {
+      font-size: 18px;
+      font-weight: 700;
+      color: #1f2937;
+      margin: 0;
+    }
+    #sw-update-overlay .sw-update-desc {
+      font-size: 14px;
+      color: #6b7280;
+      margin: 0;
+    }
+  `
+  document.head.appendChild(style)
+
+  const overlay = document.createElement('div')
+  overlay.id = 'sw-update-overlay'
+  overlay.innerHTML = `
+    <div class="sw-update-card">
+      <div class="sw-update-spinner"></div>
+       <p class="sw-update-title">System Updating</p>
+      <p class="sw-update-desc">Loading new version, please wait...<br/>The page will reload automatically.</p>
+    </div>
+  `
+  document.body.appendChild(overlay)
+}
+
 export const registerServiceWorker = () => {
+  // autoUpdate modunda onNeedRefresh tetiklenmez.
+  // updatefound → yeni SW installing → overlay aç.
+  // skipWaiting: true (workbox config) → controllerchange → autoUpdate reload.
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.ready.then((registration) => {
+      registration.addEventListener('updatefound', () => {
+        const newWorker = registration.installing
+        if (!newWorker) return
+        newWorker.addEventListener('statechange', () => {
+          // Yeni SW kuruldu, aktivasyon aşamasına geçiyor
+          if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
+            showUpdateOverlay()
+          }
+        })
+      })
+    })
+  }
+
   registerSW({
     immediate: true,
-    onNeedRefresh() {
-      console.log('🔔 New version available, please refresh.')
-      window.location.reload()
-    },
     onOfflineReady() {
       console.log('📦 App offline ready')
     },