diff --git a/nextjs/src/app/api/courses/[courseName]/modules/[moduleName]/assignments/[assignmentName]/route.ts b/nextjs/src/app/api/courses/[courseName]/modules/[moduleName]/assignments/[assignmentName]/route.ts
index 2da1104..37ab919 100644
--- a/nextjs/src/app/api/courses/[courseName]/modules/[moduleName]/assignments/[assignmentName]/route.ts
+++ b/nextjs/src/app/api/courses/[courseName]/modules/[moduleName]/assignments/[assignmentName]/route.ts
@@ -11,12 +11,12 @@ export const GET = async (
   }
 ) =>
   await withErrorHandling(async () => {
-    const settings = await fileStorageService.assignments.getAssignment(
+    const assignment = await fileStorageService.assignments.getAssignment(
       courseName,
       moduleName,
       assignmentName
     );
-    return Response.json(settings);
+    return Response.json(assignment);
   });
 
 export const PUT = async (
diff --git a/nextjs/src/app/api/courses/[courseName]/modules/[moduleName]/assignments/route.ts b/nextjs/src/app/api/courses/[courseName]/modules/[moduleName]/assignments/route.ts
index 16b435e..0fad941 100644
--- a/nextjs/src/app/api/courses/[courseName]/modules/[moduleName]/assignments/route.ts
+++ b/nextjs/src/app/api/courses/[courseName]/modules/[moduleName]/assignments/route.ts
@@ -6,10 +6,27 @@ export const GET = async (
   {
     params: { courseName, moduleName },
   }: { params: { courseName: string; moduleName: string } }
-) => await withErrorHandling(async () => {
-  const settings = await fileStorageService.assignments.getAssignmentNames(
-    courseName,
-    moduleName
-  );
-  return Response.json(settings);
-})
+) =>
+  await withErrorHandling(async () => {
+    const names = await fileStorageService.assignments.getAssignmentNames(
+      courseName,
+      moduleName
+    );
+    const assignments = (
+      await Promise.all(
+        names.map(async (name) => {
+          try {
+            return await fileStorageService.assignments.getAssignment(
+              courseName,
+              moduleName,
+              name
+            );
+          } catch {
+            return null;
+          }
+        })
+      )
+    ).filter((a) => a !== null);
+    
+    return Response.json(assignments);
+  });
diff --git a/nextjs/src/app/api/courses/route.ts b/nextjs/src/app/api/courses/route.ts
index f4fb91d..6c236c3 100644
--- a/nextjs/src/app/api/courses/route.ts
+++ b/nextjs/src/app/api/courses/route.ts
@@ -2,11 +2,12 @@ import { LocalCourse } from "@/models/local/localCourse";
 import { fileStorageService } from "@/services/fileStorage/fileStorageService";
 import { withErrorHandling } from "@/services/withErrorHandling";
 
-export const GET = async () =>
-  await withErrorHandling(async () => {
-    const courses = await fileStorageService.getCourseNames();
-    return Response.json(courses);
-  });
+// replace with get all settings
+// export const GET = async () =>
+//   await withErrorHandling(async () => {
+//     const courses = await fileStorageService.getCourseNames();
+//     return Response.json(courses);
+//   });
 
 export const POST = async (request: Request) =>
   await withErrorHandling(async () => {
diff --git a/nextjs/src/app/course/[courseName]/calendar/day/Day.tsx b/nextjs/src/app/course/[courseName]/calendar/day/Day.tsx
index 72bc53e..7a67225 100644
--- a/nextjs/src/app/course/[courseName]/calendar/day/Day.tsx
+++ b/nextjs/src/app/course/[courseName]/calendar/day/Day.tsx
@@ -92,23 +92,15 @@ function DayTitle({ day, dayAsDate }: { day: string; dayAsDate: Date }) {
       <Link className="ms-1" href={getLectureUrl(courseName, day)}>
         {dayAsDate.getDate()}
       </Link>
-      <Modal buttonText="+" buttonClass="unstyled hover:font-bold px-1 mb-auto mt-0 pt-0">
+      <Modal
+        buttonText="+"
+        buttonClass="unstyled hover:font-bold px-1 mb-auto mt-0 pt-0"
+      >
         {({ closeModal }) => (
           <div>
-            <NewItemForm
-              creationDate={day}
-              onCreate={() => {
-                closeModal();
-              }}
-            />
+            <NewItemForm creationDate={day} onCreate={closeModal} />
             <br />
-            <button
-              onClick={() => {
-                closeModal();
-              }}
-            >
-              close
-            </button>
+            <button onClick={closeModal}>close</button>
           </div>
         )}
       </Modal>
diff --git a/nextjs/src/app/course/[courseName]/modules/ExpandableModule.tsx b/nextjs/src/app/course/[courseName]/modules/ExpandableModule.tsx
index de1adba..147892a 100644
--- a/nextjs/src/app/course/[courseName]/modules/ExpandableModule.tsx
+++ b/nextjs/src/app/course/[courseName]/modules/ExpandableModule.tsx
@@ -1,6 +1,5 @@
 "use client";
 import {
-  useAssignmentNamesQuery,
   useAssignmentsQueries,
 } from "@/hooks/localCourse/assignmentHooks";
 import {
diff --git a/nextjs/src/app/providers.tsx b/nextjs/src/app/providers.tsx
index 98d46dd..8f1df14 100644
--- a/nextjs/src/app/providers.tsx
+++ b/nextjs/src/app/providers.tsx
@@ -1,11 +1,9 @@
 "use client";
-import {
-  QueryClientProvider,
-} from "@tanstack/react-query";
+import { QueryClientProvider } from "@tanstack/react-query";
 import { ReactNode } from "react";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { getQueryClient } from "./providersQueryClientUtils";
-
+import { SuspenseAndErrorHandling } from "@/components/SuspenseAndErrorHandling";
 
 export default function Providers({ children }: { children: ReactNode }) {
   // NOTE: Avoid useState when initializing the query client if you don't
@@ -16,9 +14,11 @@ export default function Providers({ children }: { children: ReactNode }) {
   const queryClient = getQueryClient();
 
   return (
-    <QueryClientProvider client={queryClient}>
-      {/* <ReactQueryDevtools initialIsOpen={false} /> */}
-      {children}
-    </QueryClientProvider>
+    <SuspenseAndErrorHandling>
+      <QueryClientProvider client={queryClient}>
+        {/* <ReactQueryDevtools initialIsOpen={false} /> */}
+        {children}
+      </QueryClientProvider>
+    </SuspenseAndErrorHandling>
   );
 }
diff --git a/nextjs/src/app/providersQueryClientUtils.ts b/nextjs/src/app/providersQueryClientUtils.ts
index 0dceebc..e1f3576 100644
--- a/nextjs/src/app/providersQueryClientUtils.ts
+++ b/nextjs/src/app/providersQueryClientUtils.ts
@@ -1,4 +1,4 @@
-import { isServer, QueryClient } from "@tanstack/react-query";
+import { isServer, QueryCache, QueryClient } from "@tanstack/react-query";
 
 export function makeQueryClient() {
   return new QueryClient({
@@ -13,6 +13,9 @@ export function makeQueryClient() {
         refetchOnMount: false,
       },
     },
+    queryCache: new QueryCache({
+      onError: (e) => console.log("error in query client", e),
+    }),
   });
 }
 
diff --git a/nextjs/src/components/ClientOnly.tsx b/nextjs/src/components/ClientOnly.tsx
index 8cc9af8..d771e45 100644
--- a/nextjs/src/components/ClientOnly.tsx
+++ b/nextjs/src/components/ClientOnly.tsx
@@ -1,5 +1,4 @@
 "use client";
-import { isServer } from "@tanstack/react-query";
 import React, { ReactNode, useEffect, useState } from "react";
 
 export default function ClientOnly({ children }: { children: ReactNode }) {
@@ -7,7 +6,7 @@ export default function ClientOnly({ children }: { children: ReactNode }) {
 
   useEffect(() => {
     setIsClient(true);
-  }, [isServer]);
+  }, []);
 
   if (!isClient) return <></>;
   return <>{children}</>;
diff --git a/nextjs/src/hooks/hookHydration.ts b/nextjs/src/hooks/hookHydration.ts
index 2586fd2..af505aa 100644
--- a/nextjs/src/hooks/hookHydration.ts
+++ b/nextjs/src/hooks/hookHydration.ts
@@ -84,14 +84,18 @@ const loadAllModuleData = async (courseName: string, moduleName: string) => {
 
   const [assignments, quizzes, pages] = await Promise.all([
     await Promise.all(
-      assignmentNames.map(
-        async (assignmentName) =>
-          await fileStorageService.assignments.getAssignment(
+      assignmentNames.map(async (assignmentName) => {
+        try {
+          return await fileStorageService.assignments.getAssignment(
             courseName,
             moduleName,
             assignmentName
-          )
-      )
+          );
+        } catch (error) {
+          console.error(`Error fetching assignment: ${assignmentName}`, error);
+          return null; // or any other placeholder value
+        }
+      })
     ),
     await Promise.all(
       quizNames.map(
@@ -115,12 +119,12 @@ const loadAllModuleData = async (courseName: string, moduleName: string) => {
     ),
   ]);
 
+  const assignmentsLoaded = assignments.filter(a => a !== null);
   return {
     moduleName,
-    assignmentNames,
     pageNames,
     quizNames,
-    assignments,
+    assignments: assignmentsLoaded,
     quizzes,
     pages,
   };
@@ -129,7 +133,6 @@ const loadAllModuleData = async (courseName: string, moduleName: string) => {
 const hydrateModuleData = async (
   {
     moduleName,
-    assignmentNames,
     pageNames,
     quizNames,
     assignments,
@@ -137,7 +140,6 @@ const hydrateModuleData = async (
     pages,
   }: {
     moduleName: string;
-    assignmentNames: string[];
     pageNames: string[];
     quizNames: string[];
     assignments: LocalAssignment[];
@@ -148,8 +150,8 @@ const hydrateModuleData = async (
   queryClient: QueryClient
 ) => {
   await queryClient.prefetchQuery({
-    queryKey: localCourseKeys.assignmentNames(courseName, moduleName),
-    queryFn: () => assignmentNames,
+    queryKey: localCourseKeys.allAssignments(courseName, moduleName),
+    queryFn: () => assignments,
   });
   await Promise.all(
     assignments.map(
diff --git a/nextjs/src/hooks/localCourse/assignmentHooks.ts b/nextjs/src/hooks/localCourse/assignmentHooks.ts
index cd4708d..f8a47b8 100644
--- a/nextjs/src/hooks/localCourse/assignmentHooks.ts
+++ b/nextjs/src/hooks/localCourse/assignmentHooks.ts
@@ -11,12 +11,12 @@ import {
 import { useCourseContext } from "@/app/course/[courseName]/context/courseContext";
 import { axiosClient } from "@/services/axiosUtils";
 
-export const getAssignmentNamesQueryConfig = (
+export const getAllAssignmentsQueryConfig = (
   courseName: string,
   moduleName: string
 ) => ({
-  queryKey: localCourseKeys.assignmentNames(courseName, moduleName),
-  queryFn: async (): Promise<string[]> => {
+  queryKey: localCourseKeys.allAssignments(courseName, moduleName),
+  queryFn: async (): Promise<LocalAssignment[]> => {
     const url =
       "/api/courses/" +
       encodeURIComponent(courseName) +
@@ -28,11 +28,9 @@ export const getAssignmentNamesQueryConfig = (
   },
 });
 
-export const useAssignmentNamesQuery = (moduleName: string) => {
+export const useAllAssignmentNamesQuery = (moduleName: string) => {
   const { courseName } = useCourseContext();
-  return useSuspenseQuery(
-    getAssignmentNamesQueryConfig(courseName, moduleName)
-  );
+  return useSuspenseQuery(getAllAssignmentsQueryConfig(courseName, moduleName));
 };
 
 export const getAssignmentQueryConfig = (
@@ -72,11 +70,11 @@ export const useAssignmentQuery = (
 };
 
 export const useAssignmentsQueries = (moduleName: string) => {
-  const { data: assignmentNames } = useAssignmentNamesQuery(moduleName);
+  const { data: allAssignments } = useAllAssignmentNamesQuery(moduleName);
   const { courseName } = useCourseContext();
   return useSuspenseQueries({
-    queries: assignmentNames.map((name) =>
-      getAssignmentQueryConfig(courseName, moduleName, name)
+    queries: allAssignments.map((assignment) =>
+      getAssignmentQueryConfig(courseName, moduleName, assignment.name)
     ),
     combine: (results) => ({
       data: results.map((r) => r.data),
@@ -114,7 +112,7 @@ export const useUpdateAssignmentMutation = () => {
           ),
         });
         queryClient.removeQueries({
-          queryKey: localCourseKeys.assignmentNames(
+          queryKey: localCourseKeys.allAssignments(
             courseName,
             previousModuleName
           ),
@@ -140,7 +138,7 @@ export const useUpdateAssignmentMutation = () => {
     },
     onSuccess: async (_, { moduleName, assignmentName }) => {
       await queryClient.invalidateQueries({
-        queryKey: localCourseKeys.assignmentNames(courseName, moduleName),
+        queryKey: localCourseKeys.allAssignments(courseName, moduleName),
       });
       await queryClient.invalidateQueries({
         queryKey: localCourseKeys.assignment(
@@ -181,7 +179,7 @@ export const useCreateAssignmentMutation = () => {
     },
     onSuccess: async (_, { moduleName, assignmentName }) => {
       await queryClient.invalidateQueries({
-        queryKey: localCourseKeys.assignmentNames(courseName, moduleName),
+        queryKey: localCourseKeys.allAssignments(courseName, moduleName),
       });
       await queryClient.invalidateQueries({
         queryKey: localCourseKeys.assignment(
@@ -205,7 +203,6 @@ export const useDeleteAssignmentMutation = () => {
       moduleName: string;
       assignmentName: string;
     }) => {
-
       queryClient.removeQueries({
         queryKey: localCourseKeys.assignment(
           courseName,
@@ -214,10 +211,7 @@ export const useDeleteAssignmentMutation = () => {
         ),
       });
       queryClient.removeQueries({
-        queryKey: localCourseKeys.assignmentNames(
-          courseName,
-          moduleName
-        ),
+        queryKey: localCourseKeys.allAssignments(courseName, moduleName),
       });
       const url =
         "/api/courses/" +
@@ -230,7 +224,7 @@ export const useDeleteAssignmentMutation = () => {
     },
     onSuccess: async (_, { moduleName, assignmentName }) => {
       queryClient.invalidateQueries({
-        queryKey: localCourseKeys.assignmentNames(courseName, moduleName),
+        queryKey: localCourseKeys.allAssignments(courseName, moduleName),
       });
     },
   });
diff --git a/nextjs/src/hooks/localCourse/localCourseKeys.ts b/nextjs/src/hooks/localCourse/localCourseKeys.ts
index ebacc44..30d7587 100644
--- a/nextjs/src/hooks/localCourse/localCourseKeys.ts
+++ b/nextjs/src/hooks/localCourse/localCourseKeys.ts
@@ -10,14 +10,14 @@ export const localCourseKeys = {
       "modules",
       { type: "names" } as const,
     ] as const,
-  assignmentNames: (courseName: string, moduleName: string) =>
+  allAssignments: (courseName: string, moduleName: string) =>
     [
       "course details",
       courseName,
       "modules",
       moduleName,
       "assignments",
-      { type: "names" },
+      { type: "all assignments" },
     ] as const,
   quizNames: (courseName: string, moduleName: string) =>
     [
diff --git a/nextjs/src/hooks/localCourse/localCourseModuleHooks.ts b/nextjs/src/hooks/localCourse/localCourseModuleHooks.ts
index a20799f..81d5d30 100644
--- a/nextjs/src/hooks/localCourse/localCourseModuleHooks.ts
+++ b/nextjs/src/hooks/localCourse/localCourseModuleHooks.ts
@@ -8,7 +8,7 @@ import {
 } from "@tanstack/react-query";
 import { localCourseKeys } from "./localCourseKeys";
 import {
-  getAssignmentNamesQueryConfig,
+  getAllAssignmentsQueryConfig,
   getAssignmentQueryConfig,
 } from "./assignmentHooks";
 import { getPageNamesQueryConfig, getPageQueryConfig } from "./pageHooks";
@@ -77,34 +77,34 @@ export const useAllCourseDataQuery = () => {
   const { courseName } = useCourseContext();
   const { data: moduleNames } = useModuleNamesQuery();
 
-  const { data: assignmentNamesAndModules } = useSuspenseQueries({
+  const { data: assignmentsAndModules } = useSuspenseQueries({
     queries: moduleNames.map((moduleName) =>
-      getAssignmentNamesQueryConfig(courseName, moduleName)
+      getAllAssignmentsQueryConfig(courseName, moduleName)
     ),
     combine: (results) => ({
       data: results.flatMap((r, i) =>
-        r.data.map((assignmentName) => ({
+        r.data.map((assignment) => ({
           moduleName: moduleNames[i],
-          assignmentName,
+          assignment,
         }))
       ),
       pending: results.some((r) => r.isPending),
     }),
   });
 
-  const { data: assignmentsAndModules } = useSuspenseQueries({
-    queries: assignmentNamesAndModules.map(
-      ({ moduleName, assignmentName }, i) =>
-        getAssignmentQueryConfig(courseName, moduleName, assignmentName)
-    ),
-    combine: (results) => ({
-      data: results.flatMap((r, i) => ({
-        moduleName: assignmentNamesAndModules[i].moduleName,
-        assignment: r.data,
-      })),
-      pending: results.some((r) => r.isPending),
-    }),
-  });
+  // const { data: assignmentsAndModules } = useSuspenseQueries({
+  //   queries: assignmentsAndModules.map(
+  //     ({ moduleName, assignment }, i) =>
+  //       getAssignmentQueryConfig(courseName, moduleName, assignment)
+  //   ),
+  //   combine: (results) => ({
+  //     data: results.flatMap((r, i) => ({
+  //       moduleName: assignmentsAndModules[i].moduleName,
+  //       assignment: r.data,
+  //     })),
+  //     pending: results.some((r) => r.isPending),
+  //   }),
+  // });
 
   const { data: quizNamesAndModules } = useSuspenseQueries({
     queries: moduleNames.map((moduleName) =>