diff --git a/package-lock.json b/package-lock.json
index 7fe9a7f..7bf4e88 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,8 @@
 				"@supabase/ssr": "^0.6.1",
 				"@supabase/supabase-js": "^2.50.0",
 				"@sveltejs/adapter-node": "^5.2.12",
-				"googleapis": "^150.0.1"
+				"googleapis": "^150.0.1",
+				"papaparse": "^5.5.3"
 			},
 			"devDependencies": {
 				"@sveltejs/kit": "^2.16.0",
@@ -2497,6 +2498,12 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/papaparse": {
+			"version": "5.5.3",
+			"resolved": "https://registry.npmjs.org/papaparse/-/papaparse-5.5.3.tgz",
+			"integrity": "sha512-5QvjGxYVjxO59MGU2lHVYpRWBBtKHnlIAcSe1uNFCkkptUh63NFRj0FJQm7nR67puEruUci/ZkjmEFrjCAyP4A==",
+			"license": "MIT"
+		},
 		"node_modules/path-parse": {
 			"version": "1.0.7",
 			"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
diff --git a/package.json b/package.json
index bb5447b..d856c29 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
 		"@supabase/ssr": "^0.6.1",
 		"@supabase/supabase-js": "^2.50.0",
 		"@sveltejs/adapter-node": "^5.2.12",
-		"googleapis": "^150.0.1"
+		"googleapis": "^150.0.1",
+		"papaparse": "^5.5.3"
 	}
 }
diff --git a/src/routes/private/creator/+page.server.ts b/src/routes/private/creator/+page.server.ts
new file mode 100644
index 0000000..f324d97
--- /dev/null
+++ b/src/routes/private/creator/+page.server.ts
@@ -0,0 +1,61 @@
+import type { Actions } from './$types';
+import { error as kitError } from '@sveltejs/kit';
+import Papa from 'papaparse';
+import { fail } from '@sveltejs/kit';
+
+export async function load({ locals }) {
+    console.log("▶️ fetching events…");
+
+    const { data: events, error } = await locals.supabase
+        .from('events')
+        .select('*')
+        .order('date', { ascending: true });
+
+    if (error) {
+        console.error('❌ supabase error:', error);
+        // optional: throw to render SvelteKit error page
+        throw kitError(500, 'Could not load events');
+    }
+
+    return { events };
+}
+
+export const actions = {
+    create: async (event) => {
+        const formData = await event.request.formData();
+        console.log(Array.from(formData.entries()));
+        console.log('create_event date', formData.get("date"), formData.get("name"), formData.get("description"));
+        let { data: new_event, error } = await event.locals.supabase.rpc("create_event",
+            {
+                "p_name": formData.get('name'),
+                "p_date": formData.get('date'),
+                "p_description": formData.get('description'),
+            });
+        return {
+            new_event,
+            error
+        }
+    },
+    participants: async (event) => {
+        const formData = await event.request.formData();
+        const file = formData.get('participants') as File;
+
+        let csvText = await file.text();
+
+        const { data: parsedRows, errors } = Papa.parse(csvText, {
+            skipEmptyLines: true,
+            header: false
+        });
+
+        // Map each row to an object with keys: name, surname, email
+        const participants = parsedRows.map((row: string[]) => ({
+            name: row[0],
+            surname: row[1],
+            email: row[2]
+        }));
+
+        return {
+            participants,
+        }
+    }
+} satisfies Actions;
\ No newline at end of file
diff --git a/src/routes/private/creator/+page.svelte b/src/routes/private/creator/+page.svelte
index 0489a10..83681d0 100644
--- a/src/routes/private/creator/+page.svelte
+++ b/src/routes/private/creator/+page.svelte
@@ -1,75 +1,67 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
-	import { goto } from '$app/navigation';
+  import StepConnectGoogle from "./steps/StepConnectGoogle.svelte";
+  import StepCraftEmail from "./steps/StepCraftEmail.svelte";
+  import StepCreateEvent from "./steps/StepCreateEvent.svelte";
+  import StepOverview from "./steps/StepOverview.svelte";
+  import StepUploadFiles from "./steps/StepUploadFiles.svelte";
 
