diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index e840538..2607cac 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -1,25 +1,30 @@
 <script>
 	import BottomAppBar from '$lib/components/BottomAppBar.svelte';
+	import Toast from '$lib/components/Toast.svelte';
 	import { onMount } from 'svelte';
 
+	let node;
+	
 	onMount(() => {
 		if ('serviceWorker' in navigator) {
 			addEventListener('load', function () {
 				navigator.serviceWorker.register('/service-worker.js');
 			});
 
-			navigator.serviceWorker.addEventListener('message', (event) => {
-				console.log(`The service worker sent me a message: ${event.data}`);
-				alert('You can use the app offline');
+			const channel = new BroadcastChannel('sw-messages');
+			channel.addEventListener('message', (event) => {
+				new Toast({ target: node });
 			});
 
 			navigator.serviceWorker.ready.then((registration) => {
+				console.log(registration);
 				console.log('registered service worker');
 			});
 		}
 	});
 </script>
 
+<div bind:this={node}></div>
 <slot />
 <footer>
 	<BottomAppBar />