diff --git a/src/lib/components/Timeline.svelte b/src/lib/components/Timeline.svelte
index 1a6fd35..20cc391 100644
--- a/src/lib/components/Timeline.svelte
+++ b/src/lib/components/Timeline.svelte
@@ -42,7 +42,9 @@
 </script>
 
 <button
-	class="fixed inset-0 transition-all {displaying ? 'backdrop-blur' : 'translate-y-full'}"
+	class="fixed inset-0 transition-all will-change-transform {displaying
+		? 'backdrop-blur'
+		: 'translate-y-full'}"
 	onclick={(e: Event) => {
 		if (e.target === e.currentTarget && is_valid_timeline) {
 			displaying = false;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 9a688e6..1adbde7 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -26,13 +26,12 @@
 			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}
+		<button
+			class="text-l rounded bg-gunmetal px-4 py-2 text-center
+            {inputname === '' ? 'pointer-events-none text-white/50' : ''}"
+			on:click={login}
+		>
+			Login
+		</button>
 	</div>
 </div>
diff --git a/src/routes/homepage/+page.svelte b/src/routes/homepage/+page.svelte
index 59b7593..78f8b10 100644
--- a/src/routes/homepage/+page.svelte
+++ b/src/routes/homepage/+page.svelte
@@ -7,16 +7,10 @@
 	<h1 class="text-center text-5xl font-bold">
 		Welcome, <br /><span class="text-yellow-400">{username}</span>
 	</h1>
-	<a
-		class="w-9/12 rounded-full border-4 border-solid p-4 pb-16 pt-16 text-center text-2xl"
-		href="/queue"
-	>
-		Scout
-	</a>
-	<a
-		class="w-9/12 rounded-full border-4 border-solid p-4 pb-16 pt-16 text-center text-2xl"
-		href="/manual_scout"
-	>
-		Manual Scout
-	</a>
+	<div class="flex flex-col gap-4">
+		<a class="w-full rounded bg-gunmetal p-4 text-center text-2xl" href="/queue"> Scout </a>
+		<a class="w-full rounded bg-gunmetal p-4 text-center text-2xl" href="/manual_scout">
+			Manual Scout
+		</a>
+	</div>
 </div>
diff --git a/src/routes/manual_scout/+page.svelte b/src/routes/manual_scout/+page.svelte
index 0087f0f..aedb6ba 100644
--- a/src/routes/manual_scout/+page.svelte
+++ b/src/routes/manual_scout/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { ArrowLeft } from 'lucide-svelte';
 	import { goto } from '$app/navigation';
 
 	let match_key: string = '';
@@ -11,39 +12,40 @@
 			alert('Invalid color, please select red or blue');
 			return;
 		}
+		if (match_key === '' || team_key === '') {
+			alert('Please input a match and team key');
+			return;
+		}
 		goto(`/scout/${match_key}-${team_key}-${color}`);
 	}
 </script>
 
-<div class="grid grid-cols-1 grid-rows-4 gap-4 pr-4 pt-4 text-center text-xl">
-	<div class="grid grid-cols-3">
-		<span class="col-span-1 flex items-center justify-center">Match Key</span>
-		<input
-			class="col-span-2 rounded p-4 text-black"
-			bind:value={match_key}
-			type="text"
-			placeholder="2024orbb_qm1"
-		/>
-	</div>
+<div class="flex min-h-dvh flex-col gap-2 p-4 text-xl">
+	<a href="/homepage" class="flex w-fit items-center text-lg"><ArrowLeft size={24} />Homepage</a>
+	<span class="flex items-center">Match Key</span>
+	<input
+		class="col-span-2 rounded bg-gunmetal p-4"
+		bind:value={match_key}
+		type="text"
+		placeholder="2024orbb_qm1"
+	/>
+
+	<span class="flex items-center">Team Key</span>
+	<input
+		class="col-span-2 rounded bg-gunmetal p-4"
+		bind:value={team_key}
+		type="text"
+		placeholder="1540"
+	/>
+
+	<span class="flex items-center">Color</span>
+	<select name="color" bind:value={color} class="col-span-2 block rounded bg-gunmetal p-4">
+		<option selected value="">Select a color</option>
+		<option value="blue">Blue</option>
+		<option value="red">Red</option>
+	</select>
 