-	let authorized = false;
-	let refreshToken = '';
+  let { data, form } = $props();
 
-	let to = '';
-	let subject = '';
-	let body = '';
+  let new_event = $state({});
+  let participants = $state([]);
 
-	async function validateToken(token: string): Promise<boolean> {
-		if (!token) return false;
-		const res = await fetch('/private/api/gmail', {
-			method: 'POST',
-			headers: { 'Content-Type': 'application/json' },
-			body: JSON.stringify({ action: 'validate', refreshToken: token })
-		});
-		if (!res.ok) return false;
-		const data = await res.json();
-		return !!data.valid;
-	}
+  // Update events and participants from the form data
+  $effect( () => {
+    if (form && form.new_event) {
+      new_event = form.new_event;
+    }
+    if (form && form.participants) {
+      participants = form.participants;
+    }
+  });
 
-	onMount(async () => {
-		refreshToken = localStorage.getItem('gmail_refresh_token') ?? '';
-		authorized = await validateToken(refreshToken);
-	});
+  // Array of step components in order
+  const steps = [
+    StepConnectGoogle,
+    StepCreateEvent,
+    StepUploadFiles,
+    StepCraftEmail,
+    StepOverview
+  ];
 
-	/* ⇢ redirects straight to Google via server 302 */
-	const connect = () => goto('/private/api/gmail?action=auth');
+  // State variable for current step
+  let step = $state(0);
 
-	async function sendEmail() {
-		const r = await fetch('/private/api/gmail', {
-			method: 'POST',
-			headers: { 'Content-Type': 'application/json' },
-			body: JSON.stringify({
-				action: 'send',
-				to,
-				subject,
-				text: body,
-				refreshToken
-			})
-		});
-		r.ok ? alert('Sent!') : alert(await r.text());
-		to = subject = body = '';
-	}
-
-	async function disconnect() {
-		if (!confirm('Disconnect Google account?')) return;
-		await fetch('/private/api/gmail', {
-			method: 'POST',
-			headers: { 'Content-Type': 'application/json' },
-			body: JSON.stringify({ action: 'revoke', refreshToken })
-		});
-		localStorage.removeItem('gmail_refresh_token');
-		refreshToken = '';
-		authorized = false;
-	}
+  // Helper to go to next/previous step (optional)
+  function nextStep() {
+    if (step < steps.length - 1) step += 1;
+    console.log(step);
+  }
+  function prevStep() {
+    if (step > 0) step -= 1;
+    console.log(step);
+  }
 </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}
