diff --git a/nextjs/src/app/course/[courseName]/calendar/CalendarMonth.tsx b/nextjs/src/app/course/[courseName]/calendar/CalendarMonth.tsx
index f2d96c7..c612133 100644
--- a/nextjs/src/app/course/[courseName]/calendar/CalendarMonth.tsx
+++ b/nextjs/src/app/course/[courseName]/calendar/CalendarMonth.tsx
@@ -62,7 +62,7 @@ function CalendarWeek({
   monthNumber: number;
 }) {
   return (
-    <div className="grid grid-cols-7 m-3">
+    <div className="grid grid-cols-7 m-1">
       {week.map((day, dayIndex) => (
         <Day key={dayIndex} day={day} month={monthNumber} />
       ))}
diff --git a/nextjs/src/app/course/[courseName]/calendar/Day.tsx b/nextjs/src/app/course/[courseName]/calendar/Day.tsx
index 299bf90..facf367 100644
--- a/nextjs/src/app/course/[courseName]/calendar/Day.tsx
+++ b/nextjs/src/app/course/[courseName]/calendar/Day.tsx
@@ -40,12 +40,12 @@ export default function Day({ day, month }: { day: string; month: number }) {
 
   return (
     <div
-      className={" rounded-lg p-2 pb-4 m-1 " + todayClass + monthClass}
+      className={" rounded-lg pb-4 m-1 " + todayClass + monthClass}
       onDrop={(e) => itemDrop(e, day)}
       onDragOver={(e) => e.preventDefault()}
     >
-      {dayAsDate.getDate()}
-      <ul className="list-disc">
+      <div className="ms-1">{dayAsDate.getDate()}</div>
+      <div>
         {todaysAssignments.map(({ assignment, moduleName }) => (
           <DraggableListItem
             key={assignment.name}
@@ -70,7 +70,7 @@ export default function Day({ day, month }: { day: string; month: number }) {
             item={page}
           />
         ))}
-      </ul>
+      </div>
     </div>
   );
 }
@@ -122,7 +122,11 @@ function DraggableListItem({
 }) {
   const { courseName } = useCourseContext();
   return (
-    <li
+    <div
+      className={
+        " border rounded-sm px-1 mx-1 break-all " +
+        " border-slate-600 bg-slate-800 "
+      }
       role="button"
       draggable="true"
       onDragStart={(e) => {
@@ -142,6 +146,6 @@ function DraggableListItem({
       >
         {item.name}
       </Link>
-    </li>
+    </div>
   );
 }
diff --git a/nextjs/src/app/course/[courseName]/modules/ExpandableModule.tsx b/nextjs/src/app/course/[courseName]/modules/ExpandableModule.tsx
index bcf97a8..968a678 100644
--- a/nextjs/src/app/course/[courseName]/modules/ExpandableModule.tsx
+++ b/nextjs/src/app/course/[courseName]/modules/ExpandableModule.tsx
@@ -83,7 +83,7 @@ export default function ExpandableModule({
         <Modal buttonText="New Item">
           {({ closeModal }) => (
             <div>
-              <NewItemForm moduleName={moduleName} />
+              <NewItemForm moduleName={moduleName} onCreate={closeModal} />
               <br />
               <button onClick={closeModal}>close</button>
             </div>
diff --git a/nextjs/src/app/course/[courseName]/modules/NewItemForm.tsx b/nextjs/src/app/course/[courseName]/modules/NewItemForm.tsx
index f8f370f..931a764 100644
--- a/nextjs/src/app/course/[courseName]/modules/NewItemForm.tsx
+++ b/nextjs/src/app/course/[courseName]/modules/NewItemForm.tsx
@@ -11,7 +11,13 @@ import { LocalAssignmentGroup } from "@/models/local/assignment/localAssignmentG
 import { dateToMarkdownString } from "@/models/local/timeUtils";
 import React, { useState } from "react";
 
-export default function NewItemForm({ moduleName }: { moduleName: string }) {
+export default function NewItemForm({
+  moduleName,
+  onCreate = () => {},
+}: {
+  moduleName: string;
+  onCreate?: () => void;
+}) {
   const [type, setType] = useState<"Assignment" | "Quiz" | "Page">(
     "Assignment"
   );
@@ -31,12 +37,14 @@ export default function NewItemForm({ moduleName }: { moduleName: string }) {
       className="flex flex-col gap-3"
       onSubmit={(e) => {
         e.preventDefault();
+        const dueAt = dateToMarkdownString(new Date());
+        console.log("submitting");
         if (type === "Assignment") {
           createAssignment.mutate({
             assignment: {
               name,
               description: "",
-              dueAt: dateToMarkdownString(new Date()),
+              dueAt,
               submissionTypes: [
                 AssignmentSubmissionType.ONLINE_TEXT_ENTRY,
                 AssignmentSubmissionType.ONLINE_UPLOAD,
@@ -48,8 +56,32 @@ export default function NewItemForm({ moduleName }: { moduleName: string }) {
             assignmentName: name,
           });
         } else if (type === "Quiz") {
+          createQuiz.mutate({
+            quiz: {
+              name,
+              description: "",
+              dueAt,
+              shuffleAnswers: true,
+              showCorrectAnswers: true,
+              oneQuestionAtATime: true,
+              allowedAttempts: -1,
+              questions: [],
+            },
+            moduleName: moduleName,
+            quizName: name,
+          });
         } else if (type === "Page") {
+          createPage.mutate({
+            page: {
+              name,
+              text: "",
+              dueAt,
+            },
+            moduleName: moduleName,
+            pageName: name,
+          });
         }
+        onCreate();
       }}
     >
       <div>
@@ -64,19 +96,21 @@ export default function NewItemForm({ moduleName }: { moduleName: string }) {
         <TextInput label={type + " Name"} value={name} setValue={setName} />
       </div>
       <div>
-        <ButtonSelect
-          options={settings.assignmentGroups}
-          getName={(g) => g?.name ?? ""}
-          setSelectedOption={setAssignmentGroup}
-          selectedOption={assignmentGroup}
-        />
+        {type !== "Page" && (
+          <ButtonSelect
+            options={settings.assignmentGroups}
+            getName={(g) => g?.name ?? ""}
+            setSelectedOption={setAssignmentGroup}
+            selectedOption={assignmentGroup}
+          />
+        )}
       </div>
       {settings.assignmentGroups.length === 0 && (
         <div>
           No assignment groups created, create them in the course settings page
         </div>
       )}
-      <button>Create</button>
+      <button type="submit">Create</button>
       {isPending && <Spinner />}
     </form>
   );
diff --git a/nextjs/src/app/newCourse/NewCourseForm.tsx b/nextjs/src/app/newCourse/NewCourseForm.tsx
index af773ae..65f6c08 100644
--- a/nextjs/src/app/newCourse/NewCourseForm.tsx
+++ b/nextjs/src/app/newCourse/NewCourseForm.tsx
@@ -88,7 +88,7 @@ export default function NewCourseForm() {
                     canvasId: selectedCanvasCourse.id,
                     startDate: selectedTerm.start_at ?? "",
                     endDate: selectedTerm.end_at ?? "",
-                    defaultDueTime: { hour: 11, minute: 59 },
+                    defaultDueTime: { hour: 23, minute: 59 },
                   },
                 })
                 .then(() => {
diff --git a/nextjs/src/components/Modal.tsx b/nextjs/src/components/Modal.tsx
index 9c8086d..78e4409 100644
--- a/nextjs/src/components/Modal.tsx
+++ b/nextjs/src/components/Modal.tsx
@@ -30,6 +30,10 @@ export default function Modal({
         onClick={closeModal}
       >
         <div
+          onClick={(e) => {
+            // e.preventDefault();
+            e.stopPropagation();
+          }}
           className={
             ` bg-slate-800 p-6 rounded-lg shadow-lg w-1/3  ` +
             ` transition-all duration-400 ` +