diff --git a/src/routes/private/+layout.svelte b/src/routes/private/+layout.svelte
index 60352a1..62b9f4c 100644
--- a/src/routes/private/+layout.svelte
+++ b/src/routes/private/+layout.svelte
@@ -11,6 +11,6 @@
     </ul>
 </nav>
 
-<div class="container p-2 bg-white ">
+<div class="container max-w-2xl mx-auto p-2 bg-white">
     <slot />
 </div>
diff --git a/src/routes/private/creator/+page.svelte b/src/routes/private/creator/+page.svelte
index af11e51..4475815 100644
--- a/src/routes/private/creator/+page.svelte
+++ b/src/routes/private/creator/+page.svelte
@@ -45,6 +45,26 @@
   }
 </script>
 
+<div class="flex items-center justify-between mb-4 mt-2">
+  <button
+    onclick={prevStep}
+    disabled={step === 0}
+    class="min-w-[100px] py-2 px-4 bg-white border border-gray-300 text-gray-700 rounded hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition"
+  >
+    Previous
+  </button>
+  <span class="flex-1 text-center text-gray-600 font-medium">
+    Step {step + 1} of {steps.length}
+  </span>
+  <button
+    onclick={nextStep}
+    disabled={step === steps.length - 1}
+    class="min-w-[100px] py-2 px-4 bg-white border border-gray-300 text-gray-700 rounded hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition"
+  >
+    Next
+  </button>
+</div>
+
 <!-- Render the current step component -->
 {#if step == 0}
   <StepConnectGoogle />
@@ -57,23 +77,3 @@
 {:else if step == 4}
   <StepOverview {new_event} {participants} {subject} {body} />
 {/if}
-
-<div class="flex items-center justify-between mt-4">
-  <button
-    on:click={prevStep}
-    disabled={step === 0}
-    class="min-w-[100px] py-2 px-4 bg-white border border-gray-300 text-gray-700 rounded hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition"
-  >
-    Previous
-  </button>
-  <span class="flex-1 text-center text-gray-600 font-medium">
-    Step {step + 1} of {steps.length}
-  </span>
-  <button
-    on:click={nextStep}
-    disabled={step === steps.length - 1}
-    class="min-w-[100px] py-2 px-4 bg-white border border-gray-300 text-gray-700 rounded hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition"
-  >
-    Next
-  </button>
-</div>
diff --git a/src/routes/private/creator/steps/StepConnectGoogle.svelte b/src/routes/private/creator/steps/StepConnectGoogle.svelte
index bc663c5..fddc9f7 100644
--- a/src/routes/private/creator/steps/StepConnectGoogle.svelte
+++ b/src/routes/private/creator/steps/StepConnectGoogle.svelte
@@ -4,6 +4,7 @@
 
 	let refreshToken = '';
 	let authorized = false;
+	let loading = true;
 
 	let to = '';
 	let subject = '';
@@ -22,9 +23,10 @@
 	}
 
 	onMount(async () => {
-		console.log("on mount");
 		refreshToken = localStorage.getItem('gmail_refresh_token') ?? '';
+		loading = true;
 		authorized = await validateToken(refreshToken);
+		loading = false;
 	});
 
 	/* ⇢ redirects straight to Google via server 302 */
@@ -59,11 +61,30 @@
 	}
 </script>
 
