diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
index 084af10..a009208 100644
--- a/.github/copilot-instructions.md
+++ b/.github/copilot-instructions.md
@@ -1,4 +1,7 @@
 GitHub Copilot Instructions for This Repository
+
+If you have any questions, always ask me first.
+
 Use Svelte 5 runes exclusively
 
 Declare reactive state with $state(); derive values with $derived(); run side-effect logic with $effect() etc. 
diff --git a/src/routes/private/api/gmail/+server.ts b/src/routes/private/api/google/gmail/+server.ts
similarity index 100%
rename from src/routes/private/api/gmail/+server.ts
rename to src/routes/private/api/google/gmail/+server.ts
diff --git a/src/routes/private/events/event/view/+page.svelte b/src/routes/private/events/event/view/+page.svelte
index 51fd7f2..b671f38 100644
--- a/src/routes/private/events/event/view/+page.svelte
+++ b/src/routes/private/events/event/view/+page.svelte
@@ -197,7 +197,7 @@
 
 		try {
 			// Send all emails in batch
-			const response = await fetch('/private/api/gmail', {
+			const response = await fetch('/private/api/google/gmail', {
 				method: 'POST',
 				headers: {
 					'Content-Type': 'application/json'
diff --git a/src/routes/private/scanner/+page.svelte b/src/routes/private/scanner/+page.svelte
index 8220dab..36fad5f 100644
--- a/src/routes/private/scanner/+page.svelte
+++ b/src/routes/private/scanner/+page.svelte
@@ -7,21 +7,21 @@
 	import { ScanState, defaultTicketData } from '$lib/types/types';
 
 	let { data } = $props();
-	let scanned_id = $state<string>("");
+	let scanned_id = $state<string>('');
 	let ticket_data = $state<TicketData>(defaultTicketData);
 	let scan_state = $state<ScanState>(ScanState.scanning);
-	
+
 	// Events related state
 	interface Event {
 		id: string;
 		name: string;
 		date: string;
 	}
-	
+
 	let events = $state<Event[]>([]);
-	let selectedEventId = $state<string>("");
+	let selectedEventId = $state<string>('');
 	let isLoadingEvents = $state(true);
-	let eventsError = $state("");
+	let eventsError = $state('');
 
 	onMount(async () => {
 		await loadEvents();
@@ -30,7 +30,7 @@
 	async function loadEvents() {
 		isLoadingEvents = true;
 		eventsError = '';
-		
+
 		try {
 			const { data: eventsData, error } = await data.supabase
 				.from('events')
@@ -39,7 +39,7 @@
 
 			if (error) throw error;
 			events = eventsData || [];
-			
+
 			// If there are events, select the first one by default
 			if (events.length > 0) {
 				selectedEventId = events[0].id;
@@ -54,20 +54,20 @@
 
 	// Process a scanned QR code
 	$effect(() => {
-		if (scanned_id === "") return;
+		if (scanned_id === '') return;
 		scan_state = ScanState.scanning;
 
-		console.log("Scanned ID:", scanned_id);
+		console.log('Scanned ID:', scanned_id);
 
 		data.supabase
 			.from('participants')
 			.select(`*, event ( id, name ), scanned_by ( id, display_name )`)
 			.eq('id', scanned_id)
-			.then(response => {
+			.then((response) => {
 				if (response.data && response.data.length > 0) {
 					const participant = response.data[0];
 					ticket_data = participant;
-					
+
 					// Check if the participant belongs to the selected event
 					if (selectedEventId && participant.event.id !== selectedEventId) {
 						scan_state = ScanState.wrong_event;
@@ -81,73 +81,52 @@
 					ticket_data = defaultTicketData;
 					scan_state = ScanState.scan_failed;
 				}
-				
+
 				// Reset the scanned_id after 3 seconds to allow for a new scan
 				setTimeout(() => {
-					scanned_id = "";
+					scanned_id = '';
 				}, 3000);
 			});
 	});
 </script>
 
-<div class="mx-auto p-4">
-	<h1 class="text-2xl font-bold mb-6 text-center">Code Scanner</h1>
+<h1 class="text-2xl font-bold mb-4 mt-2 text-center">Code Scanner</h1>
 
-	<!-- Event Selector -->
-	<div class="rounded-lg border border-gray-300 p-4 mb-4">
-		<h2 class="text-lg font-semibold mb-3">Select Event</h2>
-		{#if isLoadingEvents}
-			<div class="flex items-center justify-center h-10">
-				<div class="animate-spin h-5 w-5 border-2 border-gray-500 rounded-full border-t-transparent"></div>
-			</div>
-		{:else if eventsError}
-			<div class="text-red-600 text-center py-2">
-				{eventsError}
-				<button 
-					onclick={loadEvents}
-					class="ml-2 text-blue-600 underline"
-				>
-					Try again
-				</button>
-			</div>
-		{:else if events.length === 0}
-			<p class="text-gray-500 text-center py-2">No events found</p>
-		{:else}
-			<select 
-				bind:value={selectedEventId}
-				class="w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
-			>
-				{#each events as event}
-					<option value={event.id}>
-						{event.name} ({new Date(event.date).toLocaleDateString('en-GB')})
-					</option>
-				{/each}
-			</select>
-		{/if}
-	</div>
-
-	<!-- Scanner Section -->
-	<div class="mb-4">
-		<QRScanner bind:message={scanned_id} />
-	</div>
-
-	<!-- Ticket Display Section -->
-	<h2 class="text-lg font-semibold mb-4">Ticket Information</h2>
-	<TicketDisplay {ticket_data} {scan_state} />
-	
-	<!-- Reset button -->
-	{#if scan_state !== ScanState.scanning}
-		<div class="flex justify-center mt-6 mb-4">
-			<button 
-				onclick={() => {
-					scanned_id = "";
-					scan_state = ScanState.scanning;
-				}}
-				class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold py-2 px-6 rounded-lg transition"
-				aria-label="Reset scanner"
-			>
-				Reset Scanner
-			</button>
+<!-- Event Selector -->
+<div class="mb-4 rounded-lg border border-gray-300 p-4">
+	<h2 class="mb-3 text-lg font-semibold">Select Event</h2>
+	{#if isLoadingEvents}
+		<div class="flex h-10 items-center justify-center">
+			<div
+				class="h-5 w-5 animate-spin rounded-full border-2 border-gray-500 border-t-transparent"
+			></div>
 		</div>
+	{:else if eventsError}
+		<div class="py-2 text-center text-red-600">
+			{eventsError}
+			<button onclick={loadEvents} class="ml-2 text-blue-600 underline"> Try again </button>
+		</div>
+	{:else if events.length === 0}
+		<p class="py-2 text-center text-gray-500">No events found</p>
+	{:else}
+		<select
+			bind:value={selectedEventId}
+			class="w-full rounded border border-gray-300 p-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
+		>
+			{#each events as event}
+				<option value={event.id}>
+					{event.name} ({new Date(event.date).toLocaleDateString('en-GB')})
+				</option>
+			{/each}
+		</select>
 	{/if}
 </div>
+
+<!-- Scanner Section -->
+<div class="mb-4">
+	<QRScanner bind:message={scanned_id} />
+</div>
+
+<!-- Ticket Display Section -->
+<h2 class="mb-2 text-lg font-semibold">Ticket Information</h2>
+<TicketDisplay {ticket_data} {scan_state} />