diff --git a/app/calendar/page.tsx b/app/calendar/page.tsx
index 46bc057..03fc762 100644
--- a/app/calendar/page.tsx
+++ b/app/calendar/page.tsx
@@ -21,6 +21,11 @@ export default async function CalendarPage() {
           courses: {
             include: {
               instructor: true,
+              facultyMeet: {
+                include: {
+                  meetingTimes: true,
+                },
+              },
             },
           },
         },
@@ -48,6 +53,10 @@ export default async function CalendarPage() {
           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",
@@ -110,11 +119,11 @@ export default async function CalendarPage() {
 
   //let times = await getUniqueStartEndTimes();
   return (
-    <div className="grid grid-cols-3 sm:gap-20 grid-rows-2 sm:grid-rows-1 p-4 ">
-      <div className="sm:h-[75vh] sm:w-[57vw] col-span-3 md:col-span-2 font-sans font-normal ">
+    <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} />
       </div>
-      <div className="sm:h-[62vh] col-span-3 sm:col-span-1 ">
+      <div className="sm:h-[62vh] col-span-10 sm:col-span-3 sm:ml-[5vw]">
         <CreatePlan />
       </div>
     </div>
diff --git a/components/Calendar.tsx b/components/Calendar.tsx
index 83b44df..2274217 100644
--- a/components/Calendar.tsx
+++ b/components/Calendar.tsx
@@ -15,7 +15,7 @@ export default function Calendar(props: any) {
 
     return (
       <Card
-        className="fc-event-main-frame w-[100%] rounded-md hover:h-[20vh] ease-in-out z-0 hover:z-10 hover:transition-all duration-700 "
+        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 "
         style={{ backgroundColor: eventInfo.event.extendedProps.daColor }}
       >
         {/*
@@ -31,14 +31,15 @@ export default function Calendar(props: any) {
         />
         */}
 
-        <b className="font-sans text-[9px] ml-1 mt-1">{eventInfo.timeText}</b>
-        <div className="font-sans text-[10px] ml-1 font-bold">
-          {eventInfo.event.extendedProps.subject} {""}
-          {eventInfo.event.extendedProps.courseNumber}
-        </div>
-        <div className="font-sans text-[10px] ml-1 mt-5 ">
-          {eventInfo.event.title}
+        <b className="font-sans text-[9px] ml-1 font-normal">
+          {eventInfo.timeText} {"|"} {eventInfo.event.extendedProps.room}
+        </b>
+        <div className="font-sans text-[10px] ml-1 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 ">
           {eventInfo.event.extendedProps.instructor.replace("&#39;", "'")}
         </div>