diff --git a/src/app.css b/src/app.css
index b5c61c9..33f90fa 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,3 +1,14 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+@layer utilities {
+	/* Hide scrollbar for Chrome, Safari and Opera */
+	.no-scrollbar::-webkit-scrollbar {
+		display: none;
+	}
+	/* Hide scrollbar for IE, Edge and Firefox */
+	.no-scrollbar {
+		-ms-overflow-style: none; /* IE and Edge */
+		scrollbar-width: none; /* Firefox */
+	}
+}
diff --git a/src/lib/ActionInputStateMachine.svelte.ts b/src/lib/ActionInputStateMachine.svelte.ts
index ef2ebd6..ba3a707 100644
--- a/src/lib/ActionInputStateMachine.svelte.ts
+++ b/src/lib/ActionInputStateMachine.svelte.ts
@@ -5,10 +5,27 @@ export class ActionInputVerifier {
 	private held_balloons: number = 0;
 	private held_totes: number = 0;
 
+	public get_held_tele(): { balloons: number; totes: number } {
+		return {
+			balloons: this.held_balloons,
+			totes: this.held_totes
+		};
+	}
+	public get_held_auto(): { bunnies: number; balloons: number; totes: number } {
+		return {
+			bunnies: this.held_bunnies,
+			balloons: this.held_balloons,
+			totes: this.held_totes
+		};
+	}
+
 	public verify_actions(action_data: AutoActionData[]) {
-		action_data
-			.reverse()
-			.forEach((action_data) => (action_data.ok = this.verify_new_action(action_data)));
+		action_data.forEach((action) => {
+			action.ok = this.verify_new_action(action);
+			this.held_totes = Math.max(this.held_totes, 0);
+			this.held_balloons = Math.max(this.held_balloons, 0);
+			this.held_bunnies = Math.max(this.held_bunnies, 0);
+		});
 	}
 
 	// Takes an action and returns if it's a legal one
diff --git a/src/lib/components/Action.svelte b/src/lib/components/Action.svelte
index cd2caf7..923811a 100644
--- a/src/lib/components/Action.svelte
+++ b/src/lib/components/Action.svelte
@@ -10,7 +10,7 @@
 	}: {
 		action_data: AutoActionData;
 		index: number;
-		shift: (index: number, change: number) => void;
+		shift: (index: number, change: -1 | 1) => void;
 		remove: (index: number) => void;
 	} = $props();
 
@@ -31,13 +31,13 @@
 		{/if}
 		<button
 			class="group-first:pointer-events-none group-first:opacity-30"
-			onclick={() => shift(index, -1)}
+			onclick={() => shift(index, 1)}
 		>
 			<MoveUp />
 		</button>
 		<button
 			class="group-last:pointer-events-none group-last:opacity-30"
-			onclick={() => shift(index, 1)}
+			onclick={() => shift(index, -1)}
 		>
 			<MoveDown />
 		</button>
diff --git a/src/lib/components/Timeline.svelte b/src/lib/components/Timeline.svelte
index 16ef430..e2bff09 100644
--- a/src/lib/components/Timeline.svelte
+++ b/src/lib/components/Timeline.svelte
@@ -1,28 +1,42 @@
 <script lang="ts">
 	import { ActionInputVerifier } from '$lib/ActionInputStateMachine.svelte';
-	import type { AutoActionData } from '$lib/types';
+	import type { AutoActionData, AutoHeldItems, TeleHeldItems } from '$lib/types';
 	import Action from './Action.svelte';
 
 	let {
 		actions = $bindable(),
+		held = $bindable(),
+		furthest_auto_index = $bindable(),
 		displaying = $bindable()
-	}: { actions: AutoActionData[]; displaying: boolean } = $props();
+	}: {
+		actions: AutoActionData[];
+		held: AutoHeldItems | TeleHeldItems;
+		furthest_auto_index: number;
+		displaying: boolean;
+	} = $props();
 
 	/// Determine if currying is the right solution or if we should use a binding
 	function remove(index: number) {
+		if (furthest_auto_index >= index) furthest_auto_index--;
 		actions.splice(index, 1);
 		verify();
 	}
 
-	function shift(index: number, change: number) {
-		let item = actions[index];
-		actions.splice(index, 1);
-		actions.splice(index + change, 0, item);
+	function shift(index: number, change: -1 | 1) {
+		//if (furthest_auto_index === index) furthest_auto_index += change;
+		//else if (furthest_auto_index === index + change) furthest_auto_index = index;
+
+		[actions[index], actions[index + change]] = [actions[index + change], actions[index]];
 		verify();
 	}
 
 	function verify() {
-		new ActionInputVerifier().verify_actions(actions);
+		const action_input_verifier = new ActionInputVerifier();
+		action_input_verifier.verify_actions(actions);
+		// TODO: Fix this horrible and jank solution
+		held = Object.hasOwn(held, 'bunnies')
+			? action_input_verifier.get_held_auto()
+			: action_input_verifier.get_held_tele();
 	}
 	const is_valid_timeline = $derived(actions.filter((action) => !action.ok).length === 0);
 </script>
@@ -36,7 +50,7 @@
 	}}
 >
 	<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"
