diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
new file mode 100644
index 0000000..c745662
--- /dev/null
+++ b/.github/workflows/build.yml
@@ -0,0 +1,21 @@
+name: Build
+
+on:
+    pull_request:
+
+jobs:
+    format:
+        runs-on: ubuntu-latest
+        name: Build Application
+        steps:
+            - name: Checkout
+            - uses: actions/checkout@v3
+
+            - name: Setup
+            - uses: oven-sh/setup-bun@v2
+
+            - name: Install
+            - run: bun install
+
+            - name: Build
+            - run: bun run build
diff --git a/bun.lockb b/bun.lockb
index 2bf232e..79162bd 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index d0fb573..6ab1768 100644
--- a/package.json
+++ b/package.json
@@ -13,22 +13,22 @@
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^3.3.1",
-		"@sveltejs/kit": "^2.8.1",
-		"@sveltejs/vite-plugin-svelte": "^4.0.0",
+		"@sveltejs/kit": "^2.9.0",
+		"@sveltejs/vite-plugin-svelte": "^4.0.2",
 		"@types/eslint": "^9.6.1",
 		"autoprefixer": "^10.4.20",
-		"eslint": "^9.14.0",
+		"eslint": "^9.16.0",
 		"eslint-config-prettier": "^9.1.0",
