diff --git a/src/routes/private/events/archived/+page.svelte b/src/routes/private/events/archived/+page.svelte
index e309c53..2df8b53 100644
--- a/src/routes/private/events/archived/+page.svelte
+++ b/src/routes/private/events/archived/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
+    import { page } from '$app/state';
 
 	let { data } = $props();
 
@@ -7,7 +8,8 @@
 	let loading = $state(true);
 
 	onMount(async () => {
-		const event_id = new URLSearchParams(window.location.search).get('id');
+		const event_id = page.url.searchParams.get('id');
+        
 		if (!event_id) {
 			loading = false;
 			return;
diff --git a/src/routes/private/events/creator/+page.svelte b/src/routes/private/events/creator/+page.svelte
index 0b2e1f0..4a2818f 100644
--- a/src/routes/private/events/creator/+page.svelte
+++ b/src/routes/private/events/creator/+page.svelte
@@ -17,7 +17,7 @@
 	let isAddingParticipants = $state(false);
 
 	onMount(async () => {
-		const eventId = page.url.searchParams.get('id');
+		const eventId = page.url.searchParams.get('eventId');
 		if (eventId) {
 			existingEventId = eventId;
 			isAddingParticipants = true;
@@ -74,11 +74,13 @@
 	}
 </script>
 
-<div class="mt-2 mb-4">
-	{#if isAddingParticipants}
-		<h1 class="text-xl font-semibold text-gray-700 text-center">Add Participants to "{event.name}"</h1>
-	{/if}
-</div>
+{#if isAddingParticipants}
+	<div class="mt-2 mb-4">
+		<h1 class="text-center text-xl font-semibold text-gray-700">
+			Adding Participants to "{event.name}"
+		</h1>
+	</div>
+{/if}
 
 {#if step == 0}
 	<StepConnectGoogle bind:authorized />
@@ -103,27 +105,27 @@
 <div class="pb-20"></div>
 
 <div
-  class="fixed bottom-0 left-0 z-10 flex w-full items-center justify-between gap-4 border-t border-gray-300 bg-white px-4 py-2"
-  style="max-width: 100vw;"
+	class="fixed bottom-0 left-0 z-10 flex w-full items-center justify-between gap-4 border-t border-gray-300 bg-white px-4 py-2"
+	style="max-width: 100vw;"
 >
-  <div class="container mx-auto max-w-2xl p-2 flex justify-content-center">
-    <button
-      onclick={prevStep}
-      disabled={step === 0}
-      class="min-w-[100px] rounded-md border border-gray-300 bg-white px-4 py-2 text-gray-700 transition hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50"
-      aria-label="Previous step"
-    >
-      Previous
-    </button>
-    <span class="flex-1 flex items-center justify-center text-center font-medium text-gray-600">
-      Step {step + 1} of {steps.length}
-    </span>
-    <button
-      onclick={nextStep}
-      disabled={step === steps.length - 1 || !stepConditions[step]}
-      class="min-w-[100px] rounded border border-gray-300 bg-white px-4 py-2 text-gray-700 transition hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50"
-    >
-      Next
-    </button>
-  </div>
+	<div class="justify-content-center container mx-auto flex max-w-2xl p-2">
+		<button
+			onclick={prevStep}
+			disabled={step === 0}
+			class="min-w-[100px] rounded-md border border-gray-300 bg-white px-4 py-2 text-gray-700 transition hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50"
+			aria-label="Previous step"
+		>
+			Previous
+		</button>
+		<span class="flex flex-1 items-center justify-center text-center font-medium text-gray-600">
+			Step {step + 1} of {steps.length}
+		</span>
+		<button
+			onclick={nextStep}
+			disabled={step === steps.length - 1 || !stepConditions[step]}
+			class="min-w-[100px] rounded border border-gray-300 bg-white px-4 py-2 text-gray-700 transition hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50"
+		>
+			Next
+		</button>
+	</div>
 </div>
diff --git a/src/routes/private/events/creator/steps/StepConnectGoogle.svelte b/src/routes/private/events/creator/steps/StepConnectGoogle.svelte
index 4c56994..4d381c9 100644
--- a/src/routes/private/events/creator/steps/StepConnectGoogle.svelte
+++ b/src/routes/private/events/creator/steps/StepConnectGoogle.svelte
@@ -46,7 +46,7 @@
 	}
 </script>
 
-<div class="mb-4 rounded border border-gray-300 bg-white p-4">
+<div class="mb-4 mt-2 rounded border border-gray-300 bg-white p-4">
 	{#if loading}
 		<div class="flex items-center space-x-2">
 			<svg class="animate-spin h-5 w-5 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
diff --git a/src/routes/private/events/creator/steps/StepCraftEmail.svelte b/src/routes/private/events/creator/steps/StepCraftEmail.svelte
index 32c878c..085baaf 100644
--- a/src/routes/private/events/creator/steps/StepCraftEmail.svelte
+++ b/src/routes/private/events/creator/steps/StepCraftEmail.svelte
@@ -20,7 +20,7 @@
 </script>
 
 {#if showForm}
-	<form onsubmit={handleSubmit} class="flex flex-col space-y-4 bg-white p-8 rounded border border-gray-300 w-full shadow-none">
+	<form onsubmit={handleSubmit} class="flex mt-2 flex-col space-y-4 bg-white p-8 rounded border border-gray-300 w-full shadow-none">
 		<h2 class="text-2xl font-semibold text-center mb-4">Craft Email</h2>
 		<label class="flex flex-col text-gray-700">
 			Subject
@@ -51,7 +51,7 @@
 	</form>
 {:else}
 	<button
-		class="mb-4 w-full rounded bg-blue-600 py-2 text-white transition hover:bg-blue-700"
+		class="mb-4 mt-2 w-full rounded bg-blue-600 py-2 text-white transition hover:bg-blue-700"
 		onclick={showEditForm}
 		aria-label="Edit email"
 	>
diff --git a/src/routes/private/events/creator/steps/StepCreateEvent.svelte b/src/routes/private/events/creator/steps/StepCreateEvent.svelte
index 5c96e46..ad0856e 100644
--- a/src/routes/private/events/creator/steps/StepCreateEvent.svelte
+++ b/src/routes/private/events/creator/steps/StepCreateEvent.svelte
@@ -28,7 +28,7 @@
 	<form
 		onsubmit={handleSubmit}
 		autocomplete="off"
-		class="flex w-full flex-col space-y-4 rounded border border-gray-300 bg-white p-8 shadow-none"
+		class="flex mt-2 w-full flex-col space-y-4 rounded border border-gray-300 bg-white p-8 shadow-none"
 	>
 		<h2 class="mb-4 text-center text-2xl font-semibold">Create Event</h2>
 		<label class="mt-2 flex flex-col text-gray-700">
@@ -63,7 +63,7 @@
 {#if !showForm}
 	{#if !readonly}
 		<button
-			class="mb-4 w-full rounded bg-blue-600 py-2 text-white transition hover:bg-blue-700"
+			class="mb-4 mt-2 w-full rounded bg-blue-600 py-2 text-white transition hover:bg-blue-700"
 			onclick={showEditForm}
 			aria-label="Edit event"
 		>
diff --git a/src/routes/private/events/creator/steps/StepOverview.svelte b/src/routes/private/events/creator/steps/StepOverview.svelte
index 836d1bd..8f23aa9 100644
--- a/src/routes/private/events/creator/steps/StepOverview.svelte
+++ b/src/routes/private/events/creator/steps/StepOverview.svelte
@@ -18,7 +18,7 @@
 </script>
 
 <!-- New Event Overview -->
-<div class="mb-4 rounded border border-gray-300 bg-white p-4">
+<div class="mb-4 mt-2 rounded border border-gray-300 bg-white p-4">
 	<h2 class="mb-2 text-xl font-bold">Event Overview</h2>
 	<ul class="space-y-1">
 		<li><span class="font-semibold">Name:</span> {event.name}</li>
diff --git a/src/routes/private/events/creator/steps/StepUploadParticipants.svelte b/src/routes/private/events/creator/steps/StepUploadParticipants.svelte
index ac8cf52..d973d4f 100644
--- a/src/routes/private/events/creator/steps/StepUploadParticipants.svelte
+++ b/src/routes/private/events/creator/steps/StepUploadParticipants.svelte
@@ -64,7 +64,7 @@
 
 {#if showForm}
 	{#if errors.length > 0}
-		<div class="mb-4 rounded border border-red-400 bg-red-50 p-4 text-red-700">
+		<div class="mb-4 mt-2 rounded border border-red-400 bg-red-50 p-4 text-red-700">
 			<ul class="list-disc ml-4">
 				{#each errors as err}
 					<li>{err}</li>
@@ -76,7 +76,7 @@
 		onsubmit={handleSubmit}
 		autocomplete="off"
 		enctype="multipart/form-data"
-		class="flex w-full flex-col space-y-4 rounded border border-gray-300 bg-white p-8 shadow-none"
+		class="flex mt-2 w-full flex-col space-y-4 rounded border border-gray-300 bg-white p-8 shadow-none"
 	>
 		<h2 class="mb-4 text-center text-2xl font-semibold">Upload Participants</h2>
 		<label class="flex flex-col text-gray-700">
@@ -99,7 +99,7 @@
 	</form>
 {:else}
 	<button
-		class="w-full rounded bg-blue-600 py-2 text-white transition hover:bg-blue-700"
+		class="w-full mt-2 rounded bg-blue-600 py-2 text-white transition hover:bg-blue-700"
 		onclick={showEditForm}
 		aria-label="Edit participants"
 	>
diff --git a/src/routes/private/events/event/+page.svelte b/src/routes/private/events/event/+page.svelte
index c7432b4..fbe63d5 100644
--- a/src/routes/private/events/event/+page.svelte
+++ b/src/routes/private/events/event/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
+	import { page } from '$app/state';
 
 	let { data } = $props();
 
@@ -10,7 +11,8 @@
 	let notScannedCount: number = $state(0);
 
 	onMount(async () => {
-		const event_id = new URLSearchParams(window.location.search).get('id');
+		const event_id = page.url.searchParams.get('id');
+
 		if (!event_id) {
 			loading = false;
 			return;