diff --git a/.prettierrc b/.prettierrc
index 9573023..8bc6e86 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -3,6 +3,6 @@
 	"singleQuote": true,
 	"trailingComma": "none",
 	"printWidth": 100,
-	"plugins": ["prettier-plugin-svelte"],
+	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
 	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
 }
diff --git a/bun.lockb b/bun.lockb
index 776ad14..a0825cf 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index 62d2359..e1f49f0 100644
--- a/package.json
+++ b/package.json
@@ -30,5 +30,8 @@
 		"typescript": "^5.6.3",
 		"typescript-eslint": "^8.14.0",
 		"vite": "^5.4.11"
+	},
+	"dependencies": {
+		"lucide-svelte": "^0.456.0"
 	}
 }
diff --git a/src/lib/components/Action.svelte b/src/lib/components/Action.svelte
index 1a5a1be..103f0fb 100644
--- a/src/lib/components/Action.svelte
+++ b/src/lib/components/Action.svelte
@@ -1,25 +1,45 @@
 <script lang="ts">
 	import type { AutoActionData } from '$lib/types';
+	import { MoveUp, MoveDown, X } from 'lucide-svelte';
 
 	let {
 		action_data = $bindable(),
-		deleteself
-	}: { action_data: AutoActionData; deleteself: () => void } = $props();
+		index,
+		shift,
+		remove
+	}: {
+		action_data: AutoActionData;
+		index: number;
+		shift: (index: number, change: number) => void;
+		remove: (index: number) => void;
+	} = $props();
 
-	//let actionBorderColor = $derived(action.success ? 'border-cresc_green' : 'border-fail_red');
-	let actionBackgroundColor = $derived(action_data.success ? 'bg-cresc_green' : 'bg-fail_red');
+	let color = $derived(
+		action_data.success
+			? 'bg-jungle_green/50 shadow-jungle_green/10'
+			: 'bg-flaming_red/50 shadow-flaming_red/10'
+	);
 </script>
 
-<!-- <button -->
-<!-- 	class="{actionBorderColor} w-full p-1 rounded border-2 text-text_yellow" -->
-<!-- 	onclick={deleteself} -->
-<!-- > -->
-<!-- 	{action.type} -->
-<!-- </button> -->
-
-<button
-	class="{actionBackgroundColor} w-full p-1 rounded border-2 border-outline_gray text-text_white"
-	onclick={deleteself}
+<div
+	class="group flex flex-row content-center justify-between {color} w-full rounded p-2 text-white shadow-lg"
 >
-	{action_data.action}
-</button>
+	<span class="w-auto shrink text-clip">{action_data.action}</span>
+	<div class="flex shrink-0 flex-row content-center justify-end gap-4">
+		<button
+			class="group-first:pointer-events-none group-first:opacity-30"
+			onclick={() => shift(index, -1)}
+		>
+			<MoveUp />
+		</button>
+		<button
+			class="group-last:pointer-events-none group-last:opacity-30"
+			onclick={() => shift(index, 1)}
+		>
+			<MoveDown />
+		</button>
+		<button onclick={() => remove(index)}>
+			<X />
+		</button>
+	</div>
+</div>
diff --git a/src/lib/components/SuccessFail.svelte b/src/lib/components/SuccessFail.svelte
index 007da5b..a2ffa60 100644
--- a/src/lib/components/SuccessFail.svelte
+++ b/src/lib/components/SuccessFail.svelte
@@ -3,19 +3,21 @@
 		$props();
 </script>
 
-<div
-	class="bg-zinc-800 text-zinc-50 text-xl font-extrabold fixed inset-0 grid grid-cols-2 grid-rows-3 gap-4 p-4"
->
-	<button
-		class="rounded-lg row-span-2 shadow-lg shadow-green-600/50 bg-green-600"
-		onclick={() => complete(true)}>Success</button
-	>
-	<button
-		class="rounded-lg row-span-2 shadow-lg shadow-red-600/50 bg-red-600"
-		onclick={() => complete(false)}>Fail</button
-	>
-	<button
-		class="rounded-lg col-span-2 shadow-lg shadow-zinc-600/50 bg-zinc-600"
-		onclick={() => cancel()}>Cancel</button
+<div class="fixed inset-0 flex items-center justify-center bg-eerie_black">
+	<div
+		class="grid h-dvh max-h-[48rem] w-dvw max-w-96 grid-cols-2 grid-rows-4 gap-4 p-4 text-xl font-extrabold text-white"
 	>
