diff --git a/nextjs/src/app/course/[courseName]/modules/ExpandableModule.tsx b/nextjs/src/app/course/[courseName]/modules/ExpandableModule.tsx
index b7d5f13..2d748a8 100644
--- a/nextjs/src/app/course/[courseName]/modules/ExpandableModule.tsx
+++ b/nextjs/src/app/course/[courseName]/modules/ExpandableModule.tsx
@@ -1,37 +1,62 @@
+import { IModuleItem } from "@/models/local/IModuleItem";
 import { LocalModule } from "@/models/local/localModules";
-import React from "react";
+import { getDateFromStringOrThrow } from "@/models/local/timeUtils";
+import React, { useState } from "react";
 
 export default function ExpandableModule({ module }: { module: LocalModule }) {
+  const [expanded, setExpanded] = useState(false);
+
+  const moduleItems: {
+    type: "assignment" | "quiz" | "page";
+    item: IModuleItem;
+  }[] = module.assignments
+    .map(
+      (
+        a
+      ): {
+        type: "assignment" | "quiz" | "page";
+        item: IModuleItem;
+      } => ({
+        type: "assignment",
+        item: a,
+      })
+    )
+    .concat(module.quizzes.map((q) => ({ type: "quiz", item: q })))
+    .concat(module.pages.map((p) => ({ type: "page", item: p })))
+    .sort(
+      (a, b) =>
+        getDateFromStringOrThrow(
+          a.item.dueAt,
+          "item due date in expandable module"
+        ).getTime() -
+        getDateFromStringOrThrow(
+          b.item.dueAt,
+          "item due date in expandable module"
+        ).getTime()
+    );
+
   return (
-    <>
-      <section className="">
-        <label>
-          <div
-            className="
-            max-h-14 max-w-xs
-            overflow-hidden 
-            rounded-lg
-            bg-slate-800 
-            px-4 py-0 mb-3
-            transition-all duration-500 
-            peer-checked/showLabel:max-h-screen
-          "
-          >
-            <div className="flex h-14 cursor-pointer items-center font-bold">
-              <input
-                className="peer/showLabel absolute scale-0"
-                type="checkbox"
-              />
-              {module.name}
-            </div>
-            <hr />
-            <p className="mb-2">
-              crafted a sleek collapsible panel using Tailwind CSS without the
-              need for JavaScript. Impressive! 😎
-            </p>
-          </div>
-        </label>
-      </section>
-    </>
+    <div className="bg-slate-800 rounded-lg p-3 border border-slate-600 mb-3">
+      <div
+        className="font-bold "
+        role="button"
+        onClick={() => setExpanded((e) => !e)}
+      >
+        {module.name}
+      </div>
+      <div
+        className={
+          `
+          overflow-hidden 
+           transition-all duration-1000 ease-in
+          ` + (expanded ? " max-h-[30vh]" : " max-h-0")
+        }
+      >
+        <hr />
+        {moduleItems.map(({ type, item }) => (
+          <div key={item.name}>{item.name}</div>
+        ))}
+      </div>
+    </div>
   );
 }
diff --git a/nextjs/src/app/course/[courseName]/page.tsx b/nextjs/src/app/course/[courseName]/page.tsx
index b15df8b..1e023a9 100644
--- a/nextjs/src/app/course/[courseName]/page.tsx
+++ b/nextjs/src/app/course/[courseName]/page.tsx
@@ -20,7 +20,7 @@ export default async function CoursePage({
             <div className="flex-1 min-h-0">
               <CourseCalendar />
             </div>
-            <div className="m-5">
+            <div className="w-96 p-3">
               <ModuleList />
             </div>
           </div>
diff --git a/nextjs/src/models/local/assignmnet/localAssignment.ts b/nextjs/src/models/local/assignmnet/localAssignment.ts
index a1c02c5..9beeea1 100644
--- a/nextjs/src/models/local/assignmnet/localAssignment.ts
+++ b/nextjs/src/models/local/assignmnet/localAssignment.ts
@@ -1,9 +1,10 @@
+import { IModuleItem } from "../IModuleItem";
 import { AssignmentSubmissionType } from "./assignmentSubmissionType";
 import { RubricItem } from "./rubricItem";
 import { assignmentMarkdownParser } from "./utils/assignmentMarkdownParser";
 import { assignmentMarkdownSerializer } from "./utils/assignmentMarkdownSerializer";
 
-export interface LocalAssignment {
+export interface LocalAssignment extends IModuleItem {
   name: string;
   description: string;
   lockAt?: string; // 08/21/2023 23:59:00
diff --git a/nextjs/src/models/local/quiz/localQuiz.ts b/nextjs/src/models/local/quiz/localQuiz.ts
index 192c462..70fd667 100644
--- a/nextjs/src/models/local/quiz/localQuiz.ts
+++ b/nextjs/src/models/local/quiz/localQuiz.ts
@@ -1,7 +1,8 @@
+import { IModuleItem } from "../IModuleItem";
 import { LocalQuizQuestion } from "./localQuizQuestion";
 import { quizMarkdownUtils } from "./utils/quizMarkdownUtils";
 
-export interface LocalQuiz {
+export interface LocalQuiz extends IModuleItem {
   name: string;
   description: string;
   password?: string;
diff --git a/nextjs/tailwind.config.ts b/nextjs/tailwind.config.ts
index 68eeab8..eae1ca7 100644
--- a/nextjs/tailwind.config.ts
+++ b/nextjs/tailwind.config.ts
@@ -12,6 +12,8 @@ const config: Config = {
       ...borderRadius,
       xl: "24px",
     },
+    extend: {
+    }
   },
   plugins: [],
 };