diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index f9591273..6f44d206 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -8,12 +8,15 @@ import { DynamicRoutesProvider } from './routes/dynamicRoutesContext'
 import { ComponentProvider } from './contexts/ComponentContext'
 import ComponentRegistryProvider from './contexts/ComponentRegistryContext'
 import { registerServiceWorker } from './views/version/swRegistration'
+import { useEffect } from 'react'
 
 const queryClient = new QueryClient()
 
-registerServiceWorker()
-
 function App() {
+  useEffect(() => {
+    registerServiceWorker()
+  }, [])
+
   return (
     <StoreProvider store={store}>
       <BrowserRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
diff --git a/ui/src/views/version/swRegistration.ts b/ui/src/views/version/swRegistration.ts
index 5d115865..67ad6b7d 100644
--- a/ui/src/views/version/swRegistration.ts
+++ b/ui/src/views/version/swRegistration.ts
@@ -4,6 +4,7 @@ import { registerSW } from 'virtual:pwa-register'
 export const registerServiceWorker = () => {
   registerSW({
     onNeedRefresh() {
+      console.log('New version available, please refresh.')
       const event = new CustomEvent('sw-update-available')
       window.dispatchEvent(event)
     },