diff --git a/app/admin/page.tsx b/app/admin/page.tsx
index 1d0af0b..d9355dc 100644
--- a/app/admin/page.tsx
+++ b/app/admin/page.tsx
@@ -98,10 +98,10 @@ export default function AdminPage() {
   if (status === "authenticated") {
     if (session.user?.role === "admin") {
       return (
-        <div className="w-[90vw]">
+        <div>
           <Table
             isHeaderSticky
-            className="overflow-scroll scrollbar-thin scrollbar-thumb-accent-500 scrollbar-track-transparent"
+            className="overflow-scroll scrollbar-thin scrollbar-thumb-accent-500 scrollbar-track-transparent h-[80vh] p-4"
             fullWidth
             aria-label="Rating table with dynamic content(ratings)"
           >
diff --git a/app/calendar/page.tsx b/app/calendar/page.tsx
index 8c04e77..46bc057 100644
--- a/app/calendar/page.tsx
+++ b/app/calendar/page.tsx
@@ -18,7 +18,11 @@ export default async function CalendarPage() {
           id: parseInt(planCookie),
         },
         include: {
-          courses: true,
+          courses: {
+            include: {
+              instructor: true,
+            },
+          },
         },
       });
 
@@ -42,6 +46,8 @@ export default async function CalendarPage() {
           title: courses[i]?.courseTitle,
           daColor: color,
           subject: courses[i]?.subject,
+          courseNumber: courses[i]?.courseNumber,
+          instructor: courses[i]?.instructor.displayName,
           color: "rgba(0,0,0,0)",
 
           borderWidth: "0px",
@@ -104,11 +110,11 @@ export default async function CalendarPage() {
 
   //let times = await getUniqueStartEndTimes();
   return (
-    <div className="grid grid-cols-3 p-4 w-screen absolute start-0 px-32 gap-20">
-      <div className=" col-start-1 h-[70vh] w-[57vw] col-span-2 font-sans font-normal">
+    <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 ">
         <Calendar events={events} />
       </div>
-      <div className="col-start-3 h-[62vh] ">
+      <div className="sm:h-[62vh] col-span-3 sm:col-span-1 ">
         <CreatePlan />
       </div>
     </div>
diff --git a/app/layout.tsx b/app/layout.tsx
index fd0fe63..72cafba 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -8,6 +8,7 @@ import { NextAuthProvider } from "../components/providers/NextAuthProvider";
 import { siteConfig } from "../config/site";
 import { fontSans } from "../config/fonts";
 import { Navbar } from "../components/navbar";
+import FooterInfo from "../components/FooterInfo";
 
 import { Providers } from "./providers";
 
@@ -54,35 +55,10 @@ export default function RootLayout({
             >
               <div className="flex flex-col h-screen ">
                 <Navbar />
-                <main className="container mx-auto px-1 lg:px-7 lg:pt-10 justify-center items-center  flex-grow">
+                <main className="container mx-auto px-1 lg:px-7 lg:pt-10 justify-center items-center  flex-grow ">
                   {children}
                 </main>
-                <footer className="w-full flex items-center justify-center py-3">
-                  <div className="columns-1 container max-w-4xl text-center">
-                    <span className="text-xs">
-                      The Course Planner is a student-run service, and displays
-                      classes from the Tri-College course database. We recommend
-                      confirming your schedule with the official course listings
-                      just in case. If there are any issues, email us.
-                    </span>
-                    <br />
-
-                    <div className="space-x-5">
-                      <Link
-                        isExternal
-                        href="https://www.sccs.swarthmore.edu/docs/policy"
-                        title="SCCS Usage & Data Policy"
-                      >
-                        <span className=" text-xs underline  ">
-                          Usage & Data Policy
-                        </span>
-                      </Link>
-                      <span className="text-xs ">
-                        © 2024 Swarthmore College Computer Society | v2.0.0
-                      </span>
-                    </div>
-                  </div>
-                </footer>
+                <FooterInfo />
               </div>
             </Providers>
           </body>
diff --git a/app/page.tsx b/app/page.tsx
index 1a79d07..ce6f466 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -100,7 +100,7 @@ export default async function Page(props: {
   homePageProps["createPlan"] = (
     <Suspense
       fallback={
-        <Skeleton className="rounded-lg w-8/12 h-full align-top justify-start" />
+        <Skeleton className="rounded-lg w-8/12 h-fit align-top justify-start" />
       }
     >
       <CreatePlan />
diff --git a/components/Calendar.tsx b/components/Calendar.tsx
index dd8b159..83b44df 100644
--- a/components/Calendar.tsx
+++ b/components/Calendar.tsx
@@ -32,9 +32,17 @@ 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 ">
+        <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}
         </div>
+        <div className="font-sans text-[10px] ml-1 mt-5 ">
+          {eventInfo.event.extendedProps.instructor.replace("&#39;", "'")}
+        </div>
+
       </Card>
     );
   }
diff --git a/components/CreatePlan.tsx b/components/CreatePlan.tsx
index 9705eb7..f19f2db 100644
--- a/components/CreatePlan.tsx
+++ b/components/CreatePlan.tsx
@@ -145,9 +145,15 @@ export default function CreatePlan(props: any) {
               />
 
               <CardHeader className="justify-between">
-                <div className="ml-2 lg:text-base truncate">
-                  {course.courseTitle.replace(/&amp;/g, "&")}
+
+                <div className="ml-2 lg:text-base truncate text-bold">
+                  {course.subject} {""} {course.courseNumber}
+                  <div className="text-tiny ">
+                    {course.courseTitle.replace(/&amp;/g, "&")}
+                  </div>
+
                 </div>
+
                 <Button
                   isIconOnly
                   startContent={<HighlightOffIcon />}
@@ -258,7 +264,9 @@ export default function CreatePlan(props: any) {
         </div>
 
         <div
-          className="flex flex-col h-[55vh] overflow-y-scroll gap-3 scrollbar-thin scrollbar-thumb-accent-500 scrollbar-track-transparent"
+
+          className="flex flex-col h-[45vh] overflow-y-scroll gap-3 scrollbar-thin scrollbar-thumb-accent-500 scrollbar-track-transparent"
+
           id="scrollMe"
         >
           <CoursesList />
diff --git a/components/FooterInfo.tsx b/components/FooterInfo.tsx
new file mode 100644
index 0000000..c50b958
--- /dev/null
+++ b/components/FooterInfo.tsx
@@ -0,0 +1,89 @@
+"use client";
+
+import FullCalendar from "@fullcalendar/react";
+import timeGridPlugin from "@fullcalendar/timegrid"; // a plugin!
+import InfoIcon from "@mui/icons-material/Info";
+import {
+  Button,
+  Card,
+  Link,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  useDisclosure,
+} from "@nextui-org/react";
+import moment from "moment";
+
+export default function FooterInfo(props: any) {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  const handleOpen = () => {
+    onOpen();
+  };
+  return (
+    <>
+      <div
+        role="presentation"
+        className="flex flex-wrap gap-3 fixed bottom-10 left-10 opacity-50 hover:opacity-80 invisible sm:visible"
+        onClick={() => handleOpen()}
+      >
+        <InfoIcon />
+      </div>
+      <Modal backdrop={"blur"} isOpen={isOpen} onClose={onClose}>
+        <ModalContent>
+          {(onClose) => (
+            <>
+              <ModalHeader className="flex flex-col gap-1">
+                Usage & Data Policy
+              </ModalHeader>
+              <ModalBody>
+                <div className="columns-1 container max-w-4xl text-center">
+                  <span className="">
+                    The Course Planner is a student-run service, and displays
+                    classes from the Tri-College course database. We recommend
+                    confirming your schedule with the official course listings
+                    just in case. If there are any issues,
+                  </span>
+                  <span>
+                    {" "}
+                    <Link
+                      isExternal
+                      className="text-[#f46523]"
+                      href="mailto:staff@sccs.swarthmore.edu"
+                      title="Sccs Staff Email"
+                    >
+                      email us.
+                    </Link>
+                  </span>
+                  <br />
+                  <br />
+
+                  <div className="space-x-5">
+                    <Link
+                      isExternal
+                      href="https://www.sccs.swarthmore.edu/docs/policy"
+                      title="SCCS Usage & Data Policy"
+                    >
+                      <span className=" underline  ">Usage & Data Policy</span>
+                    </Link>
+                  </div>
+                  <br />
+                  <span className="text-xs mt-3 ">
+                    © 2024 Swarthmore College Computer Society | v2.0.0
+                  </span>
+                </div>
+              </ModalBody>
+              <ModalFooter>
+                <Button color="danger" variant="light" onPress={onClose}>
+                  Close
+                </Button>
+              </ModalFooter>
+            </>
+          )}
+        </ModalContent>
+      </Modal>
+    </>
+  );
+}
diff --git a/lib/auth.ts b/lib/auth.ts
index d71addb..36790cd 100644
--- a/lib/auth.ts
+++ b/lib/auth.ts
@@ -76,7 +76,7 @@ export const config = {
       return token;
     },
     async session({ session, token }) {
-      session.role = token.role;
+      session.user.role = token.role;
       session.user.id = token.sub || "";
       return session;
     },