diff --git a/nextjs/src/app/api/courses/[courseName]/modules/route.ts b/nextjs/src/app/api/courses/[courseName]/modules/route.ts
new file mode 100644
index 0000000..1b1afdd
--- /dev/null
+++ b/nextjs/src/app/api/courses/[courseName]/modules/route.ts
@@ -0,0 +1,9 @@
+import { fileStorageService } from "@/services/fileStorage/fileStorageService";
+
+export async function GET(
+  _request: Request,
+  { params: { courseName } }: { params: { courseName: string } }
+) {
+  const settings = await fileStorageService.getModuleNames(courseName)
+  return Response.json(settings);
+}
diff --git a/nextjs/src/hooks/localCoursesHooks.ts b/nextjs/src/hooks/localCoursesHooks.ts
index 772ebe0..8702dfe 100644
--- a/nextjs/src/hooks/localCoursesHooks.ts
+++ b/nextjs/src/hooks/localCoursesHooks.ts
@@ -1,4 +1,5 @@
 import { LocalCourse, LocalCourseSettings } from "@/models/local/localCourse";
+import { LocalModule } from "@/models/local/localModules";
 import {
   useMutation,
   useQueryClient,
@@ -8,8 +9,21 @@ import axios from "axios";
 
 export const localCourseKeys = {
   allCourses: ["all courses"] as const,
-  courseSettings: (courseName: string) =>
+  settings: (courseName: string) =>
     ["course details", courseName, "settings"] as const,
+  moduleNames: (courseName: string) =>
+    [
+      "course details",
+      courseName,
+      "modules",
+      { type: "names" } as const,
+    ] as const,
+    moduleAssignmentNames: (courseName: string, moduleName: string) =>
+      ["course details", courseName, "modules", moduleName, "assignments"] as const,
+    moduleQuizzeNames: (courseName: string, moduleName: string) =>
+      ["course details", courseName, "modules", moduleName, "quizzes"] as const,
+    modulePageNames: (courseName: string, moduleName: string) =>
+      ["course details", courseName, "modules", moduleName, "pages"] as const,
 };
 
 export const useLocalCourseNamesQuery = () =>
@@ -24,7 +38,7 @@ export const useLocalCourseNamesQuery = () =>
 
 export const useLocalCourseSettingsQuery = (courseName: string) =>
   useSuspenseQuery({
-    queryKey: localCourseKeys.courseSettings(courseName),
+    queryKey: localCourseKeys.settings(courseName),
     queryFn: async (): Promise<LocalCourseSettings> => {
       const url = `/api/courses/${courseName}/settings`;
       const response = await axios.get(url);
@@ -32,6 +46,17 @@ export const useLocalCourseSettingsQuery = (courseName: string) =>
     },
   });
 
+export const useLocalCourseModuleNamesQuery = (courseName: string) =>
+  useSuspenseQuery({
+    queryKey: localCourseKeys.moduleNames(courseName),
+    queryFn: async (): Promise<string[]> => {
+      const url = `/api/courses/${courseName}/modules`;
+      const response = await axios.get(url);
+      return response.data;
+    },
+  });
+
+
 export const useUpdateCourseMutation = (courseName: string) => {
   const queryClient = useQueryClient();
   return useMutation({
@@ -44,7 +69,7 @@ export const useUpdateCourseMutation = (courseName: string) => {
     },
     onSuccess: () => {
       queryClient.invalidateQueries({
-        queryKey: localCourseKeys.courseSettings(courseName),
+        queryKey: localCourseKeys.settings(courseName),
       });
     },
     scope: {
diff --git a/nextjs/src/services/fileStorage/fileStorageService.ts b/nextjs/src/services/fileStorage/fileStorageService.ts
index 6ee284a..78acb80 100644
--- a/nextjs/src/services/fileStorage/fileStorageService.ts
+++ b/nextjs/src/services/fileStorage/fileStorageService.ts
@@ -46,7 +46,7 @@ export const fileStorageService = {
 
     return courseNamesFromDirectories;
   },
-  
+
   async getCourseSettings(courseName: string): Promise<LocalCourseSettings> {
     const courseDirectory = path.join(basePath, courseName);
     const settingsPath = path.join(courseDirectory, "settings.yml");
@@ -63,6 +63,22 @@ export const fileStorageService = {
     return { ...settings, name: folderName };
   },
 
+  async getModuleNames(courseName: string) {
+    const courseDirectory = path.join(basePath, courseName);
+    const moduleDirectories = await fs.readdir(courseDirectory, {
+      withFileTypes: true,
+    });
+
+    const modulePromises = moduleDirectories
+      .filter((dirent) => dirent.isDirectory())
+      .map((dirent) =>
+        dirent.name
+      );
+
+    const modules = await Promise.all(modulePromises);
+    return modules.sort((a, b) => a.localeCompare(b));
+  },
+
   async getEmptyDirectories(): Promise<string[]> {
     if (!(await directoryOrFileExists(basePath))) {
       throw new Error(