-	<div class="grid grid-cols-3">
-		<span class="col-span-1 flex items-center justify-center">Team Key</span>
-		<input
-			class="col-span-2 rounded p-4 text-black"
-			bind:value={team_key}
-			type="text"
-			placeholder="1540"
-		/>
-	</div>
-	<div class="grid grid-cols-3">
-		<span class="col-span-1 flex items-center justify-center">Color</span>
-		<input
-			class="col-span-2 rounded p-4 text-black"
-			bind:value={color}
-			type="text"
-			placeholder="Red"
-		/>
-	</div>
+	<div class="flex-grow"></div>
 
-	<button class="ml-4 rounded border p-4" onclick={scout}>Scout</button>
+	<button class="rounded bg-gunmetal px-4 py-2" onclick={scout}>Scout</button>
 </div>
diff --git a/src/routes/queue/+page.svelte b/src/routes/queue/+page.svelte
index cee19d6..5ef2630 100644
--- a/src/routes/queue/+page.svelte
+++ b/src/routes/queue/+page.svelte
@@ -31,10 +31,9 @@
 	};
 </script>
 
-<div class="grid h-full w-full grid-cols-1 grid-rows-2 place-items-center gap-4 align-middle">
+<div class="grid min-h-dvh grid-cols-1 grid-rows-2 place-items-center gap-4 align-middle">
 	<h1 class="p-2 font-heading text-5xl font-bold text-yellow-400">In Queue</h1>
 
-	<button class="w-9/12 rounded-full border-4 p-8 pb-16 pt-16 text-2xl text-white" onclick={leave}
-		>Leave Queue</button
+	<button class="rounded bg-gunmetal p-4 text-center text-2xl" onclick={leave}>Leave Queue</button
 	>
 </div>
diff --git a/src/routes/scout/[team_data]/AutoActionInputs.svelte b/src/routes/scout/[team_data]/AutoActionInputs.svelte
index d555660..69a0298 100644
--- a/src/routes/scout/[team_data]/AutoActionInputs.svelte
+++ b/src/routes/scout/[team_data]/AutoActionInputs.svelte
@@ -94,35 +94,35 @@
 		<div
 			class="grid flex-grow grid-cols-1 grid-rows-3 gap-2 py-2 font-heading text-2xl font-bold"
 		>
