diff --git a/backend/heats.go b/backend/heats.go
index fb53b03..0527830 100644
--- a/backend/heats.go
+++ b/backend/heats.go
@@ -10,10 +10,10 @@ import (
 )
 
 type Surfer struct {
-	Name     string `json:"name"`
-	Color    string `json:"color"`
-	Priority string `json:"priority"`
-	Score    string `json:"score"`
+	Athlete  Athlete `json:"surfer"`
+	Color    string  `json:"color"`
+	Priority string  `json:"priority"`
+	Score    string  `json:"score"`
 }
 
 type Heat struct {
@@ -27,7 +27,7 @@ type Heat struct {
 
 func heatName(heat Heat) string {
 	str := fmt.Sprintf("%s.%d.%s", heat.Round, heat.Number, heat.Category)
-	strings.ReplaceAll(str, " ", "_")
+	str = strings.ReplaceAll(str, " ", "_")
 	return str
 }
 
diff --git a/backend/surfers.go b/backend/surfers.go
new file mode 100644
index 0000000..e04def4
--- /dev/null
+++ b/backend/surfers.go
@@ -0,0 +1,7 @@
+package main
+
+type Athlete struct {
+	Firstname string `json:"firstname"`
+	Lastname  string `json:"lastname"`
+	Category  string `json:"category"`
+}
diff --git a/frontend/src/lib/select.svelte b/frontend/src/lib/select.svelte
index 2ec0257..a7a04c4 100644
--- a/frontend/src/lib/select.svelte
+++ b/frontend/src/lib/select.svelte
@@ -3,14 +3,13 @@
 	export let id;
 	export let options = [];
 	export let value;
-	export let optionStyle = '';
-	export let selectStyle;
+	export let handleSelect;
 </script>
 
 <label class="label" for={id}>{label}</label>
-<select name={id} {id} bind:value style={selectStyle}>
+<select name={id} {id} bind:value on:select={handleSelect}>
 	{#each options as option}
-		<option value={option} style={optionStyle}>{option}</option>
+		<option value={option}>{option}</option>
 	{/each}
 </select>
 
diff --git a/frontend/src/routes/setup/+page.svelte b/frontend/src/routes/setup/+page.svelte
index 0354cac..a66453b 100644
--- a/frontend/src/routes/setup/+page.svelte
+++ b/frontend/src/routes/setup/+page.svelte
@@ -11,6 +11,7 @@
 	import Button from '../../lib/button.svelte';
 
 	$: surfers = 2;
+	$: athletes = [];
 
 	$: heats = [];
 	let surfer_list = [];
@@ -68,6 +69,15 @@
 		loadHeats();
 	}
 
+	async function loadSurfers() {
+		const res = await fetch(`/api/loadsurfers`);
+		const data = await res.json();
+		for (let i in data) {
+			athletes[i] = data[i];
+			console.log(`${i} retval: ${JSON.stringify(data[i])}`);
+		}
+	}
+
 	function setHeat(id) {
 		resetHeat();
 		console.log(`setHeat: ${id}`);
@@ -188,7 +198,13 @@
 		<Number label="Number" min="1" max="20" id="number" bind:value={heat.number} />
 	</div>
 	<div class="category">
-		<Select label="Category" id="category" options={$categories} bind:value={heat.category} />
+		<Select
+			label="Category"
+			id="category"
+			options={$categories}
+			bind:value={heat.category}
+			handleSelect={loadSurfers}
+		/>
 	</div>
 	<div class="duration">
 		<Number label="Duration" id="duration" min="5" max="60" step="5" bind:value={heat.timer} />
@@ -204,7 +220,13 @@
 <div class="surfer">
 	{#each Array(surfers) as _, surfer}
 		<div class="name">
-			<Input label="Name" id="name{surfer}" bind:value={surfer_list[surfer].name} />
+			<Select
+				label="Name"
+				id="name{surfer}"
+				bind:value={surfer_list[surfer].name}
+				options={athletes}
+			/>
+			<!-- <Input label="Name" id="name{surfer}" bind:value={surfer_list[surfer].name} /> -->
 		</div>
 		<div class="color">
 			<Color id="color{surfer}" label="Color" bind:value={surfer_list[surfer].color} />
diff --git a/frontend/src/routes/surfers/+page.svelte b/frontend/src/routes/surfers/+page.svelte
index 202f753..a189b6d 100644
--- a/frontend/src/routes/surfers/+page.svelte
+++ b/frontend/src/routes/surfers/+page.svelte
@@ -3,21 +3,38 @@
 	import Button from '$lib/button.svelte';
 	import Select from '$lib/select.svelte';
 	import Input from '$lib/input.svelte';
-	import Number from '$lib/number.svelte';
 	import { categories } from '$lib/stores/categories.js';
 
+	$: surfers = [];
+
 	let surfer = {
 		firstname: '',
 		lastname: '',
-		category: '',
-		num: '1'
+		category: ''
 	};
 
 	$: value = '';
 
+	async function loadSurfers() {
+		const res = await fetch(`/api/loadsurfers`);
+		const data = await res.json();
+		for (let i in data) {
+			surfers[i] = data[i];
+			console.log(`${i} retval: ${JSON.stringify(data[i])}`);
+		}
+	}
+
 	function onclick() {
 		alert('clicked');
 	}
+
+	function reset() {
+		surfer = {
+			firstname: '',
+			lastname: '',
+			category: ''
+		};
+	}
 </script>
 
 <Header title="Surfer Edit" />
@@ -28,9 +45,15 @@
 	<Select label="category" id="category" options={$categories} bind:value={surfer.category} />
 </div>
 
-<Button handleClick={onclick} title="SAVE"></Button>
-<Button handleClick={onclick} title="Reset"></Button>
+<Button handleClick={onclick} label="SAVE"></Button>
+<Button handleClick={reset} label="Reset"></Button>
 
 <hr />
 
 <label for="surfer">{JSON.stringify(surfer)}</label>
+
+<hr />
+
+{#each surfers as s}
+	<label for={s}>{JSON.stringify(s)}</label>
+{/each}}