+		class="no-scrollbar absolute inset-x-0 bottom-0 flex h-[50dvh] w-dvw flex-col items-center gap-3 overflow-y-scroll rounded-t-lg bg-gunmetal p-3 text-white"
 		id="timeline"
 	>
 		{#each actions as _, i}
@@ -46,6 +60,9 @@
 				{remove}
 				{shift}
 			/>
+			{#if furthest_auto_index === actions.length - i - 1}
+				<hr />
+			{/if}
 		{/each}
 		{#if actions.length === 0}
 			<h3 class="m-auto">No actions yet :3</h3>
diff --git a/src/lib/types.ts b/src/lib/types.ts
index bba036e..a4907ba 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -91,6 +91,12 @@ export type BunnyAction =
 	| 'ScoreBunnyLow';
 export type AutoAction = TeleAction | BunnyAction;
 
+export type TeleHeldItems = {
+	balloons: number;
+	totes: number;
+};
+export type AutoHeldItems = TeleHeldItems & { bunnies: number };
+
 // For state machine
 export type ItemInputState = 'Intake' | 'Score' | 'Eject' | 'None';
 export type TeleInputState = TeleAction | ItemInputState;
diff --git a/src/routes/scout/[team_data]/+page.svelte b/src/routes/scout/[team_data]/+page.svelte
index 793c5bf..c62396a 100644
--- a/src/routes/scout/[team_data]/+page.svelte
+++ b/src/routes/scout/[team_data]/+page.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
-	import type { TeamMatch, AutoActionData } from '$lib/types';
+	import type { TeamMatch, AutoActionData, AutoHeldItems, TeleActionData } from '$lib/types';
 	import Timeline from '$lib/components/Timeline.svelte';
-	import ActionInputs from './ActionInputs.svelte';
+	import AutoActionInputs from './AutoActionInputs.svelte';
+	import TeleActionInputs from './TeleActionInputs.svelte';
 	import type { PageData } from './$types';
+	import { ArrowRight, ArrowLeft } from 'lucide-svelte';
 	import { browser } from '$app/environment';
 
 	const { data }: { data: PageData } = $props();
@@ -10,37 +12,98 @@
 	const scout_id = browser ? (localStorage?.getItem('scout_id') ?? '') : '';
 
 	let actions: AutoActionData[] = $state([]);
+	let held: AutoHeldItems = $state({
+		bunnies: 0,
+		balloons: 0,
+		totes: 0
+	});
+	// The furthest index in actions that was made during auto
+	let furthest_auto_index = $state(0);
+
+	let skill = $state(0);
+	let broke = $state(false);
+	let died = $state(false);
+	let notes = $state('');
+
 	let timelineExtended = $state(false);
+	let gamePhase = $state('Auto') as 'Auto' | 'Tele' | 'Post';
 	let pageName = $state('');
 
-	const match: TeamMatch = $state({
-		id: 0,
-		scout_id,
-		team_key: data.team_key,
-		match_key: data.match_key,
-		skill: 3,
-		notes: '',
-		broke: false,
-		died: false,
-		auto_actions: [],
-		tele_actions: []
-	});
+	function phaseShiftRight() {
+		gamePhase = gamePhase === 'Auto' ? 'Tele' : gamePhase === 'Tele' ? 'Post' : 'Post'; // Last case should never happen
+	}
+	function phaseShiftLeft() {
+		gamePhase = gamePhase === 'Post' ? 'Tele' : gamePhase === 'Tele' ? 'Auto' : 'Auto'; // Last case should never happen
+	}
+
+	function submit() {
+		const auto_actions = actions.slice(0, furthest_auto_index + 1);
+		const tele_actions = actions.slice(furthest_auto_index + 1) as TeleActionData[]; // TODO: Add verification function to ensure that this always works
+		const match: TeamMatch = {
+			id: 0,
+			scout_id,
+			team_key: data.team_key,
+			match_key: data.match_key,
+			skill,
+			broke,
+			died,
+			notes,
+			auto_actions,
+			tele_actions
+		};
+	}
 </script>
 
 <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 {data.team_key}</span>
-		<span class="flex-grow text-right">{pageName}</span>
+		<span class="flex-shrink-0">Team {data.team_key}</span>
+		<div class="flex gap-2">
+			<button
+				onclick={phaseShiftLeft}
+				class={gamePhase === 'Auto' ? 'pointer-events-none opacity-30' : ''}
+				><ArrowLeft /></button
+			>
+			<span class="text-right">{gamePhase}: {pageName}</span>
+			<button
+				onclick={phaseShiftRight}
+				class={gamePhase === 'Post' ? 'pointer-events-none opacity-30' : ''}
+				><ArrowRight /></button
+			>
+		</div>
 	</div>
 
-	<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} />
+	{#if gamePhase === 'Auto'}
+		<AutoActionInputs bind:furthest_auto_index bind:held 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:furthest_auto_index
+			bind:held
+			bind:actions
+			bind:displaying={timelineExtended}
+		/>
+	{:else if gamePhase === 'Tele'}
+		<TeleActionInputs bind:held 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:furthest_auto_index
+			bind:held
+			bind:actions
+			bind:displaying={timelineExtended}
+		/>
+	{:else}
+		<div>Postmatch</div>
+		<button class="mt-auto w-full rounded bg-gunmetal p-2 font-bold">Submit</button>
+	{/if}
 </div>
diff --git a/src/routes/scout/[team_data]/ActionInputs.svelte b/src/routes/scout/[team_data]/AutoActionInputs.svelte
similarity index 81%
rename from src/routes/scout/[team_data]/ActionInputs.svelte
rename to src/routes/scout/[team_data]/AutoActionInputs.svelte
index 1f3150e..c96a201 100644
--- a/src/routes/scout/[team_data]/ActionInputs.svelte
+++ b/src/routes/scout/[team_data]/AutoActionInputs.svelte
@@ -1,19 +1,23 @@
 <script lang="ts">
 	import SuccessFail from '$lib/components/SuccessFail.svelte';
-	import type { AutoAction, AutoInputState, AutoActionData } from '$lib/types';
+	import type { AutoAction, AutoInputState, AutoActionData, AutoHeldItems } from '$lib/types';
 
 	let {
 		actions = $bindable(),
+		held = $bindable(),
+		furthest_auto_index = $bindable(),
 		pageName = $bindable()
-	}: { actions: AutoActionData[]; pageName: string } = $props();
+	}: {
+		actions: AutoActionData[];
+		held: AutoHeldItems;
+		furthest_auto_index: number;
+		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);
-	const held_scorables: number = $derived(held_balloons + held_bunnies);
-	const 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;
@@ -34,16 +38,16 @@
 	function complete(success: boolean) {
 		// 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--;
+			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--;
+		if (actionState.includes('ScoreBalloon')) held.balloons--;
+		else if (actionState.includes('ScoreBunny')) held.bunnies--;
 
 		const action: AutoActionData = {
 			action: actionState as AutoAction,
@@ -51,6 +55,7 @@
 			ok: true
 		};
 		actions.push(action);
+		furthest_auto_index++;
 		actionState = 'None';
 	}
 
@@ -97,7 +102,7 @@
 		>
 	{:else if is_score_state}
 		<div class="flex w-full flex-grow flex-col items-center gap-2 py-2 text-lg font-bold">
-			{#if held_bunnies > 0}
+			{#if held.bunnies > 0}
 				<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">
@@ -109,7 +114,7 @@
 							onclick={() => score_bunny('UncontrolledTote')}
 							>Uncontrolled Tote</button
 						>
-						{#if held_totes > 0}
+						{#if held.totes > 0}
 							<button
 								class="rounded bg-gunmetal p-2"
 								onclick={() => score_bunny('InternalTote')}
@@ -117,13 +122,13 @@
 							>
 						{/if}
 						<button
-							class="rounded bg-gunmetal p-2 {held_totes <= 0 ? 'col-span-2' : ''}"
+							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}
+			{#if held.balloons > 0}
 				<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">
@@ -135,7 +140,7 @@
 							onclick={() => score_balloon('UncontrolledTote')}
 							>Uncontrolled Tote</button
 						>
-						{#if held_totes > 0}
+						{#if held.totes > 0}
 							<button
 								class="rounded bg-gunmetal p-2"
 								onclick={() => score_balloon('InternalTote')}
@@ -143,7 +148,7 @@
 							>
 						{/if}
 						<button
-							class="rounded bg-gunmetal p-2 {held_totes <= 0 ? 'col-span-2' : ''}"
+							class="rounded bg-gunmetal p-2 {held.totes <= 0 ? 'col-span-2' : ''}"
 							onclick={() => score_balloon('ExternalTote')}
 							>External Held Tote
 						</button>
@@ -156,19 +161,19 @@
 		</div>
 	{:else if is_eject_state}
 		<div class="grid w-full flex-grow grid-flow-row gap-2 py-2 font-bold">
-			{#if held_bunnies > 0}
+			{#if held.bunnies > 0}
 				<button
 					class="w-full rounded bg-gunmetal p-2"
 					onclick={() => (actionState = 'EjectBunny')}>Bunny</button
 				>
 			{/if}
-			{#if held_balloons > 0}
+			{#if held.balloons > 0}
 				<button
 					class="w-full rounded bg-gunmetal p-2"
 					onclick={() => (actionState = 'EjectBalloon')}>Ballon</button
 				>
 			{/if}
-			{#if held_totes > 0}
+			{#if held.totes > 0}
 				<button
 					class="w-full rounded bg-gunmetal p-2"
 					onclick={() => (actionState = 'EjectTote')}>Tote</button
diff --git a/src/routes/scout/[team_data]/TeleActionInputs.svelte b/src/routes/scout/[team_data]/TeleActionInputs.svelte
new file mode 100644
index 0000000..ef3c675
--- /dev/null
+++ b/src/routes/scout/[team_data]/TeleActionInputs.svelte
@@ -0,0 +1,153 @@
+<script lang="ts">
+	import SuccessFail from '$lib/components/SuccessFail.svelte';
+	import type {
+		TeleAction,
+		TeleInputState,
+		TeleActionData,
+		AutoHeldItems,
+		AutoActionData
+	} from '$lib/types';
+
+	let {
+		actions = $bindable(),
+		held = $bindable(),
+		pageName = $bindable()
+		// Not a mistake, this is intentional to allow a shared timeline
+	}: { actions: AutoActionData[]; held: AutoHeldItems; pageName: string } = $props();
+
+	let actionState: TeleInputState = $state('None') as TeleInputState;
+
+	const held_ejectables: number = $derived(held.balloons + held.totes);
+
+	function intake_piece() {
+		actionState = actionState === 'None' ? 'Intake' : actionState;
+	}
+	function score_piece() {
+		actionState = actionState === 'None' ? 'Score' : actionState;
+	}
+	function eject_piece() {
+		actionState = actionState === 'None' ? 'Eject' : actionState;
+	}
+
+	function score_balloon(where: 'Low' | 'InternalTote' | 'ExternalTote' | 'UncontrolledTote') {
+		actionState = `ScoreBalloon${where}`;
+	}
+	function complete(success: boolean) {
+		// Assume that a failure means a note remains where it is
+		if (success) {
+			if (actionState.includes('IntakeBalloon')) held.balloons++;
+			else if (actionState.includes('IntakeTote')) held.totes++;
+			else if (actionState.includes('EjectBalloon')) held.balloons--;
+			else if (actionState.includes('EjectTote')) held.totes--;
+		}
+		// Assume failed scoring is still ejecting
+		if (actionState.includes('ScoreBalloon')) held.balloons--;
+
+		const action: TeleActionData = {
+			action: actionState as TeleAction,
+			success: success,
+			ok: true
+		};
+		actions.push(action); // This is fine because TeleActionData is a subset of AutoActionData
+		actionState = 'None';
+	}
+
+	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>
+
+<div class="align-center flex w-full max-w-md flex-grow flex-col px-2">
+	{#if is_none_state}
+		<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.balloons > 0}
+				<button class="rounded bg-gunmetal p-2" onclick={score_piece}>Score</button>
+			{/if}
+			{#if held_ejectables > 0}
+				<button class="rounded bg-gunmetal 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 text-xl font-bold">
+			<button
+				class="col-span-2 rounded bg-gunmetal p-2"
+				onclick={() => (actionState = 'IntakeTote')}>Tote</button
+			>
+			<button class="rounded bg-gunmetal p-2" onclick={() => (actionState = 'IntakeBalloon')}
+				>Balloon: Ground</button
+			>
+			<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="flex w-full flex-grow flex-col items-center gap-2 py-2 text-lg font-bold">
+			<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>
+			<button class="w-full rounded bg-gunmetal p-2" onclick={() => (actionState = 'None')}
+				>Cancel</button
+			>
+		</div>
+	{:else if is_eject_state}
+		<div class="grid w-full flex-grow grid-flow-row gap-2 py-2 font-bold">
+			{#if held.balloons > 0}
+				<button
+					class="w-full rounded bg-gunmetal p-2"
+					onclick={() => (actionState = 'EjectBalloon')}>Ballon</button
+				>
+			{/if}
+			{#if held.totes > 0}
+				<button
+					class="w-full rounded bg-gunmetal p-2"
+					onclick={() => (actionState = 'EjectTote')}>Tote</button
+				>
+			{/if}
+		</div>
+		<button class="w-full rounded bg-gunmetal p-2" onclick={() => (actionState = 'None')}
+			>Cancel</button
+		>
+	{:else}
+		<SuccessFail
+			{complete}
+			cancel={() =>
+				(actionState =
+					actionState.substring(0, 1) === 'S'
+						? 'Score'
+						: actionState.substring(0, 1) === 'E'
+							? 'Eject'
+							: 'Intake')}
+		/>
+	{/if}
+</div>