diff --git a/src/pages/learn/[courseId]/[chapterId]/[lessonId].astro b/src/pages/learn/[courseId]/[chapterId]/[lessonId]/index.astro
similarity index 90%
rename from src/pages/learn/[courseId]/[chapterId]/[lessonId].astro
rename to src/pages/learn/[courseId]/[chapterId]/[lessonId]/index.astro
index 82dd829b2..7dadfb228 100644
--- a/src/pages/learn/[courseId]/[chapterId]/[lessonId].astro
+++ b/src/pages/learn/[courseId]/[chapterId]/[lessonId]/index.astro
@@ -1,13 +1,13 @@
 ---
-import { CourseView } from '../../../../components/Course/CourseView';
-import SkeletonLayout from '../../../../layouts/SkeletonLayout.astro';
+import { CourseView } from '../../../../../components/Course/CourseView';
+import SkeletonLayout from '../../../../../layouts/SkeletonLayout.astro';
 import {
   getAllCourses,
   getChaptersByCourseId,
   type CourseFileType,
   type ChapterFileType,
   type LessonFileType,
-} from '../../../../lib/course';
+} from '../../../../../lib/course';
 
 interface Params extends Record<string, string | undefined> {
   courseId: string;
diff --git a/src/pages/learn/[courseId]/[chapterId]/[lessonId]/index.json.ts b/src/pages/learn/[courseId]/[chapterId]/[lessonId]/index.json.ts
new file mode 100644
index 000000000..3cf5abb92
--- /dev/null
+++ b/src/pages/learn/[courseId]/[chapterId]/[lessonId]/index.json.ts
@@ -0,0 +1,46 @@
+import type { APIRoute } from 'astro';
+import {
+  getAllCourses,
+  getChaptersByCourseId,
+} from '../../../../../lib/course';
+
+export async function getStaticPaths() {
+  const courses = await getAllCourses();
+  const coursesWithChapters = await Promise.all(
+    courses.map(async (course) => {
+      const chapters = await getChaptersByCourseId(course.id);
+      return chapters
+        .map((chapter) => {
+          return chapter.lessons.map((lesson) => {
+            return {
+              params: {
+                courseId: course.id,
+                chapterId: chapter.id,
+                lessonId: lesson.id,
+              },
+              props: {
+                lesson: {
+                  courseId: course.id,
+                  chapterId: chapter.id,
+                  ...lesson.frontmatter,
+                  id: lesson.id,
+                },
+              },
+            };
+          });
+        })
+        .flat();
+    }),
+  );
+
+  return coursesWithChapters.flat();
+}
+
+export const GET: APIRoute = async function ({ params, request, props }) {
+  return new Response(JSON.stringify(props.lesson), {
+    status: 200,
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+};
diff --git a/src/pages/learn/[courseId]/[chapterId]/index.astro b/src/pages/learn/[courseId]/[chapterId]/index.astro
new file mode 100644
index 000000000..81997fe67
--- /dev/null
+++ b/src/pages/learn/[courseId]/[chapterId]/index.astro
@@ -0,0 +1,63 @@
+---
+import SkeletonLayout from '../../../../layouts/SkeletonLayout.astro';
+import {
+  getAllCourses,
+  getChaptersByCourseId,
+  type ChapterFileType,
+  type CourseFileType,
+} from '../../../../lib/course';
+
+export async function getStaticPaths() {
+  const courses = await getAllCourses();
+  const coursesWithChapters = await Promise.all(
+    courses.map(async (course) => {
+      const chapters = await getChaptersByCourseId(course.id);
+
+      return chapters.map((chapter) => {
+        return {
+          params: {
+            courseId: course.id,
+            chapterId: chapter.id,
+          },
+          props: {
+            course,
+            chapter,
+          },
+        };
+      });
+    }),
+  );
+
+  return coursesWithChapters.flat();
+}
+
+interface Params extends Record<string, string | undefined> {
+  courseId: string;
+  chapterId: string;
+}
+
+interface Props {
+  course: CourseFileType;
+  chapter: ChapterFileType;
+}
+
+const { courseId, chapterId } = Astro.params;
+const { chapter } = Astro.props;
+
+const firstLesson = chapter.lessons?.sort(
+  (a, b) => a.frontmatter.order - b.frontmatter.order,
+)?.[0];
+
+const fullUrl = firstLesson
+  ? `/learn/${courseId}/${chapterId}/${firstLesson?.id}`
+  : `/learn/${courseId}`;
+---
+
+<SkeletonLayout title='Redirecting..' noIndex={true} redirectUrl={fullUrl}>
+  <div class='p-8'>
+    <h2 class='text-xl font-bold'>Redirecting ..</h2>
+    <p>Click the link below if you are not redirected automatically.</p>
+
+    <p><a href={fullUrl} class='text-blue-700 underline'>{fullUrl}</a></p>
+  </div>
+</SkeletonLayout>
diff --git a/src/pages/learn/[courseId]/[chapterId]/index.json.ts b/src/pages/learn/[courseId]/[chapterId]/index.json.ts
new file mode 100644
index 000000000..aa3318110
--- /dev/null
+++ b/src/pages/learn/[courseId]/[chapterId]/index.json.ts
@@ -0,0 +1,38 @@
+import type { APIRoute } from 'astro';
+import { getAllCourses, getChaptersByCourseId } from '../../../../lib/course';
+
+export async function getStaticPaths() {
+  const courses = await getAllCourses();
+  const coursesWithChapters = await Promise.all(
+    courses.map(async (course) => {
+      const chapters = await getChaptersByCourseId(course.id);
+
+      return chapters.map((chapter) => {
+        return {
+          params: {
+            courseId: course.id,
+            chapterId: chapter.id,
+          },
+          props: {
+            chapter: {
+              courseId: course.id,
+              ...chapter.frontmatter,
+              id: chapter.id,
+            },
+          },
+        };
+      });
+    }),
+  );
+
+  return coursesWithChapters.flat();
+}
+
+export const GET: APIRoute = async function ({ params, request, props }) {
+  return new Response(JSON.stringify(props.chapter), {
+    status: 200,
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+};