-{#if !authorized}
-	<section class="space-y-4">
-		<p>You haven’t connected your Google account yet.</p>
-		<button class="btn" on:click={connect}>Connect Google</button>
-	</section>
-{:else}
-	Your connection is good, proceed to next step
-{/if}
+<div class="mb-4 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">
+				<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+				<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z"></path>
+			</svg>
+			<span>Checking Google connection...</span>
+		</div>
+	{:else}
+		{#if !authorized}
+			<section class="flex items-center justify-between w-full">
+				<p class="mr-4">You haven’t connected your Google account yet.</p>
+				<button class="btn bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded ml-auto" on:click={connect}>
+					Connect Google
+				</button>
+			</section>
+		{:else}
+			<div class="flex items-center space-x-2 text-green-600">
+				<svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+					<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
+				</svg>
+				<span>Your connection to Google is good, proceed to next step</span>
+			</div>
+		{/if}
+	{/if}
+</div>
diff --git a/src/routes/private/creator/steps/StepCraftEmail.svelte b/src/routes/private/creator/steps/StepCraftEmail.svelte
index 6e7956d..6f5da17 100644
--- a/src/routes/private/creator/steps/StepCraftEmail.svelte
+++ b/src/routes/private/creator/steps/StepCraftEmail.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  export let subject = '';
-  export let body = '';
+  export let subject: string;
+  export let body: string;
 </script>
 
 <form class="flex flex-col space-y-4 bg-white p-8 rounded border border-gray-300 w-full shadow-none">
diff --git a/src/routes/private/creator/steps/StepCreateEvent.svelte b/src/routes/private/creator/steps/StepCreateEvent.svelte
index 49d22e2..f3ca66d 100644
--- a/src/routes/private/creator/steps/StepCreateEvent.svelte
+++ b/src/routes/private/creator/steps/StepCreateEvent.svelte
@@ -2,11 +2,20 @@
 	import { enhance } from '$app/forms';
 
 	let { events, new_event } = $props();
+	let loading = $state(false);
 
+	function handleEnhance() {
+		loading = true;
+
+		return async ({ update }) => {
+			await update();
+			loading = false;
+		};
+	}
 </script>
 
 
-<form method="POST" action="?/create" use:enhance class="flex flex-col space-y-4 bg-white p-8 rounded border border-gray-300 w-full shadow-none">
+<form method="POST" action="?/create" use:enhance={handleEnhance} class="flex 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">Create Event</h2>
   <label class="flex flex-col text-gray-700">
     Name
@@ -43,7 +52,15 @@
   </button>
 </form>
 
-{#if Object.keys(new_event).length > 0}
+{#if Object.keys(new_event).length === 0}
+  <div class="mt-4 rounded border-l-4 border-gray-500 bg-gray-100 p-4 text-gray-700">
+    {#if loading}
+      <strong>Loading...</strong>
+    {:else}
+      <strong>No event created yet...</strong>
+    {/if}
+  </div>
+{:else}
   <div class="rounded border-l-4 border-green-500 bg-green-100 p-4 text-green-700 mt-4">
     <ol>
       <li><strong>{new_event.name}</strong></li>
diff --git a/src/routes/private/creator/steps/StepOverview.svelte b/src/routes/private/creator/steps/StepOverview.svelte
index a0d5289..ed4350b 100644
--- a/src/routes/private/creator/steps/StepOverview.svelte
+++ b/src/routes/private/creator/steps/StepOverview.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <!-- New Event Overview -->
-<div class="bg-white border border-gray-300 rounded p-6 mb-6">
+<div class="bg-white border border-gray-300 rounded p-4 mb-4">
   <h2 class="text-xl font-bold mb-2">Event Overview</h2>
   <ul class="space-y-1">
     <li><span class="font-semibold">Name:</span> {new_event.name}</li>
@@ -13,23 +13,31 @@
 </div>
 
 <!-- Email Overview -->
-<div class="bg-white border border-gray-300 rounded p-6 mb-6">
+<div class="bg-white border border-gray-300 rounded p-4 mb-4">
   <h2 class="text-xl font-bold mb-2">Email Preview</h2>
   <div class="mb-2"><span class="font-semibold">Subject:</span> {subject}</div>
-  <div class="whitespace-pre-line border rounded p-2 bg-gray-50 text-gray-700"><span class="font-semibold">Body:</span>
-    <div class="mt-1">{body}</div>
+  <div class="whitespace-pre-line border rounded p-2 bg-gray-50 text-gray-700"><span class="font-semibold"></span>
+    <div>{body}</div>
   </div>
 </div>
 
 <!-- Participants Overview -->
-<div class="bg-white border border-gray-300 rounded p-6">
-  <h2 class="text-xl font-bold mb-2">Participants ({participants.length})</h2>
-  <ul class="space-y-1">
-    {#each participants as p}
-      <li class="flex items-center gap-2 border-b last:border-b-0 pb-1">
-        <span class="font-semibold">{p.name} {p.surname}</span>
-        <span class="font-mono text-xs text-gray-600">{p.email}</span>
-      </li>
-    {/each}
-  </ul>
-</div>
\ No newline at end of file
+<div class="bg-white border border-gray-300 rounded p-4">
+    <h2 class="text-xl font-bold mb-2">Participants ({participants.length})</h2>
+    <ul class="space-y-1">
+        {#each participants.slice(0, 10) as p}
+        <li class="flex items-center gap-2 border-b last:border-b-0 pb-1">
+            <span class="font-semibold">{p.name} {p.surname}</span>
+            <span class="flex-1"></span>
+            <span class="font-mono text-xs text-gray-600 text-right">{p.email}</span>
+        </li>
+        {/each}
+    </ul>
+    <p class="text-sm text-gray-500 mt-2">Note: Only the first 10 participants are shown.</p>
+</div>
+
+<button
+    class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded mt-4 transition-colors duration-200"
+>
+    Generate QR codes and send
+</button>
\ No newline at end of file
diff --git a/src/routes/private/creator/steps/StepUploadFiles.svelte b/src/routes/private/creator/steps/StepUploadFiles.svelte
index 307fdec..9d5e0f1 100644
--- a/src/routes/private/creator/steps/StepUploadFiles.svelte
+++ b/src/routes/private/creator/steps/StepUploadFiles.svelte
@@ -2,11 +2,26 @@
 	import { enhance } from '$app/forms';
 
 	let { participants = [] } = $props();
+	let loading = $state(false);
 
+	function handleEnhance() {
+		loading = true;
+
+		return async ({ update }) => {
+			await update();
+			loading = false;
+		};
+	}
 </script>
 
-<form method="POST" action="?/participants" use:enhance enctype="multipart/form-data" class="flex 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">Upload Participants</h2>
+<form
+	method="POST"
+	action="?/participants"
+	use:enhance={handleEnhance}
+	enctype="multipart/form-data"
+	class="flex 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">
 		CSV File
 		<input
@@ -14,30 +29,34 @@
 			name="participants"
 			id="participants"
 			accept=".csv"
-			class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200"
+			class="mt-1 rounded border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-blue-200 focus:outline-none"
 			required
 		/>
 	</label>
 	<button
 		type="submit"
-		class="w-full py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition"
+		class="w-full rounded bg-blue-600 py-2 text-white transition hover:bg-blue-700"
 	>
 		Submit
 	</button>
 </form>
 
 {#if participants.length === 0}
-	<p class="text-gray-500 mt-4">No participants added yet.</p>
-{/if}
-
-{#if participants.length > 0}
-	<div class="rounded border-l-4 border-green-500 bg-green-50 p-4 text-green-700 mt-4">
+	<div class="mt-4 rounded border-l-4 border-gray-500 bg-gray-100 p-4 text-gray-700">
+		{#if loading}
+			<strong>Loading...</strong>
+		{:else}
+			<strong>No participants yet...</strong>
+		{/if}
+	</div>
+{:else}
+	<div class="mt-4 rounded border-l-4 border-green-500 bg-green-50 p-4 text-green-700">
 		<ul class="space-y-2">
 			{#each participants as p, i}
 				<li class="flex items-center justify-between border-b pb-1">
 					<div>
 						<div class="font-semibold">{p.name} {p.surname}</div>
-						<div class="text-xs font-mono text-gray-600">{p.email}</div>
+						<div class="font-mono text-xs text-gray-600">{p.email}</div>
 					</div>
 				</li>
 			{/each}