diff --git a/src/app/DataHydration.tsx b/src/app/DataHydration.tsx
new file mode 100644
index 0000000..ba4a1b9
--- /dev/null
+++ b/src/app/DataHydration.tsx
@@ -0,0 +1,80 @@
+import { fileStorageService } from "@/features/local/utils/fileStorageService";
+import { trpcAppRouter } from "@/services/serverFunctions/appRouter";
+import { createTrpcContext } from "@/services/serverFunctions/context";
+import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
+import { createServerSideHelpers } from "@trpc/react-query/server";
+import superjson from "superjson";
+
+export default async function DataHydration({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  console.log("starting hydration");
+  const trpcHelper = createServerSideHelpers({
+    router: trpcAppRouter,
+    ctx: createTrpcContext(),
+    transformer: superjson,
+    queryClientConfig: {
+      defaultOptions: {
+        queries: {
+          staleTime: Infinity,
+        },
+      },
+    },
+  });
+
+  const allSettings = await fileStorageService.settings.getAllCoursesSettings();
+
+  await Promise.all(
+    allSettings.map(async (settings) => {
+      const courseName = settings.name;
+      const moduleNames = await trpcHelper.module.getModuleNames.fetch({
+        courseName,
+      });
+      await Promise.all([
+        // assignments
+        ...moduleNames.map(
+          async (moduleName) =>
+            await trpcHelper.assignment.getAllAssignments.prefetch({
+              courseName,
+              moduleName,
+            })
+        ),
+        // quizzes
+        ...moduleNames.map(
+          async (moduleName) =>
+            await trpcHelper.quiz.getAllQuizzes.prefetch({
+              courseName,
+              moduleName,
+            })
+        ),
+        // pages
+        ...moduleNames.map(
+          async (moduleName) =>
+            await trpcHelper.page.getAllPages.prefetch({
+              courseName,
+              moduleName,
+            })
+        ),
+      ]);
+    })
+  );
+
+  // lectures
+  await Promise.all(
+    allSettings.map(
+      async (settings) =>
+        await trpcHelper.lectures.getLectures.fetch({
+          courseName: settings.name,
+        })
+    )
+  );
+
+  const dehydratedState = dehydrate(trpcHelper.queryClient);
+  console.log("ran hydration");
+
+  return (
+    <HydrationBoundary state={dehydratedState}>{children}</HydrationBoundary>
+  );
+}
diff --git a/src/app/course/[courseName]/page.tsx b/src/app/course/[courseName]/page.tsx
index 63b062f..8a2c422 100644
--- a/src/app/course/[courseName]/page.tsx
+++ b/src/app/course/[courseName]/page.tsx
@@ -3,7 +3,7 @@ import DraggingContextProvider from "./context/drag/DraggingContextProvider";
 import { CourseNavigation } from "./CourseNavigation";
 import { DragStyleContextProvider } from "./context/drag/dragStyleContext";
 import CollapsableSidebar from "./CollapsableSidebar";
-
+import { SuspenseAndErrorHandling } from "@/components/SuspenseAndErrorHandling";
 
 export default async function CoursePage() {
   return (
@@ -13,8 +13,10 @@ export default async function CoursePage() {
           <DraggingContextProvider>
             <div className="flex sm:flex-row h-full flex-col max-w-[2400px] w-full mx-auto">
               <div className="flex-1 h-full flex flex-col">
-                <CourseNavigation />
-                <CourseCalendar />
+                <SuspenseAndErrorHandling>
+                  <CourseNavigation />
+                  <CourseCalendar />
+                </SuspenseAndErrorHandling>
               </div>
               <CollapsableSidebar />
             </div>
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index c29bcf8..043dd9f 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -2,15 +2,10 @@ import type { Metadata } from "next";
 import "./globals.css";
 import Providers from "./providers";
 import { Suspense } from "react";
-import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
 import { MyToaster } from "./MyToaster";
-import { createServerSideHelpers } from "@trpc/react-query/server";
-import { trpcAppRouter } from "@/services/serverFunctions/appRouter";
-import { createTrpcContext } from "@/services/serverFunctions/context";
-import superjson from "superjson";
-import { fileStorageService } from "@/features/local/utils/fileStorageService";
 import { ClientCacheInvalidation } from "../components/realtime/ClientCacheInvalidation";
 import { getTitle } from "@/services/titleUtils";
+import DataHydration from "./DataHydration";
 export const dynamic = "force-dynamic";
 
 export const metadata: Metadata = {
@@ -34,84 +29,10 @@ export default async function RootLayout({
                 <ClientCacheInvalidation></ClientCacheInvalidation>
                 {children}
               </DataHydration>
-            </Providers>
+            </Providers>  
           </Suspense>
         </div>
       </body>
     </html>
   );
 }
-
-async function DataHydration({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  console.log("starting hydration");
-  const trpcHelper = createServerSideHelpers({
-    router: trpcAppRouter,
-    ctx: createTrpcContext(),
-    transformer: superjson,
-    queryClientConfig: {
-      defaultOptions: {
-        queries: {
-          staleTime: Infinity,
-        },
-      },
-    },
-  });
-
-  const allSettings = await fileStorageService.settings.getAllCoursesSettings();
-
-  await Promise.all(
-    allSettings.map(async (settings) => {
-      const courseName = settings.name;
-      const moduleNames = await trpcHelper.module.getModuleNames.fetch({
-        courseName,
-      });
-      await Promise.all([
-        // assignments
-        ...moduleNames.map(
-          async (moduleName) =>
-            await trpcHelper.assignment.getAllAssignments.prefetch({
-              courseName,
-              moduleName,
-            })
-        ),
-        // quizzes
-        ...moduleNames.map(
-          async (moduleName) =>
-            await trpcHelper.quiz.getAllQuizzes.prefetch({
-              courseName,
-              moduleName,
-            })
-        ),
-        // pages
-        ...moduleNames.map(
-          async (moduleName) =>
-            await trpcHelper.page.getAllPages.prefetch({
-              courseName,
-              moduleName,
-            })
-        ),
-      ]);
-    })
-  );
-
-  // lectures
-  await Promise.all(
-    allSettings.map(
-      async (settings) =>
-        await trpcHelper.lectures.getLectures.fetch({
-          courseName: settings.name,
-        })
-    )
-  );
-
-  const dehydratedState = dehydrate(trpcHelper.queryClient);
-  console.log("ran hydration");
-
-  return (
-    <HydrationBoundary state={dehydratedState}>{children}</HydrationBoundary>
-  );
-}
diff --git a/src/components/SuspenseAndErrorHandling.tsx b/src/components/SuspenseAndErrorHandling.tsx
index 9879fcb..f8e3788 100644
--- a/src/components/SuspenseAndErrorHandling.tsx
+++ b/src/components/SuspenseAndErrorHandling.tsx
@@ -1,3 +1,4 @@
+"use client"
 import { getErrorMessage } from "@/services/utils/queryClient";
 import { QueryErrorResetBoundary } from "@tanstack/react-query";
 import { FC, ReactNode, Suspense } from "react";
diff --git a/src/services/utils/queryClient.tsx b/src/services/utils/queryClient.tsx
index d1a444b..3f84d48 100644
--- a/src/services/utils/queryClient.tsx
+++ b/src/services/utils/queryClient.tsx
@@ -3,44 +3,6 @@ import { ReactNode } from "react";
 import { getHTTPStatusCodeFromError } from "@trpc/server/http";
 import { TRPCError } from "@trpc/server";
 
-// const addErrorAsToast = async (error: unknown) => {
-//   console.error("error from toast", error);
-//   const message = getErrorMessage(error);
-
-//   toast(
-//     (t) => (
-//       <div className="row">
-//         <div className="col-auto my-auto">
-//           <ErrorIcon />
-//         </div>
-//         <div className="col my-auto">
-//           <div className="white-space">{message}</div>
-//           <div>
-//             <a
-//               href="https://snow.kualibuild.com/app/651eeebc32976c013a4c4739/run"
-//               target="_blank"
-//               rel="noreferrer"
-//             >
-//               Report Bug
-//             </a>
-//           </div>
-//         </div>
-//         <div className="col-auto my-auto">
-//           <button
-//             onClick={() => toast.dismiss(t.id)}
-//             className="btn btn-outline-secondary btn-sm"
-//           >
-//             <i className="bi bi-x"></i>
-//           </button>
-//         </div>
-//       </div>
-//     ),
-//     {
-//       duration: Infinity,
-//     }
-//   );
-// };
-
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function getErrorMessage(error: any) {
   if (error instanceof TRPCError) {
@@ -68,8 +30,7 @@ export function getErrorMessage(error: any) {
     } else return JSON.stringify(error.response?.data.detail);
   }
   console.log("error message: ", error);
-  if(error.message )
-    return error.message;
+  if (error.message) return error.message;
   return "Error With Request";
 }