diff --git a/backend.light/backend.light b/backend.light/backend.light
index 6a77d56..db788bc 100755
Binary files a/backend.light/backend.light and b/backend.light/backend.light differ
diff --git a/backend.light/http.go b/backend.light/http.go
index ceaeae3..abd6c26 100644
--- a/backend.light/http.go
+++ b/backend.light/http.go
@@ -49,8 +49,8 @@ func (app *App) RegisterWebRoutes() {
 	display_v := app.Engine.Group("/display-v")
 	display_v.Static("/", "./static/display-v")
 
-	display_m := app.Engine.Group("/display-m")
-	display_m.Static("/", "./static/display-m")
+	mobile := app.Engine.Group("/mobile")
+	mobile.Static("/", "./static/mobile")
 
 	priority := app.Engine.Group("/priority")
 	priority.Static("/", "./static/priority")
diff --git a/backend.light/priority.go b/backend.light/priority.go
index 53ac981..cde07ff 100644
--- a/backend.light/priority.go
+++ b/backend.light/priority.go
@@ -3,6 +3,7 @@ package main
 type Priority struct {
 	Surfers []Surfer `json:"surfers"`
 	Count   int      `json:"count"`
+	Round   Round    `json:"round"`
 }
 
 type Surfer struct {
@@ -10,3 +11,9 @@ type Surfer struct {
 	Color    string `json:"color"`
 	Priority string `json:"priority"`
 }
+
+type Round struct {
+	Name     string `json:"name"`
+	Heat     int    `json:"heat"`
+	Category string `json:"category"`
+}
diff --git a/frontend.light/src/lib/stores/categories.js b/frontend.light/src/lib/stores/categories.js
new file mode 100644
index 0000000..391acf3
--- /dev/null
+++ b/frontend.light/src/lib/stores/categories.js
@@ -0,0 +1,12 @@
+import { readable } from "svelte/store"
+
+export const categories = readable([
+    "Under 12 Women",
+    "Under 12 Men",
+    "Under 14 Women",
+    "Under 14 Men",
+    "Under 16 Women",
+    "Under 16 Men",
+    "Under 18 Women",
+    "Under 18 Men",
+]);
\ No newline at end of file
diff --git a/frontend.light/src/lib/stores/rounds.js b/frontend.light/src/lib/stores/rounds.js
new file mode 100644
index 0000000..8210b74
--- /dev/null
+++ b/frontend.light/src/lib/stores/rounds.js
@@ -0,0 +1,13 @@
+import {readable} from "svelte/store"
+
+export const rounds = readable([
+        "Qualifying",
+        "Opening",
+        "Elimination",
+        "Round of 48",
+        "Round of 32",
+        "Round of 16",
+        "Quarterfinal",
+        "Semifinal",
+        "Final",
+]);
\ No newline at end of file
diff --git a/frontend.light/src/lib/stores/surfers.js b/frontend.light/src/lib/stores/surfers.js
index 5ff51f3..ed9e8ff 100644
--- a/frontend.light/src/lib/stores/surfers.js
+++ b/frontend.light/src/lib/stores/surfers.js
@@ -26,4 +26,10 @@ function createSurfers() {
 
 export const surfers = createSurfers()
 
-export const surfersCount = writable(4)
\ No newline at end of file
+export const surfersCount = writable(4)
+
+export const round = writable({
+    name: '',
+    heat: 0,
+    category: ''
+});
diff --git a/frontend.light/src/routes/display-m/+page.svelte b/frontend.light/src/routes/display-m/+page.svelte
deleted file mode 100644
index 9279557..0000000
--- a/frontend.light/src/routes/display-m/+page.svelte
+++ /dev/null
@@ -1,163 +0,0 @@
-<script>
-	// import { page } from '$app/stores';
-	import { onMount } from 'svelte';
-	import { dev } from '$app/environment';
-	import { surfers, surfersCount } from '$lib/stores/surfers.js';
-
-	if (dev) {
-		console.log('Dev mode');
-	} else {
-		console.log('Not dev mode');
-	}
-
-	const events = ['priority'];
-
-	window.document.body.oncontextmenu = function () {
-		return false;
-	};
-
-	onMount(async () => {
-		if (!dev) {
-			const sse = StartSSE();
-			LoadPriority();
-			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 ${Date.now()}`);
-		};
-
-		sse.addEventListener('priority', (e) => {
-			let Msg = JSON.parse(e.data);
-			console.log(JSON.stringify(Msg));
-			console.log(`surfers: ${Msg.data.surfers}`);
-			$surfers = Msg.data.surfers;
-		});
-
-		return () => {
-			sse.close();
-			console.log(`sse closing ${Date.now()}`);
-		};
-	}
-
-	async function LoadPriority() {
-		const res = await fetch(`/api/priority`);
-		const data = await res.json();
-		console.log(`load priority: ${JSON.stringify(data)}`);
-		$surfers = data.surfers;
-	}
-</script>
-
-<!-- <svelte:window bind:innerWidth={width} /> -->
-
-<div class="header">
-	<!-- <span class="title">{event}</span>
-	<span class="title">{category}</span>
-	{#if !end}
-		<span class="timer">{pad2(min)}:{pad2(sec)}</span>
-	{:else}
-		<span class="timer" style="color: red">{pad2(min)}:{pad2(sec)}</span>
-	{/if}
-	<span class="heat">{heat}</span> -->
-</div>
-
-<ul>
-	{#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>
-
-<!-- {#if width < 768}
-	<div class="footer">
-		<div>waiting for scores</div> -->
-<!-- <div class="score">6.00</div>
-		<div class="score">6.00</div>
-		<div class="score">6.00</div>
-		<div class="score">6.00</div>
-		<div class="score">6.00</div> -->
-<!-- </div>
-{/if} -->
-
-<style>
-	:root {
-		--backColor: #334;
-		--textColor: white;
-		--maxWidth: (100% - 15px);
-	}
-
-	:global(body) {
-		overflow-y: hidden;
-		overflow-x: hidden;
-		margin: 0.2vmin;
-		align-content: center;
-		justify-content: center;
-	}
-
-	.header {
-		background-color: var(--backColor);
-		padding-left: 10px;
-		padding-right: 10px;
-		padding-top: 6px;
-		padding-bottom: 6px;
-		margin-top: 2px;
-		margin-bottom: 2px;
-		width: calc(var(--maxWidth));
-		color: var(--textColor);
-		display: flex;
-		justify-content: space-between;
-	}
-
-	ul {
-		margin: 0;
-		padding: 0;
-	}
-
-	li {
-		display: flex;
-		flex-direction: row;
-		margin-top: 0.2vh;
-		margin-bottom: 0.2vh;
-		overflow: hidden;
-	}
-
-	.priority {
-		text-align: center;
-		align-self: center;
-		min-height: 19vh;
-		min-width: 19vh;
-		margin-right: 0.2vw;
-		background-color: gray;
-	}
-
-	.priority#p {
-		font-size: 16vmin;
-		background-color: lightgray;
-		height: 100%;
-	}
-
-	.priority#n {
-		font-size: 14vmin;
-		height: 100%;
-	}
-
-	.color {
-		width: 100vw;
-	}
-</style>
diff --git a/frontend.light/src/routes/mobile/+page.svelte b/frontend.light/src/routes/mobile/+page.svelte
new file mode 100644
index 0000000..124cef1
--- /dev/null
+++ b/frontend.light/src/routes/mobile/+page.svelte
@@ -0,0 +1,205 @@
+<script>
+	// import { page } from '$app/stores';
+	import { onMount } from 'svelte';
+	import { dev } from '$app/environment';
+	import { surfers, surfersCount, round } from '$lib/stores/surfers.js';
+
+	if (dev) {
+		console.log('Dev mode');
+	} else {
+		console.log('Not dev mode');
+	}
+
+	const events = ['priority'];
+
+	let width;
+
+	let header_height = 8;
+	$: setup_height = (100 - header_height) / $surfersCount - 12 / $surfersCount;
+
+	// $: if ($surfers || $surfersCount || $round) {
+	// 	SaveSession();
+	// }
+
+	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 ${Date.now()}`);
+		};
+
+		sse.addEventListener('priority', (e) => {
+			let Msg = JSON.parse(e.data);
+			console.log(JSON.stringify(Msg));
+			console.log(`surfers: ${Msg.data.surfers}`);
+			$surfers = Msg.data.surfers;
+			$surfersCount = Msg.data.count;
+			$round = Msg.data.round;
+			SaveSession();
+		});
+
+		return () => {
+			sse.close();
+			console.log(`sse closing ${Date.now()}`);
+		};
+	}
+
+	function SaveSession() {
+		window.sessionStorage.setItem('priority', JSON.stringify($surfers));
+		window.sessionStorage.setItem('surfers', JSON.stringify($surfersCount));
+		window.sessionStorage.setItem('round', JSON.stringify($round));
+		console.log(`saved: ${JSON.stringify($surfers)}`);
+	}
+
+	async function LoadPriority() {
+		const res = await fetch(`/api/priority`);
+		const data = await res.json();
+		console.log(`load priority: ${JSON.stringify(data)}`);
+		$surfers = data.surfers;
+		$surfersCount = data.count;
+		$round = data.round;		
+	}
+
+	onMount(async () => {
+		if (!dev) {
+			const sse = StartSSE();
+			let ses = window.sessionStorage.getItem('priority');
+			console.log(`session: ${ses}`);
+			if (ses) {
+				$surfers = JSON.parse(ses);
+				$surfersCount = JSON.parse(window.sessionStorage.getItem('surfers'));
+				$round = JSON.parse(window.sessionStorage.getItem('round'));			
+				console.log(`loaded: ${JSON.stringify($surfers)}`);
+			} else {
+				LoadPriority();
+			}
+			return sse;
+		}
+	});
+
+</script>
+
+<svelte:window bind:innerWidth={width} />
+
+<div class="header" style="--height:{header_height}vh">
+	<span class="title">{$round.name}</span>
+	<span class="title">{$round.category}</span>
+	<span class="heat">Heat {$round.heat}</span>
+</div>
+
+<div class="container">
+	{#each Array($surfersCount) as _, id}
+		<div class="box">
+			<div class="square" style="background-color: {$surfers[id].color}; --height:{setup_height}vh">
+				{#if $surfers[id].priority != ''}
+					<span class="priority">{$surfers[id].priority}</span>
+				{/if}
+			</div>
+			<div class="text">{$surfers[id].name}</div>
+		</div>
+	{/each}
+</div>
+
+<style>
+	:root {
+		--backColor: #334;
+		--textColor: white;
+		--maxWidth: calc(100% - 0);
+	}
+
+	:global(body) {
+		/* overflow-y: hidden; */
+		/* overflow-x: hidden; */
+		margin: 0;
+		align-content: center;
+		justify-content: center;
+		background-color: gray;
+	}
+
+
+	.header {
+		height: var(--height);
+		background-color: var(--backColor);
+		padding-left: 2vw;
+		padding-right: 2vw;
+		/* padding-top: 0.5vmin;
+		padding-bottom: 0.5vmin; */
+		/* margin-top: 0.5vmin; */
+		margin-bottom: 2px;
+		width: var(--maxWidth);
+		color: var(--textColor);
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.header .title {
+		font-size: 4vmin;
+		padding-left: 2vw;
+		padding-right: 2vw;
+		font-weight: bold;
+		flex: 1 1 0;
+		align-self: center;
+	}
+
+	.header .heat {
+		font-size: 4vmin;
+		padding-left: 0;
+		padding-right: 2vw;
+		font-weight: bold;
+		flex: 1 1 auto;
+		align-self: center;
+		text-align: right;
+	}
+
+	.container {
+		background-color: var(--backColor);
+		padding: 2vmin;
+		width: var(--maxWidth);
+		color: var(--textColor);
+	}
+
+	.box {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		padding: 0.5vmin;
+		margin-bottom: 0.5vh;
+	}
+
+	.priority {
+		width: 60%;
+		height: 60%;
+		background-color: white;
+		color: black;
+		border-radius: 50%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 6vmin;
+		font-weight: bold;
+	}
+
+	.square {
+		width: var(--height);
+		height: var(--height);
+		border-radius: 5px;
+		margin-right: 2vw;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		position: relative; /* Per il posizionamento del testo */
+	}
+
+	.text {
+		flex: 1;
+		font-size: 6vmin;
+		font-weight: lighter;
+	}
+
+</style>
diff --git a/frontend.light/src/routes/priority/+page.svelte b/frontend.light/src/routes/priority/+page.svelte
index 467ef86..a5c6544 100644
--- a/frontend.light/src/routes/priority/+page.svelte
+++ b/frontend.light/src/routes/priority/+page.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { onMount } from 'svelte';
-	import { surfers, surfersCount } from '$lib/stores/surfers.js';
+	import { surfers, surfersCount, round } from '$lib/stores/surfers.js';
 	import { colors } from '$lib/stores/colors.js';
 	import { dev } from '$app/environment';
 
@@ -14,10 +14,9 @@
 		return false;
 	};
 
-	const events = ['priority'];
+	// const events = ['priority'];
 
 	$: start = false;
-	// $: surfers_tot = 6;
 
 	let footer_height = 8;
 	$: setup_height = (100 - footer_height) / $surfersCount - 2.2 / $surfersCount;
@@ -26,6 +25,7 @@
 		window.sessionStorage.setItem('priority', JSON.stringify($surfers));
 		window.sessionStorage.setItem('surfers', JSON.stringify($surfersCount));
 		window.sessionStorage.setItem('status', JSON.stringify(start));
+		window.sessionStorage.setItem('round', JSON.stringify($round));
 		console.log(`saved: ${JSON.stringify($surfers)}`);
 	}
 
@@ -172,40 +172,10 @@
 				'Content-Type': 'application/json'
 			}
 		});
+		console.log(`SendPriority: ${res.status} ${res.statusText}`);
 	}
 
