diff --git a/backend/http.go b/backend/http.go
index a751878..515a67c 100644
--- a/backend/http.go
+++ b/backend/http.go
@@ -84,7 +84,7 @@ func (app *App) RegisterApiRoutes() {
 	api.GET("/sse", app.Stream.SseHeadersMiddleware(), app.Stream.Stream)
 	// api.POST("/startheat", app.StartHeatTimer)
 	// api.GET("/stopheat", app.StopHeatTimer)
-	// api.POST("/saveheat", app.SaveHeat)
+	api.POST("/saveheat", app.SaveHeat)
 	// api.POST("/deleteheat", app.DeleteHeat)
 	api.GET("/loadheats", app.LoadHeats)
 	// api.GET("/runningheat", app.LoadRunning)
diff --git a/frontend/package.json b/frontend/package.json
index b873e3c..3483a1d 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -10,17 +10,17 @@
 		"format": "prettier --write ."
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/adapter-auto": "^3.0.1",
 		"@sveltejs/adapter-static": "^3.0.1",
-		"@sveltejs/kit": "^2.0.0",
-		"@sveltejs/vite-plugin-svelte": "^3.0.0",
-		"eslint": "^8.28.0",
+		"@sveltejs/kit": "^2.0.6",
+		"@sveltejs/vite-plugin-svelte": "^3.0.1",
+		"eslint": "^8.56.0",
 		"eslint-config-prettier": "^9.1.0",
-		"eslint-plugin-svelte": "^2.30.0",
+		"eslint-plugin-svelte": "^2.35.1",
 		"prettier": "^3.1.1",
 		"prettier-plugin-svelte": "^3.1.2",
-		"svelte": "^4.2.7",
-		"vite": "^5.0.3"
+		"svelte": "^4.2.8",
+		"vite": "^5.0.10"
 	},
 	"type": "module"
 }
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index 838ebb8..73214ba 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -6,25 +6,25 @@ settings:
 
 devDependencies:
   '@sveltejs/adapter-auto':
-    specifier: ^3.0.0
+    specifier: ^3.0.1
     version: 3.0.1(@sveltejs/kit@2.0.6)
   '@sveltejs/adapter-static':
     specifier: ^3.0.1
     version: 3.0.1(@sveltejs/kit@2.0.6)
   '@sveltejs/kit':
-    specifier: ^2.0.0
+    specifier: ^2.0.6
     version: 2.0.6(@sveltejs/vite-plugin-svelte@3.0.1)(svelte@4.2.8)(vite@5.0.10)
   '@sveltejs/vite-plugin-svelte':
-    specifier: ^3.0.0
+    specifier: ^3.0.1
     version: 3.0.1(svelte@4.2.8)(vite@5.0.10)
   eslint:
-    specifier: ^8.28.0
+    specifier: ^8.56.0
     version: 8.56.0
   eslint-config-prettier:
     specifier: ^9.1.0
     version: 9.1.0(eslint@8.56.0)
   eslint-plugin-svelte:
-    specifier: ^2.30.0
+    specifier: ^2.35.1
     version: 2.35.1(eslint@8.56.0)(svelte@4.2.8)
   prettier:
     specifier: ^3.1.1
@@ -33,10 +33,10 @@ devDependencies:
     specifier: ^3.1.2
     version: 3.1.2(prettier@3.1.1)(svelte@4.2.8)
   svelte:
-    specifier: ^4.2.7
+    specifier: ^4.2.8
     version: 4.2.8
   vite:
-    specifier: ^5.0.3
+    specifier: ^5.0.10
     version: 5.0.10
 
 packages:
@@ -807,7 +807,7 @@ packages:
       postcss: 8.4.32
       postcss-load-config: 3.1.4(postcss@8.4.32)
       postcss-safe-parser: 6.0.0(postcss@8.4.32)
-      postcss-selector-parser: 6.0.13
+      postcss-selector-parser: 6.0.14
       semver: 7.5.4
       svelte: 4.2.8
       svelte-eslint-parser: 0.33.1(svelte@4.2.8)
@@ -1290,8 +1290,8 @@ packages:
       postcss: 8.4.32
     dev: true
 
-  /postcss-selector-parser@6.0.13:
-    resolution: {integrity: sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==}
+  /postcss-selector-parser@6.0.14:
+    resolution: {integrity: sha512-65xXYsT40i9GyWzlHQ5ShZoK7JZdySeOozi/tz2EezDo6c04q6+ckYMeoY7idaie1qp2dT5KoYQ2yky6JuoHnA==}
     engines: {node: '>=4'}
     dependencies:
       cssesc: 3.0.0