-		"eslint-plugin-svelte": "^2.46.0",
-		"globals": "^15.12.0",
-		"prettier": "^3.3.3",
-		"prettier-plugin-svelte": "^3.2.8",
-		"prettier-plugin-tailwindcss": "^0.6.8",
-		"svelte": "^5.1.16",
-		"svelte-check": "^4.0.7",
-		"tailwindcss": "^3.4.14",
-		"typescript": "^5.6.3",
-		"typescript-eslint": "^8.14.0",
+		"eslint-plugin-svelte": "^2.46.1",
+		"globals": "^15.13.0",
+		"prettier": "^3.4.1",
+		"prettier-plugin-svelte": "^3.3.2",
+		"prettier-plugin-tailwindcss": "^0.6.9",
+		"svelte": "^5.5.2",
+		"svelte-check": "^4.1.1",
+		"tailwindcss": "^3.4.16",
+		"typescript": "^5.7.2",
+		"typescript-eslint": "^8.17.0",
 		"vite": "^5.4.11"
 	},
 	"dependencies": {
diff --git a/src/lib/types.ts b/src/lib/types.ts
index a4907ba..a18847c 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -49,7 +49,8 @@ export type TeamMatch = {
 	scout_id: string;
 	match_key: string;
 	team_key: string;
-	skill: number;
+	speed: number;
+	awareness: number;
 	notes: string;
 	broke: boolean;
 	died: boolean;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 2a22995..036971a 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,9 +1,36 @@
+<script lang="ts">
+	import { browser } from '$app/environment';
+	import { goto } from '$app/navigation';
+	import { onMount } from 'svelte';
+	let inputname: string = '';
+	onMount(() => {
+		let isLoggedIn = browser && window.localStorage.getItem('username');
+		if (isLoggedIn) {
+			goto('/homepage');
+		}
+	});
+	function login() {
+		browser && window.localStorage.setItem('username', inputname);
+		goto('/homepage');
+	}
+</script>
+
 <div class="flex h-dvh flex-col items-center justify-evenly">
-	<h1 class="text-center font-heading text-5xl font-bold">hiiii :3</h1>
-	<a
-		class="rounded bg-gunmetal px-4 py-2 text-center font-heading text-2xl font-bold text-yolk_yellow"
-		href="/queue"
-	>
-		scout
-	</a>
+	<h1 class="text-text_red text-center text-5xl font-bold">hiiii :3</h1>
+	<div>
+		<input
+			class="bg-btn_grey rounded border-2 border-solid px-4 py-2 text-black"
+			type="text"
+			placeholder="Please enter your name here"
+			bind:value={inputname}
+		/>
+		{#if inputname != ''}
+			<button
+				class="text-l bg-grey rounded border-2 border-solid px-4 py-2 text-center text-white"
+				on:click={login}
+			>
+				Login
+			</button>
+		{/if}
+	</div>
 </div>
diff --git a/src/routes/homepage/+page.svelte b/src/routes/homepage/+page.svelte
new file mode 100644
index 0000000..bab0028
--- /dev/null
+++ b/src/routes/homepage/+page.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { browser } from '$app/environment';
+	import { onMount } from 'svelte';
+	let name: string = (browser && window.localStorage.getItem('name')) || '';
+</script>
+
+<div class="flex h-dvh flex-col items-center justify-evenly">
+	<h1 class="text-text_red text-center text-5xl font-bold">
+		Welcome <br /><span class="text-text_yellow">{name}</span>
+	</h1>
+	<a
+		class="text-text_yellow text-l bg-btn_grey border-text_red rounded border-2 border-solid px-4 py-2 text-center"
+		href="/queue"
+	>
+		Scout
+	</a>
+</div>
diff --git a/src/routes/scout/[team_data]/+page.svelte b/src/routes/scout/[team_data]/+page.svelte
index a1c5420..d8600cb 100644
--- a/src/routes/scout/[team_data]/+page.svelte
+++ b/src/routes/scout/[team_data]/+page.svelte
@@ -6,7 +6,7 @@
 	import type { PageData } from './$types';
 	import { ArrowRight, ArrowLeft } from 'lucide-svelte';
 	import { browser } from '$app/environment';
-	import { io, Socket } from 'socket.io-client';
+	import Postmatch from './Postmatch.svelte';
 
 	const { data }: { data: PageData } = $props();
 
@@ -21,7 +21,8 @@
 	// The furthest index in actions that was made during auto
 	let furthest_auto_index = $state(0);
 
-	let skill = $state(0);
+	let speed = $state(3);
+	let awareness = $state(3);
 	let broke = $state(false);
 	let died = $state(false);
 	let notes = $state('');
@@ -51,7 +52,8 @@
 			scout_id: username,
 			team_key: data.team_key,
 			match_key: data.match_key,
-			skill,
+			speed,
+			awareness,
 			broke,
 			died,
 			notes,
@@ -60,6 +62,7 @@
 		};
 
 		socket.emit('submit_team_match', match);
+		console.log(match);
 	}
 </script>
 
@@ -112,7 +115,10 @@
 			bind:displaying={timelineExtended}
 		/>
 	{:else}
-		<div>Postmatch</div>
-		<button class="mt-auto w-full rounded bg-gunmetal p-2 font-bold">Submit</button>
+		<Postmatch bind:awareness bind:speed bind:broke bind:died bind:notes />
+
+		<button onclick={submit} class="mt-auto w-full rounded bg-gunmetal p-2 font-bold"
+			>Submit</button
+		>
 	{/if}
 </div>
diff --git a/src/routes/scout/[team_data]/Postmatch.svelte b/src/routes/scout/[team_data]/Postmatch.svelte
new file mode 100644
index 0000000..4a7ff96
--- /dev/null
+++ b/src/routes/scout/[team_data]/Postmatch.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+	let {
+		speed = $bindable(),
+		awareness = $bindable(),
+		broke = $bindable(),
+		died = $bindable(),
+		notes = $bindable()
+	}: {
+		speed: number;
+		awareness: number;
+		broke: boolean;
+		died: boolean;
+		notes: string;
+	} = $props();
+</script>
+
+<div class="flex h-dvh flex-col p-3 align-top">
+	<div class="mb-3 flex w-full rounded border-2 border-solid p-4">
+		<h1 class="text-3xl">Post Match</h1>
+	</div>
+	<div class="mb-3 flex w-full content-start rounded border-2 border-solid p-4">
+		<label class="w-full text-3xl"
+			>Driver Skill
+			<div class="flex w-full justify-items-stretch text-base">
+				<div class="w-1/2 p-2 text-center">
+					Quickness: {speed}
+					<input type="range" min="0" max="5" step="1" bind:value={speed} />
+				</div>
+				<div class="w-1/2 p-2 text-center">
+					Field awareness: {awareness}
+					<input type="range" min="0" max="5" step="1" bind:value={awareness} />
+				</div>
+			</div>
+		</label>
+	</div>
+	<div class="mb-3 flex w-full content-start rounded border-2 border-solid p-4">
+		<label class="w-full text-3xl"
+			>Robot
+			<div
+				class="mb-2 mt-2 flex w-full justify-items-stretch rounded border-2 border-solid text-base"
+			>
+				<label class="w-1/2 p-2 text-left"
+					><input
+						type="checkbox"
+						name="robotbroke"
+						class="mr-2"
+						bind:checked={broke}
+					/>Broken?</label
+				>
+			</div>
+			<div class="flex w-full justify-items-stretch rounded border-2 border-solid text-base">
+				<label class="w-1/2 p-2 text-left"
+					><input type="checkbox" name="robotdied" class="mr-2" bind:checked={died} />Died
+					on Field?</label
+				>
+			</div>
+		</label>
+	</div>
+	<div class="mb-3 flex w-full content-start rounded border-2 border-solid p-4">
+		<label class="w-full text-3xl"
+			>Notes
+			<textarea
+				class="mt-2 w-full rounded border-2 border-solid p-4 text-base text-black"
+				bind:value={notes}
+			></textarea>
+		</label>
+	</div>
+</div>