diff --git a/nextjs/src/app/course/[courseName]/calendar/CalendarMonth.tsx b/nextjs/src/app/course/[courseName]/calendar/CalendarMonth.tsx
index 183467b..03b3e62 100644
--- a/nextjs/src/app/course/[courseName]/calendar/CalendarMonth.tsx
+++ b/nextjs/src/app/course/[courseName]/calendar/CalendarMonth.tsx
@@ -3,7 +3,6 @@ import { useState } from "react";
 import { CalendarMonthModel } from "./calendarMonthUtils";
 import { DayOfWeek } from "@/models/local/localCourse";
 import Day from "./Day";
-import "./calendarMonth.css";
 
 export const CalendarMonth = ({ month }: { month: CalendarMonthModel }) => {
   const weekInMilliseconds = 604_800_000;
@@ -24,22 +23,22 @@ export const CalendarMonth = ({ month }: { month: CalendarMonthModel }) => {
   console.log(isCollapsed);
   return (
     <>
-      <h3
-        className={
-          "text-center text-2xl transition-all duration-500 hover:text-slate-50 underline hover:scale-105"
-        }
-        onClick={toggleCollapse}
-        role="button"
-      >
-        {monthName}
-      </h3>
+      <div className="flex justify-center">
+        <h3
+          className={
+            "text-2xl transition-all duration-500 " +
+            "hover:text-slate-50 underline hover:scale-105 "
+          }
+          onClick={toggleCollapse}
+          role="button"
+        >
+          {monthName}
+        </h3>
+      </div>
 
       <div
         id={monthName}
-        className={"panel"}
-        style={{
-          maxHeight: isCollapsed ? "0" : "100vh",
-        }}
+        className={"collapsable " + (isCollapsed ? "" : "expand")}
       >
         <div className="grid grid-cols-7 text-center fw-bold">
           {weekDaysList.map((day) => (
diff --git a/nextjs/src/app/course/[courseName]/calendar/Day.tsx b/nextjs/src/app/course/[courseName]/calendar/Day.tsx
index 3c09557..7d7e8e4 100644
--- a/nextjs/src/app/course/[courseName]/calendar/Day.tsx
+++ b/nextjs/src/app/course/[courseName]/calendar/Day.tsx
@@ -8,52 +8,36 @@ import { useCalendarItemsContext } from "../context/calendarItemsContext";
 import { useCourseContext } from "../context/courseContext";
 import Link from "next/link";
 import { IModuleItem } from "@/models/local/IModuleItem";
+import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
+import { DayOfWeek, getDayOfWeek } from "@/models/local/localCourse";
 
 export default function Day({ day, month }: { day: string; month: number }) {
   const dayAsDate = getDateFromStringOrThrow(
     day,
     "calculating same month in day"
   );
-  const isInSameMonth = dayAsDate.getMonth() + 1 != month;
-  const backgroundClass = isInSameMonth ? "" : "bg-slate-900";
 
+  const { data: settings } = useLocalCourseSettingsQuery();
   const itemsContext = useCalendarItemsContext();
   const { itemDrop } = useDraggingContext();
 
   const dateKey = getDateOnlyMarkdownString(dayAsDate);
   const todaysModules = itemsContext[dateKey];
 
-  const todaysAssignments = todaysModules
-    ? Object.keys(todaysModules).flatMap((moduleName) =>
-        todaysModules[moduleName].assignments.map((assignment) => ({
-          moduleName,
-          assignment,
-        }))
-      )
-    : [];
+  const { todaysAssignments, todaysQuizzes, todaysPages } =
+    getTodaysItems(todaysModules);
 
-  const todaysQuizzes = todaysModules
-    ? Object.keys(todaysModules).flatMap((moduleName) =>
-        todaysModules[moduleName].quizzes.map((quiz) => ({
-          moduleName,
-          quiz,
-        }))
-      )
-    : [];
+  const isInSameMonth = dayAsDate.getMonth() + 1 == month;
 
-  const todaysPages = todaysModules
-    ? Object.keys(todaysModules).flatMap((moduleName) =>
-        todaysModules[moduleName].pages.map((page) => ({
-          moduleName,
-          page,
-        }))
-      )
-    : [];
+  const classIsToday = settings.daysOfWeek.includes(getDayOfWeek(dayAsDate));
+
+  const todayClass = classIsToday ? " bg-slate-900 " : " ";
+  const monthClass = isInSameMonth ? " border border-slate-600 " : " "
 
   return (
     <div
       className={
-        "border border-slate-600 rounded-lg p-2 pb-4 m-1 " + backgroundClass
+        " rounded-lg p-2 pb-4 m-1 " + todayClass + monthClass
       }
       onDrop={(e) => itemDrop(e, day)}
       onDragOver={(e) => e.preventDefault()}
@@ -89,6 +73,42 @@ export default function Day({ day, month }: { day: string; month: number }) {
   );
 }
 
+function getTodaysItems(todaysModules: {
+  [moduleName: string]: {
+    assignments: import("/home/alexm/projects/canvasManagement/nextjs/src/models/local/assignment/localAssignment").LocalAssignment[];
+    quizzes: import("/home/alexm/projects/canvasManagement/nextjs/src/models/local/quiz/localQuiz").LocalQuiz[];
+    pages: import("/home/alexm/projects/canvasManagement/nextjs/src/models/local/page/localCoursePage").LocalCoursePage[];
+  };
+}) {
+  const todaysAssignments = todaysModules
+    ? Object.keys(todaysModules).flatMap((moduleName) =>
+        todaysModules[moduleName].assignments.map((assignment) => ({
+          moduleName,
+          assignment,
+        }))
+      )
+    : [];
+
+  const todaysQuizzes = todaysModules
+    ? Object.keys(todaysModules).flatMap((moduleName) =>
+        todaysModules[moduleName].quizzes.map((quiz) => ({
+          moduleName,
+          quiz,
+        }))
+      )
+    : [];
+
+  const todaysPages = todaysModules
+    ? Object.keys(todaysModules).flatMap((moduleName) =>
+        todaysModules[moduleName].pages.map((page) => ({
+          moduleName,
+          page,
+        }))
+      )
+    : [];
+  return { todaysAssignments, todaysQuizzes, todaysPages };
+}
+
 function DraggableListItem({
   type,
   moduleName,
diff --git a/nextjs/src/app/course/[courseName]/calendar/calendarMonth.css b/nextjs/src/app/course/[courseName]/calendar/calendarMonth.css
deleted file mode 100644
index f358415..0000000
--- a/nextjs/src/app/course/[courseName]/calendar/calendarMonth.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.panel {
-  max-height: 0;
-  overflow: hidden;
-  transition: max-height .5s ease-out;
-}
diff --git a/nextjs/src/app/course/[courseName]/settings/AssignmentGroupManagement.tsx b/nextjs/src/app/course/[courseName]/settings/AssignmentGroupManagement.tsx
index 2bad45d..902c1fc 100644
--- a/nextjs/src/app/course/[courseName]/settings/AssignmentGroupManagement.tsx
+++ b/nextjs/src/app/course/[courseName]/settings/AssignmentGroupManagement.tsx
@@ -66,20 +66,30 @@ export default function AssignmentGroupManagement() {
           />
         </div>
       ))}
-      <button
-        onClick={() => {
-          setAssignmentGroups((oldGroups) => [
-            ...oldGroups,
-            {
-              id: Date.now().toString(),
-              name: "",
-              weight: 0,
-            },
-          ]);
-        }}
-      >
-        Add Assignment Group
-      </button>
+      <div className="flex gap-3 mt-3">
+        <button
+          className="btn-danger"
+          onClick={() => {
+            setAssignmentGroups((oldGroups) => oldGroups.slice(1));
+          }}
+        >
+          Remove Assignment Group
+        </button>
+        <button
+          onClick={() => {
+            setAssignmentGroups((oldGroups) => [
+              ...oldGroups,
+              {
+                id: Date.now().toString(),
+                name: "",
+                weight: 0,
+              },
+            ]);
+          }}
+        >
+          Add Assignment Group
+        </button>
+      </div>
     </div>
   );
 }
diff --git a/nextjs/src/app/course/[courseName]/settings/DaysOfWeekSelector.tsx b/nextjs/src/app/course/[courseName]/settings/DaysOfWeekSelector.tsx
index 4ede6b1..a1299ba 100644
--- a/nextjs/src/app/course/[courseName]/settings/DaysOfWeekSelector.tsx
+++ b/nextjs/src/app/course/[courseName]/settings/DaysOfWeekSelector.tsx
@@ -21,7 +21,7 @@ export default function DaysOfWeekSelector() {
               key={day}
               className={
                 hasDay
-                  ? "bg-blue-200 text-blue-900"
+                  ? "bg-blue-300 text-blue-950 border-blue-500 border"
                   : "bg-slate-900 border-blue-900 border "
               }
               onClick={() => {
diff --git a/nextjs/src/app/course/[courseName]/settings/SettingsHeader.tsx b/nextjs/src/app/course/[courseName]/settings/SettingsHeader.tsx
index a3304aa..acc164a 100644
--- a/nextjs/src/app/course/[courseName]/settings/SettingsHeader.tsx
+++ b/nextjs/src/app/course/[courseName]/settings/SettingsHeader.tsx
@@ -4,5 +4,5 @@ import React from "react";
 
 export default function SettingsHeader() {
   const { data: settings } = useLocalCourseSettingsQuery();
-  return <div>Settings for {settings.name}</div>;
+  return <h3 className="text-center mb-3">{settings.name} <span className="text-slate-500 text-xl"> settings</span></h3>;
 }
diff --git a/nextjs/src/app/course/[courseName]/settings/page.tsx b/nextjs/src/app/course/[courseName]/settings/page.tsx
index 73488e8..6546a34 100644
--- a/nextjs/src/app/course/[courseName]/settings/page.tsx
+++ b/nextjs/src/app/course/[courseName]/settings/page.tsx
@@ -8,12 +8,14 @@ import AssignmentGroupManagement from "./AssignmentGroupManagement";
 
 export default function page() {
   return (
-    <div>
-      <SettingsHeader />
-      <DaysOfWeekSelector />
-      <StartAndEndDate />
-      <DefaultDueTime />
-      <AssignmentGroupManagement />
+    <div className="flex justify-center">
+      <div className=" w-fit mt-5">
+        <SettingsHeader />
+        <DaysOfWeekSelector />
+        <StartAndEndDate />
+        <DefaultDueTime />
+        <AssignmentGroupManagement />
+      </div>
     </div>
   );
 }
diff --git a/nextjs/src/app/globals.css b/nextjs/src/app/globals.css
index ee74d87..f7aab16 100644
--- a/nextjs/src/app/globals.css
+++ b/nextjs/src/app/globals.css
@@ -73,12 +73,29 @@ p {
   @apply mb-3;
 }
 
-button {
-  @apply bg-blue-900 hover:bg-blue-700 text-blue-50 font-bold py-1 px-3 rounded transition-all duration-200;
+button,
+.btn {
+  @apply bg-blue-900 hover:bg-blue-700 text-blue-50;
+  @apply font-bold py-1 px-3 rounded transition-all duration-200;
+}
+
+.btn-danger {
+  @apply bg-red-800 hover:bg-red-900 text-red-100;
 }
 
 select {
   @apply block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm sm:text-sm;
-  @apply focus:outline-none focus:ring-blue-500 focus:border-blue-500 ;
+  @apply focus:outline-none focus:ring-blue-500 focus:border-blue-500;
   @apply bg-slate-800;
 }
+
+
+.collapsable {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height .5s ease-out;
+}
+
+.collapsable.expand {
+  max-height: 100vh;
+}
\ No newline at end of file
diff --git a/nextjs/src/models/local/localCourse.ts b/nextjs/src/models/local/localCourse.ts
index 3a29fe0..fc317af 100644
--- a/nextjs/src/models/local/localCourse.ts
+++ b/nextjs/src/models/local/localCourse.ts
@@ -31,6 +31,12 @@ export enum DayOfWeek {
   Friday = "Friday",
   Saturday = "Saturday",
 }
+
+export function getDayOfWeek(date: Date): DayOfWeek {
+  const dayIndex = date.getDay(); // Returns 0 for Sunday, 1 for Monday, etc.
+  return DayOfWeek[Object.keys(DayOfWeek)[dayIndex] as keyof typeof DayOfWeek];
+}
+
 export const localCourseYamlUtils = {
   parseSettingYaml: (settingsString: string): LocalCourseSettings => {
     const settings = parse(settingsString);