diff --git a/backend/heats.go b/backend/heats.go
index b62e39f..fb53b03 100644
--- a/backend/heats.go
+++ b/backend/heats.go
@@ -17,7 +17,7 @@ type Surfer struct {
 }
 
 type Heat struct {
-	Name     string   `json:"name"`
+	Round    string   `json:"round"`
 	Category string   `json:"category"`
 	Number   int      `json:"number"`
 	Timer    int      `json:"timer"`
@@ -26,7 +26,7 @@ type Heat struct {
 }
 
 func heatName(heat Heat) string {
-	str := fmt.Sprintf("%s.%d.%s", heat.Name, heat.Number, heat.Category)
+	str := fmt.Sprintf("%s.%d.%s", heat.Round, heat.Number, heat.Category)
 	strings.ReplaceAll(str, " ", "_")
 	return str
 }
diff --git a/backend/http.go b/backend/http.go
index 515a67c..20effca 100644
--- a/backend/http.go
+++ b/backend/http.go
@@ -58,6 +58,9 @@ func (app *App) RegisterWebRoutes() {
 	setup := app.Engine.Group("/setup")
 	setup.Static("/", "./static/setup")
 
+	surfers := app.Engine.Group("/surfers")
+	surfers.Static("/", "./static/surfers")
+
 	draws := app.Engine.Group("/draws")
 	draws.Static("/", "./static/draws")
 
diff --git a/frontend/src/lib/header-setup.svelte b/frontend/src/lib/header-setup.svelte
new file mode 100644
index 0000000..8d51bfd
--- /dev/null
+++ b/frontend/src/lib/header-setup.svelte
@@ -0,0 +1,29 @@
+<script>
+    import  Logo  from "$lib/img/topscorer_logo_web.png"
+
+    export let title = "Setup";
+</script>
+
+<div class="header">
+    <a href="/"><img src={Logo} alt="logo"></a>
+    <span class="title">{title}</span>
+</div>
+
+<style>
+    .header {
+        background-color: black;
+        display:grid;
+        grid-template-columns: auto 2fr;
+        align-items: center;
+    }
+
+    .header img {
+        height: 3rem;
+    }
+
+    .header .title {
+        font-size: 1.5em;
+        color: aliceblue;
+        margin: 0 auto;
+    }
+</style>
\ No newline at end of file
diff --git a/frontend/src/lib/stores/categories.js b/frontend/src/lib/stores/categories.js
new file mode 100644
index 0000000..0442ffa
--- /dev/null
+++ b/frontend/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/src/lib/stores/rounds.js b/frontend/src/lib/stores/rounds.js
new file mode 100644
index 0000000..8210b74
--- /dev/null
+++ b/frontend/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/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 5982b0a..18bc6b1 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -1,2 +1,8 @@
 <h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+
+<a href="priority">priority</a>
+<br>
+<a href="setup">setup</a>
+<br>
+<a href="surfers">surfers</a>
+
diff --git a/frontend/src/routes/setup/+page.svelte b/frontend/src/routes/setup/+page.svelte
index 339846f..1b76397 100644
--- a/frontend/src/routes/setup/+page.svelte
+++ b/frontend/src/routes/setup/+page.svelte
@@ -1,6 +1,9 @@
 <script>
     import { onMount } from 'svelte';
-    import Logo from "$lib/img/topscorer_logo_web.png"
+    import Header from  "$lib/header-setup.svelte"
+    import {categories} from "$lib/stores/categories.js"
+    import {rounds} from "$lib/stores/rounds.js"
+
 
     let colors = [
         "black",
@@ -12,29 +15,6 @@
         "white",
     ];
 
-    let rounds = [
-        "Qualifying",
-        "Opening",
-        "Elimination",
-        "Round of 48",
-        "Round of 32",
-        "Round of 16",
-        "Quarterfinal",
-        "Semifinal",
-        "Final",
-    ];
-
-    let categories = [
-        "Under 12 Women",
-        "Under 12 Men",
-        "Under 14 Women",
-        "Under 14 Men",
-        "Under 16 Women",
-        "Under 16 Men",
-        "Under 18 Women",
-        "Under 18 Men",
-    ];
-
     $: surfers = 2;
 
     $: heats = [];
@@ -62,7 +42,7 @@
 
         heat = {
             number: 1,
-            name: '',
+            round: '',
             category: '',
             timer: 20,
             surfers: surfer_list
@@ -98,7 +78,7 @@
 		console.log(`setHeat: ${id}`);
         console.log(heats[id]);
         heat.number = heats[id].number;
-        heat.name = heats[id].name;
+        heat.round = heats[id].round;
         heat.category = heats[id].category;
         heat.timer = heats[id].timer;
 		surfer_list = heats[id].surfers;
@@ -108,7 +88,7 @@
     function addSurfers() {
         surfers++;
         surfer_list.push({
-            name: '',
+            round: '',
             color: '',
             score: '',
             priority: ''
@@ -132,7 +112,7 @@
             return;
         }
 
-        if(heat.name === '') {
+        if(heat.round === '') {
             alert('Must have a name');
             return;
         }
@@ -200,29 +180,24 @@
 
 </script>
 
-<div class="header">
-    <img class="img" src={Logo} alt="logo">
-    <span class="title" style="color: aliceblue;">Heat setup</span>
-</div>
+<Header title="Heat setup" />
 
 <div class="container">    
     <div class="heat">
-            <label class="label" for="heat">Heat</label>
-            <select name="heat" id="heat" bind:value={heat.name}>
-                {#each rounds as round}
+            <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>
-            <!-- <input bind:value={heat.name} on:change={capitalize(heat, "name")} id="name" type="text"> -->
             <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}
+                {#each $categories as category}
                     <option value={category}>{category}</option>
                 {/each}
             </select>
-            <!-- <input bind:value={heat.category} on:change={capitalize(heat, "category")} id="category" type="text"> -->
             <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>
@@ -263,7 +238,7 @@
 <hr>
 {#each heats as h, id}
     <div class="surfer">
-        <button on:click={() => {setHeat(id);}}>{h.name} {h.number} {h.category}</button> 
+        <button on:click={() => {setHeat(id);}}>{h.round} {h.number} {h.category}</button> 
         <button class="plus" on:click={() => {deleteHeat(id);}}>X</button>
     </div>    
 {/each}
@@ -274,22 +249,6 @@
 
 <style>
 
-    .header {
-        background-color: black;
-        display: grid;
-        grid-template-columns: auto 2fr;
-        align-items: center;
-    }
-
-    .header .img {
-        height: 3rem;
-    }
-
-    .header .title {
-        font-size: 3rem;        
-        margin: 0 auto;
-    }
-
     .container {
         background-color: lightgrey;
    }
diff --git a/frontend/src/routes/surfers/+page.svelte b/frontend/src/routes/surfers/+page.svelte
index fa83763..1cf1361 100644
--- a/frontend/src/routes/surfers/+page.svelte
+++ b/frontend/src/routes/surfers/+page.svelte
@@ -1,27 +1,24 @@
 <script>
-    import  Logo  from "$lib/img/topscorer_logo_web.png"
+    import Header from  "$lib/header-setup.svelte"
+    import {categories} from "$lib/stores/categories.js"
+
+    let surfer = {
+        name: "",
+        category: ""
+    }
+
+
 </script>
 
-<div class="header">
-    <img src={Logo} alt="logo">
-    <span class="title">Surfers Edit</span>
-</div>
+<Header title="Surfer Edit" />
 
-<style>
-    .header {
-        background-color: black;
-        display:grid;
-        grid-template-columns: auto 2fr;
-        align-items: center;
-    }
-
-    .header img {
-        height: 3rem;
-    }
-
-    .header .title {
-        font-size: 1.5em;
-        color: aliceblue;
-        margin: 0 auto;
-    }
-</style>
\ No newline at end of file
+<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