diff --git a/app/api/getplancourses/route.ts b/app/api/getplancourses/route.ts
index 7644f30..564a13d 100644
--- a/app/api/getplancourses/route.ts
+++ b/app/api/getplancourses/route.ts
@@ -25,3 +25,26 @@ export async function GET(request: NextRequest) {
   });
   return NextResponse.json(courses, { status: 200 });
 }
+
+export async function POST(request: NextRequest) {
+  const data = await request.json();
+
+  const course = data.course;
+  const plan = data.plan;
+  const session = await auth();
+
+  let courses = await prisma.coursePlan.update({
+    where: {
+      id: parseInt(plan),
+    },
+    data: {
+      courses: {
+        disconnect: {
+          id: course.id,
+        },
+      },
+    },
+  });
+
+  return NextResponse.json(courses, { status: 200 });
+}
diff --git a/app/calendar/page.tsx b/app/calendar/page.tsx
index e7c91c3..49e12f6 100644
--- a/app/calendar/page.tsx
+++ b/app/calendar/page.tsx
@@ -8,10 +8,10 @@ import prisma from "@/lib/prisma";
 import { auth } from "@/lib/auth";
 import { getPlanCookie } from "@/app/actions";
 import { BorderColor } from "@mui/icons-material";
+import { courseColors } from "@/components/primitives";
 