+		<button
+			class="row-span-3 rounded-lg bg-jungle_green shadow-lg shadow-jungle_green/50"
+			onclick={() => complete(true)}>Success</button
+		>
+		<button
+			class="row-span-3 rounded-lg bg-flaming_red shadow-lg shadow-flaming_red/50"
+			onclick={() => complete(false)}>Fail</button
+		>
+		<button
+			class="col-span-2 rounded-lg bg-gunmetal shadow-lg shadow-gunmetal/50"
+			onclick={() => cancel()}>Cancel</button
+		>
+	</div>
 </div>
diff --git a/src/lib/components/Timeline.svelte b/src/lib/components/Timeline.svelte
index de4c097..769a74d 100644
--- a/src/lib/components/Timeline.svelte
+++ b/src/lib/components/Timeline.svelte
@@ -2,15 +2,38 @@
 	import type { AutoActionData } from '$lib/types';
 	import Action from './Action.svelte';
 
-	let { actions = $bindable() }: { actions: AutoActionData[] } = $props();
+	let {
+		actions = $bindable(),
+		displaying = $bindable()
+	}: { actions: AutoActionData[]; displaying: boolean } = $props();
 	// let latestActions: AutoActionData[] = $derived(actions.toReversed().slice(0, 5));
+
+	const remove = (index: number) => {
+		actions.splice(index, 1);
+	};
+
+	const shift = (index: number, change: number) => {
+		let item = actions[index];
+		actions.splice(index, 1);
+		actions.splice(index + change, 0, item);
+	};
 </script>
 
