diff --git a/public/icons/locationIcon.svg b/public/icons/locationIcon.svg
new file mode 100644
index 0000000..94fb406
--- /dev/null
+++ b/public/icons/locationIcon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-map-pin"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/><circle cx="12" cy="10" r="3"/></svg>
\ No newline at end of file
diff --git a/public/icons/timeIcon.svg b/public/icons/timeIcon.svg
new file mode 100644
index 0000000..dea1ba9
--- /dev/null
+++ b/public/icons/timeIcon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
\ No newline at end of file
diff --git a/src/app/events/page.tsx b/src/app/events/page.tsx
index 6d9ecf7..3f3321f 100644
--- a/src/app/events/page.tsx
+++ b/src/app/events/page.tsx
@@ -1,7 +1,16 @@
+import EventCard from "@/components/events/event";
+
 const Events = () => {
   return (
-    <div className="flex h-screen w-screen items-center justify-center">
-      This is the Events Page
+    <div className="flex h-screen w-screen items-center justify-center bg-blue-950">
+      <EventCard
+        day="Mon"
+        date="09"
+        title="General Meeting"
+        location="Location"
+        time="3 pm"
+        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan urna nec libero fringilla, ac fermentum purus tempus. Sed et nisi velit."
+      />
     </div>
   );
 };
diff --git a/src/components/events/event.tsx b/src/components/events/event.tsx
new file mode 100644
index 0000000..7a6b381
--- /dev/null
+++ b/src/components/events/event.tsx
@@ -0,0 +1,50 @@
+import Image from "next/image";
+import locationIcon from "@/public/icons/locationIcon.svg";
+import timeIcon from "@/public/icons/timeIcon.svg";
+
+const EventCard = (props: {
+  day: string;
+  date: string;
+  title: string;
+  location: string;
+  time: string;
+  description: string;
+}) => {
+  return (
+    <div className="flex h-1/4 w-3/4 items-center rounded-3xl bg-[#FFFFFF61]">
+      <div className="flex h-full w-1/5 flex-col items-center justify-center">
+        <div className="text-center font-questrial text-xl text-[#A7D6FD]">
+          {props.day}
+        </div>
+        <div className="text-center font-questrial text-7xl text-[#C3D0DF]">
+          {props.date}
+        </div>
+      </div>
+      <div className="flex h-full w-4/5 flex-col">
+        <div className="justify-start pl-[30px] pt-[45px] font-questrial text-4xl font-medium text-[#FFFFFF]">
+          {props.title}
+        </div>
+        <div className="h-2/8 flex w-1/2 flex-row gap-20 pl-[30px]">
+          <div className="h-1/8 flex w-1/5 flex-row gap-2 pl-[40px] font-roboto text-lg text-[#A7D6FD]">
+            <Image
+              src={locationIcon}
+              alt="Location Icon"
+              width={24}
+              height={24}
+            />
+            {props.location}
+          </div>
+          <div className="h-7/8 flex w-1/2 flex-row gap-2 pl-[40px] font-roboto text-lg text-[#A7D6FD]">
+            <Image src={timeIcon} alt="Time Icon" width={24} height={24} />
+            {props.time}
+          </div>
+        </div>
+        <div className="h-full w-5/6 pl-[30px] font-roboto text-lg text-[#BDBDBD]">
+          {props.description}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default EventCard;