-export default async function DocsPage() {
+export default async function CalendarPage() {
   async function getEvents() {
-    const session = await auth();
     let output: any = [];
     let planCookie: any = await getPlanCookie();
 
@@ -24,19 +24,7 @@ export default async function DocsPage() {
 
       return courseColors[hash % courseColors.length];
     }
-    const courseColors = [
-      "#E8E288",
-      "#7DCE82",
-      "#3CDBD3",
-      "#A491D3",
-      "#1E2D2F",
-      "#7CC6FE",
-      "#5DFDCB",
-      "#C3423F",
 
-      "#9067C6",
-      "#E6AF2E",
-    ];
     let courses;
     if (planCookie) {
       let plan = await prisma.coursePlan.findUnique({
@@ -62,12 +50,13 @@ export default async function DocsPage() {
           },
         });
         output.push({
-          classNames: "font-sans ",
+          classNames: "font-sans",
           textColor: "white",
           title: courses[i]?.courseTitle,
           daColor: color,
+          subject: courses[i]?.subject,
           color: "rgba(0,0,0,0)",
-          borderColor: "rgba(0,0,0,0)",
+
           borderWidth: "0px",
           daysOfWeek: [
             meetingTimes?.sunday && "0",
@@ -78,6 +67,7 @@ export default async function DocsPage() {
             meetingTimes?.friday && "5",
             meetingTimes?.saturday && "6",
           ],
+
           startTime:
             meetingTimes?.beginTime.slice(0, 2) +
             ":" +
@@ -89,7 +79,7 @@ export default async function DocsPage() {
         });
       }
     }
-    console.log(output);
+
     return output;
   }
 
@@ -99,7 +89,7 @@ export default async function DocsPage() {
       <div className=" col-start-1 h-[70vh] w-[57vw] col-span-2 font-sans font-normal">
         <Calendar events={events} />
       </div>
-      <div className="">
+      <div className="col-start-3 h-[62vh] ">
         <CreatePlan />
       </div>
     </div>
diff --git a/app/page.tsx b/app/page.tsx
index af092e4..618cf59 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -45,7 +45,7 @@ export default async function Page(props: {
 async function Home(props: any) {
   return (
     <>
-      <div className="grid grid-cols-3 p-4 -mt-10">
+      <div className="grid grid-cols-3 p-4 -mt-10 ">
         <div className="col-span-2 col-start-1">
           <div className="grid grid-rows-subgrid grid-cols-1 gap-5 ">
             <div className="row-start-1">
@@ -56,7 +56,7 @@ async function Home(props: any) {
             </div>
           </div>
         </div>
-        <div className="col-start-3 h-[62vh]">
+        <div className="col-start-3">
           <CreatePlan />
         </div>
       </div>
diff --git a/components/Calendar.tsx b/components/Calendar.tsx
index 4111310..5ba2ebc 100644
--- a/components/Calendar.tsx
+++ b/components/Calendar.tsx
@@ -4,6 +4,7 @@ import FullCalendar from "@fullcalendar/react";
 import timeGridPlugin from "@fullcalendar/timegrid"; // a plugin!
 import { Card } from "@nextui-org/react";
 import moment from "moment";
+import { generateColorFromName } from "./primitives";
 
 export default function Calendar(props: any) {
   function dayHeaderContent(args: any) {
@@ -14,11 +15,24 @@ export default function Calendar(props: any) {
     console.log(eventInfo);
     return (
       <Card
-        className="absolute top-0 left-0 h-full w-[100%] rounded-none "
+        className=" fc-event-main-frame w-[100%] rounded-md hover:h-[20vh] hover:transition-all duration-700"
         style={{ backgroundColor: eventInfo.event.extendedProps.daColor }}
       >
-        <b className="font-sans"> {eventInfo.timeText}</b>
-        <div className="font-sans">{eventInfo.event.title}</div>
+        {/*
+        
+        
+        <div
+          className={`absolute top-0 left-0 h-full w-2 rounded-full`}
+          style={{
+            backgroundColor: generateColorFromName(
+              eventInfo.event.extendedProps.subject
+            ),
+          }}
+        />
+        */}
+
+        <b className="font-sans p-2"> {eventInfo.timeText}</b>
+        <div className="font-sans p-2">{eventInfo.event.title}</div>
       </Card>
     );
   }
@@ -28,11 +42,10 @@ export default function Calendar(props: any) {
       height="100%"
       plugins={[timeGridPlugin]}
       initialView="timeGridWeek"
-      eventMinHeight={70}
       allDaySlot={false}
       expandRows
       slotDuration="01:00:00"
-      slotMinTime="08:30:00"
+      slotMinTime="08:00:00"
       slotMaxTime="22:00:00"
       dayHeaderFormat={dayHeaderContent}
       events={props.events}
diff --git a/components/CourseCard.tsx b/components/CourseCard.tsx
index 7c9388e..09f0665 100644
--- a/components/CourseCard.tsx
+++ b/components/CourseCard.tsx
@@ -11,6 +11,7 @@ import {
   Button,
 } from "@nextui-org/react";
 import { tv } from "tailwind-variants";
+import { courseColors } from "@/components/primitives";
 
 import { InstructorCard } from "./InstructorCard";
 import AddIcon from "@mui/icons-material/Add";
@@ -28,22 +29,6 @@ const {
   role,
 } = card();
 
-const courseColors = [
-  "#FF8360",
-  "#E8E288",
-  "#7DCE82",
-  "#3CDBD3",
-  "#A491D3",
-  "#1E2D2F",
-  "#7CC6FE",
-  "#5DFDCB",
-  "#C3423F",
-  "#05668D",
-  "#037171",
-  "#9067C6",
-  "#E6AF2E",
-];
-
 function generateColorFromName(name: string) {
   let hash = 0;
 
diff --git a/components/CreatePlan.tsx b/components/CreatePlan.tsx
index 11bfca6..201fd05 100644
--- a/components/CreatePlan.tsx
+++ b/components/CreatePlan.tsx
@@ -11,6 +11,7 @@ import {
   Input,
   Button,
   Skeleton,
+  CardHeader,
 } from "@nextui-org/react";
 import {
   Dropdown,
@@ -27,6 +28,7 @@ import IosShareIcon from "@mui/icons-material/IosShare";
 import { tv } from "tailwind-variants";
 import axios from "axios";
 import { Select, SelectItem } from "@nextui-org/react";
+import { useRouter } from "next/navigation";
 
 import { InstructorCard } from "./InstructorCard";
 import { usePathname } from "next/navigation";
@@ -35,9 +37,10 @@ import { useEffect, useState } from "react";
 import useSWR from "swr";
 import { setPlanCookie } from "@/app/actions";
 import { useCookies } from "next-client-cookies";
-
+import { courseColors } from "@/components/primitives";
 export default function CreatePlan(props: any) {
   const cookies = useCookies();
+  const router = useRouter();
 
   const pathname = usePathname();
   const { data: session, status } = useSession();
@@ -75,6 +78,20 @@ export default function CreatePlan(props: any) {
         });
     }
   }
+  async function removeCourseFromPlan(plan: any, course: any) {
+    await axios
+      .post("/api/getplancourses", {
+        plan: plan,
+        course: course,
+      })
+      .then(function (response: any) {
+        //console.log(response);
+        router.refresh();
+      })
+      .catch(function (error) {
+        console.log(error);
+      });
+  }
   async function deletePlan() {
     if (cookies.get("plan")) {
       axios
@@ -100,21 +117,6 @@ export default function CreatePlan(props: any) {
     setPlanCookie(e.target.value);
   };
 
-  const courseColors = [
-    "#FF8360",
-    "#E8E288",
-    "#7DCE82",
-    "#3CDBD3",
-    "#A491D3",
-    "#1E2D2F",
-    "#7CC6FE",
-    "#5DFDCB",
-    "#C3423F",
-    "#05668D",
-    "#037171",
-    "#9067C6",
-    "#E6AF2E",
-  ];
   function generateColorFromName(name: string) {
     let hash = 0;
 
@@ -147,10 +149,11 @@ export default function CreatePlan(props: any) {
             <Card
               key={course.id}
               className={
-                "bg-light_foreground  h-10 rounded-sm scroll-none drop-shadow-lg transition-colors mb-3"
+                "bg-light_foreground min-h-14 max-h-14 rounded-sm scroll-none drop-shadow-lg transition-colors mb-3"
               }
               shadow="sm"
-              isHoverable
+
+              // onClick={() => removeCourseFromPlan(selectedCoursePlan, course)}
             >
               <div
                 className={`absolute top-0 left-0 h-full w-2 rounded-full`}
@@ -159,9 +162,21 @@ export default function CreatePlan(props: any) {
                 }}
               />
 
-              <CardBody className="ml-4 overflow-clip ">
-                {course.courseTitle}
-              </CardBody>
+              <CardHeader className="justify-between ">
+                <div className="ml-4">
+                  {course.courseTitle.replace(/&amp;/g, "&")}
+                </div>
+                <Button
+                  size={"sm"}
+                  className=""
+                  isIconOnly
+                  onClick={() =>
+                    removeCourseFromPlan(selectedCoursePlan[0], course)
+                  }
+                >
+                  X
+                </Button>
+              </CardHeader>
             </Card>
           )
         );
@@ -173,7 +188,7 @@ export default function CreatePlan(props: any) {
 
   return (
     <>
-      <Divider className="h-4/6 absolute mt-10" orientation="vertical" />
+      <Divider className="h-[60vh] absolute mt-20" orientation="vertical" />
 
       <div className="grid grid-cols-1 grid-rows-10 ml-10 gap-5 h-[66vh] mt-10 overflow-clip">
         <div className="font-bold text-primary h1">Create a Plan</div>
@@ -190,11 +205,10 @@ export default function CreatePlan(props: any) {
           />
           <Button
             size="lg"
-            className=""
             startContent={<AddIcon></AddIcon>}
             onClick={() => createPlan()}
           >
-            Create
+            <div>Create</div>
           </Button>
         </div>
 
diff --git a/components/PlanCard.tsx b/components/PlanCard.tsx
deleted file mode 100644
index 45e1324..0000000
--- a/components/PlanCard.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-"use client";
-import {
-  Card,
-  CardBody,
-  Divider,
-  Link,
-  User,
-  Popover,
-  PopoverTrigger,
-  PopoverContent,
-  Button,
-} from "@nextui-org/react";
-import { tv } from "tailwind-variants";
-
-import { InstructorCard } from "./InstructorCard";
-import AddIcon from "@mui/icons-material/Add";
-import axios from "axios";
-export const card = tv({
-  slots: {
-    base: "bg-light_foreground min-h-32 max-h-32 w-[98%] rounded-sm scroll-none drop-shadow-lg transition-colors",
-    role: "font-bold  text-primary ",
-  },
-});
-
-const { base, role } = card();
-
-export default function PlanCard(props: any) {
-  return (
-    <Card key={props.course.id} className={base()} shadow="sm" isHoverable>
-      <div className={`absolute top-0 left-0 h-full w-2 rounded-full`} />
-
-      <CardBody className="ml-4 overflow-clip ">
-        {props.course.courseTitle}
-      </CardBody>
-    </Card>
-  );
-}
diff --git a/components/PlanCardList.tsx b/components/PlanCardList.tsx
deleted file mode 100644
index c037251..0000000
--- a/components/PlanCardList.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { Course, CoursePlan } from "@prisma/client";
-import prisma from "../lib/prisma";
-import PlanCard from "./PlanCard";
-
-async function getPlans(planId: any) {
-  const courses = await prisma.course.findMany({
-    where: {
-      id: planId,
-    },
-  });
-  /*
-  const plans = await prisma.coursePlan.findMany({
-    where: {
-      User: {
-        //@ts-ignore
-        uuid: session?.user?.id,
-      },
-    },
-    include: {
-      courses: true,
-    },
-  });*/
-  return courses;
-}
-
-export async function PlanCardList(planId: any) {
-  const courses: Course[] = await getPlans(planId);
-
-  return (
-    <>
-      <div className="grid gap-4 ">
-        {courses?.map((course: any) => (
-          <div key={course.id}>
-            <PlanCard course={course} />
-          </div>
-        ))}
-      </div>
-    </>
-  );
-}
diff --git a/components/primitives.ts b/components/primitives.ts
index 66d31b2..5b16a76 100644
--- a/components/primitives.ts
+++ b/components/primitives.ts
@@ -54,3 +54,29 @@ export const subtitle = tv({
     fullWidth: true,
   },
 });
+
+export const courseColors = [
+  "#093145",
+  "#107896",
+  "#829356",
+
+  "#C2571A",
+  "#9A2617",
+  "#636363",
+  "#087E8B",
+  "#590925",
+  "#034748",
+  "#19381F",
+  "#631D76",
+  "#4B4E6D",
+];
+
+export function generateColorFromName(name: string) {
+  let hash = 0;
+
+  for (let i = 0; i < name.length; i++) {
+    hash += name.charCodeAt(i);
+  }
+
+  return courseColors[hash % courseColors.length];
+}
diff --git a/styles/globals.css b/styles/globals.css
index 395a507..ffb33bb 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -22,7 +22,9 @@
   transition: all 0.5s ease;
   font-family: var(--font-sans);
 }
-
+.fc-day-today {
+  background-color: inherit !important;
+}
 .fc-col-header-cell-cushion {
   color: white;
 }