diff --git a/astro/src/components/web/UpcomingEvents.astro b/astro/src/components/web/UpcomingEvents.astro
index fee6fd1..a368620 100644
--- a/astro/src/components/web/UpcomingEvents.astro
+++ b/astro/src/components/web/UpcomingEvents.astro
@@ -1,6 +1,7 @@
 ---
 import CalendarIcon from '@/icons/CalendarIcon.astro';
 import { Image } from 'astro:assets';
+import { upcomingEvent as UpcomingEvent } from './subcomponents/UpcomingEvent';
 
 interface Props {
     upcomingEvents: UpcomingEventsComponent;
@@ -24,7 +25,7 @@ const upcomingEvents = Astro.props.upcomingEvents;
                         alt=""
                     />
                 </div>
-                <div class="flex flex-col gap-1.5 lg:w-[40%] w-full">
+                <div class="flex flex-col gap-2.5 lg:w-[40%] w-full">
                     <h3 class="text-3xl font-semibold">{event.title}</h3>
                     <div class="flex flex-row items-center gap-1.5 text-neutral-900">
                         <CalendarIcon width={24} height={24} />
@@ -34,6 +35,9 @@ const upcomingEvents = Astro.props.upcomingEvents;
                             <p>{event.startDate}</p>
                         ) }
                     </div>
+                    <div class="mt-3.5">
+                        <UpcomingEvent event={event} client:load />
+                    </div>
                 </div>
             </div>
         )) }
diff --git a/astro/src/components/web/subcomponents/UpcomingEvent.tsx b/astro/src/components/web/subcomponents/UpcomingEvent.tsx
new file mode 100644
index 0000000..52b3a36
--- /dev/null
+++ b/astro/src/components/web/subcomponents/UpcomingEvent.tsx
@@ -0,0 +1,45 @@
+import { CalendarIcon } from "@/icons/jsx/calendarIcon";
+import { useEffect, useState } from "preact/hooks"
+
+export function upcomingEvent(props: { event: UpcomingEvent }) {
+    const [ isOpen, setIsOpen ] = useState<boolean>(false);
+
+    useEffect(() => {
+        console.log(isOpen);
+    }, [ isOpen ])
+
+    return (
+        <div>
+            <div className="hover:cursor-pointer text-indigo-400 underline" onClick={() => setIsOpen(true)}>{"Read more >>"}</div>
+
+            { isOpen && (
+                <div
+                    onClick={() => setIsOpen(false)}
+                    className="fixed inset-0 flex items-center justify-center bg-[#000000bb] shadow-md z-999999999999"
+                >
+                    <div
+                        onClick={(e) => e.stopPropagation()}
+                        className="relative bg-white rounded-2xl shadow-xl max-w-md w-full p-6 animate-in fade-in zoom-in-95"
+                    >
+                        <div className="flex flex-col gap-1.5">
+                            <h4 className="text-2xl font-semibold">{props.event.title}</h4>
+                            <div class="flex flex-row items-center gap-1.5 text-neutral-900 text-sm">
+                                <CalendarIcon width={24} height={24} />
+
+                                { props.event.endDate !== null ? (
+                                    <p>{props.event.startDate} - {props.event.endDate}</p>
+                                ) : (
+                                    <p>{props.event.startDate}</p>
+                                ) }
+                            </div>
+
+                            <div className="mt-3">
+                                { props.event.description }
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            ) }
+        </div>
+    )
+}
diff --git a/astro/src/icons/jsx/calendarIcon.tsx b/astro/src/icons/jsx/calendarIcon.tsx
new file mode 100644
index 0000000..87b2bdf
--- /dev/null
+++ b/astro/src/icons/jsx/calendarIcon.tsx
@@ -0,0 +1,5 @@
+export function CalendarIcon(props: { width?: number, height?: number }) {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width={props.width ?? "24"} height={props.height ?? "24"} viewBox="0 0 512 512"><rect width="416" height="384" x="48" y="80" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32" rx="48"/><circle cx="296" cy="232" r="24" fill="currentColor"/><circle cx="376" cy="232" r="24" fill="currentColor"/><circle cx="296" cy="312" r="24" fill="currentColor"/><circle cx="376" cy="312" r="24" fill="currentColor"/><circle cx="136" cy="312" r="24" fill="currentColor"/><circle cx="216" cy="312" r="24" fill="currentColor"/><circle cx="136" cy="392" r="24" fill="currentColor"/><circle cx="216" cy="392" r="24" fill="currentColor"/><circle cx="296" cy="392" r="24" fill="currentColor"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M128 48v32m256-32v32"/><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32" d="M464 160H48"/></svg>
+    )
+}