diff --git a/src/app/books/[bookId]/page.tsx b/src/app/books/[bookId]/page.tsx
index e542e06..52a61e1 100644
--- a/src/app/books/[bookId]/page.tsx
+++ b/src/app/books/[bookId]/page.tsx
@@ -1,5 +1,5 @@
 import { fetchBookById } from "@/lib/api";
-import { Book } from "@/lib/types";
+import { Book, Chapter } from "@/lib/types";
 import { formatDateToMonthDayYear } from "@/lib/utils";
 import ChapterDropdown from "@/components/ChapterDropdown";
 import { Ad } from "@/lib/types";
@@ -26,8 +26,10 @@ export default async function BookPage(props: { params: paramsType }) {
     }
 
     const { title, author, description, chapters, cover } = book;
+    const sorted_chapters:Chapter[] = chapters.sort((a, b) => a.number - b.number);
+
     const cover_media = cover?.at(0);
-    const recentChapters = chapters.length > 6 ? chapters.slice(chapters.length - 6, chapters.length) : chapters;
+    const recentChapters = sorted_chapters.length > 6 ? sorted_chapters.slice(sorted_chapters.length - 6, sorted_chapters.length) : sorted_chapters;
 
     return (
             <div className="max-w-6xl mx-auto py-10 px-4">
@@ -74,9 +76,9 @@ export default async function BookPage(props: { params: paramsType }) {
                 </ul>
                 <div className="flex items-center justify-between mb-4 pt-4">
                     <h2 className="text-3xl font-semibold">All Chapters</h2>
-                    <ChapterDropdown chapters={chapters} bookId={bookId} />
+                    <ChapterDropdown chapters={sorted_chapters} bookId={bookId} />
                 </div>
-                {chapters.map((chapter) => (
+                {sorted_chapters.map((chapter) => (
                     <li key={chapter.id} className="mb-2 list-none">
                         <a
                             href={`/books/${bookId}/chapters/${chapter.documentId}`}
diff --git a/src/lib/api.tsx b/src/lib/api.tsx
index a6c5436..5d8cada 100644
--- a/src/lib/api.tsx
+++ b/src/lib/api.tsx
@@ -45,7 +45,7 @@ export async function fetchFromAPI<T>(
  * Populates optional fields like Chapters or Editors based on requirements.
  */
 export async function fetchBooks(): Promise<Book[]> {
-  const data = await fetchFromAPI<{ data: Book[] }>("/api/books?populate=*");
+  const data = await fetchFromAPI<{ data: Book[] }>("/api/books?populate=*&chapters.sort=number:desc");
   return data.data;
 }
 
@@ -72,6 +72,7 @@ export async function fetchBookById(bookId: string): Promise<Book> {
     const data = await fetchFromAPI<{ data: Book }>(
       `/api/books/${bookId}?populate[chapters][filters][release_datetime][$lte]=${currentDateTime}&populate=cover`
     );
+  data.data.chapters = data.data.chapters.sort((a, b) => a.number - b.number);
   return data.data;
 }