diff --git a/app/calendar/page.tsx b/app/calendar/page.tsx
index 03fc762..5acf8c8 100644
--- a/app/calendar/page.tsx
+++ b/app/calendar/page.tsx
@@ -5,123 +5,120 @@ import Calendar from "../../components/Calendar";
 import prisma from "../../lib/prisma";
 import { getPlanCookie } from "../actions/actions";
 import { generateColorFromName } from "../../components/primitives";
-export default async function CalendarPage() {
-  async function getEvents() {
-    const output: any = [];
-    const planCookie: any = await getPlanCookie();
 
-    let courses;
+interface Event {
+  classNames: string;
+  textColor: string;
+  title: string;
+  daColor: string;
+  subject: string;
+  courseNumber: string;
+  instructor: string;
+  room: string;
+  color: string;
+  borderWidth: string;
+  daysOfWeek: (false | "0" | "1" | "2" | "3" | "4" | "5" | "6" | undefined)[];
+  startTime: string;
+  endTime: string;
+}
 
-    if (planCookie) {
-      const plan = await prisma.coursePlan.findUnique({
-        where: {
-          id: parseInt(planCookie),
-        },
-        include: {
-          courses: {
-            include: {
-              instructor: true,
-              facultyMeet: {
-                include: {
-                  meetingTimes: true,
-                },
+async function getEvents(): Promise<Event[]> {
+  "use server";
+  const output: Event[] = [];
+  const planCookie: any = await getPlanCookie();
+
+  let courses;
+
+  if (planCookie) {
+    const plan = await prisma.coursePlan.findUnique({
+      where: {
+        id: parseInt(planCookie),
+      },
+      include: {
+        courses: {
+          include: {
+            instructor: true,
+            facultyMeet: {
+              include: {
+                meetingTimes: true,
               },
             },
           },
         },
-      });
+      },
+    });
 
-      courses = plan?.courses;
-    }
+    courses = plan?.courses;
+  }
 
-    if (courses) {
-      for (let i = 0; i < courses.length; i++) {
-        const color = generateColorFromName(courses[i].subject);
+  if (courses) {
+    for (let i = 0; i < courses.length; i++) {
+      const color = generateColorFromName(courses[i].subject);
 
-        const num: string = courses[i].courseReferenceNumber;
-        const meetingTimes = await prisma.meetingTime.findFirst({
-          where: {
-            courseReferenceNumber: num,
-          },
-        });
+      const num: string = courses[i].courseReferenceNumber;
+      const meetingTimes = await prisma.meetingTime.findFirst({
+        where: {
+          courseReferenceNumber: num,
+        },
+      });
 
-        output.push({
-          classNames: "font-sans",
-          textColor: "white",
-          title: courses[i]?.courseTitle,
-          daColor: color,
-          subject: courses[i]?.subject,
-          courseNumber: courses[i]?.courseNumber,
-          instructor: courses[i]?.instructor.displayName,
-          room:
-            courses[i]?.facultyMeet.meetingTimes.building +
-            " " +
-            courses[i]?.facultyMeet.meetingTimes.room,
-          color: "rgba(0,0,0,0)",
+      output.push({
+        classNames: "font-sans",
+        textColor: "white",
+        title: courses[i]?.courseTitle,
+        daColor: color,
+        subject: courses[i]?.subject,
+        courseNumber: courses[i]?.courseNumber,
+        instructor: courses[i]?.instructor.displayName,
+        room:
+          courses[i]?.facultyMeet.meetingTimes.building +
+          " " +
+          courses[i]?.facultyMeet.meetingTimes.room,
+        color: "rgba(0,0,0,0)",
 
-          borderWidth: "0px",
-          daysOfWeek: [
-            meetingTimes?.sunday && "0",
-            meetingTimes?.monday && "1",
-            meetingTimes?.tuesday && "2",
-            meetingTimes?.wednesday && "3",
-            meetingTimes?.thursday && "4",
-            meetingTimes?.friday && "5",
-            meetingTimes?.saturday && "6",
-          ],
+        borderWidth: "0px",
+        daysOfWeek: [
+          meetingTimes?.sunday && "0",
+          meetingTimes?.monday && "1",
+          meetingTimes?.tuesday && "2",
+          meetingTimes?.wednesday && "3",
+          meetingTimes?.thursday && "4",
+          meetingTimes?.friday && "5",
+          meetingTimes?.saturday && "6",
+        ],
 
-          startTime:
-            meetingTimes?.beginTime.slice(0, 2) +
-            ":" +
-            meetingTimes?.beginTime.slice(2),
-          endTime:
-            meetingTimes?.endTime.slice(0, 2) +
-            ":" +
-            meetingTimes?.endTime.slice(2),
-        });
-      }
+        startTime:
+          meetingTimes?.beginTime.slice(0, 2) +
+          ":" +
+          meetingTimes?.beginTime.slice(2),
+        endTime:
+          meetingTimes?.endTime.slice(0, 2) +
+          ":" +
+          meetingTimes?.endTime.slice(2),
+      });
     }
-
-    return output;
   }
 
-  async function getUniqueStartEndTimes() {
-    const maxstart = await prisma.meetingTime.findFirst({
-      where: {
-        beginTime: { not: "" },
-      },
-      orderBy: {
-        beginTime: "desc",
-      },
-    });
-    const maxend = await prisma.meetingTime.findFirst({
-      where: {
-        endTime: { not: "" },
-      },
-      orderBy: {
-        beginTime: "desc",
-      },
-    });
+  return output;
+}
 
-    /*
-    let times = {
-      minTime:
-        maxstart?.beginTime.slice(0, 2) + ":" + maxstart?.beginTime.slice(2),
-      maxTime:
-        maxstart?.endTime.slice(0, 2) + ":" + maxstart?.beginTime.slice(2),
-    };*/
-    console.log(maxstart);
+export default async function CalendarPage() {
+  const events: Event[] = await getEvents();
+  let endTime = "17:00";
+  let startTime = "09:00";
 
-    return maxstart;
+  for (const event of events) {
+    if (event.startTime < startTime && event.startTime != ":")
+      startTime = event.startTime;
+    if (event.endTime > endTime && event.endTime != ":")
+      endTime = event.endTime;
   }
 
-  const events = await getEvents();
-
   //let times = await getUniqueStartEndTimes();
   return (
     <div className="grid grid-cols-10 grid-rows-2 sm:grid-rows-1 p-3 lg:p-4">
       <div className="sm:h-[75vh] col-span-10 md:col-span-7 font-sans font-normal flex-col">
-        <Calendar events={events} />
+        <Calendar events={events} startTime={startTime} endTime={endTime} />
       </div>
       <div className="sm:h-[62vh] col-span-10 sm:col-span-3 sm:ml-[5vw]">
         <CreatePlan />
diff --git a/components/Calendar.tsx b/components/Calendar.tsx
index 2274217..4150c36 100644
--- a/components/Calendar.tsx
+++ b/components/Calendar.tsx
@@ -1,49 +1,46 @@
 "use client";
 
+import {
+  DayHeaderContentArg,
+  EventContentArg,
+  EventSourceInput,
+} from "@fullcalendar/core";
 import FullCalendar from "@fullcalendar/react";
 import timeGridPlugin from "@fullcalendar/timegrid"; // a plugin!
 import { Card } from "@nextui-org/react";
 import moment from "moment";
 
-export default function Calendar(props: any) {
-  function dayHeaderContent(args: any) {
+export default function Calendar({
+  events,
+  startTime,
+  endTime,
+}: {
+  events: EventSourceInput | undefined;
+  startTime: string;
+  endTime: string;
+}) {
+  function dayHeaderContent(args: DayHeaderContentArg) {
     return moment(args.date).format("ddd");
   }
 
-  function renderEventContent(eventInfo: any) {
-    console.log(eventInfo);
-
+  function renderEventContent(eventInfo: EventContentArg) {
     return (
       <Card
-        className="fc-event-main-frame w-[100%] rounded-md hover:h-28 ease-in-out z-0 hover:z-10 hover:transition-all duration-700 "
+        className="fc-event-main-frame w-[100%] rounded-md group min-h-0 hover:min-h-28 ease-in-out px-1 z-0 hover:z-10 hover:transition-all duration-700 "
         style={{ backgroundColor: eventInfo.event.extendedProps.daColor }}
       >
-        {/*
-        
-        
-        <div
-          className={`absolute top-0 left-0 h-full w-2 rounded-full`}
-          style={{
-            backgroundColor: generateColorFromName(
-              eventInfo.event.extendedProps.subject
-            ),
-          }}
-        />
-        */}
-
-        <b className="font-sans text-[9px] ml-1 font-normal">
+        <b className="font-sans text-[10px] font-normal">
           {eventInfo.timeText} {"|"} {eventInfo.event.extendedProps.room}
         </b>
-        <div className="font-sans text-[10px] ml-1 font-bold inline">
+        <div className="font-sans text-[12px] font-bold inline">
           {eventInfo.event.extendedProps.subject}
           {eventInfo.event.extendedProps.courseNumber} :
           <p className="font-normal inline"> {eventInfo.event.title}</p>
         </div>
 
-        <div className="font-sans text-[10px] ml-1 mt-5 ">
+        <div className="transition-all opacity-0 group-hover:opacity-100 font-sans text-[10px] mt-5 ">
           {eventInfo.event.extendedProps.instructor.replace("&#39;", "'")}
         </div>
-
       </Card>
     );
   }
@@ -52,17 +49,17 @@ export default function Calendar(props: any) {
     <FullCalendar
       expandRows
       allDaySlot={false}
-      dayHeaderFormat={dayHeaderContent}
+      dayHeaderContent={dayHeaderContent}
       editable={false}
       eventContent={renderEventContent}
-      events={props.events}
+      events={events}
       headerToolbar={false}
       height="100%"
       initialView="timeGridWeek"
       plugins={[timeGridPlugin]}
       slotDuration="01:00:00"
-      slotMaxTime="23:00:00"
-      slotMinTime="08:00:00"
+      slotMaxTime={endTime}
+      slotMinTime={startTime}
       weekends={false}
     />
   );