-{#each actions as _, i}
-	<Action
-		action_data={actions[i]}
-		deleteself={() => {
-			actions.splice(actions.indexOf(actions[i]), 1);
-		}}
-	/>
-{/each}
+<button
+	class="fixed inset-0 transition-all {displaying ? 'backdrop-blur' : 'translate-y-full'}"
+	onclick={(e: Event) => {
+		if (e.target === e.currentTarget) displaying = false;
+	}}
+>
+	<div
+		class="absolute inset-x-0 bottom-0 flex h-[50dvh] w-dvw flex-col items-center gap-3 rounded-t-lg bg-gunmetal p-3 text-white"
+		id="timeline"
+	>
+		{#each actions as _, i}
+			<Action action_data={actions[i]} index={i} {remove} {shift} />
+		{/each}
+		{#if actions.length === 0}
+			<h3 class="m-auto">No actions yet :3</h3>
+		{/if}
+	</div>
+</button>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 4b474b2..493a0b6 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -7,6 +7,6 @@
 
 <style lang="postcss">
 	:global(body) {
-		@apply bg-zinc-800;
+		@apply bg-eerie_black text-white;
 	}
 </style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index aefc4d7..cfde746 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,6 +1,9 @@
-<div class="flex flex-col items-center justify-evenly h-dvh text-text_white">
+<div class="flex h-dvh flex-col items-center justify-evenly">
 	<h1 class="text-center text-5xl font-bold">hiiii :3</h1>
-	<a class="text-center text-2xl rounded bg-btn_grey px-4 py-2 font-bold" href="/scout">
+	<a
+		class="rounded bg-gunmetal px-4 py-2 text-center text-2xl font-bold text-yolk_yellow"
+		href="/scout"
+	>
 		scout
 	</a>
 </div>
diff --git a/src/routes/scout/+page.svelte b/src/routes/scout/+page.svelte
index ddf130b..7e480ec 100644
--- a/src/routes/scout/+page.svelte
+++ b/src/routes/scout/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { type TeamMatch, type AutoActionData } from '$lib/types';
+	import type { TeamMatch, AutoActionData } from '$lib/types';
 	import Timeline from '$lib/components/Timeline.svelte';
 	import ActionInputs from './ActionInputs.svelte';
 
@@ -11,6 +11,7 @@
 
 	let actions: AutoActionData[] = $state([]);
 	let timelineExtended = $state(false);
+	let pageName = $state('');
 
 	const match: TeamMatch = $state({
 		id: 0,
@@ -26,24 +27,20 @@
 	});
 </script>
 
-<div class="grid grid-row-10 text-zinc-50 p-2 h-svh place-items-center">
-	<h1 class="row-span-1 text-center font-bold pb-2 h-5">Team {team_key}</h1>
-	{#if timelineExtended}
-		<div class="row-span-8">
-			<Timeline bind:actions />
-		</div>
-		<button
-			class="row-span-1 bg-btn_grey h-10 w-80 p-1 rounded border-2 border-outline_gray static"
-			onclick={() => (timelineExtended = false)}>Hide Timeline</button
-		>
-	{:else}
-		<div class="row-span-8">
-			<ActionInputs bind:actions />
-		</div>
+<div class="m-auto flex h-dvh max-w-md flex-col items-center gap-2 p-2">
+	<div class="flex w-full justify-between border-b-2 border-white/10 pb-2 font-semibold">
+		<span class="flex-grow">Team {team_key}</span>
+		<span class="flex-grow text-right">{pageName}</span>
+	</div>
 
-		<button
-			class="row-span-1 bg-btn_grey h-10 w-80 p-1 rounded border-2 border-outline_gray static"
-			onclick={() => (timelineExtended = true)}>Show Timeline</button
-		>
-	{/if}
+	<ActionInputs bind:actions bind:pageName />
+
+	<button
+		class="w-full border-t-2 border-white/10 pt-2 text-center font-semibold"
+		onclick={(e: Event) => {
+			e.stopPropagation();
+			timelineExtended = true;
+		}}>Show Timeline</button
+	>
+	<Timeline bind:actions bind:displaying={timelineExtended} />
 </div>
diff --git a/src/routes/scout/ActionInputs.svelte b/src/routes/scout/ActionInputs.svelte
index eadb514..407d974 100644
--- a/src/routes/scout/ActionInputs.svelte
+++ b/src/routes/scout/ActionInputs.svelte
@@ -1,16 +1,20 @@
 <script lang="ts">
 	import SuccessFail from '$lib/components/SuccessFail.svelte';
 	import type { AutoAction, AutoInputState, AutoActionData } from '$lib/types';
+	import { derived } from 'svelte/store';
 
-	const { actions = $bindable() }: { actions: AutoActionData[] } = $props();
+	let {
+		actions = $bindable(),
+		pageName = $bindable()
+	}: { actions: AutoActionData[]; pageName: string } = $props();
 
 	let actionState: AutoInputState = $state('None') as AutoInputState;
 
 	let held_bunnies: number = $state(0);
 	let held_balloons: number = $state(0);
 	let held_totes: number = $state(0);
-	let held_scorables: number = $derived(held_balloons + held_bunnies);
-	let held_ejectables: number = $derived(held_scorables + held_totes);
+	const held_scorables: number = $derived(held_balloons + held_bunnies);
+	const held_ejectables: number = $derived(held_scorables + held_totes);
 
 	function intake_piece() {
 		actionState = actionState === 'None' ? 'Intake' : actionState;
@@ -29,135 +33,151 @@
 		actionState = `ScoreBalloon${where}`;
 	}
 	function complete(success: boolean) {
-		// Assume that the robot ejects even if they fail to score
-		if (actionState.includes('IntakeBalloon')) held_balloons++;
-		else if (actionState.includes('IntakeBunny')) held_bunnies++;
-		else if (actionState.includes('IntakeTote')) held_totes++;
-		else if (actionState.includes('ScoreBalloon')) held_balloons--;
+		// Assume that a failure means a note remains where it is
+		if (success) {
+			if (actionState.includes('IntakeBalloon')) held_balloons++;
+			else if (actionState.includes('IntakeBunny')) held_bunnies++;
+			else if (actionState.includes('IntakeTote')) held_totes++;
+			else if (actionState.includes('EjectBalloon')) held_balloons--;
+			else if (actionState.includes('EjectBunny')) held_bunnies--;
+			else if (actionState.includes('EjectTote')) held_totes--;
+		}
+		// Assume failed scoring is still ejecting
+		if (actionState.includes('ScoreBalloon')) held_balloons--;
 		else if (actionState.includes('ScoreBunny')) held_bunnies--;
-		else if (actionState.includes('EjectBalloon')) held_balloons--;
-		else if (actionState.includes('EjectBunny')) held_bunnies--;
-		else if (actionState.includes('EjectTote')) held_totes--;
 
 		const action: AutoActionData = {
 			action: actionState as AutoAction,
 			success: success
 		};
-		actions.push(action);
+		actions.unshift(action); // TODO: Make sure unshift works
 		actionState = 'None';
 	}
 
-	const is_none_state = $derived(actionState === 'None');
-	const is_intake_state = $derived(actionState === 'Intake');
-	const is_score_state = $derived(actionState === 'Score');
+	const is_none_state: boolean = $derived(actionState === 'None');
+	const is_intake_state: boolean = $derived(actionState === 'Intake');
+	const is_score_state: boolean = $derived(actionState === 'Score');
 	const is_eject_state = $derived(actionState === 'Eject');
+
+	$effect(() => {
+		pageName = actionState === 'None' ? 'Home' : actionState;
+	});
 </script>
 
-<h1>Number of pieces currently held: {held_scorables}</h1>
-<div class="grid gap-2 grid-cols-1 grid-rows-2 place-items-center">
+<div class="align-center flex w-full max-w-md flex-grow flex-col px-2">
 	{#if is_none_state}
-		<div class="grid gap-2 grid-cols-2">
-			<button class="bg-zinc-500 p-2 rounded" onclick={intake_piece}>Intake</button>
+		<div class="grid flex-grow grid-cols-1 grid-rows-3 gap-2 py-2 text-2xl font-bold">
+			<button class="rounded bg-gunmetal p-2" onclick={intake_piece}>Intake</button>
 			{#if held_scorables > 0}
-				<button class="bg-zinc-500 p-2 rounded" onclick={score_piece}>Score</button>
+				<button class="rounded bg-gunmetal p-2" onclick={score_piece}>Score</button>
 			{/if}
 			{#if held_ejectables > 0}
-				<button class="bg-zinc-500 p-2 rounded" onclick={eject_piece}>Eject</button>
+				<button class="rounded bg-gunmetal p-2" onclick={eject_piece}>Eject</button>
 			{/if}
 		</div>
 	{:else if is_intake_state}
-		<div class="grid gap-3 grid-cols-2 grid-rows-2 flex-grow">
-			<button class="bg-zinc-500 p-2 rounded" onclick={() => (actionState = 'IntakeBunny')}
-				>Intake Bunny</button
-			>
-			<button class="bg-zinc-500 p-2 rounded" onclick={() => (actionState = 'IntakeTote')}
-				>Intake Tote</button
+		<div class="grid w-full flex-grow grid-cols-2 grid-rows-2 gap-2 py-2 text-xl font-bold">
+			<button class="rounded bg-gunmetal p-2" onclick={() => (actionState = 'IntakeBunny')}
+				>Bunny</button
 			>
-			<button class="bg-zinc-500 p-2 rounded" onclick={() => (actionState = 'IntakeBalloon')}
-				>Intake Balloon From Ground</button
+			<button class="rounded bg-gunmetal p-2" onclick={() => (actionState = 'IntakeTote')}
+				>Tote</button
 			>
-			<button
-				class="bg-zinc-500 p-2 rounded"
-				onclick={() => (actionState = 'IntakeBalloonCoral')}
-				>Intake Ballon From Coral</button
+			<button class="rounded bg-gunmetal p-2" onclick={() => (actionState = 'IntakeBalloon')}
+				>Balloon: Ground</button
 			>
 			<button
-				class="bg-zinc-500 col-span-2 p-2 rounded"
-				onclick={() => (actionState = 'None')}>Cancel</button
+				class="rounded bg-gunmetal p-2"
+				onclick={() => (actionState = 'IntakeBalloonCoral')}>Ballon: Coral</button
 			>
 		</div>
+		<button
+			class="w-full rounded bg-gunmetal p-2 text-xl"
+			onclick={() => (actionState = 'None')}>Cancel</button
+		>
 	{:else if is_score_state}
-		<div class="grid gap-2 grid-cols-2 grid-rows-4">
+		<div class="flex w-full flex-grow flex-col items-center gap-2 py-2 text-lg font-bold">
 			{#if held_bunnies > 0}
-				<button class="bg-zinc-500 p-2 rounded" onclick={() => score_bunny('Low')}
-					>Score Bunny in Low Zone</button
-				>
-				<button
-					class="bg-zinc-500 p-2 rounded"
-					onclick={() => score_bunny('UncontrolledTote')}
-					>Score Bunny in Uncontrolled Tote</button
-				>
-				{#if held_totes > 0}
-					<button
-						class="bg-zinc-500 p-2 rounded"
-						onclick={() => score_bunny('InternalTote')}
-						>Score Bunny in Internal Held Tote</button
-					>
-				{/if}
-				<button class="bg-zinc-500 p-2 rounded" onclick={() => score_bunny('ExternalTote')}
-					>Score Bunny in External Held Tote</button
-				>
+				<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-gunmetal p-2" onclick={() => score_bunny('Low')}
+							>Low Zone</button
+						>
+						<button
+							class="rounded bg-gunmetal p-2"
+							onclick={() => score_bunny('UncontrolledTote')}
+							>Uncontrolled Tote</button
+						>
+						{#if held_totes > 0}
+							<button
+								class="rounded bg-gunmetal p-2"
+								onclick={() => score_bunny('InternalTote')}
+								>Internal Held Tote</button
+							>
+						{/if}
+						<button
+							class="rounded bg-gunmetal p-2 {held_totes <= 0 ? 'col-span-2' : ''}"
+							onclick={() => score_bunny('ExternalTote')}>External Held Tote</button
+						>
+					</div>
+				</div>
 			{/if}
 			{#if held_balloons > 0}
-				<button class="bg-zinc-500 p-2 rounded" onclick={() => score_balloon('Low')}
-					>Score Ballon in Low Zone</button
-				>
-				<button
-					class="bg-zinc-500 p-2 rounded"
-					onclick={() => score_balloon('UncontrolledTote')}
-					>Score Bunny in Uncontrolled Tote</button
-				>
-				{#if held_totes > 0}
-					<button
-						class="bg-zinc-500 p-2 rounded"
-						onclick={() => score_balloon('InternalTote')}
-						>Score Balloon in Internal Held Tote</button
-					>
-				{/if}
-				<button
-					class="bg-zinc-500 p-2 rounded"
-					onclick={() => score_balloon('ExternalTote')}
-					>Score Balloon in External Held Tote
-				</button>
+				<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-gunmetal p-2" onclick={() => score_balloon('Low')}
+							>Low Zone</button
+						>
+						<button
+							class="rounded bg-gunmetal p-2"
+							onclick={() => score_balloon('UncontrolledTote')}
+							>Uncontrolled Tote</button
+						>
+						{#if held_totes > 0}
+							<button
+								class="rounded bg-gunmetal p-2"
+								onclick={() => score_balloon('InternalTote')}
+								>Internal Held Tote</button
+							>
+						{/if}
+						<button
+							class="rounded bg-gunmetal p-2 {held_totes <= 0 ? 'col-span-2' : ''}"
+							onclick={() => score_balloon('ExternalTote')}
+							>External Held Tote
+						</button>
+					</div>
+				</div>
 			{/if}
-			<button
-				class="bg-zinc-500 col-span-2 p-2 rounded"
-				onclick={() => (actionState = 'None')}>Cancel</button
+			<button class="w-full rounded bg-gunmetal p-2" onclick={() => (actionState = 'None')}
+				>Cancel</button
 			>
 		</div>
 	{:else if is_eject_state}
-		<div class="grid gap-2 grid-cols-2 grid-rows-4">
+		<div class="grid w-full flex-grow grid-flow-row gap-2 py-2 font-bold">
 			{#if held_bunnies > 0}
-				<button class="bg-zinc-500 p-2 rounded" onclick={() => (actionState = 'EjectBunny')}
-					>Eject Bunny</button
+				<button
+					class="w-full rounded bg-gunmetal p-2"
+					onclick={() => (actionState = 'EjectBunny')}>Bunny</button
 				>
 			{/if}
 			{#if held_balloons > 0}
 				<button
-					class="bg-zinc-500 p-2 rounded"
-					onclick={() => (actionState = 'EjectBalloon')}>Eject Ballon</button
+					class="w-full rounded bg-gunmetal p-2"
+					onclick={() => (actionState = 'EjectBalloon')}>Ballon</button
 				>
 			{/if}
 			{#if held_totes > 0}
-				<button class="bg-zinc-500 p-2 rounded" onclick={() => (actionState = 'EjectTote')}
-					>Eject Tote</button
+				<button
+					class="w-full rounded bg-gunmetal p-2"
+					onclick={() => (actionState = 'EjectTote')}>Tote</button
 				>
 			{/if}
-			<button
-				class="bg-zinc-500 col-span-2 p-2 rounded"
-				onclick={() => (actionState = 'None')}>Cancel</button
-			>
 		</div>
+		<button class="w-full rounded bg-gunmetal p-2" onclick={() => (actionState = 'None')}
+			>Cancel</button
+		>
 	{:else}
 		<SuccessFail
 			{complete}
diff --git a/tailwind.config.js b/tailwind.config.js
index 3e2b173..a8e0cce 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,16 +4,15 @@ export default {
 	theme: {
 		extend: {
 			colors: {
-				navbar_black: '#1c1c1c',
-				outline_gray: '#c2c2c2',
-				cresc_green: '#00d586',
-				bg_gray: '#2c2c2c',
-				slack_purple: '#4A154B',
-				robot_blue: '#0083E6',
-				robot_red: '#ED1C24',
-				fail_red: '#EE3C42',
-				btn_grey: '#5C5C5C',
-				text_white: '#ffffff'
+				white: '#ffffff',
+				eerie_black: '#1C1C1C',
+				yolk_yellow: '#FFC145',
+				flaming_red: '#ED2C2C',
+				steel_blue: '#358188',
+				gunmetal: '#20282C',
+				chicken_orange: '#F7901E',
+				eminence: '#6C3082',
+				jungle_green: '#49A078'
 			}
 		}
 	},