diff --git a/frontend/src/lib/icons/login.svelte b/frontend/src/lib/icons/login.svelte
new file mode 100644
index 0000000..1b0b5f4
--- /dev/null
+++ b/frontend/src/lib/icons/login.svelte
@@ -0,0 +1,24 @@
+<script>
+    // import { Button, Tooltip } from 'flowbite-svelte';
+
+	export let pill = false;
+	export let color = 'blue';
+	export let size = 'sm';
+    export let href = "/login";
+</script>
+
+<button size={size} class="!p-2" {pill} color={color} href={href}>
+    <svg
+        class="w-6 h-6 text-gray-100 dark:text-white"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+    >
+        <path
+            fill="currentColor"
+            d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z"
+        />
+    </svg>
+</button>
+<!-- <Tooltip id="type-auto" arrow={false} type="custom" defaultClass="" class="p-1 text-sm bg-blue-700 text-gray-100" >Login</Tooltip> -->
diff --git a/frontend/src/lib/icons/priority.svelte b/frontend/src/lib/icons/priority.svelte
new file mode 100644
index 0000000..7423c56
--- /dev/null
+++ b/frontend/src/lib/icons/priority.svelte
@@ -0,0 +1,43 @@
+<script>
+    // import { Button, Tooltip } from 'flowbite-svelte';
+
+
+	export let pill = false;
+	export let color = 'blue';
+	export let size = 'sm';
+</script>
+
+<button {size} class="!p-2" {pill} {color}>
+	<svg class="w-6 h-6" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+		<path
+			fill="currentColor"
+			d="m62.578 41.956 -28.444 21.333a3.556 3.556 0 0 1 -4.267 0l-28.444 -21.333a3.637 3.637 0 0 1 -1.244 -3.982A3.605 3.605 0 0 1 3.556 35.556h7.111V32a3.566 3.566 0 0 1 3.556 -3.556h35.556a3.566 3.566 0 0 1 3.556 3.556v3.556h7.111a3.552 3.552 0 0 1 2.133 6.4Z"
+		/>
+		<path
+			fill="currentColor"
+			x="3"
+			y="4"
+			width="12"
+			height="2"
+			rx="1"
+			ry="1"
+			d="M14.222 14.222H49.778A3.556 3.556 0 0 1 53.333 17.778V17.778A3.556 3.556 0 0 1 49.778 21.333H14.222A3.556 3.556 0 0 1 10.667 17.778V17.778A3.556 3.556 0 0 1 14.222 14.222z"
+		/>
+		<path
+			fill="currentColor"
+			x="3"
+			width="12"
+			height="2"
+			rx="1"
+			ry="1"
+			d="M14.222 0H49.778A3.556 3.556 0 0 1 53.333 3.556V3.556A3.556 3.556 0 0 1 49.778 7.111H14.222A3.556 3.556 0 0 1 10.667 3.556V3.556A3.556 3.556 0 0 1 14.222 0z"
+		/></svg
+	>
+</button>
+<!-- <Tooltip
+	id="type-auto"
+	arrow={false}
+	type="custom"
+	defaultClass=""
+	class="p-1 text-sm bg-blue-700 text-gray-100">Priority</Tooltip
+> -->
diff --git a/frontend/src/lib/icons/score.svelte b/frontend/src/lib/icons/score.svelte
new file mode 100644
index 0000000..ddf6f62
--- /dev/null
+++ b/frontend/src/lib/icons/score.svelte
@@ -0,0 +1,32 @@
+<script>
+//    import { Button, Tooltip } from 'flowbite-svelte';
+
+
+    export let pill = false;
+    export let color = 'blue';
+    export let size = 'sm';   
+</script>
+
+<button size={size} class="!p-2" {pill} color={color}>
+    <svg
+        class="w-6 h-6"
+        version="1.1"
+        id="Layer_1"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        x="0px"
+        y="0px"
+        viewBox="0 0 455 455"
+        style="enable-background:new 0 0 455 455;"
+        xml:space="preserve"
+        fill="currentColor"
+    >
+        <g>
+            <rect x="162" y="323" width="293" height="132" />
+            <rect x="162" y="161" width="293" height="132" />
+            <rect width="455" height="131" />
+            <rect y="161" width="132" height="294" />
+        </g>
+    </svg>
+</button>
+<!-- <Tooltip id="type-auto" arrow={false} type="custom" defaultClass="" class="p-1 text-sm bg-blue-700 text-gray-100" >Score</Tooltip> -->
diff --git a/frontend/src/lib/img/topscorer_logo_alpha.png b/frontend/src/lib/img/topscorer_logo_alpha.png
new file mode 100755
index 0000000..b05ca7f
Binary files /dev/null and b/frontend/src/lib/img/topscorer_logo_alpha.png differ
diff --git a/frontend/src/lib/img/topscorer_logo_icon.png b/frontend/src/lib/img/topscorer_logo_icon.png
new file mode 100644
index 0000000..8daceda
Binary files /dev/null and b/frontend/src/lib/img/topscorer_logo_icon.png differ
diff --git a/frontend/src/lib/img/topscorer_logo_web.png b/frontend/src/lib/img/topscorer_logo_web.png
new file mode 100755
index 0000000..848b76a
Binary files /dev/null and b/frontend/src/lib/img/topscorer_logo_web.png differ
diff --git a/frontend/src/routes/priority/+page.svelte b/frontend/src/routes/priority/+page.svelte
index 93bb68e..582bdfe 100644
--- a/frontend/src/routes/priority/+page.svelte
+++ b/frontend/src/routes/priority/+page.svelte
@@ -262,8 +262,11 @@
 	}
 
 	.header {
-		/* padding: 15px; */
-		height: 10vh;
+		display: grid;
+		grid-template-columns: auto 1fr auto;
+		align-items: center;
+		justify-content: center;
+		/* height: 10vh; */
 		background-color: var(--backColor);
 		padding-left: 10px;
 		padding-right: 10px;
@@ -273,9 +276,9 @@
 		margin-bottom: 2px;
 		width: calc(var(--maxWidth));
 		color: var(--textColor);
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
+		/* display: flex; */
+		/* justify-content: space-between; */
+		/* align-items: center; */
 	}
 
 	.header .timer {
@@ -289,7 +292,7 @@
 	}
 
 	.header .button {
-		height: 60%;
+		height: 40%;
 		align-items: center;
 		background-color: yellow;
 		border-radius: 10%;
diff --git a/frontend/src/routes/setup/+page.svelte b/frontend/src/routes/setup/+page.svelte
new file mode 100644
index 0000000..339846f
--- /dev/null
+++ b/frontend/src/routes/setup/+page.svelte
@@ -0,0 +1,376 @@
+<script>
+    import { onMount } from 'svelte';
+    import Logo from "$lib/img/topscorer_logo_web.png"
+
+    let colors = [
+        "black",
+        "blue",
+        "red",
+        "green",
+        "yellow",
+        "pink",
+        "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 = [];
+    let surfer_list = [];
+    $: heat = {};
+
+     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,
+            name: '',
+            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) {
+			heats[i] = data[i];
+			console.log(`${i} retval: ${JSON.stringify(data[i])}`);	
+		}
+	}
+
+	async function deleteHeat(id) {
+        const res = await fetch(`/api/deleteheat`, {
+			method: 'POST',
+			body: JSON.stringify(heats[id]),
+			headers: {
+				'Content-Type': 'application/json'
+			}
+		});
+		console.log(`retval: ${JSON.stringify(res)}`);
+    
+        console.log(JSON.stringify(heats[id]));
+        resetHeat();
+        loadHeats();
+	}
+
+	function setHeat(id) {
+        resetHeat();
+		console.log(`setHeat: ${id}`);
+        console.log(heats[id]);
+        heat.number = heats[id].number;
+        heat.name = heats[id].name;
+        heat.category = heats[id].category;
+        heat.timer = heats[id].timer;
+		surfer_list = heats[id].surfers;
+        surfers = surfer_list.length;
+	}
+
+    function addSurfers() {
+        surfers++;
+        surfer_list.push({
+            name: '',
+            color: '',
+            score: '',
+            priority: ''
+        });
+    }
+
+    function removeSurfers() { 
+        surfers--; 
+        if (surfers < 2) surfers = 2;
+        surfer_list.pop();
+    }
+
+    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(heat.name === '') {
+            alert('Must have a name');
+            return;
+        }
+
+        if(heat.category === '') {
+            alert('Must have a category');
+            return;
+        }
+
+        if(heat.number === '') {
+            alert('Must have a number');
+            return;
+        }
+
+        if(heat.timer === '') {
+            alert('Must have a timer');
+            return;
+        }
+
+        heat.surfers = surfer_list;
+
+		const res = await fetch(`/api/saveheat`, {
+			method: 'POST',
+			body: JSON.stringify(heat),
+			headers: {
+				'Content-Type': 'application/json'
+			}
+		});
+		console.log(`retval: ${JSON.stringify(res)}`);
+    
+        console.log(JSON.stringify(heat));
+
+        resetHeat();
+        loadHeats();
+    }
+
+    function hasDuplicateColors(arr) {
+        const colors = [];
+
+        console.log(JSON.stringify(arr));
+
+        for(let i = 0; i < arr.length; i++) {
+            const color = arr[i].color;
+            
+            if(colors.includes(color)) {
+                console.log(`duplicate color: ${color}`);
+                return true;
+            }
+
+            colors.push(color);
+        }
+
+        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>
+
+<div class="header">
+    <img class="img" src={Logo} alt="logo">
+    <span class="title" style="color: aliceblue;">Heat setup</span>
+</div>
+
+<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}
+                    <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}
+                    <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>
+    
+    <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}
+      
+</div>
+
+<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.name} {h.number} {h.category}</button> 
+        <button class="plus" on:click={() => {deleteHeat(id);}}>X</button>
+    </div>    
+{/each}
+
+<!-- <hr> -->
+
+<!-- <h2>{JSON.stringify(surfer_list)}</h2> -->
+
+<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;
+   }
+
+    .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 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;
+    }
+
+
+    .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 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