diff --git a/src/api/courses.api.ts b/src/api/courses.api.ts
index 57fc5a2..fd31883 100644
--- a/src/api/courses.api.ts
+++ b/src/api/courses.api.ts
@@ -217,8 +217,41 @@ export const removeSubCoursePrerequisite = (subCourseId: number, prerequisiteId:
 export const getLearningPath = (courseId: number) =>
   http.get<GetLearningPathResponse>(`/course-management/courses/${courseId}/learning-path`)
 
-export const reorderSubCourses = (courseId: number, items: ReorderItem[]) =>
-  http.put(`/course-management/courses/${courseId}/reorder-sub-courses`, { items })
+const buildReorderPayload = (items: ReorderItem[]) => {
+  const normalized = items.map((item, idx) => ({
+    id: Number(item.id),
+    position: Number(item.position ?? idx),
+  }))
+
+  const hasInvalid = normalized.some(
+    (item) =>
+      Number.isNaN(item.id) ||
+      Number.isNaN(item.position) ||
+      !Number.isFinite(item.id) ||
+      !Number.isFinite(item.position),
+  )
+
+  if (hasInvalid) {
+    throw new Error("Invalid reorder payload: ids/positions must be numeric.")
+  }
+
+  return { items: normalized }
+}
+
+export const reorderCategories = (items: ReorderItem[]) =>
+  http.put("/course-management/categories/reorder", buildReorderPayload(items))
+
+export const reorderCourses = (items: ReorderItem[]) =>
+  http.put("/course-management/courses/reorder", buildReorderPayload(items))
+
+export const reorderSubCourses = (items: ReorderItem[]) =>
+  http.put("/course-management/sub-courses/reorder", buildReorderPayload(items))
+
+export const reorderVideos = (items: ReorderItem[]) =>
+  http.put("/course-management/videos/reorder", buildReorderPayload(items))
+
+export const reorderPractices = (items: ReorderItem[]) =>
+  http.put("/course-management/practices/reorder", buildReorderPayload(items))
 
 // Ratings
 export const getRatings = (params: GetRatingsParams) =>
diff --git a/src/pages/ProfilePage.tsx b/src/pages/ProfilePage.tsx
index c6ebbd2..ae41fe9 100644
--- a/src/pages/ProfilePage.tsx
+++ b/src/pages/ProfilePage.tsx
@@ -272,20 +272,34 @@ export function ProfilePage() {
   const completionPct = profile.profile_completion_percentage ?? 0;
 
   return (
-    <div className="w-full space-y-6">
+    <div className="mx-auto w-full max-w-7xl space-y-6 pb-8">
       {/* ─── Hero Card ─── */}
-      <div className="relative overflow-hidden rounded-2xl border border-grayScale-100 bg-white shadow-sm">
+      <div className="relative overflow-hidden rounded-3xl border border-grayScale-100 bg-white shadow-sm ring-1 ring-black/5">
         {/* Tall dark gradient banner with content inside */}
-        <div className="relative flex min-h-[200px] flex-col justify-between bg-gradient-to-br from-[#1a1f4e] via-[#2d2b6b] to-[#3b3480] px-6 py-8 sm:px-8">
+        <div className="relative flex min-h-[220px] flex-col justify-between bg-gradient-to-br from-[#1a1f4e] via-[#2d2b6b] to-[#3b3480] px-6 py-8 sm:px-8">
           <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,rgba(255,255,255,0.08),transparent_60%)]" />
 
           <div className="relative z-10 space-y-2">
             <h2 className="text-2xl font-bold tracking-tight text-white sm:text-3xl">
               Hello {profile.first_name}
             </h2>
-            <p className="max-w-xl text-sm leading-relaxed text-white/70">
-              This is your profile page. You can see the progress you've made with your work and manage your projects or assigned tasks
+            <p className="max-w-2xl text-sm leading-relaxed text-white/70">
+              Track your account status, keep profile details up to date, and manage your learning preferences from one place.
             </p>
+            <div className="mt-4 flex flex-wrap items-center gap-2">
+              <span className="inline-flex items-center gap-1.5 rounded-full border border-white/20 bg-white/10 px-2.5 py-1 text-xs font-medium text-white/90">
+                <Shield className="h-3.5 w-3.5" />
+                {profile.role}
+              </span>
+              <span className="inline-flex items-center gap-1.5 rounded-full border border-white/20 bg-white/10 px-2.5 py-1 text-xs font-medium text-white/90">
+                <Clock className="h-3.5 w-3.5" />
+                Last login {formatDate(profile.last_login)}
+              </span>
+              <span className="inline-flex items-center gap-1.5 rounded-full border border-white/20 bg-white/10 px-2.5 py-1 text-xs font-medium text-white/90">
+                <Target className="h-3.5 w-3.5" />
+                {completionPct}% complete
+              </span>
+            </div>
           </div>
 
           <div className="relative z-10 mt-6">
@@ -293,7 +307,7 @@ export function ProfilePage() {
               <Button
                 variant="outline"
                 size="sm"
-                className="gap-1.5 border-white/30 bg-white/10 text-xs font-medium text-white shadow-sm backdrop-blur-sm hover:bg-white/20 hover:text-white"
+                className="h-8 gap-1.5 border-white/30 bg-white/10 px-3 text-xs font-medium text-white shadow-sm backdrop-blur-sm hover:bg-white/20 hover:text-white"
                 onClick={startEditing}
               >
                 <Pencil className="h-3.5 w-3.5" />
@@ -304,7 +318,7 @@ export function ProfilePage() {
                 <Button
                   variant="outline"
                   size="sm"
-                  className="h-8 gap-1.5 border-white/30 bg-white/10 text-xs text-white backdrop-blur-sm hover:bg-white/20 hover:text-white"
+                  className="h-8 gap-1.5 border-white/30 bg-white/10 px-3 text-xs text-white backdrop-blur-sm hover:bg-white/20 hover:text-white"
                   onClick={cancelEditing}
                   disabled={saving}
                 >
@@ -330,7 +344,7 @@ export function ProfilePage() {
         </div>
 
         {/* Identity info below banner */}
-        <div className="px-6 py-5 sm:px-8">
+        <div className="bg-gradient-to-b from-white to-grayScale-50/40 px-6 py-5 sm:px-8">
           {editing ? (
             <div className="flex flex-wrap items-center gap-2">
               <Input
@@ -405,7 +419,7 @@ export function ProfilePage() {
       {/* ─── Detail Cards Grid ─── */}
       <div className="grid gap-6 lg:grid-cols-3">
         {/* ── Contact & Personal ── */}
-        <Card className="overflow-hidden border-grayScale-100 shadow-sm lg:col-span-2">
+        <Card className="overflow-hidden rounded-2xl border-grayScale-100 shadow-sm transition-shadow hover:shadow-md lg:col-span-2">
           <div className="h-1 bg-gradient-to-r from-brand-500 to-brand-400" />
           <CardContent className="p-0">
             <div className="grid divide-y divide-grayScale-100 sm:grid-cols-2 sm:divide-x sm:divide-y-0">
@@ -569,9 +583,9 @@ export function ProfilePage() {
         </Card>
 
         {/* ── Right Sidebar ── */}
-        <div className="space-y-6">
+        <div className="space-y-6 lg:sticky lg:top-24 lg:self-start">
           {/* Profile Completion */}
-          <Card className="overflow-hidden border-grayScale-100 shadow-sm">
+          <Card className="overflow-hidden rounded-2xl border-grayScale-100 shadow-sm transition-shadow hover:shadow-md">
             <div className="h-1 bg-gradient-to-r from-brand-400 to-mint-400" />
             <CardContent className="flex items-center gap-4 p-5">
               <ProgressRing percent={completionPct} />
@@ -585,7 +599,7 @@ export function ProfilePage() {
           </Card>
 
           {/* Activity */}
-          <Card className="overflow-hidden border-grayScale-100 shadow-sm">
+          <Card className="overflow-hidden rounded-2xl border-grayScale-100 shadow-sm transition-shadow hover:shadow-md">
             <div className="h-1 bg-gradient-to-r from-grayScale-300 to-grayScale-200" />
             <CardContent className="space-y-4 p-5">
               <p className="text-[11px] font-bold uppercase tracking-widest text-grayScale-400">
@@ -613,7 +627,7 @@ export function ProfilePage() {
           </Card>
 
           {/* Quick Account Info */}
-          <Card className="overflow-hidden border-grayScale-100 shadow-sm">
+          <Card className="overflow-hidden rounded-2xl border-grayScale-100 shadow-sm transition-shadow hover:shadow-md">
             <div className="h-1 bg-gradient-to-r from-brand-500 to-brand-600" />
             <CardContent className="space-y-3 p-5">
               <p className="text-[11px] font-bold uppercase tracking-widest text-grayScale-400">
@@ -675,8 +689,13 @@ export function ProfilePage() {
       </div>
 
       {/* ─── Learning & Goals Card ─── */}
-      <Card className="overflow-hidden border-grayScale-100 shadow-sm">
+      <Card className="overflow-hidden rounded-2xl border-grayScale-100 shadow-sm transition-shadow hover:shadow-md">
         <div className="h-1 bg-gradient-to-r from-brand-600 via-brand-500 to-brand-400" />
+        <div className="border-b border-grayScale-100 px-5 py-3">
+          <p className="text-[11px] font-bold uppercase tracking-widest text-grayScale-400">
+            Learning & Preferences
+          </p>
+        </div>
         <CardContent className="p-0">
           <div className="grid divide-y divide-grayScale-100 sm:grid-cols-2 sm:divide-x sm:divide-y-0 lg:grid-cols-4 lg:divide-x lg:divide-y-0">
             <div className="p-5">
diff --git a/src/pages/content-management/AddNewPracticePage.tsx b/src/pages/content-management/AddNewPracticePage.tsx
index e571c23..0ae8876 100644
--- a/src/pages/content-management/AddNewPracticePage.tsx
+++ b/src/pages/content-management/AddNewPracticePage.tsx
@@ -889,7 +889,7 @@ export function AddNewPracticePage() {
                   className="w-full bg-brand-500 hover:bg-brand-600"
                   onClick={() => navigate(`/content/category/${categoryId}/courses/${courseId}/sub-courses/${subCourseId}`)}
                 >
-                  Go back to Sub-course
+                  Go back to Course
                 </Button>
                 <Button
                   variant="outline"
diff --git a/src/pages/content-management/AllCoursesPage.tsx b/src/pages/content-management/AllCoursesPage.tsx
index 3935c08..14d0f8c 100644
--- a/src/pages/content-management/AllCoursesPage.tsx
+++ b/src/pages/content-management/AllCoursesPage.tsx
@@ -76,7 +76,7 @@ export function AllCoursesPage() {
       setCourses(allCourses)
     } catch (err) {
       console.error("Failed to load courses:", err)
-      setError("Failed to load courses")
+      setError("Failed to load sub-categories")
     } finally {
       setLoading(false)
     }
@@ -116,7 +116,7 @@ export function AllCoursesPage() {
         description: createDescription.trim(),
       })
 
-      toast.success("Course created", {
+      toast.success("Sub-category created", {
         description: `"${createTitle.trim()}" has been created.`,
       })
 
@@ -130,7 +130,7 @@ export function AllCoursesPage() {
       await fetchAllCourses()
     } catch (err: any) {
       console.error("Failed to create course:", err)
-      toast.error("Failed to create course", {
+      toast.error("Failed to create sub-category", {
         description: err?.response?.data?.message || "Please try again.",
       })
     } finally {
@@ -145,7 +145,7 @@ export function AllCoursesPage() {
       await fetchAllCourses()
     } catch (err) {
       console.error("Failed to update course status:", err)
-      toast.error("Failed to update course status")
+      toast.error("Failed to update sub-category status")
     } finally {
       setTogglingId(null)
     }
@@ -173,13 +173,13 @@ export function AllCoursesPage() {
         title: editTitle.trim(),
         description: editDescription.trim(),
       })
-      toast.success("Course updated")
+      toast.success("Sub-category updated")
       setEditOpen(false)
       setCourseToEdit(null)
       await fetchAllCourses()
     } catch (err: any) {
       console.error("Failed to update course:", err)
-      toast.error("Failed to update course", {
+      toast.error("Failed to update sub-category", {
         description: err?.response?.data?.message || "Please try again.",
       })
     } finally {
@@ -193,7 +193,7 @@ export function AllCoursesPage() {
         <div className="rounded-2xl bg-white shadow-sm p-6">
           <RefreshCw className="h-10 w-10 animate-spin text-brand-600" />
         </div>
-        <p className="mt-4 text-sm font-medium text-grayScale-400">Loading all courses…</p>
+        <p className="mt-4 text-sm font-medium text-grayScale-400">Loading all sub-categories…</p>
       </div>
     )
   }
@@ -216,9 +216,9 @@ export function AllCoursesPage() {
       {/* Header */}
       <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
         <div>
-          <h1 className="text-2xl font-bold tracking-tight text-grayScale-700">All Courses</h1>
+          <h1 className="text-2xl font-bold tracking-tight text-grayScale-700">All Sub-categories</h1>
           <p className="mt-1 text-sm text-grayScale-400">
-            View and manage courses across all categories.
+            View and manage sub-categories across all categories.
           </p>
         </div>
         <Button
@@ -226,14 +226,14 @@ export function AllCoursesPage() {
           onClick={() => setCreateOpen(true)}
         >
           <Plus className="h-4 w-4" />
-          Create Course
+          Create Sub-category
         </Button>
       </div>
 
       <Card className="shadow-soft">
         <CardHeader className="border-b border-grayScale-200 pb-4">
           <CardTitle className="text-base font-semibold text-grayScale-600">
-            Course Management
+            Sub-category Management
           </CardTitle>
         </CardHeader>
         <CardContent className="space-y-5 pt-5">
@@ -375,9 +375,9 @@ export function AllCoursesPage() {
               <div className="mb-4 grid h-16 w-16 place-items-center rounded-full bg-gradient-to-br from-grayScale-100 to-grayScale-200">
                 <BookOpen className="h-8 w-8 text-grayScale-400" />
               </div>
-              <p className="text-base font-semibold text-grayScale-600">No courses found</p>
+              <p className="text-base font-semibold text-grayScale-600">No sub-categories found</p>
               <p className="mt-1.5 max-w-sm text-sm leading-relaxed text-grayScale-400">
-                Try adjusting your search or category filter, or create a new course.
+                Try adjusting your search or category filter, or create a new sub-category.
               </p>
             </div>
           )}
@@ -388,7 +388,7 @@ export function AllCoursesPage() {
       <Dialog open={createOpen} onOpenChange={setCreateOpen}>
         <DialogContent className="max-w-2xl">
           <DialogHeader>
-            <DialogTitle>Create course</DialogTitle>
+            <DialogTitle>Create sub-category</DialogTitle>
             <DialogDescription>
               Choose a category, add basic details, and optionally attach a thumbnail and intro
               video.
@@ -439,7 +439,7 @@ export function AllCoursesPage() {
               </div>
               <div className="sm:col-span-1">
                 <label className="mb-1.5 block text-sm font-medium text-grayScale-600">
-                  Course title
+                  Sub-category title
                 </label>
                 <Input
                   placeholder="e.g. Beginner English A1"
@@ -455,7 +455,7 @@ export function AllCoursesPage() {
               </label>
               <Textarea
                 rows={3}
-                placeholder="Short summary of what this course covers."
+                placeholder="Short summary of what this sub-category covers."
                 value={createDescription}
                 onChange={(e) => setCreateDescription(e.target.value)}
               />
@@ -514,7 +514,7 @@ export function AllCoursesPage() {
               disabled={creating}
               onClick={handleCreateCourse}
             >
-              {creating ? "Creating…" : "Create course"}
+              {creating ? "Creating…" : "Create sub-category"}
             </Button>
           </div>
         </DialogContent>
@@ -524,9 +524,9 @@ export function AllCoursesPage() {
       <Dialog open={editOpen} onOpenChange={setEditOpen}>
         <DialogContent className="max-w-lg">
           <DialogHeader>
-            <DialogTitle>Edit course</DialogTitle>
+            <DialogTitle>Edit sub-category</DialogTitle>
             <DialogDescription>
-              Update the title and description for this course. Status can be toggled from the
+              Update the title and description for this sub-category. Status can be toggled from the
               table.
             </DialogDescription>
           </DialogHeader>
@@ -534,12 +534,12 @@ export function AllCoursesPage() {
           <div className="space-y-4">
             <div>
               <label className="mb-1.5 block text-sm font-medium text-grayScale-600">
-                Course title
+                Sub-category title
               </label>
               <Input
                 value={editTitle}
                 onChange={(e) => setEditTitle(e.target.value)}
-                placeholder="Enter course title"
+                placeholder="Enter sub-category title"
               />
             </div>
             <div>
@@ -550,7 +550,7 @@ export function AllCoursesPage() {
                 rows={3}
                 value={editDescription}
                 onChange={(e) => setEditDescription(e.target.value)}
-                placeholder="Short summary of this course."
+                placeholder="Short summary of this sub-category."
               />
             </div>
           </div>
diff --git a/src/pages/content-management/ContentOverviewPage.tsx b/src/pages/content-management/ContentOverviewPage.tsx
index b67cc4a..bcec99b 100644
--- a/src/pages/content-management/ContentOverviewPage.tsx
+++ b/src/pages/content-management/ContentOverviewPage.tsx
@@ -12,7 +12,7 @@ const contentSections = [
     pathFn: (categoryId: string | undefined) => `/content/category/${categoryId}/courses`,
     icon: BookOpen,
     title: "Courses",
-    description: "Manage course videos and educational content",
+    description: "Manage sub-categories, course videos and educational content",
     action: "Manage Courses",
     count: 12,
     countLabel: "courses",
diff --git a/src/pages/content-management/CourseCategoryPage.tsx b/src/pages/content-management/CourseCategoryPage.tsx
index 9c27e6f..6e7b9ef 100644
--- a/src/pages/content-management/CourseCategoryPage.tsx
+++ b/src/pages/content-management/CourseCategoryPage.tsx
@@ -139,7 +139,7 @@ export function CourseCategoryPage() {
 
                 <CardContent>
                   <span className="inline-flex items-center gap-1.5 text-sm font-medium text-brand-500 transition-colors group-hover:text-brand-600">
-                    View Courses
+                    View Sub-categories
                     <span className="inline-block transition-transform duration-300 group-hover:translate-x-1">
                       →
                     </span>
diff --git a/src/pages/content-management/CourseFlowBuilderPage.tsx b/src/pages/content-management/CourseFlowBuilderPage.tsx
index 0a87219..6680ecd 100644
--- a/src/pages/content-management/CourseFlowBuilderPage.tsx
+++ b/src/pages/content-management/CourseFlowBuilderPage.tsx
@@ -1,433 +1,449 @@
 import { useEffect, useMemo, useState } from "react"
 import {
-  GripVertical, RefreshCw, Video, BookOpen, ChevronDown, ChevronRight,
-  X, AlertCircle, Loader2,
+  BookOpen,
+  ChevronDown,
+  GripVertical,
+  Loader2,
+  RefreshCw,
+  Video,
 } from "lucide-react"
 import {
-  DndContext, closestCenter, KeyboardSensor, PointerSensor,
-  useSensor, useSensors, type DragEndEvent,
+  DndContext,
+  KeyboardSensor,
+  PointerSensor,
+  closestCenter,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
 } from "@dnd-kit/core"
 import {
-  arrayMove, SortableContext, sortableKeyboardCoordinates,
-  verticalListSortingStrategy, useSortable,
+  SortableContext,
+  arrayMove,
+  horizontalListSortingStrategy,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
 } from "@dnd-kit/sortable"
 import { CSS } from "@dnd-kit/utilities"
 import { Card, CardContent, CardHeader, CardTitle } from "../../components/ui/card"
 import { Button } from "../../components/ui/button"
-import { Badge } from "../../components/ui/badge"
 import { Select } from "../../components/ui/select"
+import { Badge } from "../../components/ui/badge"
 import {
-  getCourseCategories, getCoursesByCategory,
-  getLearningPath, reorderSubCourses,
-  addSubCoursePrerequisite, removeSubCoursePrerequisite,
+  getCourseCategories,
+  getCoursesByCategory,
+  getSubCoursesByCourse,
+  getVideosBySubCourse,
+  getQuestionSetsByOwner,
+  reorderCourses,
+  reorderSubCourses,
+  reorderVideos,
+  reorderPractices,
 } from "../../api/courses.api"
 import type {
-  CourseCategory, Course,
-  LearningPathSubCourse, LearningPath,
+  Course,
+  CourseCategory,
+  Practice,
+  QuestionSet,
+  ReorderItem,
+  SubCourse,
+  SubCourseVideo,
 } from "../../types/course.types"
 import { cn } from "../../lib/utils"
 import { toast } from "sonner"
 
-// ── Level badge colours ──
-const LEVEL_STYLE: Record<string, string> = {
-  BEGINNER: "bg-emerald-50 text-emerald-700 ring-1 ring-inset ring-emerald-200",
-  INTERMEDIATE: "bg-amber-50 text-amber-700 ring-1 ring-inset ring-amber-200",
-  ADVANCED: "bg-rose-50 text-rose-700 ring-1 ring-inset ring-rose-200",
+type VideoNode = SubCourseVideo & { display_order?: number }
+type PracticeNode = Practice & { display_order?: number }
+
+function normalizeParentId(value: number | string | null | undefined): number | null {
+  if (value === null || value === undefined || value === "") return null
+  const parsed = Number(value)
+  if (Number.isNaN(parsed)) return null
+  return parsed <= 0 ? null : parsed
 }
 
-// ── Sortable sub-course card ──
-function SortableSubCourseCard({
-  subCourse,
-  allSubCourses,
-  onAddPrereq,
-  onRemovePrereq,
-  prereqLoading,
+function sortByDisplayOrder<T extends { id: number }>(items: T[]) {
+  return [...items].sort((a, b) => {
+    const aOrder = typeof (a as any).display_order === "number" ? (a as any).display_order : 0
+    const bOrder = typeof (b as any).display_order === "number" ? (b as any).display_order : 0
+    if (aOrder === bOrder) return a.id - b.id
+    return aOrder - bOrder
+  })
+}
+
+function toReorderItems<T extends { id: number }>(items: T[]): ReorderItem[] {
+  return items.map((item, index) => ({ id: item.id, position: index }))
+}
+
+function withDisplayOrder<T extends { id: number }>(items: T[]) {
+  return items.map((item, index) => ({ ...(item as any), display_order: index })) as T[]
+}
+
+function SortableNode({
+  id,
+  label,
+  active,
+  onClick,
+  className,
+  badge,
 }: {
-  subCourse: LearningPathSubCourse
-  allSubCourses: LearningPathSubCourse[]
-  onAddPrereq: (subCourseId: number, prereqId: number) => void
-  onRemovePrereq: (subCourseId: number, prereqId: number) => void
-  prereqLoading: number | null
+  id: number
+  label: string
+  active?: boolean
+  onClick?: () => void
+  className?: string
+  badge?: React.ReactNode
 }) {
-  const {
-    attributes, listeners, setNodeRef, transform, transition, isDragging,
-  } = useSortable({ id: subCourse.id })
-
-  const [expanded, setExpanded] = useState(false)
-
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-    opacity: isDragging ? 0.5 : 1,
-    zIndex: isDragging ? 50 : undefined,
-  }
-
-  const availablePrereqs = allSubCourses.filter(
-    (sc) =>
-      sc.id !== subCourse.id &&
-      !subCourse.prerequisites.some((p) => p.sub_course_id === sc.id),
-  )
-
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id,
+  })
   return (
-    <div ref={setNodeRef} style={style} className="group">
-      {/* Connector line */}
-      <div className="flex justify-center -mb-1">
-        <div className="h-4 w-px bg-grayScale-200" />
-      </div>
-
-      <div
-        className={cn(
-          "rounded-2xl border bg-white shadow-sm transition-all",
-          isDragging ? "ring-2 ring-brand-400 border-brand-200" : "border-grayScale-100",
-        )}
-      >
-        {/* Card header */}
-        <div className="flex items-center gap-3 p-4">
-          {/* Drag handle */}
-          <button
-            type="button"
-            className="flex h-8 w-8 shrink-0 cursor-grab items-center justify-center rounded-lg text-grayScale-300 hover:bg-grayScale-100 hover:text-grayScale-500 active:cursor-grabbing"
-            {...attributes}
-            {...listeners}
-          >
-            <GripVertical className="h-4 w-4" />
-          </button>
-
-          {/* Order badge */}
-          <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-brand-50 text-xs font-bold text-brand-600">
-            {subCourse.display_order}
-          </span>
-
-          {/* Title & level */}
-          <div className="flex-1 min-w-0">
-            <p className="truncate text-sm font-semibold text-grayScale-700">
-              {subCourse.title}
-            </p>
-            {subCourse.description && (
-              <p className="truncate text-xs text-grayScale-400 mt-0.5">
-                {subCourse.description}
-              </p>
-            )}
-          </div>
-
-          {/* Level badge */}
-          <span
-            className={cn(
-              "inline-flex items-center rounded-full px-2.5 py-0.5 text-[11px] font-semibold",
-              LEVEL_STYLE[subCourse.level] ?? "bg-grayScale-100 text-grayScale-600",
-            )}
-          >
-            {subCourse.level}
-          </span>
-
-          {/* Expand toggle */}
-          <button
-            type="button"
-            onClick={() => setExpanded(!expanded)}
-            className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-grayScale-400 hover:bg-grayScale-100 hover:text-grayScale-600"
-          >
-            {expanded ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
-          </button>
-        </div>
-
-        {/* Stats row */}
-        <div className="flex items-center gap-4 border-t border-grayScale-50 px-4 py-2.5 text-[11px] text-grayScale-400">
-          <span className="flex items-center gap-1">
-            <Video className="h-3.5 w-3.5" />
-            {subCourse.video_count} videos
-          </span>
-          <span className="flex items-center gap-1">
-            <BookOpen className="h-3.5 w-3.5" />
-            {subCourse.practice_count} practices
-          </span>
-          <span className="flex items-center gap-1">
-            {subCourse.prerequisite_count} prerequisite{subCourse.prerequisite_count !== 1 ? "s" : ""}
-          </span>
-        </div>
-
-        {/* Expandable prerequisites section */}
-        {expanded && (
-          <div className="border-t border-grayScale-100 p-4 space-y-3">
-            <h4 className="text-xs font-semibold text-grayScale-500 uppercase tracking-wider">
-              Prerequisites
-            </h4>
-
-            {subCourse.prerequisites.length === 0 && (
-              <p className="text-xs text-grayScale-400 italic">No prerequisites set.</p>
-            )}
-
-            <div className="flex flex-wrap gap-2">
-              {subCourse.prerequisites.map((prereq) => (
-                <div
-                  key={prereq.sub_course_id}
-                  className="inline-flex items-center gap-1.5 rounded-full border border-grayScale-200 bg-grayScale-50 px-3 py-1 text-xs font-medium text-grayScale-600"
-                >
-                  {prereq.title}
-                  <span className="text-[10px] text-grayScale-400">({prereq.level})</span>
-                  <button
-                    type="button"
-                    onClick={() => onRemovePrereq(subCourse.id, prereq.sub_course_id)}
-                    disabled={prereqLoading === subCourse.id}
-                    className="ml-0.5 flex h-4 w-4 items-center justify-center rounded-full text-grayScale-400 hover:bg-red-100 hover:text-red-500 disabled:opacity-50"
-                  >
-                    <X className="h-3 w-3" />
-                  </button>
-                </div>
-              ))}
-            </div>
-
-            {/* Add prerequisite dropdown */}
-            {availablePrereqs.length > 0 && (
-              <Select
-                defaultValue=""
-                onChange={(e) => {
-                  if (e.target.value) {
-                    onAddPrereq(subCourse.id, Number(e.target.value))
-                    e.target.value = ""
-                  }
-                }}
-                className="h-9 text-xs"
-                disabled={prereqLoading === subCourse.id}
-              >
-                <option value="">+ Add prerequisite…</option>
-                {availablePrereqs.map((sc) => (
-                  <option key={sc.id} value={sc.id}>
-                    {sc.title} ({sc.level})
-                  </option>
-                ))}
-              </Select>
-            )}
-
-            {prereqLoading === subCourse.id && (
-              <div className="flex items-center gap-2 text-xs text-grayScale-400">
-                <Loader2 className="h-3 w-3 animate-spin" />
-                Updating…
-              </div>
-            )}
-          </div>
-        )}
+    <div
+      ref={setNodeRef}
+      style={{ transform: CSS.Transform.toString(transform), transition }}
+      className={cn(
+        "rounded-xl border bg-white px-2.5 py-2 shadow-sm",
+        active ? "border-brand-300 bg-brand-50" : "border-grayScale-200",
+        isDragging && "opacity-60 ring-2 ring-brand-300",
+        className,
+      )}
+    >
+      <div className="flex items-center gap-2">
+        <button
+          type="button"
+          {...attributes}
+          {...listeners}
+          className="grid h-6 w-6 shrink-0 place-items-center rounded-md text-grayScale-300 hover:bg-grayScale-100 hover:text-grayScale-500"
+        >
+          <GripVertical className="h-3.5 w-3.5" />
+        </button>
+        <button
+          type="button"
+          onClick={onClick}
+          className="min-w-0 flex-1 text-left text-sm font-semibold text-grayScale-700"
+        >
+          <span className="truncate">{label}</span>
+        </button>
+        {badge}
       </div>
     </div>
   )
 }
 
-// ── Main page ──
 export function CourseFlowBuilderPage() {
   const [categories, setCategories] = useState<CourseCategory[]>([])
-  const [courses, setCourses] = useState<Course[]>([])
-  const [learningPath, setLearningPath] = useState<LearningPath | null>(null)
-  const [subCourses, setSubCourses] = useState<LearningPathSubCourse[]>([])
+  const [selectedParentCategoryId, setSelectedParentCategoryId] = useState<number | null>(null)
+  const [activeSubCategoryId, setActiveSubCategoryId] = useState<number | null>(null)
 
-  const [selectedCategoryId, setSelectedCategoryId] = useState("")
-  const [selectedCourseId, setSelectedCourseId] = useState("")
+  const [subCategoriesByParent, setSubCategoriesByParent] = useState<Record<number, Course[]>>({})
+  const [coursesBySubCategory, setCoursesBySubCategory] = useState<Record<number, SubCourse[]>>({})
+  const [videosByCourse, setVideosByCourse] = useState<Record<number, VideoNode[]>>({})
+  const [practicesByCourse, setPracticesByCourse] = useState<Record<number, PracticeNode[]>>({})
 
+  const [expandedCourseIds, setExpandedCourseIds] = useState<Set<number>>(new Set())
   const [loading, setLoading] = useState(true)
-  const [coursesLoading, setCoursesLoading] = useState(false)
-  const [pathLoading, setPathLoading] = useState(false)
-  const [saving, setSaving] = useState(false)
-  const [prereqLoading, setPrereqLoading] = useState<number | null>(null)
-  const [error, setError] = useState<string | null>(null)
-
-  const parentCategories = useMemo(
-    () => categories.filter((c) => !c.parent_id),
-    [categories],
-  )
+  const [loadingSubCategories, setLoadingSubCategories] = useState(false)
+  const [loadingCourses, setLoadingCourses] = useState(false)
+  const [loadingCourseContent, setLoadingCourseContent] = useState<Record<number, boolean>>({})
+  const [savingKey, setSavingKey] = useState<string | null>(null)
 
   const sensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
     useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
   )
 
-  // Load categories on mount
+  const parentCategories = useMemo(
+    () => sortByDisplayOrder(categories.filter((c) => normalizeParentId(c.parent_id as any) === null)),
+    [categories],
+  )
+
+  const subCategories = useMemo(() => {
+    if (!selectedParentCategoryId) return []
+    return subCategoriesByParent[selectedParentCategoryId] ?? []
+  }, [selectedParentCategoryId, subCategoriesByParent])
+
+  const activeCourses = useMemo(() => {
+    if (!activeSubCategoryId) return []
+    return coursesBySubCategory[activeSubCategoryId] ?? []
+  }, [activeSubCategoryId, coursesBySubCategory])
+
   useEffect(() => {
-    const fetch = async () => {
+    const load = async () => {
       setLoading(true)
       try {
         const res = await getCourseCategories()
-        setCategories(res.data.data.categories ?? [])
+        setCategories(sortByDisplayOrder(res.data.data.categories ?? []))
       } catch {
-        setError("Failed to load categories.")
+        toast.error("Failed to load categories.")
       } finally {
         setLoading(false)
       }
     }
-    fetch()
+    load()
   }, [])
 
-  // Load courses when category changes
   useEffect(() => {
-    if (!selectedCategoryId) {
-      setCourses([])
-      setSelectedCourseId("")
+    if (selectedParentCategoryId) return
+    if (parentCategories.length > 0) setSelectedParentCategoryId(parentCategories[0].id)
+  }, [parentCategories, selectedParentCategoryId])
+
+  useEffect(() => {
+    if (!selectedParentCategoryId) {
+      setActiveSubCategoryId(null)
       return
     }
-    const fetch = async () => {
-      setCoursesLoading(true)
+    if (subCategories.length === 0) {
+      setActiveSubCategoryId(null)
+      return
+    }
+    if (!subCategories.some((c) => c.id === activeSubCategoryId)) {
+      setActiveSubCategoryId(subCategories[0].id)
+    }
+  }, [selectedParentCategoryId, subCategories, activeSubCategoryId])
+
+  useEffect(() => {
+    if (!selectedParentCategoryId) return
+    if (subCategoriesByParent[selectedParentCategoryId]) return
+    const load = async () => {
+      setLoadingSubCategories(true)
       try {
-        const res = await getCoursesByCategory(Number(selectedCategoryId))
-        setCourses(res.data.data.courses ?? [])
+        const res = await getCoursesByCategory(selectedParentCategoryId)
+        setSubCategoriesByParent((prev) => ({
+          ...prev,
+          [selectedParentCategoryId]: sortByDisplayOrder(res.data.data.courses ?? []),
+        }))
+      } catch {
+        toast.error("Failed to load sub-categories.")
+      } finally {
+        setLoadingSubCategories(false)
+      }
+    }
+    load()
+  }, [selectedParentCategoryId, subCategoriesByParent])
+
+  useEffect(() => {
+    if (!activeSubCategoryId) return
+    if (coursesBySubCategory[activeSubCategoryId]) return
+    const load = async () => {
+      setLoadingCourses(true)
+      try {
+        const res = await getSubCoursesByCourse(activeSubCategoryId)
+        setCoursesBySubCategory((prev) => ({
+          ...prev,
+          [activeSubCategoryId]: sortByDisplayOrder(res.data.data.sub_courses ?? []),
+        }))
       } catch {
         toast.error("Failed to load courses.")
       } finally {
-        setCoursesLoading(false)
+        setLoadingCourses(false)
       }
     }
-    fetch()
-  }, [selectedCategoryId])
+    load()
+  }, [activeSubCategoryId, coursesBySubCategory])
 
-  // Load learning path when course changes
-  useEffect(() => {
-    if (!selectedCourseId) {
-      setLearningPath(null)
-      setSubCourses([])
-      return
+  const ensureCourseContentLoaded = async (courseId: number) => {
+    if (videosByCourse[courseId] && practicesByCourse[courseId]) return
+    setLoadingCourseContent((prev) => ({ ...prev, [courseId]: true }))
+    try {
+      const [videosRes, practicesRes] = await Promise.all([
+        getVideosBySubCourse(courseId),
+        getQuestionSetsByOwner("SUB_COURSE", courseId),
+      ])
+      setVideosByCourse((prev) => ({
+        ...prev,
+        [courseId]: sortByDisplayOrder((videosRes.data.data.videos ?? []) as VideoNode[]),
+      }))
+      const practiceSets = ((practicesRes.data.data ?? []) as QuestionSet[]).filter(
+        (set) => set.set_type === "PRACTICE",
+      )
+      setPracticesByCourse((prev) => ({
+        ...prev,
+        [courseId]: sortByDisplayOrder(
+          practiceSets.map((set, index) => ({
+            id: set.id,
+            sub_course_id: courseId,
+            title: set.title,
+            description: set.description,
+            banner_image: "",
+            persona: set.persona,
+            is_active: set.status === "PUBLISHED",
+            display_order:
+              typeof (set as any).display_order === "number" ? (set as any).display_order : index,
+          })) as PracticeNode[],
+        ),
+      }))
+    } catch {
+      toast.error("Failed to load course content.")
+    } finally {
+      setLoadingCourseContent((prev) => ({ ...prev, [courseId]: false }))
     }
-    const fetch = async () => {
-      setPathLoading(true)
-      try {
-        const res = await getLearningPath(Number(selectedCourseId))
-        setLearningPath(res.data.data)
-        setSubCourses(res.data.data.sub_courses ?? [])
-      } catch {
-        toast.error("Failed to load learning path.")
-        setLearningPath(null)
-        setSubCourses([])
-      } finally {
-        setPathLoading(false)
-      }
-    }
-    fetch()
-  }, [selectedCourseId])
+  }
 
-  // Drag end → reorder
-  const handleDragEnd = async (event: DragEndEvent) => {
+  const handleSubCategoryDragEnd = async (event: DragEndEvent) => {
+    const { active, over } = event
+    if (!over || active.id === over.id || !selectedParentCategoryId) return
+    const items = subCategories
+    const oldIndex = items.findIndex((i) => i.id === Number(active.id))
+    const newIndex = items.findIndex((i) => i.id === Number(over.id))
+    if (oldIndex < 0 || newIndex < 0) return
+
+    const reordered = withDisplayOrder(arrayMove(items, oldIndex, newIndex))
+    const previous = items
+    setSubCategoriesByParent((prev) => ({ ...prev, [selectedParentCategoryId]: reordered }))
+    setSavingKey("sub-categories")
+    try {
+      await reorderCourses(toReorderItems(reordered))
+    } catch (err: any) {
+      setSubCategoriesByParent((prev) => ({ ...prev, [selectedParentCategoryId]: previous }))
+      const message =
+        err?.response?.data?.error ||
+        err?.response?.data?.message ||
+        "Failed to reorder sub-categories."
+      toast.error(message)
+    } finally {
+      setSavingKey(null)
+    }
+  }
+
+  const handleCoursesDragEnd = async (event: DragEndEvent) => {
+    const { active, over } = event
+    if (!over || active.id === over.id || !activeSubCategoryId) return
+    const items = coursesBySubCategory[activeSubCategoryId] ?? []
+    const oldIndex = items.findIndex((i) => i.id === Number(active.id))
+    const newIndex = items.findIndex((i) => i.id === Number(over.id))
+    if (oldIndex < 0 || newIndex < 0) return
+
+    const reordered = withDisplayOrder(arrayMove(items, oldIndex, newIndex))
+    const previous = items
+    setCoursesBySubCategory((prev) => ({ ...prev, [activeSubCategoryId]: reordered }))
+    setSavingKey("courses")
+    try {
+      await reorderSubCourses(toReorderItems(reordered))
+    } catch {
+      setCoursesBySubCategory((prev) => ({ ...prev, [activeSubCategoryId]: previous }))
+      toast.error("Failed to reorder courses.")
+    } finally {
+      setSavingKey(null)
+    }
+  }
+
+  const handleVideosDragEnd = async (courseId: number, event: DragEndEvent) => {
     const { active, over } = event
     if (!over || active.id === over.id) return
+    const items = videosByCourse[courseId] ?? []
+    const oldIndex = items.findIndex((i) => i.id === Number(active.id))
+    const newIndex = items.findIndex((i) => i.id === Number(over.id))
+    if (oldIndex < 0 || newIndex < 0) return
 
-    const oldIndex = subCourses.findIndex((sc) => sc.id === active.id)
-    const newIndex = subCourses.findIndex((sc) => sc.id === over.id)
-    const reordered = arrayMove(subCourses, oldIndex, newIndex)
-    const updated = reordered.map((sc, i) => ({ ...sc, display_order: i + 1 }))
-
-    setSubCourses(updated)
-
-    setSaving(true)
+    const reordered = withDisplayOrder(arrayMove(items, oldIndex, newIndex))
+    const previous = items
+    setVideosByCourse((prev) => ({ ...prev, [courseId]: reordered }))
+    setSavingKey(`videos-${courseId}`)
     try {
-      await reorderSubCourses(
-        Number(selectedCourseId),
-        updated.map((sc) => ({ sub_course_id: sc.id, display_order: sc.display_order })),
-      )
-      toast.success("Order saved.")
+      await reorderVideos(toReorderItems(reordered))
     } catch {
-      toast.error("Failed to save order. Reverting…")
-      setSubCourses(subCourses)
+      setVideosByCourse((prev) => ({ ...prev, [courseId]: previous }))
+      toast.error("Failed to reorder videos.")
     } finally {
-      setSaving(false)
+      setSavingKey(null)
     }
   }
 
-  // Add prerequisite
-  const handleAddPrereq = async (subCourseId: number, prereqId: number) => {
-    setPrereqLoading(subCourseId)
+  const handlePracticesDragEnd = async (courseId: number, event: DragEndEvent) => {
+    const { active, over } = event
+    if (!over || active.id === over.id) return
+    const items = practicesByCourse[courseId] ?? []
+    const oldIndex = items.findIndex((i) => i.id === Number(active.id))
+    const newIndex = items.findIndex((i) => i.id === Number(over.id))
+    if (oldIndex < 0 || newIndex < 0) return
+
+    const reordered = withDisplayOrder(arrayMove(items, oldIndex, newIndex))
+    const previous = items
+    setPracticesByCourse((prev) => ({ ...prev, [courseId]: reordered }))
+    setSavingKey(`practices-${courseId}`)
     try {
-      await addSubCoursePrerequisite(subCourseId, { prerequisite_sub_course_id: prereqId })
-      // Refresh learning path
-      const res = await getLearningPath(Number(selectedCourseId))
-      setSubCourses(res.data.data.sub_courses ?? [])
-      toast.success("Prerequisite added.")
+      await reorderPractices(toReorderItems(reordered))
     } catch {
-      toast.error("Failed to add prerequisite.")
+      setPracticesByCourse((prev) => ({ ...prev, [courseId]: previous }))
+      toast.error("Failed to reorder practices.")
     } finally {
-      setPrereqLoading(null)
+      setSavingKey(null)
     }
   }
 
-  // Remove prerequisite
-  const handleRemovePrereq = async (subCourseId: number, prereqId: number) => {
-    setPrereqLoading(subCourseId)
-    try {
-      await removeSubCoursePrerequisite(subCourseId, prereqId)
-      const res = await getLearningPath(Number(selectedCourseId))
-      setSubCourses(res.data.data.sub_courses ?? [])
-      toast.success("Prerequisite removed.")
-    } catch {
-      toast.error("Failed to remove prerequisite.")
-    } finally {
-      setPrereqLoading(null)
-    }
+  const toggleCourse = async (courseId: number) => {
+    const expanded = expandedCourseIds.has(courseId)
+    if (!expanded) await ensureCourseContentLoaded(courseId)
+    setExpandedCourseIds((prev) => {
+      const next = new Set(prev)
+      if (next.has(courseId)) next.delete(courseId)
+      else next.add(courseId)
+      return next
+    })
   }
 
-  // ── Loading / error states ──
   if (loading) {
     return (
-      <div className="flex flex-col items-center justify-center py-32">
-        <div className="rounded-2xl bg-white shadow-sm p-6">
-          <RefreshCw className="h-10 w-10 animate-spin text-brand-600" />
-        </div>
-        <p className="mt-4 text-sm font-medium text-grayScale-400">Loading…</p>
-      </div>
-    )
-  }
-
-  if (error) {
-    return (
-      <div className="flex items-center justify-center py-32">
-        <div className="mx-4 flex w-full max-w-md items-center gap-3 rounded-2xl border border-red-100 bg-red-50 px-6 py-5 shadow-sm">
-          <AlertCircle className="h-5 w-5 shrink-0 text-red-500" />
-          <p className="text-sm font-medium text-red-600">{error}</p>
-        </div>
+      <div className="flex flex-col items-center justify-center py-24">
+        <RefreshCw className="h-8 w-8 animate-spin text-brand-500" />
+        <p className="mt-3 text-sm text-grayScale-400">Loading learning tree...</p>
       </div>
     )
   }
 
+  const selectedParentName =
+    parentCategories.find((c) => c.id === selectedParentCategoryId)?.name ?? "Course Category"
   return (
     <div className="space-y-6">
-      {/* Header */}
-      <div>
-        <h1 className="text-2xl font-bold tracking-tight text-grayScale-700">Learning Path Builder</h1>
-        <p className="mt-1 text-sm text-grayScale-400">
-          Select a course to drag-and-drop reorder its sub-courses and manage prerequisites.
-        </p>
+      <div className="flex items-start justify-between gap-3">
+        <div>
+          <h1 className="text-2xl font-bold tracking-tight text-grayScale-700">Learning Tree Builder</h1>
+          <p className="mt-1 text-sm text-grayScale-400">
+            Arrange as: Course category → Course sub-category → Course (level) → Course videos/practices
+          </p>
+        </div>
+        <Button variant="outline" className="gap-2" onClick={() => window.location.reload()}>
+          <RefreshCw className="h-4 w-4" />
+          Reload
+        </Button>
       </div>
 
-      {/* Selectors */}
-      <Card className="shadow-none border border-grayScale-200">
-        <CardContent className="flex flex-col gap-3 p-4 sm:flex-row sm:items-end sm:gap-4">
-          <div className="flex-1 min-w-0">
+      <Card className="border border-grayScale-200 shadow-none">
+        <CardContent className="grid gap-3 p-4 md:grid-cols-2">
+          <div>
             <p className="mb-1 text-xs font-medium uppercase tracking-[0.14em] text-grayScale-400">
-              Category
+              Parent category
             </p>
             <Select
-              value={selectedCategoryId}
+              value={selectedParentCategoryId ? String(selectedParentCategoryId) : ""}
               onChange={(e) => {
-                setSelectedCategoryId(e.target.value)
-                setSelectedCourseId("")
+                setSelectedParentCategoryId(e.target.value ? Number(e.target.value) : null)
+                setActiveSubCategoryId(null)
               }}
             >
-              <option value="">Choose category…</option>
+              <option value="">Choose category...</option>
               {parentCategories.map((cat) => (
-                <option key={cat.id} value={String(cat.id)}>
+                <option key={cat.id} value={cat.id}>
                   {cat.name}
                 </option>
               ))}
             </Select>
           </div>
-
-          <div className="flex-1 min-w-0">
+          <div>
             <p className="mb-1 text-xs font-medium uppercase tracking-[0.14em] text-grayScale-400">
-              Course
+              Active sub-category
             </p>
             <Select
-              value={selectedCourseId}
-              onChange={(e) => setSelectedCourseId(e.target.value)}
-              disabled={!selectedCategoryId || coursesLoading}
+              value={activeSubCategoryId ? String(activeSubCategoryId) : ""}
+              onChange={(e) => setActiveSubCategoryId(e.target.value ? Number(e.target.value) : null)}
+              disabled={!selectedParentCategoryId || loadingSubCategories || subCategories.length === 0}
             >
               <option value="">
-                {coursesLoading ? "Loading courses…" : "Choose course…"}
+                {loadingSubCategories ? "Loading sub-categories..." : "Choose sub-category..."}
               </option>
-              {courses.map((c) => (
-                <option key={c.id} value={String(c.id)}>
-                  {c.title}
+              {subCategories.map((cat) => (
+                <option key={cat.id} value={cat.id}>
+                  {cat.title}
                 </option>
               ))}
             </Select>
@@ -435,148 +451,229 @@ export function CourseFlowBuilderPage() {
         </CardContent>
       </Card>
 
-      {/* Empty state */}
-      {!selectedCourseId && (
-        <Card className="shadow-none border border-dashed border-grayScale-200 bg-grayScale-50/60">
-          <CardContent className="flex flex-col items-center justify-center gap-3 py-16 text-center">
-            <p className="text-sm font-semibold text-grayScale-600">
-              Select a category and course to begin.
-            </p>
-            <p className="max-w-sm text-xs leading-relaxed text-grayScale-400">
-              Once selected, you can drag to reorder sub-courses and manage prerequisite
-              dependencies.
-            </p>
-          </CardContent>
-        </Card>
-      )}
+      <Card className="shadow-soft">
+        <CardHeader className="border-b border-grayScale-200 pb-3">
+          <div className="flex items-center justify-between">
+            <CardTitle className="text-base font-semibold text-grayScale-600">Tree canvas</CardTitle>
+            {savingKey && (
+              <span className="inline-flex items-center gap-1 text-xs text-brand-500">
+                <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                Saving order...
+              </span>
+            )}
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-6 pt-5">
+          <div className="flex flex-col items-center gap-2">
+            <div className="rounded-xl border-2 border-brand-400 bg-white px-5 py-2 text-lg font-semibold text-grayScale-700 shadow-sm">
+              {selectedParentName}
+            </div>
+            <div className="h-5 w-px bg-grayScale-300" />
 
-      {/* Loading path */}
-      {selectedCourseId && pathLoading && (
-        <div className="flex items-center justify-center py-16">
-          <Loader2 className="h-8 w-8 animate-spin text-brand-500" />
-        </div>
-      )}
-
-      {/* Learning path editor */}
-      {selectedCourseId && !pathLoading && learningPath && (
-        <div className="grid gap-6 lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]">
-          {/* Left – sortable list */}
-          <div className="space-y-0">
-            <Card className="shadow-soft">
-              <CardHeader className="border-b border-grayScale-200 pb-3">
-                <div className="flex items-center justify-between gap-3">
-                  <div>
-                    <CardTitle className="text-base font-semibold text-grayScale-600">
-                      {learningPath.course_title}
-                    </CardTitle>
-                    <p className="mt-1 text-xs text-grayScale-400">
-                      Drag sub-courses to reorder them. Click the arrow to manage prerequisites.
-                    </p>
-                  </div>
-                  <div className="flex items-center gap-2">
-                    {saving && (
-                      <span className="flex items-center gap-1.5 text-xs text-brand-500">
-                        <Loader2 className="h-3.5 w-3.5 animate-spin" />
-                        Saving…
-                      </span>
-                    )}
-                    <Badge variant="secondary" className="text-[11px]">
-                      {subCourses.length} sub-course{subCourses.length !== 1 ? "s" : ""}
-                    </Badge>
-                  </div>
+            <div className="w-full">
+              {loadingSubCategories ? (
+                <div className="flex items-center justify-center py-6">
+                  <Loader2 className="h-5 w-5 animate-spin text-brand-500" />
                 </div>
-              </CardHeader>
-              <CardContent className="pt-2 pb-4">
-                {subCourses.length === 0 ? (
-                  <div className="rounded-lg border border-dashed border-grayScale-200 bg-grayScale-50/60 px-4 py-10 text-center text-xs text-grayScale-400">
-                    No sub-courses in this course yet. Add sub-courses from the Content Management page.
-                  </div>
-                ) : (
-                  <DndContext
-                    sensors={sensors}
-                    collisionDetection={closestCenter}
-                    onDragEnd={handleDragEnd}
+              ) : subCategories.length === 0 ? (
+                <div className="mx-auto max-w-[280px] rounded-xl border border-dashed border-grayScale-200 px-4 py-3 text-center text-xs text-grayScale-400">
+                  No sub-categories available.
+                </div>
+              ) : (
+                <DndContext
+                  sensors={sensors}
+                  collisionDetection={closestCenter}
+                  onDragEnd={handleSubCategoryDragEnd}
+                >
+                  <SortableContext
+                    items={subCategories.map((item) => item.id)}
+                    strategy={horizontalListSortingStrategy}
                   >
-                    <SortableContext
-                      items={subCourses.map((sc) => sc.id)}
-                      strategy={verticalListSortingStrategy}
-                    >
-                      {subCourses.map((sc) => (
-                        <SortableSubCourseCard
-                          key={sc.id}
-                          subCourse={sc}
-                          allSubCourses={subCourses}
-                          onAddPrereq={handleAddPrereq}
-                          onRemovePrereq={handleRemovePrereq}
-                          prereqLoading={prereqLoading}
+                    <div className="flex items-center justify-center gap-3 overflow-x-auto pb-2">
+                      {subCategories.map((item) => (
+                        <SortableNode
+                          key={item.id}
+                          id={item.id}
+                          label={item.title}
+                          active={item.id === activeSubCategoryId}
+                          onClick={() => setActiveSubCategoryId(item.id)}
+                          className="min-w-[250px]"
+                          badge={
+                            item.id === activeSubCategoryId ? (
+                              <Badge className="bg-brand-500 text-white">Active</Badge>
+                            ) : undefined
+                          }
                         />
                       ))}
-                    </SortableContext>
-                  </DndContext>
-                )}
-              </CardContent>
-            </Card>
+                    </div>
+                  </SortableContext>
+                </DndContext>
+              )}
+            </div>
           </div>
 
-          {/* Right – info panel */}
-          <div className="space-y-4">
-            <Card className="shadow-soft">
-              <CardHeader className="pb-2">
-                <CardTitle className="text-sm font-semibold text-grayScale-600">
-                  Course Details
-                </CardTitle>
-              </CardHeader>
-              <CardContent className="space-y-3 pt-1">
-                {learningPath.thumbnail && (
-                  <img
-                    src={learningPath.thumbnail}
-                    alt={learningPath.course_title}
-                    className="w-full rounded-lg object-cover aspect-video bg-grayScale-100"
-                  />
-                )}
-                <div className="space-y-1.5 text-xs text-grayScale-500">
-                  <div className="flex justify-between">
-                    <span className="text-grayScale-400">Category</span>
-                    <span className="font-medium text-grayScale-600">{learningPath.category_name}</span>
-                  </div>
-                  <div className="flex justify-between">
-                    <span className="text-grayScale-400">Sub-courses</span>
-                    <span className="font-medium text-grayScale-600">{subCourses.length}</span>
-                  </div>
-                  <div className="flex justify-between">
-                    <span className="text-grayScale-400">Total videos</span>
-                    <span className="font-medium text-grayScale-600">
-                      {subCourses.reduce((sum, sc) => sum + sc.video_count, 0)}
-                    </span>
-                  </div>
-                  <div className="flex justify-between">
-                    <span className="text-grayScale-400">Total practices</span>
-                    <span className="font-medium text-grayScale-600">
-                      {subCourses.reduce((sum, sc) => sum + sc.practice_count, 0)}
-                    </span>
-                  </div>
-                </div>
-                {learningPath.description && (
-                  <p className="text-xs leading-relaxed text-grayScale-400 border-t border-grayScale-100 pt-3">
-                    {learningPath.description}
-                  </p>
-                )}
-              </CardContent>
-            </Card>
+          <div className="border-t border-dashed border-grayScale-200 pt-5">
+            {!activeSubCategoryId ? (
+              <p className="rounded-lg border border-dashed border-grayScale-200 px-3 py-8 text-center text-xs text-grayScale-400">
+                Select a course sub-category to arrange its course tree.
+              </p>
+            ) : loadingCourses ? (
+              <div className="flex items-center justify-center py-12">
+                <Loader2 className="h-6 w-6 animate-spin text-brand-500" />
+              </div>
+            ) : activeCourses.length === 0 ? (
+              <p className="rounded-lg border border-dashed border-grayScale-200 px-3 py-8 text-center text-xs text-grayScale-400">
+                No courses found in this course sub-category.
+              </p>
+            ) : (
+              <DndContext
+                sensors={sensors}
+                collisionDetection={closestCenter}
+                onDragEnd={handleCoursesDragEnd}
+              >
+                <SortableContext
+                  items={activeCourses.map((item) => item.id)}
+                  strategy={horizontalListSortingStrategy}
+                >
+                  <div className="flex gap-4 overflow-x-auto pb-2">
+                    {activeCourses.map((course) => {
+                      const expanded = expandedCourseIds.has(course.id)
+                      const videos = videosByCourse[course.id] ?? []
+                      const practices = practicesByCourse[course.id] ?? []
+                      const pairCount = Math.max(videos.length, practices.length)
+                      return (
+                        <div key={course.id} className="min-w-[320px] max-w-[360px]">
+                          <SortableNode
+                            id={course.id}
+                            label={course.title}
+                            className="border-brand-200 bg-brand-50/30"
+                            badge={
+                              <div className="flex items-center gap-1.5">
+                                <Badge variant="secondary" className="text-[10px]">
+                                  {course.level}
+                                </Badge>
+                                <button
+                                  type="button"
+                                  onClick={() => toggleCourse(course.id)}
+                                  className="grid h-7 w-7 place-items-center rounded-md text-grayScale-500 hover:bg-grayScale-100"
+                                >
+                                  <ChevronDown
+                                    className={cn("h-4 w-4 transition-transform", !expanded && "-rotate-90")}
+                                  />
+                                </button>
+                              </div>
+                            }
+                          />
 
-            <Card className="shadow-none border border-dashed border-grayScale-200 bg-grayScale-50/50">
-              <CardContent className="space-y-2 p-4">
-                <p className="text-xs font-semibold text-grayScale-600">How it works</p>
-                <ul className="space-y-1.5 text-[11px] leading-relaxed text-grayScale-500 list-disc list-inside">
-                  <li>Drag sub-courses by the grip handle to reorder. Changes save automatically.</li>
-                  <li>Click the arrow on a sub-course to expand and manage its prerequisites.</li>
-                  <li>Prerequisites define which sub-courses a learner must complete first.</li>
-                </ul>
-              </CardContent>
-            </Card>
+                          <div className="ml-5 mt-1 h-5 w-px bg-grayScale-300" />
+
+                          {expanded && (
+                            <div className="ml-1 space-y-3 rounded-xl border border-grayScale-100 bg-grayScale-50/40 p-3">
+                              {loadingCourseContent[course.id] ? (
+                                <div className="flex items-center gap-2 py-6 text-xs text-grayScale-400">
+                                  <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                                  Loading videos and practices...
+                                </div>
+                              ) : (
+                                <>
+                                  <div className="space-y-2">
+                                    {pairCount === 0 ? (
+                                      <p className="rounded-lg border border-dashed border-grayScale-200 px-2 py-3 text-[11px] text-grayScale-400">
+                                        No videos/practices
+                                      </p>
+                                    ) : (
+                                      Array.from({ length: pairCount }).map((_, idx) => {
+                                        const v = videos[idx]
+                                        const p = practices[idx]
+                                        return (
+                                          <div key={`pair-${course.id}-${idx}`} className="flex items-center gap-2">
+                                            <div className="w-[58%] rounded-lg border border-violet-200 bg-white px-2 py-1.5 text-sm">
+                                              <span className="inline-flex items-center gap-1 text-violet-600">
+                                                <Video className="h-3.5 w-3.5" />
+                                                {v ? v.title : "—"}
+                                              </span>
+                                            </div>
+                                            <div className="h-px flex-1 bg-grayScale-300" />
+                                            <div className="w-[36%] rounded-lg border border-emerald-200 bg-white px-2 py-1.5 text-sm">
+                                              <span className="inline-flex items-center gap-1 text-emerald-600">
+                                                <BookOpen className="h-3.5 w-3.5" />
+                                                {p ? p.title : "—"}
+                                              </span>
+                                            </div>
+                                          </div>
+                                        )
+                                      })
+                                    )}
+                                  </div>
+
+                                  <div className="grid gap-3 md:grid-cols-2">
+                                    <div>
+                                      <p className="mb-1 text-[11px] font-semibold uppercase tracking-wide text-grayScale-400">
+                                        Reorder videos
+                                      </p>
+                                      <DndContext
+                                        sensors={sensors}
+                                        collisionDetection={closestCenter}
+                                        onDragEnd={(event) => handleVideosDragEnd(course.id, event)}
+                                      >
+                                        <SortableContext
+                                          items={videos.map((item) => item.id)}
+                                          strategy={verticalListSortingStrategy}
+                                        >
+                                          <div className="space-y-1.5">
+                                            {videos.map((video) => (
+                                              <SortableNode
+                                                key={video.id}
+                                                id={video.id}
+                                                label={video.title}
+                                                className="py-1.5"
+                                              />
+                                            ))}
+                                          </div>
+                                        </SortableContext>
+                                      </DndContext>
+                                    </div>
+                                    <div>
+                                      <p className="mb-1 text-[11px] font-semibold uppercase tracking-wide text-grayScale-400">
+                                        Reorder practices
+                                      </p>
+                                      <DndContext
+                                        sensors={sensors}
+                                        collisionDetection={closestCenter}
+                                        onDragEnd={(event) => handlePracticesDragEnd(course.id, event)}
+                                      >
+                                        <SortableContext
+                                          items={practices.map((item) => item.id)}
+                                          strategy={verticalListSortingStrategy}
+                                        >
+                                          <div className="space-y-1.5">
+                                            {practices.map((practice) => (
+                                              <SortableNode
+                                                key={practice.id}
+                                                id={practice.id}
+                                                label={practice.title}
+                                                className="py-1.5"
+                                              />
+                                            ))}
+                                          </div>
+                                        </SortableContext>
+                                      </DndContext>
+                                    </div>
+                                  </div>
+                                </>
+                              )}
+                            </div>
+                          )}
+                        </div>
+                      )
+                    })}
+                  </div>
+                </SortableContext>
+              </DndContext>
+            )}
           </div>
-        </div>
-      )}
+        </CardContent>
+      </Card>
     </div>
   )
 }
diff --git a/src/pages/content-management/CoursesPage.tsx b/src/pages/content-management/CoursesPage.tsx
index c410989..2ed52a6 100644
--- a/src/pages/content-management/CoursesPage.tsx
+++ b/src/pages/content-management/CoursesPage.tsx
@@ -77,7 +77,7 @@ export function CoursesPage() {
         setCategory(foundCategory ?? null)
       } catch (err) {
         console.error("Failed to fetch courses:", err)
-        setError("Failed to load courses")
+        setError("Failed to load sub-categories")
       } finally {
         setLoading(false)
       }
@@ -123,7 +123,7 @@ export function CoursesPage() {
       await fetchCourses()
     } catch (err: any) {
       console.error("Failed to create course:", err)
-      setSaveError(err.response?.data?.message || "Failed to create course")
+      setSaveError(err.response?.data?.message || "Failed to create sub-category")
     } finally {
       setSaving(false)
     }
@@ -206,7 +206,7 @@ export function CoursesPage() {
       await fetchCourses()
     } catch (err: any) {
       console.error("Failed to update course:", err)
-      setUpdateError(err.response?.data?.message || "Failed to update course")
+      setUpdateError(err.response?.data?.message || "Failed to update sub-category")
     } finally {
       setUpdating(false)
     }
@@ -267,16 +267,16 @@ export function CoursesPage() {
             </Link>
             <div>
               <h1 className="text-xl font-bold text-grayScale-700 sm:text-2xl">
-                {category?.name} Courses
+                {category?.name} Sub-categories
               </h1>
               <p className="mt-0.5 text-sm text-grayScale-400">
-                <span className="font-medium text-grayScale-500">{courses.length}</span> courses available
+                <span className="font-medium text-grayScale-500">{courses.length}</span> sub-categories available
               </p>
             </div>
           </div>
           <Button className="w-full bg-brand-500 shadow-sm transition-all hover:bg-brand-600 hover:shadow-md sm:w-auto" onClick={handleOpenModal}>
             <Plus className="mr-2 h-4 w-4" />
-            Add New Course
+            Add New Sub-category
           </Button>
         </div>
       </div>
@@ -285,16 +285,16 @@ export function CoursesPage() {
       <Card className="shadow-soft">
         <CardHeader className="border-b border-grayScale-200 pb-3">
           <CardTitle className="text-base font-semibold text-grayScale-600">
-            Course Management
+            Sub-category Management
           </CardTitle>
         </CardHeader>
         <CardContent className="pt-4">
           {courses.length === 0 ? (
             <div className="flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-grayScale-200 py-16 text-center">
               <img src={practiceSrc} alt="" className="h-16 w-16" />
-              <h3 className="mt-4 text-base font-semibold text-grayScale-600">No courses yet</h3>
+              <h3 className="mt-4 text-base font-semibold text-grayScale-600">No sub-categories yet</h3>
               <p className="mt-1.5 text-sm text-grayScale-400">
-                No courses found in this category.
+                No sub-categories found in this category.
               </p>
               <Button
                 variant="outline"
@@ -302,7 +302,7 @@ export function CoursesPage() {
                 onClick={handleOpenModal}
               >
                 <Plus className="mr-2 h-4 w-4" />
-                Add your first course
+                Add your first sub-category
               </Button>
             </div>
           ) : (
@@ -311,7 +311,7 @@ export function CoursesPage() {
                 <TableHeader>
                   <TableRow className="bg-grayScale-100 hover:bg-grayScale-100">
                     <TableHead className="py-3 text-xs font-semibold uppercase tracking-wider text-grayScale-500">
-                      Course
+                      Sub-category
                     </TableHead>
                     <TableHead className="hidden py-3 text-xs font-semibold uppercase tracking-wider text-grayScale-500 md:table-cell">
                       Status
@@ -415,7 +415,7 @@ export function CoursesPage() {
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm">
           <div className="mx-4 w-full max-w-2xl animate-in fade-in zoom-in-95 rounded-2xl bg-white shadow-2xl">
             <div className="flex items-center justify-between border-b border-grayScale-100 px-6 py-5">
-              <h2 className="text-lg font-bold text-grayScale-700">Add New Course</h2>
+              <h2 className="text-lg font-bold text-grayScale-700">Add New Sub-category</h2>
               <button
                 onClick={handleCloseModal}
                 className="grid h-8 w-8 place-items-center rounded-lg text-grayScale-400 transition-colors hover:bg-grayScale-100 hover:text-grayScale-600"
@@ -441,7 +441,7 @@ export function CoursesPage() {
                 </label>
                 <Input
                   id="course-title"
-                  placeholder="Enter course title"
+                  placeholder="Enter sub-category title"
                   value={title}
                   onChange={(e) => setTitle(e.target.value)}
                 />
@@ -456,7 +456,7 @@ export function CoursesPage() {
                 </label>
                 <textarea
                   id="course-description"
-                  placeholder="Enter course description"
+                  placeholder="Enter sub-category description"
                   value={description}
                   onChange={(e) => setDescription(e.target.value)}
                   rows={4}
@@ -478,7 +478,7 @@ export function CoursesPage() {
                 onClick={handleSave}
                 disabled={saving}
               >
-                {saving ? "Saving..." : "Save Course"}
+                {saving ? "Saving..." : "Save Sub-category"}
               </Button>
             </div>
           </div>
@@ -490,7 +490,7 @@ export function CoursesPage() {
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm">
           <div className="mx-4 w-full max-w-md animate-in fade-in zoom-in-95 rounded-2xl bg-white shadow-2xl">
             <div className="flex items-center justify-between border-b border-grayScale-100 px-6 py-5">
-              <h2 className="text-lg font-bold text-grayScale-700">Edit Course</h2>
+              <h2 className="text-lg font-bold text-grayScale-700">Edit Sub-category</h2>
               <button
                 onClick={handleCloseEditModal}
                 className="grid h-8 w-8 place-items-center rounded-lg text-grayScale-400 transition-colors hover:bg-grayScale-100 hover:text-grayScale-600"
@@ -516,7 +516,7 @@ export function CoursesPage() {
                 </label>
                 <Input
                   id="edit-course-title"
-                  placeholder="Enter course title"
+                  placeholder="Enter sub-category title"
                   value={editTitle}
                   onChange={(e) => setEditTitle(e.target.value)}
                 />
@@ -531,7 +531,7 @@ export function CoursesPage() {
                 </label>
                 <textarea
                   id="edit-course-description"
-                  placeholder="Enter course description"
+                  placeholder="Enter sub-category description"
                   value={editDescription}
                   onChange={(e) => setEditDescription(e.target.value)}
                   rows={4}
@@ -564,7 +564,7 @@ export function CoursesPage() {
                 onClick={handleUpdate}
                 disabled={updating}
               >
-                {updating ? "Updating..." : "Update Course"}
+                {updating ? "Updating..." : "Update Sub-category"}
               </Button>
             </div>
           </div>
@@ -576,7 +576,7 @@ export function CoursesPage() {
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm">
           <div className="mx-4 w-full max-w-lg animate-in fade-in zoom-in-95 rounded-2xl bg-white shadow-2xl">
             <div className="flex items-center justify-between border-b border-grayScale-100 px-6 py-5">
-              <h2 className="text-lg font-bold text-grayScale-700">Course Ratings</h2>
+              <h2 className="text-lg font-bold text-grayScale-700">Sub-category Ratings</h2>
               <button
                 onClick={() => {
                   setShowRatingsModal(false)
@@ -602,7 +602,7 @@ export function CoursesPage() {
                   </div>
                   <p className="mt-4 text-sm font-semibold text-grayScale-700">No ratings yet</p>
                   <p className="mt-1 text-sm text-grayScale-400">
-                    Ratings will appear here once learners start reviewing this course.
+                    Ratings will appear here once learners start reviewing this sub-category.
                   </p>
                 </div>
               ) : (
@@ -690,7 +690,7 @@ export function CoursesPage() {
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm">
           <div className="mx-4 w-full max-w-sm animate-in fade-in zoom-in-95 rounded-2xl bg-white shadow-2xl">
             <div className="flex items-center justify-between border-b border-grayScale-100 px-6 py-5">
-              <h2 className="text-lg font-bold text-grayScale-700">Delete Course</h2>
+              <h2 className="text-lg font-bold text-grayScale-700">Delete Sub-category</h2>
               <button
                 onClick={() => setShowDeleteModal(false)}
                 className="grid h-8 w-8 place-items-center rounded-lg text-grayScale-400 transition-colors hover:bg-grayScale-100 hover:text-grayScale-600"
diff --git a/src/pages/content-management/SubCourseContentPage.tsx b/src/pages/content-management/SubCourseContentPage.tsx
index bcf5631..826ec54 100644
--- a/src/pages/content-management/SubCourseContentPage.tsx
+++ b/src/pages/content-management/SubCourseContentPage.tsx
@@ -97,8 +97,8 @@ export function SubCourseContentPage() {
         )
         setSubCourse(foundSubCourse ?? null)
       } catch (err) {
-        console.error("Failed to fetch sub-course data:", err)
-        setError("Failed to load sub-course")
+        console.error("Failed to fetch course data:", err)
+        setError("Failed to load course")
       } finally {
         setLoading(false)
       }
@@ -374,7 +374,7 @@ export function SubCourseContentPage() {
     return (
       <div className="flex flex-col items-center justify-center py-20">
         <img src={spinnerSrc} alt="" className="h-8 w-8 animate-spin" />
-        <p className="mt-4 text-sm font-medium text-grayScale-500">Loading sub-course…</p>
+        <p className="mt-4 text-sm font-medium text-grayScale-500">Loading course…</p>
       </div>
     )
   }
@@ -396,7 +396,7 @@ export function SubCourseContentPage() {
         className="group inline-flex items-center gap-2 rounded-lg px-2 py-1.5 text-sm font-medium text-grayScale-500 transition-all hover:bg-grayScale-50 hover:text-grayScale-900"
       >
         <ArrowLeft className="h-4 w-4 transition-transform group-hover:-translate-x-0.5" />
-        Back to Sub-courses
+        Back to Courses
       </Link>
 
       {/* SubCourse Header */}
@@ -721,7 +721,7 @@ export function SubCourseContentPage() {
               </div>
               <p className="mt-4 text-sm font-semibold text-grayScale-700">No ratings yet</p>
               <p className="mt-1 text-sm text-grayScale-400">
-                Ratings will appear here once learners start reviewing this sub-course.
+                Ratings will appear here once learners start reviewing this course.
               </p>
             </div>
           ) : (
diff --git a/src/pages/content-management/SubCoursesPage.tsx b/src/pages/content-management/SubCoursesPage.tsx
index 89553f7..ce9c71c 100644
--- a/src/pages/content-management/SubCoursesPage.tsx
+++ b/src/pages/content-management/SubCoursesPage.tsx
@@ -1,350 +1,403 @@
-import { useEffect, useState, useRef } from "react"
-import { Link, useParams, useNavigate } from "react-router-dom"
-import { ArrowLeft, ToggleLeft, ToggleRight, MoreVertical, X, Trash2, AlertCircle, Edit, Link2, Plus, Loader2, LayoutGrid, GitBranch, ChevronDown, Lock, ArrowRight } from "lucide-react"
-import practiceSrc from "../../assets/Practice.svg"
-import spinnerSrc from "../../assets/Circular-indeterminate progress indicator.svg"
-import { Card, CardContent } from "../../components/ui/card"
-import alertSrc from "../../assets/Alert.svg"
-import { Badge } from "../../components/ui/badge"
-import { Button } from "../../components/ui/button"
-import { getSubCoursesByCourse, getCoursesByCategory, getCourseCategories, createSubCourse, updateSubCourse, updateSubCourseStatus, deleteSubCourse, getSubCoursePrerequisites, addSubCoursePrerequisite, removeSubCoursePrerequisite } from "../../api/courses.api"
-import { Input } from "../../components/ui/input"
-import type { SubCourse, Course, CourseCategory, SubCoursePrerequisite } from "../../types/course.types"
+import { useEffect, useState, useRef } from "react";
+import { Link, useParams, useNavigate } from "react-router-dom";
+import {
+  ArrowLeft,
+  ToggleLeft,
+  ToggleRight,
+  MoreVertical,
+  X,
+  Trash2,
+  AlertCircle,
+  Edit,
+  Link2,
+  Plus,
+  Loader2,
+  LayoutGrid,
+  GitBranch,
+  ChevronDown,
+  Lock,
+  ArrowRight,
+} from "lucide-react";
+import practiceSrc from "../../assets/Practice.svg";
+import spinnerSrc from "../../assets/Circular-indeterminate progress indicator.svg";
+import { Card, CardContent } from "../../components/ui/card";
+import alertSrc from "../../assets/Alert.svg";
+import { Badge } from "../../components/ui/badge";
+import { Button } from "../../components/ui/button";
+import {
+  getSubCoursesByCourse,
+  getCoursesByCategory,
+  getCourseCategories,
+  createSubCourse,
+  updateSubCourse,
+  updateSubCourseStatus,
+  deleteSubCourse,
+  getSubCoursePrerequisites,
+  addSubCoursePrerequisite,
+  removeSubCoursePrerequisite,
+} from "../../api/courses.api";
+import { Input } from "../../components/ui/input";
+import type {
+  SubCourse,
+  Course,
+  CourseCategory,
+  SubCoursePrerequisite,
+} from "../../types/course.types";
 
 export function SubCoursesPage() {
-  const { categoryId, courseId } = useParams<{ categoryId: string; courseId: string }>()
-  const navigate = useNavigate()
-  const [subCourses, setSubCourses] = useState<SubCourse[]>([])
-  const [course, setCourse] = useState<Course | null>(null)
-  const [category, setCategory] = useState<CourseCategory | null>(null)
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
+  const { categoryId, courseId } = useParams<{
+    categoryId: string;
+    courseId: string;
+  }>();
+  const navigate = useNavigate();
+  const [subCourses, setSubCourses] = useState<SubCourse[]>([]);
+  const [course, setCourse] = useState<Course | null>(null);
+  const [category, setCategory] = useState<CourseCategory | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
 
-  const [openMenuId, setOpenMenuId] = useState<number | null>(null)
-  const [togglingId, setTogglingId] = useState<number | null>(null)
-  const [showDeleteModal, setShowDeleteModal] = useState(false)
-  const [subCourseToDelete, setSubCourseToDelete] = useState<SubCourse | null>(null)
-  const [deleting, setDeleting] = useState(false)
-  const menuRef = useRef<HTMLDivElement>(null)
+  const [openMenuId, setOpenMenuId] = useState<number | null>(null);
+  const [togglingId, setTogglingId] = useState<number | null>(null);
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [subCourseToDelete, setSubCourseToDelete] = useState<SubCourse | null>(
+    null,
+  );
+  const [deleting, setDeleting] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
 
-  const [showAddModal, setShowAddModal] = useState(false)
-  const [showEditModal, setShowEditModal] = useState(false)
-  const [subCourseToEdit, setSubCourseToEdit] = useState<SubCourse | null>(null)
-  const [title, setTitle] = useState("")
-  const [description, setDescription] = useState("")
-  const [level, setLevel] = useState("")
-  const [saving, setSaving] = useState(false)
-  const [saveError, setSaveError] = useState<string | null>(null)
+  const [showAddModal, setShowAddModal] = useState(false);
+  const [showEditModal, setShowEditModal] = useState(false);
+  const [subCourseToEdit, setSubCourseToEdit] = useState<SubCourse | null>(
+    null,
+  );
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [level, setLevel] = useState("");
+  const [saving, setSaving] = useState(false);
+  const [saveError, setSaveError] = useState<string | null>(null);
 
   // View mode
-  const [viewMode, setViewMode] = useState<"grid" | "flow">("grid")
+  const [viewMode, setViewMode] = useState<"grid" | "flow">("grid");
 
   // All prerequisites map: subCourseId -> prerequisites[]
-  const [allPrereqMap, setAllPrereqMap] = useState<Record<number, SubCoursePrerequisite[]>>({})
-  const [allPrereqLoading, setAllPrereqLoading] = useState(false)
+  const [allPrereqMap, setAllPrereqMap] = useState<
+    Record<number, SubCoursePrerequisite[]>
+  >({});
+  const [allPrereqLoading, setAllPrereqLoading] = useState(false);
 
   // Prerequisites state
-  const [showPrereqModal, setShowPrereqModal] = useState(false)
-  const [prereqSubCourse, setPrereqSubCourse] = useState<SubCourse | null>(null)
-  const [prerequisites, setPrerequisites] = useState<SubCoursePrerequisite[]>([])
-  const [prereqLoading, setPrereqLoading] = useState(false)
-  const [prereqAdding, setPrereqAdding] = useState(false)
-  const [prereqRemoving, setPrereqRemoving] = useState<number | null>(null)
-  const [selectedPrereqId, setSelectedPrereqId] = useState<number | 0>(0)
+  const [showPrereqModal, setShowPrereqModal] = useState(false);
+  const [prereqSubCourse, setPrereqSubCourse] = useState<SubCourse | null>(
+    null,
+  );
+  const [prerequisites, setPrerequisites] = useState<SubCoursePrerequisite[]>(
+    [],
+  );
+  const [prereqLoading, setPrereqLoading] = useState(false);
+  const [prereqAdding, setPrereqAdding] = useState(false);
+  const [prereqRemoving, setPrereqRemoving] = useState<number | null>(null);
+  const [selectedPrereqId, setSelectedPrereqId] = useState<number | 0>(0);
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
-        setOpenMenuId(null)
+        setOpenMenuId(null);
       }
-    }
+    };
 
     if (openMenuId !== null) {
-      document.addEventListener("mousedown", handleClickOutside)
+      document.addEventListener("mousedown", handleClickOutside);
     }
-    return () => document.removeEventListener("mousedown", handleClickOutside)
-  }, [openMenuId])
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [openMenuId]);
 
   const fetchSubCourses = async () => {
-    if (!courseId) return
+    if (!courseId) return;
 
     try {
-      const subCoursesRes = await getSubCoursesByCourse(Number(courseId))
-      setSubCourses(subCoursesRes.data.data.sub_courses ?? [])
+      const subCoursesRes = await getSubCoursesByCourse(Number(courseId));
+      setSubCourses(subCoursesRes.data.data.sub_courses ?? []);
     } catch (err) {
-      console.error("Failed to fetch sub-courses:", err)
+      console.error("Failed to fetch sub-courses:", err);
     }
-  }
+  };
 
   const fetchAllPrerequisites = async (scs: SubCourse[]) => {
-    if (scs.length === 0) return
-    setAllPrereqLoading(true)
+    if (scs.length === 0) return;
+    setAllPrereqLoading(true);
     try {
       const results = await Promise.all(
-        scs.map((sc) => getSubCoursePrerequisites(sc.id).then((res) => ({ id: sc.id, data: res.data.data ?? [] })))
-      )
-      const map: Record<number, SubCoursePrerequisite[]> = {}
+        scs.map((sc) =>
+          getSubCoursePrerequisites(sc.id).then((res) => ({
+            id: sc.id,
+            data: res.data.data ?? [],
+          })),
+        ),
+      );
+      const map: Record<number, SubCoursePrerequisite[]> = {};
       for (const r of results) {
-        map[r.id] = r.data
+        map[r.id] = r.data;
       }
-      setAllPrereqMap(map)
+      setAllPrereqMap(map);
     } catch (err) {
-      console.error("Failed to fetch all prerequisites:", err)
+      console.error("Failed to fetch all prerequisites:", err);
     } finally {
-      setAllPrereqLoading(false)
+      setAllPrereqLoading(false);
     }
-  }
+  };
 
   useEffect(() => {
     const fetchData = async () => {
-      if (!courseId || !categoryId) return
+      if (!courseId || !categoryId) return;
 
       try {
         const [subCoursesRes, coursesRes, categoriesRes] = await Promise.all([
           getSubCoursesByCourse(Number(courseId)),
           getCoursesByCategory(Number(categoryId)),
           getCourseCategories(),
-        ])
+        ]);
 
-        setSubCourses(subCoursesRes.data.data.sub_courses ?? [])
+        setSubCourses(subCoursesRes.data.data.sub_courses ?? []);
 
         const foundCourse = coursesRes.data.data.courses?.find(
-          (c) => c.id === Number(courseId)
-        )
-        setCourse(foundCourse ?? null)
+          (c) => c.id === Number(courseId),
+        );
+        setCourse(foundCourse ?? null);
 
         const foundCategory = categoriesRes.data.data.categories?.find(
-          (c) => c.id === Number(categoryId)
-        )
-        setCategory(foundCategory ?? null)
+          (c) => c.id === Number(categoryId),
+        );
+        setCategory(foundCategory ?? null);
       } catch (err) {
-        console.error("Failed to fetch sub-courses:", err)
-        setError("Failed to load sub-courses")
+        console.error("Failed to fetch sub-courses:", err);
+        setError("Failed to load courses");
       } finally {
-        setLoading(false)
+        setLoading(false);
       }
-    }
+    };
 
-    fetchData()
-  }, [courseId, categoryId])
+    fetchData();
+  }, [courseId, categoryId]);
 
   useEffect(() => {
     if (subCourses.length > 0) {
-      fetchAllPrerequisites(subCourses)
+      fetchAllPrerequisites(subCourses);
     }
-  }, [subCourses])
+  }, [subCourses]);
 
   const handleToggleStatus = async (subCourse: SubCourse) => {
-    setTogglingId(subCourse.id)
+    setTogglingId(subCourse.id);
     try {
       await updateSubCourseStatus(subCourse.id, {
         is_active: !subCourse.is_active,
         level: subCourse.level,
         title: subCourse.title,
-      })
-      await fetchSubCourses()
+      });
+      await fetchSubCourses();
     } catch (err) {
-      console.error("Failed to update sub-course status:", err)
+      console.error("Failed to update sub-course status:", err);
     } finally {
-      setTogglingId(null)
+      setTogglingId(null);
     }
-  }
+  };
 
   const handleDeleteClick = (subCourse: SubCourse) => {
-    setSubCourseToDelete(subCourse)
-    setShowDeleteModal(true)
-  }
+    setSubCourseToDelete(subCourse);
+    setShowDeleteModal(true);
+  };
 
   const handleConfirmDelete = async () => {
-    if (!subCourseToDelete) return
+    if (!subCourseToDelete) return;
 
-    setDeleting(true)
+    setDeleting(true);
     try {
-      await deleteSubCourse(subCourseToDelete.id)
-      setShowDeleteModal(false)
-      setSubCourseToDelete(null)
-      await fetchSubCourses()
+      await deleteSubCourse(subCourseToDelete.id);
+      setShowDeleteModal(false);
+      setSubCourseToDelete(null);
+      await fetchSubCourses();
     } catch (err) {
-      console.error("Failed to delete sub-course:", err)
+      console.error("Failed to delete sub-course:", err);
     } finally {
-      setDeleting(false)
+      setDeleting(false);
     }
-  }
+  };
 
   const handleAddSubCourse = () => {
-    setTitle("")
-    setDescription("")
-    setLevel("")
-    setSaveError(null)
-    setShowAddModal(true)
-  }
+    setTitle("");
+    setDescription("");
+    setLevel("");
+    setSaveError(null);
+    setShowAddModal(true);
+  };
 
   const handleSaveNewSubCourse = async () => {
-    if (!courseId) return
-    setSaving(true)
-    setSaveError(null)
+    if (!courseId) return;
+    setSaving(true);
+    setSaveError(null);
     try {
       await createSubCourse({
         course_id: Number(courseId),
         title,
         description,
         level,
-      })
-      setShowAddModal(false)
-      setTitle("")
-      setDescription("")
-      setLevel("")
-      await fetchSubCourses()
+      });
+      setShowAddModal(false);
+      setTitle("");
+      setDescription("");
+      setLevel("");
+      await fetchSubCourses();
     } catch (err) {
-      console.error("Failed to create sub-course:", err)
-      setSaveError("Failed to create sub-course")
+      console.error("Failed to create sub-course:", err);
+      setSaveError("Failed to create course");
     } finally {
-      setSaving(false)
+      setSaving(false);
     }
-  }
+  };
 
   const handleEditClick = (subCourse: SubCourse) => {
-    setSubCourseToEdit(subCourse)
-    setTitle(subCourse.title)
-    setDescription(subCourse.description)
-    setLevel(subCourse.level)
-    setSaveError(null)
-    setShowEditModal(true)
-  }
+    setSubCourseToEdit(subCourse);
+    setTitle(subCourse.title);
+    setDescription(subCourse.description);
+    setLevel(subCourse.level);
+    setSaveError(null);
+    setShowEditModal(true);
+  };
 
   const handleSaveEditSubCourse = async () => {
-    if (!subCourseToEdit) return
-    setSaving(true)
-    setSaveError(null)
+    if (!subCourseToEdit) return;
+    setSaving(true);
+    setSaveError(null);
     try {
       await updateSubCourse(subCourseToEdit.id, {
         title,
         description,
         level,
-      })
-      setShowEditModal(false)
-      setSubCourseToEdit(null)
-      setTitle("")
-      setDescription("")
-      setLevel("")
-      await fetchSubCourses()
+      });
+      setShowEditModal(false);
+      setSubCourseToEdit(null);
+      setTitle("");
+      setDescription("");
+      setLevel("");
+      await fetchSubCourses();
     } catch (err) {
-      console.error("Failed to update sub-course:", err)
-      setSaveError("Failed to update sub-course")
+      console.error("Failed to update sub-course:", err);
+      setSaveError("Failed to update course");
     } finally {
-      setSaving(false)
+      setSaving(false);
     }
-  }
+  };
 
   const handleSubCourseClick = (subCourseId: number) => {
-    navigate(`/content/category/${categoryId}/courses/${courseId}/sub-courses/${subCourseId}`)
-  }
+    navigate(
+      `/content/category/${categoryId}/courses/${courseId}/sub-courses/${subCourseId}`,
+    );
+  };
 
   const handlePrereqClick = async (subCourse: SubCourse) => {
-    setPrereqSubCourse(subCourse)
-    setShowPrereqModal(true)
-    setPrereqLoading(true)
-    setSelectedPrereqId(0)
+    setPrereqSubCourse(subCourse);
+    setShowPrereqModal(true);
+    setPrereqLoading(true);
+    setSelectedPrereqId(0);
     try {
-      const res = await getSubCoursePrerequisites(subCourse.id)
-      setPrerequisites(res.data.data ?? [])
+      const res = await getSubCoursePrerequisites(subCourse.id);
+      setPrerequisites(res.data.data ?? []);
     } catch (err) {
-      console.error("Failed to fetch prerequisites:", err)
-      setPrerequisites([])
+      console.error("Failed to fetch prerequisites:", err);
+      setPrerequisites([]);
     } finally {
-      setPrereqLoading(false)
+      setPrereqLoading(false);
     }
-  }
+  };
 
   const handleAddPrerequisite = async () => {
-    if (!prereqSubCourse || !selectedPrereqId) return
-    setPrereqAdding(true)
+    if (!prereqSubCourse || !selectedPrereqId) return;
+    setPrereqAdding(true);
     try {
       await addSubCoursePrerequisite(prereqSubCourse.id, {
         prerequisite_sub_course_id: selectedPrereqId,
-      })
-      const res = await getSubCoursePrerequisites(prereqSubCourse.id)
-      setPrerequisites(res.data.data ?? [])
-      setSelectedPrereqId(0)
+      });
+      const res = await getSubCoursePrerequisites(prereqSubCourse.id);
+      setPrerequisites(res.data.data ?? []);
+      setSelectedPrereqId(0);
     } catch (err) {
-      console.error("Failed to add prerequisite:", err)
+      console.error("Failed to add prerequisite:", err);
     } finally {
-      setPrereqAdding(false)
+      setPrereqAdding(false);
     }
-  }
+  };
 
   const handleRemovePrerequisite = async (prereqId: number) => {
-    if (!prereqSubCourse) return
-    setPrereqRemoving(prereqId)
+    if (!prereqSubCourse) return;
+    setPrereqRemoving(prereqId);
     try {
-      await removeSubCoursePrerequisite(prereqSubCourse.id, prereqId)
-      const res = await getSubCoursePrerequisites(prereqSubCourse.id)
-      setPrerequisites(res.data.data ?? [])
+      await removeSubCoursePrerequisite(prereqSubCourse.id, prereqId);
+      const res = await getSubCoursePrerequisites(prereqSubCourse.id);
+      setPrerequisites(res.data.data ?? []);
     } catch (err) {
-      console.error("Failed to remove prerequisite:", err)
+      console.error("Failed to remove prerequisite:", err);
     } finally {
-      setPrereqRemoving(null)
+      setPrereqRemoving(null);
     }
-  }
+  };
 
   // Build flow layers using topological sort
   const flowLayers = (() => {
-    if (subCourses.length === 0) return []
+    if (subCourses.length === 0) return [];
 
     // Find sub-courses with no prerequisites (roots)
-    const hasPrereqs = new Set<number>()
-    const isPrereqOf = new Map<number, number[]>() // prereqId -> [subCourseIds that depend on it]
+    const hasPrereqs = new Set<number>();
+    const isPrereqOf = new Map<number, number[]>(); // prereqId -> [subCourseIds that depend on it]
 
     for (const sc of subCourses) {
-      const prereqs = allPrereqMap[sc.id] ?? []
+      const prereqs = allPrereqMap[sc.id] ?? [];
       if (prereqs.length > 0) {
-        hasPrereqs.add(sc.id)
+        hasPrereqs.add(sc.id);
       }
       for (const p of prereqs) {
-        const dependents = isPrereqOf.get(p.prerequisite_sub_course_id) ?? []
-        dependents.push(sc.id)
-        isPrereqOf.set(p.prerequisite_sub_course_id, dependents)
+        const dependents = isPrereqOf.get(p.prerequisite_sub_course_id) ?? [];
+        dependents.push(sc.id);
+        isPrereqOf.set(p.prerequisite_sub_course_id, dependents);
       }
     }
 
     // BFS-based layering
-    const layers: SubCourse[][] = []
-    const placed = new Set<number>()
+    const layers: SubCourse[][] = [];
+    const placed = new Set<number>();
 
     // Layer 0: no prerequisites
-    const roots = subCourses.filter((sc) => !hasPrereqs.has(sc.id))
+    const roots = subCourses.filter((sc) => !hasPrereqs.has(sc.id));
     if (roots.length > 0) {
-      layers.push(roots)
-      roots.forEach((sc) => placed.add(sc.id))
+      layers.push(roots);
+      roots.forEach((sc) => placed.add(sc.id));
     }
 
     // Subsequent layers: all prereqs already placed
-    let maxIterations = subCourses.length
+    let maxIterations = subCourses.length;
     while (placed.size < subCourses.length && maxIterations-- > 0) {
       const nextLayer = subCourses.filter((sc) => {
-        if (placed.has(sc.id)) return false
-        const prereqs = allPrereqMap[sc.id] ?? []
-        return prereqs.every((p) => placed.has(p.prerequisite_sub_course_id))
-      })
+        if (placed.has(sc.id)) return false;
+        const prereqs = allPrereqMap[sc.id] ?? [];
+        return prereqs.every((p) => placed.has(p.prerequisite_sub_course_id));
+      });
       if (nextLayer.length === 0) {
         // Remaining have circular deps or missing prereqs — just add them
-        const remaining = subCourses.filter((sc) => !placed.has(sc.id))
-        if (remaining.length > 0) layers.push(remaining)
-        break
+        const remaining = subCourses.filter((sc) => !placed.has(sc.id));
+        if (remaining.length > 0) layers.push(remaining);
+        break;
       }
-      layers.push(nextLayer)
-      nextLayer.forEach((sc) => placed.add(sc.id))
+      layers.push(nextLayer);
+      nextLayer.forEach((sc) => placed.add(sc.id));
     }
 
-    return layers
-  })()
+    return layers;
+  })();
 
   const availablePrerequisites = subCourses.filter(
     (sc) =>
       prereqSubCourse &&
       sc.id !== prereqSubCourse.id &&
-      !prerequisites.some((p) => p.prerequisite_sub_course_id === sc.id)
-  )
+      !prerequisites.some((p) => p.prerequisite_sub_course_id === sc.id),
+  );
 
   if (loading) {
     return (
@@ -355,7 +408,7 @@ export function SubCoursesPage() {
         </div>
         <p className="mt-4 text-sm font-medium text-grayScale-400">Loading sub-courses...</p> */}
       </div>
-    )
+    );
   }
 
   if (error) {
@@ -366,7 +419,7 @@ export function SubCoursesPage() {
           <p className="text-sm font-medium text-red-600">{error}</p>
         </div>
       </div>
-    )
+    );
   }
 
   return (
@@ -382,12 +435,21 @@ export function SubCoursesPage() {
           </Link>
           <div className="min-w-0">
             <div className="mb-1 flex items-center gap-1.5 text-xs font-medium text-grayScale-400">
-              <span className="truncate max-w-[100px] rounded bg-grayScale-50 px-1.5 py-0.5 sm:max-w-none">{category?.name}</span>
+              <span className="truncate max-w-[100px] rounded bg-grayScale-50 px-1.5 py-0.5 sm:max-w-none">
+                {category?.name}
+              </span>
               <span className="shrink-0 text-grayScale-300">→</span>
-              <span className="truncate max-w-[100px] rounded bg-grayScale-50 px-1.5 py-0.5 sm:max-w-none">{course?.title}</span>
+              <span className="truncate max-w-[100px] rounded bg-grayScale-50 px-1.5 py-0.5 sm:max-w-none">
+                {course?.title}
+              </span>
             </div>
-            <h1 className="text-2xl font-bold tracking-tight text-grayScale-700">Sub-courses</h1>
-            <p className="mt-0.5 text-sm text-grayScale-400">{subCourses.length} sub-course{subCourses.length !== 1 ? "s" : ""} available</p>
+            <h1 className="text-2xl font-bold tracking-tight text-grayScale-700">
+              Courses
+            </h1>
+            <p className="mt-0.5 text-sm text-grayScale-400">
+              {subCourses.length} course{subCourses.length !== 1 ? "s" : ""}{" "}
+              available
+            </p>
           </div>
         </div>
         <div className="flex items-center gap-2">
@@ -417,8 +479,11 @@ export function SubCoursesPage() {
               </button>
             </div>
           )}
-          <Button className="w-full rounded-xl bg-brand-500 px-5 shadow-sm transition-all hover:bg-brand-600 hover:shadow-md sm:w-auto" onClick={handleAddSubCourse}>
-            Add New Sub-course
+          <Button
+            className="w-full rounded-xl bg-brand-500 px-5 shadow-sm transition-all hover:bg-brand-600 hover:shadow-md sm:w-auto"
+            onClick={handleAddSubCourse}
+          >
+            Add New Course
           </Button>
         </div>
       </div>
@@ -428,10 +493,17 @@ export function SubCoursesPage() {
         <Card className="border border-dashed border-grayScale-200 shadow-none">
           <CardContent className="flex flex-col items-center justify-center py-16">
             <img src={practiceSrc} alt="" className="h-20 w-20" />
-            <h3 className="mt-5 text-base font-semibold text-grayScale-600">No sub-courses yet</h3>
-            <p className="mt-1.5 max-w-xs text-center text-sm text-grayScale-400">Get started by adding your first sub-course to this course</p>
-            <Button className="mt-5 rounded-xl bg-brand-500 px-5 shadow-sm hover:bg-brand-600 hover:shadow-md" onClick={handleAddSubCourse}>
-              Add your first sub-course
+            <h3 className="mt-5 text-base font-semibold text-grayScale-600">
+              No courses yet
+            </h3>
+            <p className="mt-1.5 max-w-xs text-center text-sm text-grayScale-400">
+              Get started by adding your first course to this sub-category
+            </p>
+            <Button
+              className="mt-5 rounded-xl bg-brand-500 px-5 shadow-sm hover:bg-brand-600 hover:shadow-md"
+              onClick={handleAddSubCourse}
+            >
+              Add your first course
             </Button>
           </CardContent>
         </Card>
@@ -443,10 +515,10 @@ export function SubCoursesPage() {
               "bg-gradient-to-br from-purple-100 to-purple-200",
               "bg-gradient-to-br from-green-100 to-green-200",
               "bg-gradient-to-br from-yellow-100 to-yellow-200",
-            ]
+            ];
             return (
-              <Card 
-                key={subCourse.id} 
+              <Card
+                key={subCourse.id}
                 className="group cursor-pointer overflow-hidden border border-grayScale-100 bg-white shadow-sm transition-all duration-200 hover:shadow-soft hover:-translate-y-1 hover:border-brand-100"
                 onClick={() => handleSubCourseClick(subCourse.id)}
               >
@@ -459,7 +531,9 @@ export function SubCoursesPage() {
                       className="h-full w-full object-cover rounded-t-lg transition-transform duration-300 group-hover:scale-105"
                     />
                   ) : (
-                    <div className={`h-full w-full rounded-t-lg transition-transform duration-300 group-hover:scale-105 ${gradients[index % gradients.length]}`} />
+                    <div
+                      className={`h-full w-full rounded-t-lg transition-transform duration-300 group-hover:scale-105 ${gradients[index % gradients.length]}`}
+                    />
                   )}
                   {subCourse.level && (
                     <div className="absolute bottom-2.5 right-2.5 rounded-md bg-brand-600/90 px-2.5 py-1 text-xs font-semibold tracking-wide text-white shadow-sm backdrop-blur-sm">
@@ -467,19 +541,21 @@ export function SubCoursesPage() {
                     </div>
                   )}
                 </div>
-                
+
                 {/* Content */}
                 <div className="flex flex-col gap-3 p-4">
                   {/* Status and menu */}
                   <div className="flex items-center justify-between">
-                    <Badge 
+                    <Badge
                       className={`rounded-full px-2.5 py-0.5 text-[11px] font-semibold uppercase tracking-wider ${
-                        subCourse.is_active 
-                          ? "border border-green-200 bg-green-50 text-green-700" 
+                        subCourse.is_active
+                          ? "border border-green-200 bg-green-50 text-green-700"
                           : "border border-grayScale-200 bg-grayScale-50 text-grayScale-500"
                       }`}
                     >
-                      <span className={`mr-1.5 inline-block h-1.5 w-1.5 rounded-full ${subCourse.is_active ? "bg-green-500" : "bg-grayScale-400"}`} />
+                      <span
+                        className={`mr-1.5 inline-block h-1.5 w-1.5 rounded-full ${subCourse.is_active ? "bg-green-500" : "bg-grayScale-400"}`}
+                      />
                       {subCourse.is_active ? "Active" : "Inactive"}
                     </Badge>
                     <div
@@ -488,7 +564,11 @@ export function SubCoursesPage() {
                       onClick={(e) => e.stopPropagation()}
                     >
                       <button
-                        onClick={() => setOpenMenuId(openMenuId === subCourse.id ? null : subCourse.id)}
+                        onClick={() =>
+                          setOpenMenuId(
+                            openMenuId === subCourse.id ? null : subCourse.id,
+                          )
+                        }
                         className="grid h-7 w-7 place-items-center rounded-lg text-grayScale-400 transition-colors hover:bg-grayScale-100 hover:text-grayScale-600"
                       >
                         <MoreVertical className="h-4 w-4" />
@@ -497,8 +577,8 @@ export function SubCoursesPage() {
                         <div className="absolute right-0 top-full z-10 mt-1.5 w-44 overflow-hidden rounded-xl border border-grayScale-100 bg-white py-1 shadow-lg">
                           <button
                             onClick={() => {
-                              handlePrereqClick(subCourse)
-                              setOpenMenuId(null)
+                              handlePrereqClick(subCourse);
+                              setOpenMenuId(null);
                             }}
                             className="flex w-full items-center gap-2.5 px-4 py-2.5 text-sm text-grayScale-600 transition-colors hover:bg-grayScale-50"
                           >
@@ -508,8 +588,8 @@ export function SubCoursesPage() {
                           <div className="mx-3 border-t border-grayScale-100" />
                           <button
                             onClick={() => {
-                              handleToggleStatus(subCourse)
-                              setOpenMenuId(null)
+                              handleToggleStatus(subCourse);
+                              setOpenMenuId(null);
                             }}
                             disabled={togglingId === subCourse.id}
                             className="flex w-full items-center gap-2.5 px-4 py-2.5 text-sm text-grayScale-600 transition-colors hover:bg-grayScale-50 disabled:opacity-50"
@@ -529,8 +609,8 @@ export function SubCoursesPage() {
                           <div className="mx-3 border-t border-grayScale-100" />
                           <button
                             onClick={() => {
-                              handleDeleteClick(subCourse)
-                              setOpenMenuId(null)
+                              handleDeleteClick(subCourse);
+                              setOpenMenuId(null);
                             }}
                             className="flex w-full items-center gap-2.5 px-4 py-2.5 text-sm text-red-500 transition-colors hover:bg-red-50"
                           >
@@ -541,22 +621,24 @@ export function SubCoursesPage() {
                       )}
                     </div>
                   </div>
-                  
+
                   {/* Title */}
                   <div>
-                    <h3 className="font-semibold text-grayScale-700 group-hover:text-brand-600 transition-colors">{subCourse.title}</h3>
+                    <h3 className="font-semibold text-grayScale-700 group-hover:text-brand-600 transition-colors">
+                      {subCourse.title}
+                    </h3>
                     <p className="mt-1 text-sm leading-relaxed text-grayScale-400 line-clamp-2">
                       {subCourse.description || "No description available"}
                     </p>
                   </div>
-                  
+
                   {/* Edit button */}
-                  <Button 
-                    variant="outline" 
+                  <Button
+                    variant="outline"
                     className="mt-auto w-full rounded-lg border-grayScale-200 text-grayScale-500 transition-all hover:border-brand-200 hover:bg-brand-50 hover:text-brand-600"
                     onClick={(e) => {
-                      e.stopPropagation()
-                      handleEditClick(subCourse)
+                      e.stopPropagation();
+                      handleEditClick(subCourse);
                     }}
                   >
                     <Edit className="mr-2 h-3.5 w-3.5" />
@@ -564,7 +646,7 @@ export function SubCoursesPage() {
                   </Button>
                 </div>
               </Card>
-            )
+            );
           })}
         </div>
       )}
@@ -574,7 +656,9 @@ export function SubCoursesPage() {
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm">
           <div className="mx-4 w-full max-w-sm rounded-2xl bg-white shadow-2xl">
             <div className="flex items-center justify-between border-b border-grayScale-100 px-6 py-4">
-              <h2 className="text-lg font-semibold text-grayScale-700">Delete Sub-course</h2>
+              <h2 className="text-lg font-semibold text-grayScale-700">
+                Delete Course
+              </h2>
               <button
                 onClick={() => setShowDeleteModal(false)}
                 className="grid h-8 w-8 place-items-center rounded-lg text-grayScale-400 transition-colors hover:bg-grayScale-100 hover:text-grayScale-600"
@@ -589,8 +673,10 @@ export function SubCoursesPage() {
               </div>
               <p className="text-center text-sm leading-relaxed text-grayScale-600">
                 Are you sure you want to delete{" "}
-                <span className="font-semibold text-grayScale-700">{subCourseToDelete.title}</span>? This action cannot
-                be undone.
+                <span className="font-semibold text-grayScale-700">
+                  {subCourseToDelete.title}
+                </span>
+                ? This action cannot be undone.
               </p>
             </div>
 
@@ -620,7 +706,9 @@ export function SubCoursesPage() {
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm">
           <div className="mx-4 w-full max-w-md rounded-2xl bg-white shadow-2xl">
             <div className="flex items-center justify-between border-b border-grayScale-100 px-6 py-4">
-              <h2 className="text-lg font-semibold text-grayScale-700">Add New Sub-course</h2>
+              <h2 className="text-lg font-semibold text-grayScale-700">
+                Add New Course
+              </h2>
               <button
                 onClick={() => setShowAddModal(false)}
                 className="grid h-8 w-8 place-items-center rounded-lg text-grayScale-400 transition-colors hover:bg-grayScale-100 hover:text-grayScale-600"
@@ -631,25 +719,31 @@ export function SubCoursesPage() {
 
             <div className="space-y-5 px-6 py-6">
               <div className="space-y-1.5">
-                <label className="text-sm font-semibold text-grayScale-600">Title</label>
+                <label className="text-sm font-semibold text-grayScale-600">
+                  Title
+                </label>
                 <Input
                   value={title}
                   onChange={(e) => setTitle(e.target.value)}
-                  placeholder="Enter sub-course title"
+                  placeholder="Enter course title"
                 />
               </div>
               <div className="space-y-1.5">
-                <label className="text-sm font-semibold text-grayScale-600">Description</label>
+                <label className="text-sm font-semibold text-grayScale-600">
+                  Description
+                </label>
                 <textarea
                   value={description}
                   onChange={(e) => setDescription(e.target.value)}
-                  placeholder="Enter sub-course description"
+                  placeholder="Enter course description"
                   className="w-full rounded-lg border border-grayScale-200 px-3 py-2.5 text-sm transition-colors focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500/20"
                   rows={3}
                 />
               </div>
               <div className="space-y-1.5">
-                <label className="text-sm font-semibold text-grayScale-600">Level</label>
+                <label className="text-sm font-semibold text-grayScale-600">
+                  Level
+                </label>
                 <Input
                   value={level}
                   onChange={(e) => setLevel(e.target.value)}
@@ -691,9 +785,14 @@ export function SubCoursesPage() {
           <div className="mx-4 w-full max-w-lg rounded-2xl bg-white shadow-2xl">
             <div className="flex items-center justify-between border-b border-grayScale-100 px-6 py-4">
               <div>
-                <h2 className="text-lg font-semibold text-grayScale-700">Prerequisites</h2>
+                <h2 className="text-lg font-semibold text-grayScale-700">
+                  Prerequisites
+                </h2>
                 <p className="mt-0.5 text-sm text-grayScale-400">
-                  Manage prerequisites for <span className="font-medium text-grayScale-600">{prereqSubCourse.title}</span>
+                  Manage prerequisites for{" "}
+                  <span className="font-medium text-grayScale-600">
+                    {prereqSubCourse.title}
+                  </span>
                 </p>
               </div>
               <button
@@ -708,14 +807,18 @@ export function SubCoursesPage() {
               {/* Add prerequisite */}
               {availablePrerequisites.length > 0 && (
                 <div className="mb-5">
-                  <label className="mb-1.5 block text-sm font-semibold text-grayScale-600">Add Prerequisite</label>
+                  <label className="mb-1.5 block text-sm font-semibold text-grayScale-600">
+                    Add Prerequisite
+                  </label>
                   <div className="flex gap-2">
                     <select
                       value={selectedPrereqId}
-                      onChange={(e) => setSelectedPrereqId(Number(e.target.value))}
+                      onChange={(e) =>
+                        setSelectedPrereqId(Number(e.target.value))
+                      }
                       className="flex-1 rounded-lg border border-grayScale-200 bg-white px-3 py-2.5 text-sm transition-colors focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500/20"
                     >
-                      <option value={0}>Select a sub-course...</option>
+                      <option value={0}>Select a course...</option>
                       {availablePrerequisites.map((sc) => (
                         <option key={sc.id} value={sc.id}>
                           {sc.title} {sc.level ? `(${sc.level})` : ""}
@@ -727,7 +830,11 @@ export function SubCoursesPage() {
                       onClick={handleAddPrerequisite}
                       disabled={prereqAdding || !selectedPrereqId}
                     >
-                      {prereqAdding ? <Loader2 className="h-4 w-4 animate-spin" /> : <Plus className="h-4 w-4" />}
+                      {prereqAdding ? (
+                        <Loader2 className="h-4 w-4 animate-spin" />
+                      ) : (
+                        <Plus className="h-4 w-4" />
+                      )}
                     </Button>
                   </div>
                 </div>
@@ -736,13 +843,21 @@ export function SubCoursesPage() {
               {/* Current prerequisites list */}
               {prereqLoading ? (
                 <div className="flex items-center justify-center py-8">
-                  <img src={spinnerSrc} alt="" className="h-8 w-8 animate-spin" />
+                  <img
+                    src={spinnerSrc}
+                    alt=""
+                    className="h-8 w-8 animate-spin"
+                  />
                 </div>
               ) : prerequisites.length === 0 ? (
                 <div className="rounded-xl border border-dashed border-grayScale-200 px-4 py-8 text-center">
                   <Link2 className="mx-auto h-8 w-8 text-grayScale-300" />
-                  <p className="mt-2 text-sm font-medium text-grayScale-500">No prerequisites</p>
-                  <p className="mt-0.5 text-xs text-grayScale-400">This sub-course is accessible without completing others first</p>
+                  <p className="mt-2 text-sm font-medium text-grayScale-500">
+                    No prerequisites
+                  </p>
+                  <p className="mt-0.5 text-xs text-grayScale-400">
+                    This course is accessible without completing others first
+                  </p>
                 </div>
               ) : (
                 <div className="space-y-2">
@@ -755,7 +870,9 @@ export function SubCoursesPage() {
                       className="flex items-center justify-between rounded-xl border border-grayScale-100 bg-grayScale-25 px-4 py-3 transition-colors hover:border-grayScale-200"
                     >
                       <div className="min-w-0 flex-1">
-                        <p className="text-sm font-medium text-grayScale-700 truncate">{prereq.prerequisite_title}</p>
+                        <p className="text-sm font-medium text-grayScale-700 truncate">
+                          {prereq.prerequisite_title}
+                        </p>
                         <div className="mt-0.5 flex items-center gap-2">
                           {prereq.prerequisite_level && (
                             <span className="rounded bg-brand-50 px-1.5 py-0.5 text-[11px] font-medium text-brand-600">
@@ -802,7 +919,9 @@ export function SubCoursesPage() {
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm">
           <div className="mx-4 w-full max-w-md rounded-2xl bg-white shadow-2xl">
             <div className="flex items-center justify-between border-b border-grayScale-100 px-6 py-4">
-              <h2 className="text-lg font-semibold text-grayScale-700">Edit Sub-course</h2>
+              <h2 className="text-lg font-semibold text-grayScale-700">
+                Edit Course
+              </h2>
               <button
                 onClick={() => setShowEditModal(false)}
                 className="grid h-8 w-8 place-items-center rounded-lg text-grayScale-400 transition-colors hover:bg-grayScale-100 hover:text-grayScale-600"
@@ -813,25 +932,31 @@ export function SubCoursesPage() {
 
             <div className="space-y-5 px-6 py-6">
               <div className="space-y-1.5">
-                <label className="text-sm font-semibold text-grayScale-600">Title</label>
+                <label className="text-sm font-semibold text-grayScale-600">
+                  Title
+                </label>
                 <Input
                   value={title}
                   onChange={(e) => setTitle(e.target.value)}
-                  placeholder="Enter sub-course title"
+                  placeholder="Enter course title"
                 />
               </div>
               <div className="space-y-1.5">
-                <label className="text-sm font-semibold text-grayScale-600">Description</label>
+                <label className="text-sm font-semibold text-grayScale-600">
+                  Description
+                </label>
                 <textarea
                   value={description}
                   onChange={(e) => setDescription(e.target.value)}
-                  placeholder="Enter sub-course description"
+                  placeholder="Enter course description"
                   className="w-full rounded-lg border border-grayScale-200 px-3 py-2.5 text-sm transition-colors focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500/20"
                   rows={3}
                 />
               </div>
               <div className="space-y-1.5">
-                <label className="text-sm font-semibold text-grayScale-600">Level</label>
+                <label className="text-sm font-semibold text-grayScale-600">
+                  Level
+                </label>
                 <Input
                   value={level}
                   onChange={(e) => setLevel(e.target.value)}
@@ -867,5 +992,5 @@ export function SubCoursesPage() {
         </div>
       )}
     </div>
-  )
+  );
 }
diff --git a/src/types/course.types.ts b/src/types/course.types.ts
index bafb59d..e7e6ce6 100644
--- a/src/types/course.types.ts
+++ b/src/types/course.types.ts
@@ -498,8 +498,8 @@ export interface GetLearningPathResponse {
 }
 
 export interface ReorderItem {
-  sub_course_id: number
-  display_order: number
+  id: number
+  position: number
 }
 
 // Ratings