diff --git a/nextjs/src/app/CourseList.tsx b/nextjs/src/app/CourseList.tsx
index 99137e0..b09af4e 100644
--- a/nextjs/src/app/CourseList.tsx
+++ b/nextjs/src/app/CourseList.tsx
@@ -1,26 +1,66 @@
 "use client";
 import { useLocalCoursesSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
+import { LocalCourseSettings } from "@/models/local/localCourseSettings";
 import { getCourseUrl } from "@/services/urlUtils";
 import Link from "next/link";
 
+function getDateKey(dateString: string) {
+  return dateString.split("T")[0];
+}
+function groupByStartDate(courses: LocalCourseSettings[]): {
+  [key: string]: LocalCourseSettings[];
+} {
+  return courses.reduce(
+    (acc, course) => {
+      const { startDate } = course;
+      const key = getDateKey(startDate);
+      if (!acc[key]) {
+        acc[key] = [];
+      }
+      acc[key].push(course);
+      return acc;
+    },
+    {} as {
+      [key: string]: LocalCourseSettings[];
+    }
+  );
+}
+
+function getTermName(startDate: string) {
+  const [year, month, ...rest] = startDate.split("-");
+  if (month < "04") return "Spring " + year;
+  if (month < "07") return "Summer " + year;
+  return "Fall " + year;
+}
+
 export default function CourseList() {
   const [allSettings] = useLocalCoursesSettingsQuery();
 
+  const coursesByStartDate = groupByStartDate(allSettings);
+
   return (
-    <div>
-      {allSettings.map((settings) => (
-        <div key={settings.name}>
-          <Link
-            href={getCourseUrl(settings.name)}
-            shallow={true}
-            className="
+    <div className="flex flex-row ">
+      {Object.keys(coursesByStartDate).map((startDate) => (
+        <div
+          key={startDate}
+          className=" border-4 border-slate-800 rounded p-3 m-3"
+        >
+          <div className="text-center">{getTermName(startDate)}</div>
+          {coursesByStartDate[getDateKey(startDate)].map((settings) => (
+            <div key={settings.name}>
+              <Link
+                href={getCourseUrl(settings.name)}
+                shallow={true}
+                className="
               font-bold text-xl block
               transition-all hover:scale-105 hover:underline hover:text-slate-200
               mb-3
             "
-          >
-            {settings.name}
-          </Link>
+              >
+                {settings.name}
+              </Link>
+            </div>
+          ))}
         </div>
       ))}
     </div>
diff --git a/nextjs/src/app/course/[courseName]/CourseTitle.tsx b/nextjs/src/app/course/[courseName]/CourseTitle.tsx
index 6770d39..e6e17f8 100644
--- a/nextjs/src/app/course/[courseName]/CourseTitle.tsx
+++ b/nextjs/src/app/course/[courseName]/CourseTitle.tsx
@@ -5,6 +5,6 @@ import { useCourseContext } from "./context/courseContext"
 export default function CourseTitle() {
   const {courseName}= useCourseContext()
   return (
-    <title>{courseName}</title>
+    <title>{process.env.NEXT_PUBLIC_TITLE_PREFIX}{courseName}</title>
   )
 }
diff --git a/nextjs/src/app/layout.tsx b/nextjs/src/app/layout.tsx
index 36d01d5..1c932e7 100644
--- a/nextjs/src/app/layout.tsx
+++ b/nextjs/src/app/layout.tsx
@@ -13,7 +13,7 @@ import { ClientCacheInvalidation } from "../components/realtime/ClientCacheInval
 export const dynamic = "force-dynamic";
 
 export const metadata: Metadata = {
-  title: "Canvas Manager 2.0",
+  title: process.env.NEXT_PUBLIC_TITLE_PREFIX + "Canvas Manager 2.0",
 };
 
 export default async function RootLayout({