diff --git a/src/lib/assets/rust.webp b/src/lib/assets/rust.webp
new file mode 100644
index 0000000..683e9f9
Binary files /dev/null and b/src/lib/assets/rust.webp differ
diff --git a/src/lib/components/Event.svelte b/src/lib/components/Event.svelte
new file mode 100644
index 0000000..da418d6
--- /dev/null
+++ b/src/lib/components/Event.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { CalendarDays, Clock3, MapPin, MoveRight } from "lucide-svelte";
+	import rust from "$lib/assets/rust.webp";
+
+	type Props = {
+		name: string;
+		description: string;
+		date: string;
+        time: string;
+        place: string;
+	};
+
+	let { name, description, date, time, place }: Props = $props();
+</script>
+
+<div class="border border-lime-500 rounded-3xl my-4 overflow-hidden">
+	<div class="flex flex-col justify-center lg:grid lg:grid-cols-[1fr,2fr,1fr] lg:gap-x-4 p-8 bg-neutral-800">
+		<div class="h-fit ">
+			<img src={rust} alt="rust" class="rounded-3xl h-1/3 w-1/3 mx-auto my-auto">
+		</div>
+		<div>
+			<h3 class="text-2xl text-white font-fira font-semibold">
+				{name}
+			</h3>
+			<p>
+				{description}
+			</p>
+		</div>
+		<div class="flex flex-col justify-center">
+			<p class="text-lime-500 text-lg flex flex-row"><CalendarDays /><span class="ml-2">{date}</span></p>
+			<p class="flex flex-row my-2"><Clock3 /><span class="ml-2">{time}</span></p>
+			<p class="flex flex-row"><MapPin /><span class="ml-2">{place}</span></p>
+		</div>
+	</div>
+	<div class="bg-lime-500 text-black py-2 pr-6 font-fira font-semibold flex flex-row justify-end">
+		<button class="flex flex-row">
+			<span class="mr-4">Registrarse</span> 
+			<MoveRight />
+		</button>
+	</div>
+</div>
\ No newline at end of file
diff --git a/src/lib/data/events.json b/src/lib/data/events.json
new file mode 100644
index 0000000..fdf921d
--- /dev/null
+++ b/src/lib/data/events.json
@@ -0,0 +1,25 @@
+{
+    "events": [
+        {
+            "name": "Rust 101",
+            "description": "Un taller de introducción al lenguaje de programación que te convertirá en un gei",
+            "date": "15/08/2024",
+            "time": "11:00 - 12:00",
+            "place": "Lab Fiec 12A, ESPOL"
+        },
+        {
+            "name": "Rust 101",
+            "description": "Un taller de introducción al lenguaje de programación que te convertirá en un gei",
+            "date": "15/08/2024",
+            "time": "11:00 - 12:00",
+            "place": "Lab Fiec 12A, ESPOL"
+        },
+        {
+            "name": "Rust 101",
+            "description": "Un taller de introducción al lenguaje de programación que te convertirá en un gei",
+            "date": "15/08/2024",
+            "time": "11:00 - 12:00",
+            "place": "Lab Fiec 12A, ESPOL"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/src/routes/events/+page.svelte b/src/routes/events/+page.svelte
new file mode 100644
index 0000000..3ed6d80
--- /dev/null
+++ b/src/routes/events/+page.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+    import Event from "$lib/components/Event.svelte";
+
+	let { data } = $props();
+</script>
+
+<div class="px-8 flex flex-col items-center">
+	{#each data.events as event}
+		<Event
+			name={event.name}
+            description={event.description}
+            date={event.date}
+            time={event.time}
+            place={event.place}
+		/>
+	{/each}
+</div>
\ No newline at end of file
diff --git a/src/routes/events/+page.ts b/src/routes/events/+page.ts
new file mode 100644
index 0000000..4453a46
--- /dev/null
+++ b/src/routes/events/+page.ts
@@ -0,0 +1,10 @@
+import type { PageLoad } from "./$types";
+import { events } from "$lib/data/events.json";
+
+export const load = (async () => {
+	return {
+		title: "Chocoeventos",
+		// TODO: fetch from API
+		events,
+	};
+}) satisfies PageLoad;