diff --git a/frontend/src/routes/light/h/+page.svelte b/frontend/src/routes/light/h/+page.svelte
index 5aac7b0..6ea5c13 100644
--- a/frontend/src/routes/light/h/+page.svelte
+++ b/frontend/src/routes/light/h/+page.svelte
@@ -1,28 +1,60 @@
 <script>
-	
+	import { dev } from '$app/environment';
+	import { onMount } from 'svelte';
+	import { surfers, surfersCount } from '$lib/stores/surfers.js';
+
+    if (dev) {
+		console.log('Dev mode');
+	} else {
+		console.log('Not dev mode');
+	}
+
+	onMount(async () => {
+        if (!dev) {
+            const sse = StartSSE();
+    		return sse;
+        }
+	});	
+
+	function StartSSE() {
+		let url = '/api/sse?';
+		for (let e in events) {
+			url += `event=${events[e]}&`;
+		}
+		console.log(`sse url: ${url}`);
+		const sse = new EventSource(url);
+		console.log(`subscribe: ${sse}`);
+
+		sse.onopen = () => {
+			console.log(`sse open ${now()}`);
+		};
+
+		sse.addEventListener('priority', (e) => {
+			let Msg = JSON.parse(e.data);
+			console.log(JSON.stringify(Msg));
+		});
+
+
+        return () => {
+			sse.close();
+			console.log(`sse closing ${Date.now()}`);
+		};
+	}
+
+
 </script>
 
 <ul>
-	<li>
-		<div class="priority" id="n">2</div>
-		<div class="color" id="black"></div>
-	</li>
-	<li>
-		<div class="priority" id="p"><a href="/">P</a></div>
-		<div class="color" id="red"></div>
-	</li>
-	<li>
-		<div class="priority" id="n">4</div>
-		<div class="color" id="blue"></div>
-	</li>
-	<li>
-		<div class="priority" id="n">3</div>
-		<div class="color" id="green"></div>
-	</li>
-	<li>
-		<div class="priority" id="n">5</div>
-		<div class="color" id="yellow"></div>
-	</li>
+	{#each Array($surfersCount) as _, id}
+		<li>
+			{#if $surfers[id].priority == 'P'}
+				<div class="priority" id="p">{$surfers[id].priority}</div>
+			{:else}
+				<div class="priority" id="n">{$surfers[id].priority}</div>
+			{/if}
+			<div class="color" style="background-color: {$surfers[id].color}"></div>
+		</li>	
+	{/each}
 </ul>
 
 <style>
@@ -83,19 +115,4 @@
 		width: 100vw;
 	}
 
-	.color#black {
-		background-color: black;
-	}
-	.color#red {
-		background-color: red;
-	}
-	.color#blue {
-		background-color: blue;
-	}
-	.color#green {
-		background-color: green;
-	}
-	.color#yellow {
-		background-color: yellow;
-	}
 </style>
diff --git a/frontend/src/routes/light/v/+page.svelte b/frontend/src/routes/light/v/+page.svelte
index 300583d..fe7e83d 100644
--- a/frontend/src/routes/light/v/+page.svelte
+++ b/frontend/src/routes/light/v/+page.svelte
@@ -1,28 +1,59 @@
 <script>
+    import { dev } from '$app/environment';
+	import { onMount } from 'svelte';
+	import { surfers, surfersCount } from '$lib/stores/surfers.js';
+
+	if (dev) {
+		console.log('Dev mode');
+	} else {
+		console.log('Not dev mode');
+	}
+
+	onMount(async () => {
+        if (!dev) {
+            const sse = StartSSE();
+    		return sse;
+        }
+	});	
+
+	function StartSSE() {
+		let url = '/api/sse?';
+		for (let e in events) {
+			url += `event=${events[e]}&`;
+		}
+		console.log(`sse url: ${url}`);
+		const sse = new EventSource(url);
+		console.log(`subscribe: ${sse}`);
+
+		sse.onopen = () => {
+			console.log(`sse open ${now()}`);
+		};
+
+		sse.addEventListener('priority', (e) => {
+			let Msg = JSON.parse(e.data);
+			console.log(JSON.stringify(Msg));
+		});
+
+
+        return () => {
+			sse.close();
+			console.log(`sse closing ${Date.now()}`);
+		};
+	}
 
 </script>
 
 <div class="wall">
-	<div class="column">
-		<div class="priority" id="n">2</div>
-		<div class="color" id="black"></div>
-	</div>
-	<div class="column">
-		<div class="priority" id="p"><a href="/">P</a></div>
-		<div class="color" id="red"></div>
-	</div>
-	<div class="column">
-		<div class="priority" id="n">4</div>
-		<div class="color" id="blue"></div>
-	</div>
-	<div class="column">
-		<div class="priority" id="n">3</div>
-		<div class="color" id="green"></div>
-	</div>
-	<div class="column">
-		<div class="priority" id="n">5</div>
-		<div class="color" id="yellow"></div>
-	</div>
+	{#each Array($surfersCount) as _, id}
+		<div class="column">
+			{#if $surfers[id].priority == 'P'}
+				<div class="priority" id="p">{$surfers[id].priority}</div>
+			{:else}
+				<div class="priority" id="n">{$surfers[id].priority}</div>
+			{/if}
+			<div class="color" style="background-color: {$surfers[id].color}"></div>
+		</div>
+	{/each}
 </div>
 
 <style>
@@ -30,14 +61,6 @@
 		overflow-y: hidden;
 	}
 
-	a:link,
-	a:hover,
-	a:visited,
-	a:active {
-		text-decoration: none;
-		color: black;
-	}
-
 	.wall {
 		display: flex;
 		margin: 0;
@@ -86,24 +109,8 @@
 		margin-bottom: 0.1vh;
 	}
 
-	.color#black {
-		background-color: black;
-		flex-grow: 1;
-	}
-	.color#red {
-		background-color: red;
-		flex-grow: 1;
-	}
-	.color#blue {
-		background-color: blue;
-		flex-grow: 1;
-	}
-	.color#green {
-		background-color: green;
-		flex-grow: 1;
-	}
-	.color#yellow {
-		background-color: yellow;
+	.color {
 		flex-grow: 1;
 	}
+
 </style>