diff --git a/backend.light/backend.light b/backend.light/backend.light
index db788bc..0ac7732 100755
Binary files a/backend.light/backend.light and b/backend.light/backend.light differ
diff --git a/frontend.light/src/routes/priority/+page.svelte b/frontend.light/src/routes/priority/+page.svelte
index 7f1d185..4e6884d 100644
--- a/frontend.light/src/routes/priority/+page.svelte
+++ b/frontend.light/src/routes/priority/+page.svelte
@@ -179,7 +179,20 @@
 
 </script>
 
+<svelte:head>
+	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>	
+</svelte:head>
+
 {#if start}
+<div class="container text-center">
+	<div class="row">
+		<div class="col">
+			<button class="button" on:click={StopHeat}>STOP</button>
+		</div>
+	</div>
+</div>
+
 	<ul>
 		{#each Array($surfersCount) as _, id}
 			<li style="--height:{setup_height}vh">
@@ -210,43 +223,60 @@
 			</li>
 		{/each}
 	</ul>
-	<div class="footer" style="--height:{footer_height}vh">
-		<button class="button" on:click={StopHeat}>STOP</button>
-	</div>
-{:else}
-	<ul>
-		{#each Array($surfersCount) as _, id}
-			<li style="--height:{setup_height}vh">
-				<div class="priority" id="color">
-					<select
-						name="color{id}"
-						{id}
-						bind:value={$surfers[id].color}
-						style="background-color: {$surfers[id].color};"
-					>
-						{#each $colors as color}
-							<option value={color} style="background-color: {color}">{color}</option>
-						{/each}
-					</select>
-				</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"
-	>
-		<div class="control">
-			<button class="button" on:click={AddSurfer}>+</button>
+
+	{:else}
+
+<div class="container text-center">
+	<div class="row">
+		<div class="col">
+			<button class="mybutton" on:click={AddSurfer}>+</button>
 			<button class="display">{$surfersCount}</button>
-			<button class="button" on:click={RemSurfer}>-</button>
+			<button class="mybutton" on:click={RemSurfer}>-</button>
 		</div>
-		<button class="button" on:click={StartHeat}>START</button>
-		<div class="command">
-			<button class="button" on:click={ResetLocalCache}>Reset</button>
+		<div class="col">
+			<button class="mybutton" on:click={StartHeat}>START</button>
+		</div>
+		<div class="col">
+			<button class="mybutton" on:click={ResetLocalCache}>Reset</button>
 		</div>
 	</div>
+</div>
+			
+
+		<table class="table is-hoverable is-striped is-bordered is-fullwidth">
+			<thead>
+				<tr>
+					<th> Name </th>
+					<td> Color </td>
+				</tr>
+			</thead>
+			<tbody>
+				{#each Array($surfersCount) as _, id}
+					<tr>
+						<th><input class="input" type="text" bind:value={$surfers[id].name}/></th>
+						<td>
+							<div class="select">
+								<select
+								name="color{id}"
+								{id}
+								bind:value={$surfers[id].color}
+								style="background-color: {$surfers[id].color};"
+							>
+								{#each $colors as color}
+									<option value={color} style="background-color: {color}">{color}</option>
+								{/each}
+							</select>
+						</div>
+						</td>
+					</tr>
+				{:else}
+					<tr>
+						<th />
+						<td />
+					</tr>
+				{/each}
+			</tbody>
+		</table>
 {/if}
 
 <style>
@@ -319,7 +349,12 @@
 		font-size: 5vmin;
 	}
 
-	.footer {
+	.card {
+		background-color: aquamarine;
+		border-radius: 6%;
+	}
+
+	.myfooter {
 		display: inline-flex;
 		bottom: 0;
 		background-color: darkgrey;
@@ -346,7 +381,7 @@
 		font-size: 2.5vmin;
 	}
 
-	.button {
+	.mybutton {
 		margin-left: 1vmin;
 		margin-right: 1vmin;
 		border-radius: 4px;