diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index 73214ba..a85a03c 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -568,16 +568,16 @@ packages:
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
     dev: true
 
-  /acorn-jsx@5.3.2(acorn@8.11.2):
+  /acorn-jsx@5.3.2(acorn@8.11.3):
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
       acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
     dependencies:
-      acorn: 8.11.2
+      acorn: 8.11.3
     dev: true
 
-  /acorn@8.11.2:
-    resolution: {integrity: sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==}
+  /acorn@8.11.3:
+    resolution: {integrity: sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==}
     engines: {node: '>=0.4.0'}
     hasBin: true
     dev: true
@@ -648,7 +648,7 @@ packages:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.4.15
       '@types/estree': 1.0.5
-      acorn: 8.11.2
+      acorn: 8.11.3
       estree-walker: 3.0.3
       periscopic: 3.1.0
     dev: true
@@ -884,8 +884,8 @@ packages:
     resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
-      acorn: 8.11.2
-      acorn-jsx: 5.3.2(acorn@8.11.2)
+      acorn: 8.11.3
+      acorn-jsx: 5.3.2(acorn@8.11.3)
       eslint-visitor-keys: 3.4.3
     dev: true
 
@@ -1478,7 +1478,7 @@ packages:
       '@ampproject/remapping': 2.2.1
       '@jridgewell/sourcemap-codec': 1.4.15
       '@jridgewell/trace-mapping': 0.3.20
-      acorn: 8.11.2
+      acorn: 8.11.3
       aria-query: 5.3.0
       axobject-query: 3.2.1
       code-red: 1.0.4