-			<button class="rounded bg-yellow-500 p-2" onclick={intake_piece}>Intake</button>
+			<button class="rounded bg-steel_blue p-2" onclick={intake_piece}>Intake</button>
 			{#if held_scorables > 0}
-				<button class="rounded bg-yellow-500 p-2" onclick={score_piece}>Score</button>
+				<button class="rounded bg-steel_blue p-2" onclick={score_piece}>Score</button>
 			{/if}
 			{#if held_ejectables > 0}
-				<button class="rounded bg-yellow-500 p-2" onclick={eject_piece}>Eject</button>
+				<button class="rounded bg-steel_blue p-2" onclick={eject_piece}>Eject</button>
 			{/if}
 		</div>
 	{:else if is_intake_state}
 		<div
 			class="grid w-full flex-grow grid-cols-2 grid-rows-2 gap-2 py-2 font-heading text-xl font-bold"
 		>
-			<button class="rounded bg-yellow-500 p-2" onclick={() => (actionState = 'IntakeBunny')}
+			<button class="rounded bg-steel_blue p-2" onclick={() => (actionState = 'IntakeBunny')}
 				>Bunny</button
 			>
-			<button class="rounded bg-yellow-500 p-2" onclick={() => (actionState = 'IntakeTote')}
+			<button class="rounded bg-steel_blue p-2" onclick={() => (actionState = 'IntakeTote')}
 				>Tote</button
 			>
 			<button
-				class="rounded bg-yellow-500 p-2"
+				class="rounded bg-steel_blue p-2"
 				onclick={() => (actionState = 'IntakeBalloon')}>Balloon: Ground</button
 			>
 			<button
-				class="rounded bg-yellow-500 p-2"
+				class="rounded bg-steel_blue p-2"
 				onclick={() => (actionState = 'IntakeBalloonCoral')}>Ballon: Coral</button
 			>
 		</div>
 		<button
-			class="w-full rounded bg-yellow-500 p-2 text-xl"
+			class="w-full rounded bg-steel_blue p-2 text-xl"
 			onclick={() => (actionState = 'None')}>Cancel</button
 		>
 	{:else if is_score_state}
@@ -133,23 +133,23 @@
 				<div class="flex w-full flex-grow flex-col items-center gap-2 text-lg">
 					<h1>Bunny</h1>
 					<div class="grid w-full flex-grow grid-cols-2 grid-rows-2 gap-2">
-						<button class="rounded bg-yellow-500 p-2" onclick={() => score_bunny('Low')}
+						<button class="rounded bg-steel_blue p-2" onclick={() => score_bunny('Low')}
 							>Low Zone</button
 						>
 						<button
-							class="rounded bg-yellow-500 p-2"
+							class="rounded bg-steel_blue p-2"
 							onclick={() => score_bunny('UncontrolledTote')}
 							>Uncontrolled Tote</button
 						>
 						{#if held.totes > 0}
 							<button
-								class="rounded bg-yellow-500 p-2"
+								class="rounded bg-steel_blue p-2"
 								onclick={() => score_bunny('InternalTote')}
 								>Internal Held Tote</button
 							>
 						{/if}
 						<button
-							class="rounded bg-yellow-500 p-2 {held.totes <= 0 ? 'col-span-2' : ''}"
+							class="rounded bg-steel_blue p-2 {held.totes <= 0 ? 'col-span-2' : ''}"
 							onclick={() => score_bunny('ExternalTote')}>External Held Tote</button
 						>
 					</div>
@@ -160,30 +160,30 @@
 					<h1>Ballon</h1>
 					<div class="grid w-full flex-grow grid-cols-2 grid-rows-2 gap-2">
 						<button
-							class="rounded bg-yellow-500 p-2"
+							class="rounded bg-steel_blue p-2"
 							onclick={() => score_balloon('Low')}>Low Zone</button
 						>
 						<button
-							class="rounded bg-yellow-500 p-2"
+							class="rounded bg-steel_blue p-2"
 							onclick={() => score_balloon('UncontrolledTote')}
 							>Uncontrolled Tote</button
 						>
 						{#if held.totes > 0}
 							<button
-								class="rounded bg-yellow-500 p-2"
+								class="rounded bg-steel_blue p-2"
 								onclick={() => score_balloon('InternalTote')}
 								>Internal Held Tote</button
 							>
 						{/if}
 						<button
-							class="rounded bg-yellow-500 p-2 {held.totes <= 0 ? 'col-span-2' : ''}"
+							class="rounded bg-steel_blue p-2 {held.totes <= 0 ? 'col-span-2' : ''}"
 							onclick={() => score_balloon('ExternalTote')}
 							>External Held Tote
 						</button>
 					</div>
 				</div>
 			{/if}
-			<button class="w-full rounded bg-yellow-500 p-2" onclick={() => (actionState = 'None')}
+			<button class="w-full rounded bg-steel_blue p-2" onclick={() => (actionState = 'None')}
 				>Cancel</button
 			>
 		</div>
@@ -191,24 +191,24 @@
 		<div class="grid w-full flex-grow grid-flow-row gap-2 py-2 font-heading font-bold">
 			{#if held.bunnies > 0}
 				<button
-					class="w-full rounded bg-yellow-500 p-2"
+					class="w-full rounded bg-steel_blue p-2"
 					onclick={() => (actionState = 'EjectBunny')}>Bunny</button
 				>
 			{/if}
 			{#if held.balloons > 0}
 				<button
-					class="w-full rounded bg-yellow-500 p-2"
+					class="w-full rounded bg-steel_blue p-2"
 					onclick={() => (actionState = 'EjectBalloon')}>Ballon</button
 				>
 			{/if}
 			{#if held.totes > 0}
 				<button
-					class="w-full rounded bg-yellow-500 p-2"
+					class="w-full rounded bg-steel_blue p-2"
 					onclick={() => (actionState = 'EjectTote')}>Tote</button
 				>
 			{/if}
 		</div>
-		<button class="w-full rounded bg-yellow-500 p-2" onclick={() => (actionState = 'None')}
+		<button class="w-full rounded bg-steel_blue p-2" onclick={() => (actionState = 'None')}
 			>Cancel</button
 		>
 	{:else}
diff --git a/src/routes/scout/[team_data]/Postmatch.svelte b/src/routes/scout/[team_data]/Postmatch.svelte
index 4a7ff96..0b8b20f 100644
--- a/src/routes/scout/[team_data]/Postmatch.svelte
+++ b/src/routes/scout/[team_data]/Postmatch.svelte
@@ -14,55 +14,44 @@
 	} = $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 class="flex w-full flex-col gap-2 accent-yolk_yellow">
+	<h1 class="text-center font-heading text-2xl">Post Match</h1>
+	<div class="rounded-lg bg-gunmetal p-1">
+		<h2 class="mb-1 font-heading text-2xl">Driver Skill</h2>
+		<div
+			class="flex w-full flex-wrap items-center justify-center rounded-lg bg-eerie_black text-lg"
+		>
+			<div class="flex flex-col p-1 text-center">
+				Quickness: {speed}
+				<input class="w-36" type="range" min="0" max="5" step="1" bind:value={speed} />
 			</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 class="flex flex-col p-1 text-center">
+				Field awareness: {awareness}
+				<input class="w-36" type="range" min="0" max="5" step="1" bind:value={awareness} />
 			</div>
-		</label>
+		</div>
 	</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 class="rounded-lg bg-gunmetal p-1">
+		<h2 class="mb-1 font-heading text-2xl">Robot</h2>
+		<div class="flex flex-col gap-2 rounded bg-eerie_black p-2">
+			<label
+				><input type="checkbox" name="robotbroke" bind:checked={broke} /><span class="px-1"
+					>Broken?</span
+				></label
+			>
+			<label
+				><input type="checkbox" name="robotdied" bind:checked={died} /><span class="px-1"
+					>Died on Field?</span
+				></label
+			>
+		</div>
 	</div>
+	<label class="w-full rounded-lg bg-gunmetal p-1"
+		><h3 class="mb-1 font-heading text-2xl">Notes</h3>
+		<textarea
+			class="min-h-36 w-full rounded bg-eerie_black p-1"
+			bind:value={notes}
+			placeholder="Please add notes"
+		></textarea>
+	</label>
 </div>
diff --git a/src/routes/scout/[team_data]/TeleActionInputs.svelte b/src/routes/scout/[team_data]/TeleActionInputs.svelte
index 75e7bef..584dc98 100644
--- a/src/routes/scout/[team_data]/TeleActionInputs.svelte
+++ b/src/routes/scout/[team_data]/TeleActionInputs.svelte
@@ -67,12 +67,12 @@
 		<div
 			class="grid flex-grow grid-cols-1 grid-rows-3 gap-2 py-2 font-heading text-2xl font-bold"
 		>
-			<button class="rounded bg-violet-500 p-2" onclick={intake_piece}>Intake</button>
+			<button class="rounded bg-eminence p-2" onclick={intake_piece}>Intake</button>
 			{#if held.balloons > 0}
-				<button class="rounded bg-violet-500 p-2" onclick={score_piece}>Score</button>
+				<button class="rounded bg-eminence p-2" onclick={score_piece}>Score</button>
 			{/if}
 			{#if held_ejectables > 0}
-				<button class="rounded bg-violet-500 p-2" onclick={eject_piece}>Eject</button>
+				<button class="rounded bg-eminence p-2" onclick={eject_piece}>Eject</button>
 			{/if}
 		</div>
 	{:else if is_intake_state}
@@ -80,20 +80,19 @@
 			class="grid w-full flex-grow grid-cols-2 grid-rows-2 gap-2 py-2 font-heading text-xl font-bold"
 		>
 			<button
-				class="col-span-2 rounded bg-violet-500 p-2"
+				class="col-span-2 rounded bg-eminence p-2"
 				onclick={() => (actionState = 'IntakeTote')}>Tote</button
 			>
-			<button
-				class="rounded bg-violet-500 p-2"
-				onclick={() => (actionState = 'IntakeBalloon')}>Balloon: Ground</button
+			<button class="rounded bg-eminence p-2" onclick={() => (actionState = 'IntakeBalloon')}
+				>Balloon: Ground</button
 			>
 			<button
-				class="rounded bg-violet-500 p-2"
+				class="rounded bg-eminence p-2"
 				onclick={() => (actionState = 'IntakeBalloonCoral')}>Ballon: Coral</button
 			>
 		</div>
 		<button
-			class="w-full rounded bg-violet-500 p-2 text-xl"
+			class="w-full rounded bg-eminence p-2 text-xl"
 			onclick={() => (actionState = 'None')}>Cancel</button
 		>
 	{:else if is_score_state}
@@ -103,27 +102,27 @@
 			<div class="flex w-full flex-grow flex-col items-center gap-2 py-2 text-lg">
 				<h1>Ballon</h1>
 				<div class="grid w-full flex-grow grid-cols-2 grid-rows-2 gap-2">
-					<button class="rounded bg-violet-500 p-2" onclick={() => score_balloon('Low')}
+					<button class="rounded bg-eminence p-2" onclick={() => score_balloon('Low')}
 						>Low Zone</button
 					>
 					<button
-						class="rounded bg-violet-500 p-2"
+						class="rounded bg-eminence p-2"
 						onclick={() => score_balloon('UncontrolledTote')}>Uncontrolled Tote</button
 					>
 					{#if held.totes > 0}
 						<button
-							class="rounded bg-violet-500 p-2"
+							class="rounded bg-eminence p-2"
 							onclick={() => score_balloon('InternalTote')}>Internal Held Tote</button
 						>
 					{/if}
 					<button
-						class="rounded bg-violet-500 p-2 {held.totes <= 0 ? 'col-span-2' : ''}"
+						class="rounded bg-eminence p-2 {held.totes <= 0 ? 'col-span-2' : ''}"
 						onclick={() => score_balloon('ExternalTote')}
 						>External Held Tote
 					</button>
 				</div>
 			</div>
-			<button class="w-full rounded bg-violet-500 p-2" onclick={() => (actionState = 'None')}
+			<button class="w-full rounded bg-eminence p-2" onclick={() => (actionState = 'None')}
 				>Cancel</button
 			>
 		</div>
@@ -131,18 +130,18 @@
 		<div class="grid w-full flex-grow grid-flow-row gap-2 py-2 font-heading font-bold">
 			{#if held.balloons > 0}
 				<button
-					class="w-full rounded bg-violet-500 p-2"
+					class="w-full rounded bg-eminence p-2"
 					onclick={() => (actionState = 'EjectBalloon')}>Ballon</button
 				>
 			{/if}
 			{#if held.totes > 0}
 				<button
-					class="w-full rounded bg-violet-500 p-2"
+					class="w-full rounded bg-eminence p-2"
 					onclick={() => (actionState = 'EjectTote')}>Tote</button
 				>
 			{/if}
 		</div>
-		<button class="w-full rounded bg-violet-500 p-2" onclick={() => (actionState = 'None')}
+		<button class="w-full rounded bg-eminence p-2" onclick={() => (actionState = 'None')}
 			>Cancel</button
 		>
 	{:else}