-	// 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()}`);
-	// 	};
-	// }
-
-	function DarkMode() {
-		window.document.body.classList.toggle('dark-mode');
-		if (window.document.body.style.backgroundColor === 'black') {
-			window.document.body.style.backgroundColor = 'white';
-		} else {
-			window.document.body.style.backgroundColor = 'black';
-		}
-	}
 </script>
 
 {#if start}
@@ -235,7 +205,7 @@
 						{$surfers[id].priority}
 					</div>
 				{/if}
-				<div class="color" style:background-color={$surfers[id].color}></div>
+				<div class="color" style:background-color={$surfers[id].color}>{$surfers[id].name}</div>
 			</li>
 		{/each}
 	</ul>
@@ -254,23 +224,17 @@
 						style="background-color: {$surfers[id].color};"
 					>
 						{#each $colors as color}
-							<option value={color} style="background-color: {color}"></option>
+							<option value={color} style="background-color: {color}">{color}</option>
 						{/each}
 					</select>
 				</div>
-				<div class="color" style:background-color={$surfers[id].color}></div>
+				<div class="color" style:background-color={$surfers[id].color}><input type="text" bind:value={$surfers[id].name}></div>
 			</li>
 		{/each}
 	</ul>
 	<div
 		class="footer"
 		style="--height:{footer_height}vh"
-		on:contextmenu={(e) => {
-			e.preventDefault();
-			DarkMode();
-		}}
-		role="button"
-		tabindex="-1"
 	>
 		<div class="control">
 			<button class="button" on:click={AddSurfer}>+</button>
@@ -342,7 +306,16 @@
 	}
 
 	.color {
+		display: flex;
 		width: 100vw;
+		justify-content: center;
+		align-items: center;
+		text-align: center;
+	}
+
+	.color input {
+		background-color: lightgray;
+		font-size: 5vmin;
 	}
 
 	.footer {