-	<button class="btn-secondary mb-4" on:click={disconnect}>Disconnect Google</button>
-
-	<form class="space-y-4" on:submit|preventDefault={sendEmail}>
-		<input  class="input w-full" type="email" placeholder="recipient@example.com" bind:value={to} required />
-		<input  class="input w-full" placeholder="Subject" bind:value={subject} required />
-		<textarea class="textarea w-full" rows="6" placeholder="Message" bind:value={body} required />
-		<button class="btn-primary">Send</button>
-	</form>
+<!-- Render the current step component -->
+{#if step == 0}
+  <StepConnectGoogle />
+{:else if step == 1}
+  <StepCreateEvent events={data.events} {new_event} />
+{:else if step == 2}
+  <StepUploadFiles {participants} />
+{:else if step == 3}
+  <StepCraftEmail />
+{:else if step == 4}
+  <StepOverview {new_event} {participants} />
 {/if}
+
+<br />
+
+{step}
+
+<!-- Optional navigation buttons -->
+<button onclick={prevStep} disabled={step === 0}>Previous</button>
+<button onclick={nextStep} disabled={step === steps.length - 1}>Next</button>
+
+
diff --git a/src/routes/private/creator/steps/StepConnectGoogle.svelte b/src/routes/private/creator/steps/StepConnectGoogle.svelte
new file mode 100644
index 0000000..bc663c5
--- /dev/null
+++ b/src/routes/private/creator/steps/StepConnectGoogle.svelte
@@ -0,0 +1,69 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { goto } from '$app/navigation';
+
+	let refreshToken = '';
+	let authorized = false;
+
+	let to = '';
+	let subject = '';
+	let body = '';
+
+	async function validateToken(token: string): Promise<boolean> {
+		if (!token) return false;
+		const res = await fetch('/private/api/gmail', {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify({ action: 'validate', refreshToken: token })
+		});
+		if (!res.ok) return false;
+		const data = await res.json();
+		return !!data.valid;
+	}
+
+	onMount(async () => {
+		console.log("on mount");
+		refreshToken = localStorage.getItem('gmail_refresh_token') ?? '';
+		authorized = await validateToken(refreshToken);
+	});
+
+	/* ⇢ redirects straight to Google via server 302 */
+	const connect = () => goto('/private/api/gmail?action=auth');
+
+	async function sendEmail() {
+		const r = await fetch('/private/api/gmail', {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify({
+				action: 'send',
+				to,
+				subject,
+				text: body,
+				refreshToken
+			})
+		});
+		r.ok ? alert('Sent!') : alert(await r.text());
+		to = subject = body = '';
+	}
+
+	async function disconnect() {
+		if (!confirm('Disconnect Google account?')) return;
+		await fetch('/private/api/gmail', {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify({ action: 'revoke', refreshToken })
+		});
+		localStorage.removeItem('gmail_refresh_token');
+		refreshToken = '';
+		authorized = false;
+	}
+</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}
diff --git a/src/routes/private/creator/steps/StepCraftEmail.svelte b/src/routes/private/creator/steps/StepCraftEmail.svelte
new file mode 100644
index 0000000..6154991
--- /dev/null
+++ b/src/routes/private/creator/steps/StepCraftEmail.svelte
@@ -0,0 +1 @@
+emaillk
\ No newline at end of file
diff --git a/src/routes/private/creator/steps/StepCreateEvent.svelte b/src/routes/private/creator/steps/StepCreateEvent.svelte
new file mode 100644
index 0000000..54ec5d9
--- /dev/null
+++ b/src/routes/private/creator/steps/StepCreateEvent.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+
+	let { events, new_event } = $props();
+
+</script>
+
+<p class="bg-grey-200">{JSON.stringify(events)}</p>
+
+<form method="POST" action="?/create" use:enhance>
+  <input type="text" name="name" />
+  <input type="date" name="date" />
+  <textarea name="description"></textarea>
+  <button type="submit">Submit</button>
+</form>
+
+<p class="bg-grey-200">{JSON.stringify(new_event)}</p>
\ No newline at end of file
diff --git a/src/routes/private/creator/steps/StepOverview.svelte b/src/routes/private/creator/steps/StepOverview.svelte
new file mode 100644
index 0000000..f961fb8
--- /dev/null
+++ b/src/routes/private/creator/steps/StepOverview.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+    let { new_event, participants } = $props();
+</script>
+
+<p>New event:</p>
+{JSON.stringify(new_event)}
+
+
+<br />
+<p>Participants</p>
+{JSON.stringify(participants)}
\ No newline at end of file
diff --git a/src/routes/private/creator/steps/StepUploadFiles.svelte b/src/routes/private/creator/steps/StepUploadFiles.svelte
new file mode 100644
index 0000000..1858ed3
--- /dev/null
+++ b/src/routes/private/creator/steps/StepUploadFiles.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+
+	let { participants = [] } = $props();
+
+	function removeParticipant(index: number) {
+		participants = participants.slice(0, index).concat(participants.slice(index + 1));
+	}
+</script>
+
+<form method="POST" action="?/participants" use:enhance enctype="multipart/form-data">
+	<input type="file" name="participants" id="participants" accept=".csv" required />
+	<button type="submit"> Submit </button>
+
+</form>
+
+{JSON.stringify(participants)}
+
+{#if participants.length === 0}
+	<p class="text-gray-500">No participants added yet.</p>
+{/if}
+
+{#if participants.length > 0}
+	<ul class="mt-4 space-y-2">
+		{#each participants as p, i}
+			<li class="flex items-center gap-2 border-b pb-1">
+				<span>{p.name} {p.surname} ({p.email})</span>
+				<button class="ml-auto text-red-600 hover:underline" type="button" onclick={() => removeParticipant(i)}>
+					Remove
+				</button>
+			</li>
+		{/each}
+	</ul>
+{/if}