diff --git a/app/routes/events-calendar.tsx b/app/routes/events-calendar.tsx
index e33c049..c192755 100644
--- a/app/routes/events-calendar.tsx
+++ b/app/routes/events-calendar.tsx
@@ -2,8 +2,9 @@ import calendarStyles from "react-big-calendar/lib/css/react-big-calendar.css";
 import { Calendar, dayjsLocalizer } from "react-big-calendar";
 import dayjs from "dayjs";
 import { type LinksFunction } from "@remix-run/cloudflare";
-import { Container } from "@chakra-ui/react";
+import { Card, CardHeader, Container, Heading } from "@chakra-ui/react";
 import { useLoaderData } from "@remix-run/react";
+import { useState } from "react";
 
 export const links: LinksFunction = () => {
   return [{ href: calendarStyles, rel: "stylesheet" }];
@@ -59,14 +60,23 @@ export async function loader({ context }: { context: RequestContext }) {
 
 export default function () {
   const data = useLoaderData<typeof loader>();
+  const [selectedDate, setDate] = useState(new Date());
 
   return (
     <Container maxW="container.lg" h="600px">
       <Calendar
         events={data?.eventList}
         localizer={dayjsLocalizer(dayjs)}
+        onSelectSlot={(s) => {
+          setDate(s.slots.at(0) as Date);
+        }}
         style={{ height: 500 }}
       />
+      <Card id="event-extra-details">
+        <CardHeader>
+          <Heading size="sm">Events</Heading>
+        </CardHeader>
+      </Card>
     </Container>
   );
 }