diff --git a/backend/db.go b/backend/db.go
index f207084..353d75d 100644
--- a/backend/db.go
+++ b/backend/db.go
@@ -66,3 +66,22 @@ func (db *DB) loadHeats() []Heat {
 
 	return heats
 }
+
+func (db *DB) loadSurfers() []Athlete {
+	records, err := db.Db.ReadAll("Surfers")
+	if err != nil {
+		fmt.Printf("read error: %+v", err)
+	}
+
+	athletes := make([]Athlete, 0)
+	for _, record := range records {
+		var athlete Athlete
+		err = json.Unmarshal([]byte(record), &athlete)
+		if err != nil {
+			fmt.Printf("decode error: %+v", err)
+		}
+		athletes = append(athletes, athlete)
+	}
+
+	return athletes
+}
diff --git a/backend/http.go b/backend/http.go
index 20effca..0c9d107 100644
--- a/backend/http.go
+++ b/backend/http.go
@@ -91,4 +91,6 @@ func (app *App) RegisterApiRoutes() {
 	// api.POST("/deleteheat", app.DeleteHeat)
 	api.GET("/loadheats", app.LoadHeats)
 	// api.GET("/runningheat", app.LoadRunning)
+	api.GET("/loadsurfers", app.LoadSurfers)
+	api.POST("/savesurfer", app.SaveSurfer)
 }
diff --git a/backend/surfers.go b/backend/surfers.go
index e04def4..5aceb07 100644
--- a/backend/surfers.go
+++ b/backend/surfers.go
@@ -1,7 +1,53 @@
 package main
 
+import (
+	"fmt"
+	"log"
+	"net/http"
+	"strings"
+
+	"github.com/gin-gonic/gin"
+)
+
 type Athlete struct {
 	Firstname string `json:"firstname"`
 	Lastname  string `json:"lastname"`
 	Category  string `json:"category"`
 }
+
+func surferName(athlete Athlete) string {
+	str := fmt.Sprintf("%s.%s.%s", athlete.Firstname, athlete.Lastname, athlete.Category)
+	str = strings.ReplaceAll(str, " ", "_")
+	return str
+}
+
+func (app *App) LoadSurfers(c *gin.Context) {
+	surfers := app.DB.loadSurfers()
+
+	c.JSON(http.StatusOK, surfers)
+
+	log.Printf("surfers: %+v", surfers)
+}
+
+func (app *App) SaveSurfer(c *gin.Context) {
+	var athlete Athlete
+
+	err := c.ShouldBind(&athlete)
+
+	if err != nil {
+		log.Printf("req error: %+v", err)
+		c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
+		return
+	}
+
+	log.Printf("heat: %+v", athlete)
+
+	err = app.DB.Write("Surfers", surferName(athlete), athlete)
+	if err != nil {
+		log.Printf("set error: %+v", err)
+		c.JSON(http.StatusInternalServerError, gin.H{"status": fmt.Sprintf("Error: %+v", err)})
+		return
+	}
+
+	c.JSON(http.StatusOK, gin.H{"status": "saved"})
+}
diff --git a/frontend/src/routes/setup/+page.svelte b/frontend/src/routes/setup/+page.svelte
index a66453b..8e003ea 100644
--- a/frontend/src/routes/setup/+page.svelte
+++ b/frontend/src/routes/setup/+page.svelte
@@ -176,12 +176,6 @@
 		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();
diff --git a/frontend/src/routes/surfers/+page.svelte b/frontend/src/routes/surfers/+page.svelte
index a189b6d..b52def9 100644
--- a/frontend/src/routes/surfers/+page.svelte
+++ b/frontend/src/routes/surfers/+page.svelte
@@ -1,4 +1,5 @@
 <script>
+	import { onMount } from 'svelte';
 	import Header from '$lib/header-setup.svelte';
 	import Button from '$lib/button.svelte';
 	import Select from '$lib/select.svelte';
@@ -7,14 +8,18 @@
 
 	$: surfers = [];
 
-	let surfer = {
-		firstname: '',
-		lastname: '',
-		category: ''
-	};
+	let surfer = {};
 
 	$: value = '';
 
+	function resetSurfer() {
+		surfer = {
+			firstname: '',
+			lastname: '',
+			category: ''
+		};
+	}
+
 	async function loadSurfers() {
 		const res = await fetch(`/api/loadsurfers`);
 		const data = await res.json();
@@ -24,17 +29,41 @@
 		}
 	}
 
-	function onclick() {
-		alert('clicked');
+	async function save() {
+		if (surfer.firstname === '') {
+			alert('Must have a name');
+			return;
+		}
+
+		if (surfer.lastname === '') {
+			alert('Must have a name');
+			return;
+		}
+
+		if (surfer.category === '') {
+			alert('Must have a category');
+			return;
+		}
+
+		const res = await fetch(`/api/savesurfer`, {
+			method: 'POST',
+			body: JSON.stringify(surfer),
+			headers: {
+				'Content-Type': 'application/json'
+			}
+		});
+
+		console.log(`retval: ${JSON.stringify(res)}`);
+		console.log(JSON.stringify(surfer));
+
+		resetSurfer();
+		loadSurfers();
 	}
 
-	function reset() {
-		surfer = {
-			firstname: '',
-			lastname: '',
-			category: ''
-		};
-	}
+	onMount(() => {
+		resetSurfer();
+		loadSurfers();
+	});
 </script>
 
 <Header title="Surfer Edit" />
@@ -45,8 +74,8 @@
 	<Select label="category" id="category" options={$categories} bind:value={surfer.category} />
 </div>
 
-<Button handleClick={onclick} label="SAVE"></Button>
-<Button handleClick={reset} label="Reset"></Button>
+<Button handleClick={save} label="SAVE"></Button>
+<Button handleClick={resetSurfer} label="Reset"></Button>
 
 <hr />
 
@@ -55,5 +84,5 @@
 <hr />
 
 {#each surfers as s}
-	<label for={s}>{JSON.stringify(s)}</label>
+	<label for={s}>{s.firstname} {s.lastname} - {s.category}</label><br />
 {/each}}