diff --git a/frontend/src/lib/button.svelte b/frontend/src/lib/button.svelte
new file mode 100644
index 0000000..dfd7f84
--- /dev/null
+++ b/frontend/src/lib/button.svelte
@@ -0,0 +1,16 @@
+<script>
+	export let handleClick;
+	export let title;
+</script>
+
+<button class="button" on:click={handleClick}>{title}</button>
+
+<style>
+	.button {
+		border-radius: 8px;
+		margin-left: 0.2rem;
+		margin-right: 0.2rem;
+		margin-bottom: 8px;
+		margin-top: 8px;
+	}
+</style>
diff --git a/frontend/src/lib/input.svelte b/frontend/src/lib/input.svelte
new file mode 100644
index 0000000..113ee39
--- /dev/null
+++ b/frontend/src/lib/input.svelte
@@ -0,0 +1,31 @@
+<script>
+	export let label;
+	export let value;
+	export let id;
+
+	function capitalize() {
+		value = value.charAt(0).toUpperCase() + value.slice(1);
+		console.log(`element: ${value}`);
+	}
+</script>
+
+<label class="label" for={id}>{label}</label>
+<input bind:value on:change={capitalize} {id} type="text" />
+
+<style>
+	.label {
+		border: 2px solid #555;
+		background-color: gray;
+		border-radius: 8px;
+		padding: 2px;
+	}
+
+	input {
+		font-size: 1.2rem;
+		border-radius: 6px;
+		margin-left: 0.1rem;
+		margin-right: 0.1rem;
+		padding-top: 2px;
+		padding-bottom: 2px;
+	}
+</style>
diff --git a/frontend/src/lib/select.svelte b/frontend/src/lib/select.svelte
new file mode 100644
index 0000000..87444f0
--- /dev/null
+++ b/frontend/src/lib/select.svelte
@@ -0,0 +1,26 @@
+<script>
+	export let label;
+	export let id;
+	export let options;
+	export let value;
+</script>
+
+<label class="label" for={id}>{label}</label>
+<select name={id} {id} bind:value>
+	{#each options as option}
+		<option value={option}>{option}</option>
+	{/each}
+</select>
+
+<style>
+	.label {
+		border: 2px solid #555;
+		background-color: gray;
+		border-radius: 8px;
+		padding: 2px;
+	}
+
+	select {
+		font-size: 1.2rem;
+	}
+</style>
diff --git a/frontend/src/lib/stores/colors.js b/frontend/src/lib/stores/colors.js
new file mode 100644
index 0000000..d844307
--- /dev/null
+++ b/frontend/src/lib/stores/colors.js
@@ -0,0 +1,11 @@
+import { readable } from "svelte/store"
+
+export const colors = readable([
+    "black",
+    "blue",
+    "red",
+    "green",
+    "yellow",
+    "pink",
+    "white",
+]);
\ No newline at end of file
diff --git a/frontend/src/routes/setup/+page.svelte b/frontend/src/routes/setup/+page.svelte
index 1b76397..f08558c 100644
--- a/frontend/src/routes/setup/+page.svelte
+++ b/frontend/src/routes/setup/+page.svelte
@@ -1,65 +1,55 @@
 <script>
-    import { onMount } from 'svelte';
-    import Header from  "$lib/header-setup.svelte"
-    import {categories} from "$lib/stores/categories.js"
-    import {rounds} from "$lib/stores/rounds.js"
+	import { onMount } from 'svelte';
+	import Header from '$lib/header-setup.svelte';
+	import { categories } from '$lib/stores/categories.js';
+	import { rounds } from '$lib/stores/rounds.js';
+	import { colors } from '$lib/stores/colors.js';
 
+	$: surfers = 2;
 
-    let colors = [
-        "black",
-        "blue",
-        "red",
-        "green",
-        "yellow",
-        "pink",
-        "white",
-    ];
+	$: heats = [];
+	let surfer_list = [];
+	$: heat = {};
 
-    $: surfers = 2;
+	resetHeat();
+	loadHeats();
 
-    $: heats = [];
-    let surfer_list = [];
-    $: heat = {};
+	function resetHeat() {
+		surfers = 2;
+		surfer_list = new Array();
+		surfer_list.push({
+			name: '',
+			color: '',
+			score: '',
+			priority: ''
+		});
+		surfer_list.push({
+			name: '',
+			color: '',
+			score: '',
+			priority: ''
+		});
 
-     resetHeat();
-     loadHeats();
-
-    function resetHeat() {
-        surfers = 2;
-        surfer_list = new Array();
-        surfer_list.push({
-            name: '',
-            color: '',
-            score: '',
-            priority: ''
-        });
-        surfer_list.push({
-            name: '',
-            color: '',
-            score: '',
-            priority: ''
-        });
-
-        heat = {
-            number: 1,
-            round: '',
-            category: '',
-            timer: 20,
-            surfers: surfer_list
-        }
-    }
+		heat = {
+			number: 1,
+			round: '',
+			category: '',
+			timer: 20,
+			surfers: surfer_list
+		};
+	}
 
 	async function loadHeats() {
 		const res = await fetch(`/api/loadheats`);
 		const data = await res.json();
-		for  (let i in data) {
+		for (let i in data) {
 			heats[i] = data[i];
-			console.log(`${i} retval: ${JSON.stringify(data[i])}`);	
+			console.log(`${i} retval: ${JSON.stringify(data[i])}`);
 		}
 	}
 
 	async function deleteHeat(id) {
-        const res = await fetch(`/api/deleteheat`, {
+		const res = await fetch(`/api/deleteheat`, {
 			method: 'POST',
 			body: JSON.stringify(heats[id]),
 			headers: {
@@ -67,72 +57,72 @@
 			}
 		});
 		console.log(`retval: ${JSON.stringify(res)}`);
-    
-        console.log(JSON.stringify(heats[id]));
-        resetHeat();
-        loadHeats();
+
+		console.log(JSON.stringify(heats[id]));
+		resetHeat();
+		loadHeats();
 	}
 
 	function setHeat(id) {
-        resetHeat();
+		resetHeat();
 		console.log(`setHeat: ${id}`);
-        console.log(heats[id]);
-        heat.number = heats[id].number;
-        heat.round = heats[id].round;
-        heat.category = heats[id].category;
-        heat.timer = heats[id].timer;
+		console.log(heats[id]);
+		heat.number = heats[id].number;
+		heat.round = heats[id].round;
+		heat.category = heats[id].category;
+		heat.timer = heats[id].timer;
 		surfer_list = heats[id].surfers;
-        surfers = surfer_list.length;
+		surfers = surfer_list.length;
 	}
 
-    function addSurfers() {
-        surfers++;
-        surfer_list.push({
-            round: '',
-            color: '',
-            score: '',
-            priority: ''
-        });
-    }
+	function addSurfers() {
+		surfers++;
+		surfer_list.push({
+			round: '',
+			color: '',
+			score: '',
+			priority: ''
+		});
+	}
 
-    function removeSurfers() { 
-        surfers--; 
-        if (surfers < 2) surfers = 2;
-        surfer_list.pop();
-    }
+	function removeSurfers() {
+		surfers--;
+		if (surfers < 2) surfers = 2;
+		surfer_list.pop();
+	}
 
-    async function save() {
-        if(hasDuplicateColors(surfer_list)) {
-            alert('Colors must be unique');
-            return;
-        }
+	async function save() {
+		if (hasDuplicateColors(surfer_list)) {
+			alert('Colors must be unique');
+			return;
+		}
 
-        if(surfer_list.length < 2) {
-            alert('Must have at least 2 surfers');
-            return;
-        }
+		if (surfer_list.length < 2) {
+			alert('Must have at least 2 surfers');
+			return;
+		}
 
-        if(heat.round === '') {
-            alert('Must have a name');
-            return;
-        }
+		if (heat.round === '') {
+			alert('Must have a name');
+			return;
+		}
 
-        if(heat.category === '') {
-            alert('Must have a category');
-            return;
-        }
+		if (heat.category === '') {
+			alert('Must have a category');
+			return;
+		}
 
-        if(heat.number === '') {
-            alert('Must have a number');
-            return;
-        }
+		if (heat.number === '') {
+			alert('Must have a number');
+			return;
+		}
 
-        if(heat.timer === '') {
-            alert('Must have a timer');
-            return;
-        }
+		if (heat.timer === '') {
+			alert('Must have a timer');
+			return;
+		}
 
-        heat.surfers = surfer_list;
+		heat.surfers = surfer_list;
 
 		const res = await fetch(`/api/saveheat`, {
 			method: 'POST',
@@ -142,105 +132,143 @@
 			}
 		});
 		console.log(`retval: ${JSON.stringify(res)}`);
-    
-        console.log(JSON.stringify(heat));
 
-        resetHeat();
-        loadHeats();
-    }
+		console.log(JSON.stringify(heat));
 
-    function hasDuplicateColors(arr) {
-        const colors = [];
+		resetHeat();
+		loadHeats();
+	}
 
-        console.log(JSON.stringify(arr));
+	function hasDuplicateColors(arr) {
+		const colors = [];
 
-        for(let i = 0; i < arr.length; i++) {
-            const color = arr[i].color;
-            
-            if(colors.includes(color)) {
-                console.log(`duplicate color: ${color}`);
-                return true;
-            }
+		console.log(JSON.stringify(arr));
 
-            colors.push(color);
-        }
+		for (let i = 0; i < arr.length; i++) {
+			const color = arr[i].color;
 
-        return false;
-    }    
+			if (colors.includes(color)) {
+				console.log(`duplicate color: ${color}`);
+				return true;
+			}
 
-    function capitalize(element, elementName) {
-        element[elementName] = element[elementName].charAt(0).toUpperCase() + element[elementName].slice(1); 
-        console.log(`element: ${element[elementName]}`);
-    }
+			colors.push(color);
+		}
 
-    onMount(() => {
-        resetHeat();
-        loadHeats();
-    });
+		return false;
+	}
 
+	function capitalize(element, elementName) {
+		element[elementName] =
+			element[elementName].charAt(0).toUpperCase() + element[elementName].slice(1);
+		console.log(`element: ${element[elementName]}`);
+	}
+
+	onMount(() => {
+		resetHeat();
+		loadHeats();
+	});
 </script>
 
 <Header title="Heat setup" />
 
-<div class="container">    
-    <div class="heat">
-            <label class="label" for="round">Round</label>
-            <select name="round" id="round" bind:value={heat.round}>
-                {#each $rounds as round}
-                    <option value={round}>{round}</option>
-                {/each}
-            </select>
-            <label class="label" for="number">Number</label>
-            <input bind:value={heat.number} id="number" type="number" min="1" max="20">
-            <label class="label" for="category">Category</label>
-            <select name="category" id="category" bind:value={heat.category}>
-                {#each $categories as category}
-                    <option value={category}>{category}</option>
-                {/each}
-            </select>
-            <label class="label" for="timer">Duration</label>
-            <input bind:value={heat.timer} id="timer" type="number" min="5" max="60" step="5"> <!-- on:keydown={(event) => {event.preventDefault()}} -->
-    </div>
-    
-    <hr>
-    <div class="controller">
-        <button class="plus" on:click={() => {addSurfers();}}>+</button>
-        <span class="surfers">{surfers}</span>
-        <button class="plus" on:click={() => {removeSurfers();}}>-</button>    
-    </div>
-    
+<div class="container">
+	<div class="heat">
+		<label class="label" for="round">Round</label>
+		<select name="round" id="round" bind:value={heat.round}>
+			{#each $rounds as round}
+				<option value={round}>{round}</option>
+			{/each}
+		</select>
+		<label class="label" for="number">Number</label>
+		<input bind:value={heat.number} id="number" type="number" min="1" max="20" />
+		<label class="label" for="category">Category</label>
+		<select name="category" id="category" bind:value={heat.category}>
+			{#each $categories as category}
+				<option value={category}>{category}</option>
+			{/each}
+		</select>
+		<label class="label" for="timer">Duration</label>
+		<input bind:value={heat.timer} id="timer" type="number" min="5" max="60" step="5" />
+		<!-- on:keydown={(event) => {event.preventDefault()}} -->
+	</div>
 
-    {#each Array(surfers) as _, surfer}
-        <div class="surfer">
-            <label class="label" for="name{surfer}">Name</label>
-            <input bind:value={surfer_list[surfer].name} on:change={capitalize(surfer_list[surfer], "name")} id="name{surfer}" type="text">
-            <label class="label" for="color{surfer}">Color</label>
-            <select name="color" id="color{surfer}" bind:value={surfer_list[surfer].color} style="background-color: {surfer_list[surfer].color};">
-                {#each colors as color}
-                    <option value={color} style="background-color: {color};">{color}</option>
-                {/each}
-                <!-- <option value="red" style="background-color: red;">Select color</option> -->
-                <!-- <option value="red" style="background-color: red;">Red</option>
+	<hr />
+	<div class="controller">
+		<button
+			class="plus"
+			on:click={() => {
+				addSurfers();
+			}}>+</button
+		>
+		<span class="surfers">{surfers}</span>
+		<button
+			class="plus"
+			on:click={() => {
+				removeSurfers();
+			}}>-</button
+		>
+	</div>
+
+	{#each Array(surfers) as _, surfer}
+		<div class="surfer">
+			<label class="label" for="name{surfer}">Name</label>
+			<input
+				bind:value={surfer_list[surfer].name}
+				on:change={capitalize(surfer_list[surfer], 'name')}
+				id="name{surfer}"
+				type="text"
+			/>
+			<label class="label" for="color{surfer}">Color</label>
+			<select
+				name="color"
+				id="color{surfer}"
+				bind:value={surfer_list[surfer].color}
+				style="background-color: {surfer_list[surfer].color};"
+			>
+				{#each $colors as color}
+					<option value={color} style="background-color: {color};">{color}</option>
+				{/each}
+				<!-- <option value="red" style="background-color: red;">Select color</option> -->
+				<!-- <option value="red" style="background-color: red;">Red</option>
                 <option value="blue" style="background-color: blue;">Blue</option>
                 <option value="green" style="background-color: green;">Green</option>
                 <option value="yellow" style="background-color: yellow;">Yellow</option>
                 <option value="orange" style="background-color: orange;">Orange</option>
                 <option value="violet" style="background-color: violet;">Violet</option>                 -->
-            </select>
-            <!-- <input bind:value={surfer_list[surfer].color} type="color" id="color{surfer}"> -->
-        </div>  
-    {/each}
-      
+			</select>
+			<!-- <input bind:value={surfer_list[surfer].color} type="color" id="color{surfer}"> -->
+		</div>
+	{/each}
 </div>
 
-<button class="plus" on:click={() => {save();}}>SAVE</button>
-<button class="plus" on:click={() => {resetHeat();}}>RESET</button>
-<hr>
+<button
+	class="plus"
+	on:click={() => {
+		save();
+	}}>SAVE</button
+>
+<button
+	class="plus"
+	on:click={() => {
+		resetHeat();
+	}}>RESET</button
+>
+<hr />
 {#each heats as h, id}
-    <div class="surfer">
-        <button on:click={() => {setHeat(id);}}>{h.round} {h.number} {h.category}</button> 
-        <button class="plus" on:click={() => {deleteHeat(id);}}>X</button>
-    </div>    
+	<div class="surfer">
+		<button
+			on:click={() => {
+				setHeat(id);
+			}}>{h.round} {h.number} {h.category}</button
+		>
+		<button
+			class="plus"
+			on:click={() => {
+				deleteHeat(id);
+			}}>X</button
+		>
+	</div>
 {/each}
 
 <!-- <hr> -->
@@ -248,88 +276,84 @@
 <!-- <h2>{JSON.stringify(surfer_list)}</h2> -->
 
 <style>
+	.container {
+		background-color: lightgrey;
+	}
 
-    .container {
-        background-color: lightgrey;
-   }
+	.heat {
+		display: grid;
+		grid-template-columns: auto 2fr auto 2fr;
+		font-size: 1.3rem;
+		margin-top: 8px;
+		margin-bottom: 2px;
+		width: 100%;
+		margin-left: auto;
+		margin-right: auto;
+	}
 
-    .heat {
-        display:grid;
-        grid-template-columns: auto 2fr auto 2fr;
-        font-size: 1.3rem;
-        margin-top: 8px;
-        margin-bottom: 2px;
-        width: 100%;
-        margin-left: auto;
-        margin-right: auto;
-    }
+	.heat input {
+		font-size: 1.2rem;
+		border-radius: 6px;
+		margin-left: 0.1rem;
+		margin-right: 0.1rem;
+		padding-top: 2px;
+		padding-bottom: 2px;
+	}
 
-    .heat input {
-        font-size: 1.2rem;
-        border-radius: 6px;
-        margin-left: 0.1rem;
-        margin-right: 0.1rem;
-        padding-top: 2px;
-        padding-bottom: 2px;
-    }
+	.heat select {
+		font-size: 1.2rem;
+		border-radius: 6px;
+		margin-left: 0.1rem;
+		margin-right: 0.1rem;
+		padding-top: 2px;
+		padding-bottom: 2px;
+	}
 
-    .heat select {
-        font-size: 1.2rem;
-        border-radius: 6px;
-        margin-left: 0.1rem;
-        margin-right: 0.1rem;
-        padding-top: 2px;
-        padding-bottom: 2px;
-    }
+	.label {
+		border: 2px solid #555;
+		background-color: gray;
+		border-radius: 8px;
+		padding: 2px;
+	}
 
-    .label {
-        border: 2px solid #555;
-        background-color: gray;
-        border-radius: 8px;
-        padding: 2px;
-    }
+	.surfer {
+		font-size: 1.3rem;
+		margin-top: 2px;
+		margin-bottom: 2px;
+		/* color: lightcyan; */
+		display: grid;
+		grid-template-columns: auto auto auto auto;
+		width: 100%;
+		margin-left: auto;
+		margin-right: auto;
+		border-radius: 8px;
+	}
 
+	.surfer input {
+		font-size: 1.2rem;
+		border-radius: 6px;
+		margin-left: 0.1rem;
+		margin-right: 0.1rem;
+		padding-top: 2px;
+		padding-bottom: 2px;
+	}
 
-    .surfer {
-        font-size: 1.3rem;
-        margin-top: 2px;
-        margin-bottom: 2px;
-        /* color: lightcyan; */
-        display: grid;
-        grid-template-columns: auto auto auto auto;
-        width: 100%;
-        margin-left: auto;
-        margin-right: auto;
-        border-radius: 8px;
-    }
+	.surfer select {
+		font-size: 1.2rem;
+	}
 
-    .surfer input {
-        font-size: 1.2rem;
-        border-radius: 6px;
-        margin-left: 0.1rem;
-        margin-right: 0.1rem;
-        padding-top: 2px;
-        padding-bottom: 2px;
+	.plus {
+		border-radius: 8px;
+		margin-left: 0.2rem;
+		margin-right: 0.2rem;
+		margin-bottom: 8px;
+		margin-top: 8px;
+	}
 
-    }
-
-    .surfer select { 
-        font-size: 1.2rem;
-    }
-
-    .plus {
-        border-radius: 8px;
-        margin-left: 0.2rem;
-        margin-right: 0.2rem;
-        margin-bottom: 8px;
-        margin-top: 8px;
-    }
-
-    .surfers {
-        border: 1px solid #111;
-        background-color: yellow;
-        border-radius: 8px;
-        padding: 5px;
-    }
-
-</style>
\ No newline at end of file
+	.surfers {
+		border: 1px solid #111;
+		background-color: yellow;
+		border-radius: 8px;
+		padding: 5px;
+	}
+</style>
diff --git a/frontend/src/routes/surfers/+page.svelte b/frontend/src/routes/surfers/+page.svelte
index 1cf1361..b33911c 100644
--- a/frontend/src/routes/surfers/+page.svelte
+++ b/frontend/src/routes/surfers/+page.svelte
@@ -1,24 +1,34 @@
 <script>
-    import Header from  "$lib/header-setup.svelte"
-    import {categories} from "$lib/stores/categories.js"
+	import Header from '$lib/header-setup.svelte';
+	import Button from '$lib/button.svelte';
+	import Select from '$lib/select.svelte';
+	import Input from '$lib/input.svelte';
+	import { categories } from '$lib/stores/categories.js';
 
-    let surfer = {
-        name: "",
-        category: ""
-    }
+	let surfer = {
+		firstname: '',
+		lastname: '',
+		category: ''
+	};
 
+	$: value = '';
 
+	function onclick() {
+		alert('clicked');
+	}
 </script>
 
 <Header title="Surfer Edit" />
 
 <div class="form">
-    <label for="name">Name</label>
-    <input type="text" id="name" bind:value={surfer.name}>
-    <label for="catrgoty">Category</label>
-    <select name="category" id="category">
-        {#each $categories as category}
-        <option value={category}>{category}</option>
-        {/each}
-    </select>
-</div>
\ No newline at end of file
+	<Input label="Firstame" id="firstname" bind:value={surfer.firstname} />
+	<Input label="Lastname" id="lastname" bind:value={surfer.lastname} />
+	<Select label="category" id="category" options={$categories} bind:value={surfer.category} />
+</div>
+
+<Button handleClick={onclick} title="SAVE"></Button>
+<Button handleClick={onclick} title="Reset"></Button>
+
+<hr />
+
+<label for="surfer">{JSON.stringify(surfer)}</label>