diff --git a/src/api/courses.api.ts b/src/api/courses.api.ts
index 07c456b..cc6c51f 100644
--- a/src/api/courses.api.ts
+++ b/src/api/courses.api.ts
@@ -78,6 +78,26 @@ import type {
   CreateTopLevelCourseModuleResponse,
   CreateProgramCourseRequest,
   CreateProgramCourseResponse,
+  CreateExamPrepCatalogCourseRequest,
+  CreateExamPrepCatalogCourseResponse,
+  GetExamPrepCatalogCoursesResponse,
+  UpdateExamPrepCatalogCourseRequest,
+  UpdateExamPrepCatalogCourseResponse,
+  CreateExamPrepCatalogUnitRequest,
+  CreateExamPrepCatalogUnitResponse,
+  UpdateExamPrepCatalogUnitRequest,
+  UpdateExamPrepCatalogUnitResponse,
+  GetExamPrepCatalogUnitsResponse,
+  CreateExamPrepUnitModuleRequest,
+  CreateExamPrepUnitModuleResponse,
+  UpdateExamPrepUnitModuleRequest,
+  UpdateExamPrepUnitModuleResponse,
+  GetExamPrepUnitModulesResponse,
+  CreateExamPrepModuleLessonRequest,
+  CreateExamPrepModuleLessonResponse,
+  UpdateExamPrepModuleLessonRequest,
+  UpdateExamPrepModuleLessonResponse,
+  GetExamPrepModuleLessonsResponse,
   GetTopLevelModuleLessonsResponse,
   GetPracticesByParentContextResponse,
   CreateParentLinkedPracticeRequest,
@@ -447,6 +467,128 @@ export const createProgramCourse = (
   data: CreateProgramCourseRequest,
 ) => http.post<CreateProgramCourseResponse>(`/programs/${programId}/courses`, data)
 
+/** English proficiency catalog course — POST /exam-prep/catalog-courses */
+export const createExamPrepCatalogCourse = (
+  data: CreateExamPrepCatalogCourseRequest,
+) => http.post<CreateExamPrepCatalogCourseResponse>("/exam-prep/catalog-courses", data)
+
+/** English proficiency catalog courses — GET /exam-prep/catalog-courses */
+export const getExamPrepCatalogCourses = (params?: { limit?: number; offset?: number }) =>
+  http.get<GetExamPrepCatalogCoursesResponse>("/exam-prep/catalog-courses", { params })
+
+/** English proficiency catalog course — PUT /exam-prep/catalog-courses/:catalogCourseId */
+export const updateExamPrepCatalogCourse = (
+  catalogCourseId: number,
+  data: UpdateExamPrepCatalogCourseRequest,
+) =>
+  http.put<UpdateExamPrepCatalogCourseResponse>(
+    `/exam-prep/catalog-courses/${catalogCourseId}`,
+    data,
+  )
+
+/** English proficiency catalog course — DELETE /exam-prep/catalog-courses/:catalogCourseId */
+export const deleteExamPrepCatalogCourse = (catalogCourseId: number) =>
+  http.delete(`/exam-prep/catalog-courses/${catalogCourseId}`)
+
+/** English proficiency catalog unit — POST /exam-prep/catalog-courses/:catalogCourseId/units */
+export const createExamPrepCatalogUnit = (
+  catalogCourseId: number,
+  data: CreateExamPrepCatalogUnitRequest,
+) =>
+  http.post<CreateExamPrepCatalogUnitResponse>(
+    `/exam-prep/catalog-courses/${catalogCourseId}/units`,
+    data,
+  )
+
+/** English proficiency catalog units — GET /exam-prep/catalog-courses/:catalogCourseId/units */
+export const getExamPrepCatalogUnits = (
+  catalogCourseId: number,
+  params?: { limit?: number; offset?: number },
+) =>
+  http.get<GetExamPrepCatalogUnitsResponse>(
+    `/exam-prep/catalog-courses/${catalogCourseId}/units`,
+    { params },
+  )
+
+/** English proficiency unit — PUT /exam-prep/units/:unitId */
+export const updateExamPrepCatalogUnit = (
+  unitId: number,
+  data: UpdateExamPrepCatalogUnitRequest,
+) => http.put<UpdateExamPrepCatalogUnitResponse>(`/exam-prep/units/${unitId}`, data)
+
+/** English proficiency unit — DELETE /exam-prep/units/:unitId */
+export const deleteExamPrepCatalogUnit = (unitId: number) =>
+  http.delete(`/exam-prep/units/${unitId}`)
+
+/** English proficiency unit modules — POST /exam-prep/units/:unitId/modules */
+export const createExamPrepUnitModule = (
+  unitId: number,
+  data: CreateExamPrepUnitModuleRequest,
+) =>
+  http.post<CreateExamPrepUnitModuleResponse>(
+    `/exam-prep/units/${unitId}/modules`,
+    data,
+  )
+
+/** English proficiency unit modules — GET /exam-prep/units/:unitId/modules */
+export const getExamPrepUnitModules = (
+  unitId: number,
+  params?: { limit?: number; offset?: number },
+) =>
+  http.get<GetExamPrepUnitModulesResponse>(`/exam-prep/units/${unitId}/modules`, {
+    params,
+  })
+
+/** English proficiency module — PUT /exam-prep/modules/:moduleId */
+export const updateExamPrepUnitModule = (
+  moduleId: number,
+  data: UpdateExamPrepUnitModuleRequest,
+) =>
+  http.put<UpdateExamPrepUnitModuleResponse>(
+    `/exam-prep/modules/${moduleId}`,
+    data,
+  )
+
+/** English proficiency module — DELETE /exam-prep/modules/:moduleId */
+export const deleteExamPrepUnitModule = (moduleId: number) =>
+  http.delete(`/exam-prep/modules/${moduleId}`)
+
+/** English proficiency module lessons — GET /exam-prep/modules/:moduleId/lessons */
+export const getExamPrepModuleLessons = (
+  moduleId: number,
+  params?: { limit?: number; offset?: number },
+) =>
+  http.get<GetExamPrepModuleLessonsResponse>(
+    `/exam-prep/modules/${moduleId}/lessons`,
+    {
+      params,
+    },
+  )
+
+/** English proficiency module lesson — POST /exam-prep/modules/:moduleId/lessons */
+export const createExamPrepModuleLesson = (
+  moduleId: number,
+  data: CreateExamPrepModuleLessonRequest,
+) =>
+  http.post<CreateExamPrepModuleLessonResponse>(
+    `/exam-prep/modules/${moduleId}/lessons`,
+    data,
+  )
+
+/** English proficiency lesson — PUT /exam-prep/lessons/:lessonId */
+export const updateExamPrepModuleLesson = (
+  lessonId: number,
+  data: UpdateExamPrepModuleLessonRequest,
+) =>
+  http.put<UpdateExamPrepModuleLessonResponse>(
+    `/exam-prep/lessons/${lessonId}`,
+    data,
+  )
+
+/** English proficiency lesson — DELETE /exam-prep/lessons/:lessonId */
+export const deleteExamPrepModuleLesson = (lessonId: number) =>
+  http.delete(`/exam-prep/lessons/${lessonId}`)
+
 /** Top-level course resource (Learn English track) — PUT /courses/:id */
 export const updateTopLevelCourse = (courseId: number, data: UpdateTopLevelCourseRequest) =>
   http.put(`/courses/${courseId}`, data)
diff --git a/src/api/files.api.ts b/src/api/files.api.ts
index ec6a59d..101195c 100644
--- a/src/api/files.api.ts
+++ b/src/api/files.api.ts
@@ -44,6 +44,36 @@ export interface UploadMediaFromUrlPayload extends UploadMediaOptions {
   sourceUrl: string
 }
 
+const GOOGLE_DRIVE_HOSTS = new Set([
+  "drive.google.com",
+  "www.drive.google.com",
+])
+
+const getGoogleDriveFileId = (rawUrl: string): string | null => {
+  try {
+    const url = new URL(rawUrl.trim())
+    if (!GOOGLE_DRIVE_HOSTS.has(url.hostname.toLowerCase())) return null
+    const fromQuery = url.searchParams.get("id")?.trim()
+    if (fromQuery) return fromQuery
+    const fileMatch = url.pathname.match(/\/file\/d\/([^/]+)/i)
+    return fileMatch?.[1]?.trim() || null
+  } catch {
+    return null
+  }
+}
+
+const normalizeSourceUrlForUpload = (
+  mediaType: UploadMediaType,
+  sourceUrl: string,
+): string => {
+  const trimmed = sourceUrl.trim()
+  if (mediaType !== "image") return trimmed
+  const fileId = getGoogleDriveFileId(trimmed)
+  if (!fileId) return trimmed
+  // Use Drive thumbnail endpoint so backend receives actual image bytes, not HTML viewer.
+  return `https://drive.google.com/thumbnail?id=${encodeURIComponent(fileId)}&sz=w2048`
+}
+
 export const uploadMediaFile = (
   mediaType: UploadMediaType,
   file: File,
@@ -67,7 +97,7 @@ export const uploadMediaFromUrl = (
 ) =>
   http.post<UploadMediaResponse>("/files/upload", {
     media_type: mediaType,
-    source_url: payload.sourceUrl,
+    source_url: normalizeSourceUrlForUpload(mediaType, payload.sourceUrl),
     ...(mediaType === "video" && payload.title ? { title: payload.title } : {}),
     ...(mediaType === "video" && payload.description ? { description: payload.description } : {}),
   })
diff --git a/src/components/content-management/PracticeQuestionEditorFields.tsx b/src/components/content-management/PracticeQuestionEditorFields.tsx
index 4a63c3d..3635961 100644
--- a/src/components/content-management/PracticeQuestionEditorFields.tsx
+++ b/src/components/content-management/PracticeQuestionEditorFields.tsx
@@ -14,6 +14,8 @@ import { Select } from "../ui/select"
 import { Button } from "../ui/button"
 import { SpinnerIcon } from "../ui/spinner-icon"
 import { cn } from "../../lib/utils"
+import { ResolvedAudio } from "../media/ResolvedAudio"
+import { ResolvedImage } from "../media/ResolvedImage"
 
 export type PracticeQuestionEditorType = "MCQ" | "TRUE_FALSE" | "SHORT" | "AUDIO"
 export type PracticeQuestionEditorDifficulty = "EASY" | "MEDIUM" | "HARD"
@@ -815,7 +817,7 @@ export function PracticeQuestionEditorFields({
               disabled={controlsDisabled}
             />
             {voicePreviewUrl ? (
-              <audio controls src={voicePreviewUrl} className="h-10 w-full max-w-md" />
+              <ResolvedAudio controls src={voicePreviewUrl} className="h-10 w-full max-w-md" />
             ) : null}
           </div>
         </div>
@@ -862,7 +864,7 @@ export function PracticeQuestionEditorFields({
               disabled={controlsDisabled}
             />
             {samplePreviewUrl ? (
-              <audio controls src={samplePreviewUrl} className="h-10 w-full max-w-md" />
+              <ResolvedAudio controls src={samplePreviewUrl} className="h-10 w-full max-w-md" />
             ) : null}
           </div>
         </div>
@@ -898,7 +900,7 @@ export function PracticeQuestionEditorFields({
               disabled={controlsDisabled}
             />
             {imagePreviewUrl ? (
-              <img
+              <ResolvedImage
                 src={imagePreviewUrl}
                 alt=""
                 className="h-28 w-28 rounded-md border border-grayScale-200 object-cover"
diff --git a/src/components/media/ResolvedAudio.tsx b/src/components/media/ResolvedAudio.tsx
new file mode 100644
index 0000000..1d4a634
--- /dev/null
+++ b/src/components/media/ResolvedAudio.tsx
@@ -0,0 +1,33 @@
+import { useEffect, useState, type AudioHTMLAttributes } from "react"
+import { resolveDisplayMediaUrl } from "../../lib/mediaUrl"
+
+type ResolvedAudioProps = AudioHTMLAttributes<HTMLAudioElement> & {
+  src?: string | null
+}
+
+export function ResolvedAudio({ src, ...audioProps }: ResolvedAudioProps) {
+  const [resolvedSrc, setResolvedSrc] = useState("")
+
+  useEffect(() => {
+    let cancelled = false
+    ;(async () => {
+      const raw = (src ?? "").trim()
+      if (!raw) {
+        setResolvedSrc("")
+        return
+      }
+      try {
+        const next = await resolveDisplayMediaUrl(raw)
+        if (!cancelled) setResolvedSrc(next || raw)
+      } catch {
+        if (!cancelled) setResolvedSrc(raw)
+      }
+    })()
+    return () => {
+      cancelled = true
+    }
+  }, [src])
+
+  if (!resolvedSrc) return null
+  return <audio {...audioProps} src={resolvedSrc} />
+}
diff --git a/src/components/media/ResolvedImage.tsx b/src/components/media/ResolvedImage.tsx
new file mode 100644
index 0000000..ec11929
--- /dev/null
+++ b/src/components/media/ResolvedImage.tsx
@@ -0,0 +1,35 @@
+import { useEffect, useState, type ImgHTMLAttributes } from "react"
+import { resolveDisplayMediaUrl } from "../../lib/mediaUrl"
+
+type ResolvedImageProps = ImgHTMLAttributes<HTMLImageElement> & {
+  src?: string | null
+  fallbackSrc?: string
+}
+
+export function ResolvedImage({ src, fallbackSrc, ...imgProps }: ResolvedImageProps) {
+  const [resolvedSrc, setResolvedSrc] = useState("")
+
+  useEffect(() => {
+    let cancelled = false
+    ;(async () => {
+      const raw = (src ?? "").trim()
+      if (!raw) {
+        setResolvedSrc("")
+        return
+      }
+      try {
+        const next = await resolveDisplayMediaUrl(raw)
+        if (!cancelled) setResolvedSrc(next || raw)
+      } catch {
+        if (!cancelled) setResolvedSrc(raw)
+      }
+    })()
+    return () => {
+      cancelled = true
+    }
+  }, [src])
+
+  const finalSrc = resolvedSrc || fallbackSrc || ""
+  if (!finalSrc) return null
+  return <img {...imgProps} src={finalSrc} />
+}
diff --git a/src/lib/mediaUrl.ts b/src/lib/mediaUrl.ts
new file mode 100644
index 0000000..fa2b5ef
--- /dev/null
+++ b/src/lib/mediaUrl.ts
@@ -0,0 +1,40 @@
+import { refreshFileUrl, resolveFileUrl } from "../api/files.api"
+
+const HTTP_REGEX = /^https?:\/\//i
+
+export function isHttpUrl(value: string): boolean {
+  return HTTP_REGEX.test(value.trim())
+}
+
+export function isSignedMinioUrl(value: string): boolean {
+  const trimmed = value.trim()
+  if (!isHttpUrl(trimmed)) return false
+  try {
+    const url = new URL(trimmed)
+    return (
+      url.host === "s3.yimaruacademy.com" &&
+      (url.searchParams.has("X-Amz-Signature") || url.searchParams.has("X-Amz-Expires"))
+    )
+  } catch {
+    return false
+  }
+}
+
+export async function resolveDisplayMediaUrl(value: string): Promise<string> {
+  const trimmed = value.trim()
+  if (!trimmed) return ""
+
+  if (isHttpUrl(trimmed)) {
+    if (!isSignedMinioUrl(trimmed)) return trimmed
+    try {
+      const refreshed = await refreshFileUrl(trimmed)
+      const refreshedUrl = refreshed.data?.data?.url?.trim()
+      return refreshedUrl || trimmed
+    } catch {
+      return trimmed
+    }
+  }
+
+  const resolved = await resolveFileUrl(trimmed)
+  return resolved.data?.data?.url?.trim() || ""
+}
diff --git a/src/lib/practiceMedia.ts b/src/lib/practiceMedia.ts
index eabfd8a..d634317 100644
--- a/src/lib/practiceMedia.ts
+++ b/src/lib/practiceMedia.ts
@@ -1,4 +1,4 @@
-import { resolveFileUrl } from "../api/files.api"
+import { resolveDisplayMediaUrl } from "./mediaUrl"
 
 export function normalizeObjectKey(value: string): string {
   const trimmed = value.trim()
@@ -12,10 +12,7 @@ export function normalizeObjectKey(value: string): string {
 }
 
 export async function resolveMediaPreviewUrl(value: string): Promise<string> {
-  if (!value.trim()) return ""
-  if (value.startsWith("http://") || value.startsWith("https://")) return value
-  const key = normalizeObjectKey(value)
-  if (!key) return ""
-  const res = await resolveFileUrl(key)
-  return res.data?.data?.url ?? ""
+  const normalized = normalizeObjectKey(value)
+  if (!normalized) return ""
+  return resolveDisplayMediaUrl(normalized)
 }
diff --git a/src/lib/videoPreview.ts b/src/lib/videoPreview.ts
index 54f8ceb..e83eaf9 100644
--- a/src/lib/videoPreview.ts
+++ b/src/lib/videoPreview.ts
@@ -13,7 +13,15 @@ export function toVimeoEmbedUrl(rawUrl: string): string | null {
     const segments = parsed.pathname.split("/").filter(Boolean);
     const videoId = segments.find((segment) => /^\d+$/.test(segment));
     if (!videoId) return null;
-    const hash = parsed.searchParams.get("h");
+    // Vimeo private/unlisted links often come as /<videoId>/<hash> instead of ?h=<hash>.
+    const hashFromPath = (() => {
+      const videoIdx = segments.findIndex((segment) => segment === videoId);
+      if (videoIdx < 0) return null;
+      const maybeHash = segments[videoIdx + 1];
+      if (!maybeHash) return null;
+      return /^[a-zA-Z0-9]+$/.test(maybeHash) ? maybeHash : null;
+    })();
+    const hash = parsed.searchParams.get("h") || hashFromPath;
     return hash
       ? `https://player.vimeo.com/video/${videoId}?h=${encodeURIComponent(hash)}`
       : `https://player.vimeo.com/video/${videoId}`;
diff --git a/src/pages/content-management/CourseDetailPage.tsx b/src/pages/content-management/CourseDetailPage.tsx
index 76cf170..2a77790 100644
--- a/src/pages/content-management/CourseDetailPage.tsx
+++ b/src/pages/content-management/CourseDetailPage.tsx
@@ -348,23 +348,40 @@ export function CourseDetailPage() {
             Try again
           </Button>
         </div>
-      </div>
-    
-
-      <AddModuleModal
-        isOpen={isAddModuleOpen}
-        onClose={() => setIsAddModuleOpen(false)}
-      />
-      {/* Gradient Divider */}
-
-      {/* Gradient Grid */}
-      <div className="flex flex-warp gap-10">
-        {MODULES.map((module) => (
-          <Card
-            key={module.id}
-            className="group overflow-hidden border w-[330px] border-grayScale-50 shadow-sm hover:shadow-lg transition-all duration-300 rounded-[16px] bg-white flex flex-col h-full"
-          >
-            {/* Gradient Banner */}
+      ) : (
+        <>
+          <div className="flex flex-col justify-between gap-6 md:flex-row md:items-end">
+            <div className="min-w-0 flex-1">
+              <h1 className="text-2xl font-medium tracking-tight text-grayScale-900">
+                {displayTitle}
+              </h1>
+              <p className="mt-1 max-w-2xl text-sm font-medium text-grayScale-500">
+                {displayDescription}
+              </p>
+            </div>
+            <div className="flex items-center gap-4">
+              <Button
+                variant="outline"
+                className="rounded-[6px] border-brand-500 text-brand-500 "
+                onClick={() =>
+                  navigate(
+                    `/new-content/learn-english/${programIdParam}/courses/add-practice?backTo=modules&courseId=${courseIdParam}`,
+                  )
+                }
+              >
+                <Calendar className="h-4 w-4" />
+                Add Practice
+              </Button>
+              <Button
+                className="rounded-[6px] bg-brand-500 font-semibold hover:bg-brand-600"
+                onClick={() => setIsAddModuleOpen(true)}
+              >
+                <Plus className="h-4 w-4" />
+                Add Module
+              </Button>
+            </div>
+          </div>
+          <div className="relative">
             <div
               className="absolute inset-0 flex items-center"
               aria-hidden="true"
diff --git a/src/pages/content-management/CourseManagementPage.tsx b/src/pages/content-management/CourseManagementPage.tsx
index f423d1b..fa1c75b 100644
--- a/src/pages/content-management/CourseManagementPage.tsx
+++ b/src/pages/content-management/CourseManagementPage.tsx
@@ -1,3 +1,4 @@
+import { useCallback, useEffect, useRef, useState } from "react";
 import { Link, useParams, useNavigate } from "react-router-dom";
 import {
   ArrowLeft,
@@ -6,12 +7,15 @@ import {
   LayoutGrid,
   PlayCircle,
   ClipboardCheck,
+  Pencil,
+  Trash2,
   ChevronRight,
   ArrowRight,
   X,
 } from "lucide-react";
 import { Button } from "../../components/ui/button";
 import { Card } from "../../components/ui/card";
+import { Textarea } from "../../components/ui/textarea";
 import {
   Dialog,
   DialogContent,
@@ -22,6 +26,15 @@ import {
 } from "../../components/ui/dialog";
 import { Input } from "../../components/ui/input";
 import uploadIcon from "../../assets/icons/upload.png";
+import { toast } from "sonner";
+import { ResolvedImage } from "../../components/media/ResolvedImage";
+import {
+  createExamPrepCatalogUnit,
+  updateExamPrepCatalogUnit,
+  deleteExamPrepCatalogUnit,
+  getExamPrepCatalogUnits,
+} from "../../api/courses.api";
+import { uploadImageFile } from "../../api/files.api";
 
 export function CourseManagementPage() {
   const navigate = useNavigate();
@@ -29,6 +42,38 @@ export function CourseManagementPage() {
     programType: string;
     courseId: string;
   }>();
+  const catalogCourseId = Number(courseId);
+  const [addUnitOpen, setAddUnitOpen] = useState(false);
+  const [createName, setCreateName] = useState("");
+  const [createDescription, setCreateDescription] = useState("");
+  const [createThumbnail, setCreateThumbnail] = useState("");
+  const [creating, setCreating] = useState(false);
+  const [uploadingThumbnail, setUploadingThumbnail] = useState(false);
+  const createThumbnailFileInputRef = useRef<HTMLInputElement>(null);
+  const [units, setUnits] = useState<
+    Array<{
+      id: number;
+      name: string;
+      description: string;
+      thumbnail: string;
+      sortOrder: number;
+      modules: number;
+      lessons: number;
+      practices: number;
+      gradient: string;
+    }>
+  >([]);
+  const [unitsLoading, setUnitsLoading] = useState(false);
+  const [editingUnitId, setEditingUnitId] = useState<number | null>(null);
+  const [editName, setEditName] = useState("");
+  const [editDescription, setEditDescription] = useState("");
+  const [editThumbnail, setEditThumbnail] = useState("");
+  const [editSortOrder, setEditSortOrder] = useState("1");
+  const [savingEdit, setSavingEdit] = useState(false);
+  const [uploadingEditThumbnail, setUploadingEditThumbnail] = useState(false);
+  const editThumbnailFileInputRef = useRef<HTMLInputElement>(null);
+  const [deletingUnitId, setDeletingUnitId] = useState<number | null>(null);
+  const [deletingUnit, setDeletingUnit] = useState(false);
 
   // Mock data for display titles
   const courseTitles: Record<string, string> = {
@@ -39,41 +84,289 @@ export function CourseManagementPage() {
   const courseDisplayName =
     courseTitles[courseId || ""] || "Duolingo English Test";
 
-  const units = [
-    {
-      id: "unit1",
-      name: "Greetings & Introductions",
-      description:
-        "Learn basic greetings, self-introductions, and polite expressions in everyday situations.",
-      modules: 3,
-      videos: 9,
-      practices: 9,
-      gradient:
-        "linear-gradient(135deg, rgba(158, 40, 145, 0.5) 0%, rgba(158, 40, 145, 0.8) 100%)",
-    },
-    {
-      id: "unit2",
-      name: "Speaking",
-      description:
-        "Core speaking practice and skill building for natural pronunciation and fluency.",
-      modules: 3,
-      videos: 9,
-      practices: 9,
-      gradient:
-        "linear-gradient(135deg, rgba(79, 70, 229, 0.5) 0%, rgba(79, 70, 229, 0.8) 100%)",
-    },
-    {
-      id: "unit3",
-      name: "Reading",
-      description:
-        "Reading comprehension and vocabulary improvement through various text types.",
-      modules: 3,
-      videos: 9,
-      practices: 9,
-      gradient:
-        "linear-gradient(135deg, rgba(124, 58, 237, 0.5) 0%, rgba(124, 58, 237, 0.8) 100%)",
-    },
-  ];
+  const loadUnits = useCallback(async () => {
+    if (!Number.isFinite(catalogCourseId) || catalogCourseId < 1) {
+      setUnits([]);
+      return;
+    }
+    setUnitsLoading(true);
+    try {
+      const response = await getExamPrepCatalogUnits(catalogCourseId, {
+        limit: 20,
+        offset: 0,
+      });
+      const rows = response.data?.data?.units;
+      const list = Array.isArray(rows) ? rows : [];
+      setUnits(
+        list.map((row, index) => ({
+          id: Number(row.id),
+          name: row.name?.trim() || `Unit ${row.id}`,
+          description: row.description?.trim() || "—",
+          thumbnail: row.thumbnail?.trim() || "",
+          sortOrder: Number(row.sort_order ?? 0),
+          modules: Number(row.modules_count ?? 0),
+          lessons: Number(row.lessons_count ?? row.videos_count ?? 0),
+          practices: Number(row.practices_count ?? 0),
+          gradient:
+            index % 3 === 1
+              ? "linear-gradient(135deg, rgba(79, 70, 229, 0.5) 0%, rgba(79, 70, 229, 0.8) 100%)"
+              : index % 3 === 2
+                ? "linear-gradient(135deg, rgba(124, 58, 237, 0.5) 0%, rgba(124, 58, 237, 0.8) 100%)"
+                : "linear-gradient(135deg, rgba(158, 40, 145, 0.5) 0%, rgba(158, 40, 145, 0.8) 100%)",
+        })),
+      );
+    } catch (error) {
+      console.error(error);
+      toast.error("Failed to load units");
+      setUnits([]);
+    } finally {
+      setUnitsLoading(false);
+    }
+  }, [catalogCourseId]);
+
+  useEffect(() => {
+    void loadUnits();
+  }, [loadUnits]);
+
+  const isHttpUrl = (value: string) =>
+    value.startsWith("http://") || value.startsWith("https://");
+
+  const isMinioUrl = (value: string) => {
+    try {
+      const url = new URL(value);
+      return url.host === "s3.yimaruacademy.com";
+    } catch {
+      return false;
+    }
+  };
+
+  const resolveThumbnailToMinioUrl = async (rawValue: string) => {
+    const trimmed = rawValue.trim();
+    if (!trimmed) return "";
+    if (!isHttpUrl(trimmed) || isMinioUrl(trimmed)) return trimmed;
+    const uploaded = await uploadImageFile(trimmed);
+    const uploadedUrl = uploaded.data?.data?.url?.trim();
+    if (!uploadedUrl) throw new Error("Failed to upload thumbnail URL to MinIO");
+    return uploadedUrl;
+  };
+
+  const clearCreateUnitForm = () => {
+    setCreateName("");
+    setCreateDescription("");
+    setCreateThumbnail("");
+    if (createThumbnailFileInputRef.current) {
+      createThumbnailFileInputRef.current.value = "";
+    }
+  };
+
+  const handleCreateUnitThumbnailFile = async (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    const file = event.target.files?.[0];
+    event.target.value = "";
+    if (!file) return;
+    if (!file.type.startsWith("image/")) {
+      toast.error("Please choose an image file");
+      return;
+    }
+    const maxBytes = 5 * 1024 * 1024;
+    if (file.size > maxBytes) {
+      toast.error("Image is too large", { description: "Maximum size is 5 MB." });
+      return;
+    }
+    setUploadingThumbnail(true);
+    try {
+      const res = await uploadImageFile(file);
+      const url = res.data?.data?.url?.trim();
+      if (!url) throw new Error("Upload did not return a file URL");
+      setCreateThumbnail(url);
+      toast.success("Thumbnail uploaded");
+    } catch (error: unknown) {
+      console.error(error);
+      const message =
+        (error as { response?: { data?: { message?: string } } })?.response?.data
+          ?.message ?? "Failed to upload thumbnail";
+      toast.error(message);
+    } finally {
+      setUploadingThumbnail(false);
+    }
+  };
+
+  const handleCreateUnit = async () => {
+    if (!Number.isFinite(catalogCourseId) || catalogCourseId < 1) {
+      toast.error("Invalid catalog course");
+      return;
+    }
+    const name = createName.trim();
+    if (!name) {
+      toast.error("Unit name is required");
+      return;
+    }
+    setCreating(true);
+    try {
+      const minioThumbnail = await resolveThumbnailToMinioUrl(createThumbnail);
+      const response = await createExamPrepCatalogUnit(catalogCourseId, {
+        name,
+        description: createDescription.trim() || null,
+        thumbnail: minioThumbnail || null,
+      });
+      void response;
+      await loadUnits();
+      toast.success("Unit created");
+      clearCreateUnitForm();
+      setAddUnitOpen(false);
+    } catch (error: unknown) {
+      console.error(error);
+      const message =
+        (error as { response?: { data?: { message?: string } } })?.response?.data
+          ?.message ?? "Failed to create unit";
+      toast.error(message);
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  const autoUploadCreateThumbnailUrl = async (rawValue: string) => {
+    const trimmed = rawValue.trim();
+    if (!trimmed || !isHttpUrl(trimmed) || isMinioUrl(trimmed)) return;
+    setUploadingThumbnail(true);
+    try {
+      const minioUrl = await resolveThumbnailToMinioUrl(trimmed);
+      if (minioUrl && minioUrl !== trimmed) {
+        setCreateThumbnail(minioUrl);
+        toast.success("Thumbnail uploaded to MinIO");
+      }
+    } catch (error: unknown) {
+      console.error(error);
+      const message =
+        (error as { response?: { data?: { message?: string } } })?.response?.data
+          ?.message ?? "Failed to upload URL to MinIO";
+      toast.error(message);
+    } finally {
+      setUploadingThumbnail(false);
+    }
+  };
+
+  const autoUploadEditThumbnailUrl = async (rawValue: string) => {
+    const trimmed = rawValue.trim();
+    if (!trimmed || !isHttpUrl(trimmed) || isMinioUrl(trimmed)) return;
+    setUploadingEditThumbnail(true);
+    try {
+      const minioUrl = await resolveThumbnailToMinioUrl(trimmed);
+      if (minioUrl && minioUrl !== trimmed) {
+        setEditThumbnail(minioUrl);
+        toast.success("Thumbnail uploaded to MinIO");
+      }
+    } catch (error: unknown) {
+      console.error(error);
+      const message =
+        (error as { response?: { data?: { message?: string } } })?.response?.data
+          ?.message ?? "Failed to upload URL to MinIO";
+      toast.error(message);
+    } finally {
+      setUploadingEditThumbnail(false);
+    }
+  };
+
+  const openEditUnit = (unit: (typeof units)[number]) => {
+    setEditingUnitId(unit.id);
+    setEditName(unit.name ?? "");
+    setEditDescription(unit.description ?? "");
+    setEditThumbnail(unit.thumbnail ?? "");
+    setEditSortOrder(String(unit.sortOrder ?? 1));
+  };
+
+  const closeEditUnit = () => {
+    if (savingEdit || uploadingEditThumbnail) return;
+    setEditingUnitId(null);
+    setEditName("");
+    setEditDescription("");
+    setEditThumbnail("");
+    setEditSortOrder("1");
+  };
+
+  const handleEditUnitThumbnailFile = async (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    const file = event.target.files?.[0];
+    event.target.value = "";
+    if (!file) return;
+    if (!file.type.startsWith("image/")) {
+      toast.error("Please choose an image file");
+      return;
+    }
+    setUploadingEditThumbnail(true);
+    try {
+      const res = await uploadImageFile(file);
+      const url = res.data?.data?.url?.trim();
+      if (!url) throw new Error("Upload did not return a file URL");
+      setEditThumbnail(url);
+      toast.success("Thumbnail uploaded");
+    } catch (error: unknown) {
+      console.error(error);
+      const message =
+        (error as { response?: { data?: { message?: string } } })?.response?.data
+          ?.message ?? "Failed to upload thumbnail";
+      toast.error(message);
+    } finally {
+      setUploadingEditThumbnail(false);
+    }
+  };
+
+  const handleSaveEditUnit = async () => {
+    if (!editingUnitId) return;
+    const name = editName.trim();
+    if (!name) {
+      toast.error("Unit name is required");
+      return;
+    }
+    const sortOrderNum = Number(editSortOrder);
+    if (!Number.isFinite(sortOrderNum) || sortOrderNum < 0) {
+      toast.error("Sort order must be a valid number");
+      return;
+    }
+
+    setSavingEdit(true);
+    try {
+      const minioThumbnail = await resolveThumbnailToMinioUrl(editThumbnail);
+      await updateExamPrepCatalogUnit(editingUnitId, {
+        name,
+        description: editDescription.trim() || null,
+        thumbnail: minioThumbnail || null,
+        sort_order: sortOrderNum,
+      });
+      await loadUnits();
+      toast.success("Unit updated");
+      closeEditUnit();
+    } catch (error: unknown) {
+      console.error(error);
+      const message =
+        (error as { response?: { data?: { message?: string } } })?.response?.data
+          ?.message ?? "Failed to update unit";
+      toast.error(message);
+    } finally {
+      setSavingEdit(false);
+    }
+  };
+
+  const handleDeleteUnit = async () => {
+    if (!deletingUnitId) return;
+    setDeletingUnit(true);
+    try {
+      await deleteExamPrepCatalogUnit(deletingUnitId);
+      await loadUnits();
+      toast.success("Unit deleted");
+      setDeletingUnitId(null);
+    } catch (error: unknown) {
+      console.error(error);
+      const message =
+        (error as { response?: { data?: { message?: string } } })?.response?.data
+          ?.message ?? "Failed to delete unit";
+      toast.error(message);
+    } finally {
+      setDeletingUnit(false);
+    }
+  };
 
   return (
     <div className="space-y-8 animate-in fade-in duration-500 pb-10">
@@ -98,29 +391,51 @@ export function CourseManagementPage() {
         </div>
 
         <div className="flex items-center gap-3 pt-2">
-          <Dialog>
+          <Dialog
+            open={addUnitOpen}
+            onOpenChange={(open) => {
+              if (!open && (creating || uploadingThumbnail)) return;
+              setAddUnitOpen(open);
+            }}
+          >
             <DialogTrigger asChild>
               <Button className="h-10 px-6 rounded-[6px] bg-brand-500 font-bold text-white shadow-sm hover:bg-brand-600 transition-all flex items-center gap-2">
                 <Plus className="h-5 w-5" />
                 Add Unit
               </Button>
             </DialogTrigger>
-            <DialogContent className="max-w-[600px] p-0 border-none rounded-[16px] overflow-hidden">
-              <div className="bg-white">
-                <DialogHeader className="px-8 py-6 border-b border-grayScale-200 flex flex-row items-center justify-between">
+            <DialogContent className="flex max-h-[min(90vh,calc(100dvh-2rem))] max-w-[600px] flex-col gap-0 overflow-hidden rounded-[16px] border-none p-0">
+              <div className="flex min-h-0 flex-1 flex-col bg-white">
+                <DialogHeader className="shrink-0 px-8 py-6 border-b border-grayScale-200 flex flex-row items-center justify-between">
                   <DialogTitle className="text-[20px] font-bold relative top-2 text-grayScale-900">
-                    Create Courses
+                    Create Unit
                   </DialogTitle>
                 </DialogHeader>
 
-                <div className="p-8 space-y-8">
+                <div className="min-h-0 flex-1 overflow-y-auto p-8 space-y-8">
                   <div className="space-y-3">
                     <label className="text-[15px] text-grayScale-800">
                       Unit Name
                     </label>
                     <Input
+                      value={createName}
+                      onChange={(e) => setCreateName(e.target.value)}
                       placeholder="e.g. Reading"
                       className="h-12 border-grayScale-400 rounded-[8px] px-4 placeholder:text-grayScale-400 text-[15px] focus:ring-brand-500/20"
+                      disabled={creating || uploadingThumbnail}
+                    />
+                  </div>
+                  <div className="space-y-3">
+                    <label className="text-[15px] text-grayScale-800">
+                      Description
+                    </label>
+                    <Textarea
+                      value={createDescription}
+                      onChange={(e) => setCreateDescription(e.target.value)}
+                      placeholder="Short unit description"
+                      rows={4}
+                      className="min-h-[96px] rounded-[8px] border-grayScale-400"
+                      disabled={creating || uploadingThumbnail}
                     />
                   </div>
 
@@ -128,7 +443,20 @@ export function CourseManagementPage() {
                     <label className="text-[15px] text-grayScale-800">
                       Thumbnail
                     </label>
-                    <div className="relative group cursor-pointer">
+                    <input
+                      ref={createThumbnailFileInputRef}
+                      type="file"
+                      accept="image/*"
+                      className="sr-only"
+                      onChange={(e) => void handleCreateUnitThumbnailFile(e)}
+                      disabled={creating || uploadingThumbnail}
+                    />
+                    <button
+                      type="button"
+                      className="relative group w-full cursor-pointer"
+                      onClick={() => createThumbnailFileInputRef.current?.click()}
+                      disabled={creating || uploadingThumbnail}
+                    >
                       <div className="flex flex-col items-center justify-center rounded-[12px] border-2 border-dashed border-grayScale-400 bg-white py-8 px-10 transition-all ">
                         <div className="mb-4">
                           <img
@@ -139,31 +467,62 @@ export function CourseManagementPage() {
                         </div>
                         <p className="text-[15px]">
                           <span className="text-brand-500 font-bold hover:underline">
-                            Click to upload
+                            {uploadingThumbnail ? "Uploading…" : "Click to upload"}
                           </span>{" "}
                           <span className="text-grayScale-500">
-                            or drag and drop
+                            or paste a URL below
                           </span>
                         </p>
                         <p className="mt-1.5 text-[12px] text-grayScale-400 uppercase tracking-widest">
-                          JPG, PNG (MAX 1 MB)
+                          JPG, PNG (MAX 5 MB)
                         </p>
                       </div>
-                    </div>
+                    </button>
+                    {createThumbnail.trim() ? (
+                      <div className="overflow-hidden rounded-xl border border-grayScale-200 bg-grayScale-50">
+                        <ResolvedImage
+                          src={createThumbnail.trim()}
+                          alt=""
+                          className="h-28 w-full object-cover"
+                        />
+                      </div>
+                    ) : null}
+                    <Input
+                      value={createThumbnail}
+                      onChange={(e) => setCreateThumbnail(e.target.value)}
+                      onPaste={(event) => {
+                        const pasted = event.clipboardData?.getData("text")?.trim();
+                        if (!pasted) return;
+                        setTimeout(() => {
+                          void autoUploadCreateThumbnailUrl(pasted);
+                        }, 0);
+                      }}
+                      placeholder="Optional thumbnail URL (or leave empty for null)"
+                      className="h-12 border-grayScale-400 rounded-[8px] px-4 placeholder:text-grayScale-400 text-[15px] focus:ring-brand-500/20"
+                      disabled={creating || uploadingThumbnail}
+                    />
                   </div>
                 </div>
 
-                <div className="px-8 py-6 bg-grayScale-50/30 border-t border-grayScale-50 flex justify-end gap-3">
+                <div className="shrink-0 px-8 py-6 bg-grayScale-50/30 border-t border-grayScale-50 flex justify-end gap-3">
                   <DialogClose asChild>
                     <Button
+                      type="button"
                       variant="outline"
                       className="h-11 px-8 rounded-[8px] border-grayScale-200 text-grayScale-700 font-bold"
+                      disabled={creating || uploadingThumbnail}
+                      onClick={clearCreateUnitForm}
                     >
                       Cancel
                     </Button>
                   </DialogClose>
-                  <Button className="h-11 px-8 rounded-[8px] bg-brand-500 text-white font-bold hover:bg-brand-600">
-                    Create Courses
+                  <Button
+                    type="button"
+                    className="h-11 px-8 rounded-[8px] bg-brand-500 text-white font-bold hover:bg-brand-600"
+                    disabled={creating || uploadingThumbnail}
+                    onClick={() => void handleCreateUnit()}
+                  >
+                    {creating ? "Creating..." : "Create Unit"}
                   </Button>
                 </div>
               </div>
@@ -200,16 +559,61 @@ export function CourseManagementPage() {
 
       {/* Grid of Units */}
       <div className="flex flex-wrap gap-4 pt-4">
-        {units.map((unit) => (
+        {unitsLoading ? (
+          <p className="text-sm text-grayScale-500">Loading units...</p>
+        ) : units.length === 0 ? (
+          <div className="w-full rounded-xl border border-dashed border-grayScale-200 bg-grayScale-50/50 px-6 py-14 text-center">
+            <p className="text-sm font-medium text-grayScale-600">
+              No units for this course yet
+            </p>
+            <p className="mt-1 text-sm text-grayScale-400">
+              Create your first unit to start organizing modules, lessons, and practices.
+            </p>
+          </div>
+        ) : (
+          units.map((unit) => (
           <Card
             key={unit.id}
-            className="group flex w-[400px] flex-col h-full bg-white rounded-[12px] border border-grayScale-100 overflow-hidden shadow-sm hover:shadow-md transition-all"
+            className="group relative flex w-[400px] flex-col h-full bg-white rounded-[12px] border border-grayScale-100 overflow-hidden shadow-sm hover:shadow-md transition-all"
           >
+            <div className="absolute right-2 top-2 z-10 flex translate-y-1 gap-1 opacity-0 pointer-events-none transition-all duration-300 ease-out group-hover:translate-y-0 group-hover:opacity-100 group-hover:pointer-events-auto">
+              <Button
+                type="button"
+                variant="secondary"
+                size="icon"
+                className="h-8 w-8 rounded-md bg-white/95 text-grayScale-600 shadow-sm transition-colors hover:bg-white"
+                onClick={() => openEditUnit(unit)}
+                aria-label={`Edit ${unit.name}`}
+              >
+                <Pencil className="h-3.5 w-3.5" />
+              </Button>
+              <Button
+                type="button"
+                variant="secondary"
+                size="icon"
+                className="h-8 w-8 rounded-md bg-white/95 text-red-600 shadow-sm transition-colors hover:bg-red-50"
+                onClick={() => setDeletingUnitId(unit.id)}
+                aria-label={`Delete ${unit.name}`}
+              >
+                <Trash2 className="h-3.5 w-3.5" />
+              </Button>
+            </div>
             {/* Gradient Header */}
             <div
-              className="h-36 w-full transition-transform duration-500 "
+              className="relative h-36 w-full overflow-hidden transition-transform duration-500"
               style={{ background: unit.gradient }}
-            />
+            >
+              {unit.thumbnail ? (
+                <ResolvedImage
+                  src={unit.thumbnail}
+                  alt={`${unit.name} thumbnail`}
+                  className="h-full w-full object-cover"
+                  onError={(event) => {
+                    event.currentTarget.style.display = "none";
+                  }}
+                />
+              ) : null}
+            </div>
 
             <div className="p-4 flex flex-col flex-1 space-y-6">
               <div className="space-y-3 flex-1">
@@ -232,7 +636,7 @@ export function CourseManagementPage() {
                 <div className="h-9 px-3 rounded-[6px] bg-grayScale-100 border border-grayScale-100 flex items-center gap-2 text-grayScale-600">
                   <PlayCircle className="h-3.5 w-3.5 text-grayScale-400" />
                   <span className="text-[12px] font-bold">
-                    {unit.videos} Videos
+                    {unit.lessons} Lessons
                   </span>
                 </div>
                 <div className="h-9 px-3 rounded-[6px] bg-grayScale-100 border border-grayScale-100 flex items-center gap-2 text-grayScale-600">
@@ -257,8 +661,169 @@ export function CourseManagementPage() {
               </Button>
             </div>
           </Card>
-        ))}
+          ))
+        )}
       </div>
+
+      <Dialog
+        open={editingUnitId !== null}
+        onOpenChange={(open) => {
+          if (!open && (savingEdit || uploadingEditThumbnail)) return;
+          if (!open) closeEditUnit();
+        }}
+      >
+        <DialogContent className="flex max-h-[min(90vh,calc(100dvh-2rem))] max-w-[600px] flex-col gap-0 overflow-hidden rounded-[16px] border-none p-0">
+          <div className="flex min-h-0 flex-1 flex-col bg-white">
+            <DialogHeader className="shrink-0 px-8 py-6 border-b border-grayScale-200 flex flex-row items-center justify-between">
+              <DialogTitle className="text-[20px] font-bold relative top-2 text-grayScale-900">
+                Edit Unit
+              </DialogTitle>
+            </DialogHeader>
+            <div className="min-h-0 flex-1 overflow-y-auto p-8 space-y-8">
+              <div className="space-y-3">
+                <label className="text-[15px] text-grayScale-800">Unit Name</label>
+                <Input
+                  value={editName}
+                  onChange={(e) => setEditName(e.target.value)}
+                  className="h-12 border-grayScale-400 rounded-[8px] px-4"
+                  disabled={savingEdit || uploadingEditThumbnail}
+                />
+              </div>
+              <div className="space-y-3">
+                <label className="text-[15px] text-grayScale-800">Description</label>
+                <Textarea
+                  value={editDescription}
+                  onChange={(e) => setEditDescription(e.target.value)}
+                  rows={4}
+                  className="min-h-[96px] rounded-[8px] border-grayScale-400"
+                  disabled={savingEdit || uploadingEditThumbnail}
+                />
+              </div>
+              <div className="space-y-3">
+                <label className="text-[15px] text-grayScale-800">Sort Order</label>
+                <Input
+                  type="number"
+                  min={0}
+                  value={editSortOrder}
+                  onChange={(e) => setEditSortOrder(e.target.value)}
+                  className="h-12 border-grayScale-400 rounded-[8px] px-4"
+                  disabled={savingEdit || uploadingEditThumbnail}
+                />
+              </div>
+              <div className="space-y-3">
+                <label className="text-[15px] text-grayScale-800">Thumbnail</label>
+                <input
+                  ref={editThumbnailFileInputRef}
+                  type="file"
+                  accept="image/*"
+                  className="sr-only"
+                  onChange={(e) => void handleEditUnitThumbnailFile(e)}
+                  disabled={savingEdit || uploadingEditThumbnail}
+                />
+                <button
+                  type="button"
+                  className="relative group w-full cursor-pointer"
+                  onClick={() => editThumbnailFileInputRef.current?.click()}
+                  disabled={savingEdit || uploadingEditThumbnail}
+                >
+                  <div className="flex flex-col items-center justify-center rounded-[12px] border-2 border-dashed border-grayScale-400 bg-white py-8 px-10 transition-all ">
+                    <div className="mb-4">
+                      <img src={uploadIcon} alt="Upload icon" className="h-10 w-10" />
+                    </div>
+                    <p className="text-[15px]">
+                      <span className="text-brand-500 font-bold hover:underline">
+                        {uploadingEditThumbnail ? "Uploading…" : "Click to upload"}
+                      </span>{" "}
+                      <span className="text-grayScale-500">or paste a URL below</span>
+                    </p>
+                    <p className="mt-1.5 text-[12px] text-grayScale-400 uppercase tracking-widest">
+                      JPG, PNG (MAX 5 MB)
+                    </p>
+                  </div>
+                </button>
+                {editThumbnail.trim() ? (
+                  <div className="overflow-hidden rounded-xl border border-grayScale-200 bg-grayScale-50">
+                    <ResolvedImage
+                      src={editThumbnail.trim()}
+                      alt=""
+                      className="h-28 w-full object-cover"
+                    />
+                  </div>
+                ) : null}
+                <Input
+                  value={editThumbnail}
+                  onChange={(e) => setEditThumbnail(e.target.value)}
+                  onPaste={(event) => {
+                    const pasted = event.clipboardData?.getData("text")?.trim();
+                    if (!pasted) return;
+                    setTimeout(() => {
+                      void autoUploadEditThumbnailUrl(pasted);
+                    }, 0);
+                  }}
+                  placeholder="Optional thumbnail URL (or leave empty for null)"
+                  className="h-12 border-grayScale-400 rounded-[8px] px-4"
+                  disabled={savingEdit || uploadingEditThumbnail}
+                />
+              </div>
+            </div>
+            <div className="shrink-0 px-8 py-6 bg-grayScale-50/30 border-t border-grayScale-50 flex justify-end gap-3">
+              <Button
+                type="button"
+                variant="outline"
+                className="h-11 px-8 rounded-[8px] border-grayScale-200 text-grayScale-700 font-bold"
+                disabled={savingEdit || uploadingEditThumbnail}
+                onClick={closeEditUnit}
+              >
+                Cancel
+              </Button>
+              <Button
+                type="button"
+                className="h-11 px-8 rounded-[8px] bg-brand-500 text-white font-bold hover:bg-brand-600"
+                disabled={savingEdit || uploadingEditThumbnail}
+                onClick={() => void handleSaveEditUnit()}
+              >
+                {savingEdit ? "Saving..." : "Save Changes"}
+              </Button>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      <Dialog
+        open={deletingUnitId !== null}
+        onOpenChange={(open) => {
+          if (!open && !deletingUnit) setDeletingUnitId(null);
+        }}
+      >
+        <DialogContent className="max-w-md rounded-[16px] border-none p-0 overflow-hidden">
+          <div className="bg-white">
+            <DialogHeader className="border-b border-grayScale-100 px-6 py-5">
+              <DialogTitle className="text-lg font-bold text-grayScale-900">
+                Delete Unit
+              </DialogTitle>
+            </DialogHeader>
+            <div className="px-6 py-6 text-sm text-grayScale-600">
+              Are you sure you want to delete this unit? This action cannot be undone.
+            </div>
+            <div className="flex justify-end gap-3 border-t border-grayScale-100 px-6 py-4">
+              <Button
+                variant="outline"
+                onClick={() => setDeletingUnitId(null)}
+                disabled={deletingUnit}
+              >
+                Cancel
+              </Button>
+              <Button
+                className="bg-red-500 hover:bg-red-600"
+                onClick={() => void handleDeleteUnit()}
+                disabled={deletingUnit}
+              >
+                {deletingUnit ? "Deleting..." : "Delete"}
+              </Button>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }
diff --git a/src/pages/content-management/CourseModuleDetailPage.tsx b/src/pages/content-management/CourseModuleDetailPage.tsx
index fdda4ab..870c42c 100644
--- a/src/pages/content-management/CourseModuleDetailPage.tsx
+++ b/src/pages/content-management/CourseModuleDetailPage.tsx
@@ -1,40 +1,30 @@
-import { useState } from "react";
-import { ArrowLeft, Plus, FileText, MoreVertical, Edit2 } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { ArrowLeft, Plus, FileText, Pencil, Trash2 } from "lucide-react";
 import { Link, useNavigate, useParams } from "react-router-dom";
 import { Button } from "../../components/ui/button";
 import { cn } from "../../lib/utils";
 import { Card } from "../../components/ui/card";
-
-const MOCK_VIDEOS = [
-  {
-    id: "v1",
-    title: "1.1 Introduction to Formal Greetings",
-    duration: "08:45",
-    status: "Draft",
-    thumbnailColor: "bg-[#CBD5E1]",
-  },
-  {
-    id: "v2",
-    title: "1.2 Understanding Email Structure",
-    duration: "08:45",
-    status: "Published",
-    thumbnailColor: "bg-[#DBEAFE]",
-  },
-  {
-    id: "v3",
-    title: "1.3 Common Business Idioms",
-    duration: "08:45",
-    status: "Published",
-    thumbnailColor: "bg-[#FEF3C7]",
-  },
-  {
-    id: "v4",
-    title: "1.4 Video Conference Etiquette",
-    duration: "08:45",
-    status: "Published",
-    thumbnailColor: "bg-[#FCE7F3]",
-  },
-];
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DialogClose,
+} from "../../components/ui/dialog";
+import { Input } from "../../components/ui/input";
+import { Textarea } from "../../components/ui/textarea";
+import uploadIcon from "../../assets/icons/upload.png";
+import { toast } from "sonner";
+import { ResolvedImage } from "../../components/media/ResolvedImage";
+import { VideoCard } from "./components/VideoCard";
+import {
+  createExamPrepModuleLesson,
+  updateExamPrepModuleLesson,
+  deleteExamPrepModuleLesson,
+  getExamPrepModuleLessons,
+} from "../../api/courses.api";
+import { uploadImageFile, uploadVideoFile } from "../../api/files.api";
 
 const MOCK_PRACTICES = [
   {
@@ -61,19 +51,402 @@ export function CourseModuleDetailPage() {
     unitId: string;
     moduleId: string;
   }>();
+  const parsedModuleId = Number(moduleId);
 
   const [activeTab, setActiveTab] = useState<"video" | "practice">("video");
-  const [activeFilter, setActiveFilter] = useState("All");
+  const [lessonsLoading, setLessonsLoading] = useState(false);
+  const [lessons, setLessons] = useState<
+    Array<{
+      id: number;
+      title: string;
+      videoUrl: string;
+      description: string;
+      thumbnail: string;
+      sortOrder: number;
+      gradient: string;
+    }>
+  >([]);
+  const [createLessonOpen, setCreateLessonOpen] = useState(false);
+  const [createTitle, setCreateTitle] = useState("");
+  const [createVideoUrl, setCreateVideoUrl] = useState("");
+  const [createThumbnail, setCreateThumbnail] = useState("");
+  const [createDescription, setCreateDescription] = useState("");
+  const [creatingLesson, setCreatingLesson] = useState(false);
+  const [uploadingThumbnail, setUploadingThumbnail] = useState(false);
+  const [uploadingVideo, setUploadingVideo] = useState(false);
+  const createThumbnailFileInputRef = useRef<HTMLInputElement>(null);
+  const createVideoFileInputRef = useRef<HTMLInputElement>(null);
+  const [editingLessonId, setEditingLessonId] = useState<number | null>(null);
+  const [editTitle, setEditTitle] = useState("");
+  const [editVideoUrl, setEditVideoUrl] = useState("");
+  const [editThumbnail, setEditThumbnail] = useState("");
+  const [editDescription, setEditDescription] = useState("");
+  const [editSortOrder, setEditSortOrder] = useState("1");
+  const [savingEdit, setSavingEdit] = useState(false);
+  const [uploadingEditThumbnail, setUploadingEditThumbnail] = useState(false);
+  const [uploadingEditVideo, setUploadingEditVideo] = useState(false);
+  const editThumbnailFileInputRef = useRef<HTMLInputElement>(null);
+  const editVideoFileInputRef = useRef<HTMLInputElement>(null);
+  const [deletingLessonId, setDeletingLessonId] = useState<number | null>(null);
+  const [deletingLesson, setDeletingLesson] = useState(false);
 
   const moduleTitle = "Module 1: Basic Phrases";
   const moduleDescription = "Learn essential phrases for daily conversations.";
 
-  const content = activeTab === "video" ? MOCK_VIDEOS : MOCK_PRACTICES;
-  const filteredContent = content.filter((item) => {
-    if (activeFilter === "All") return true;
-    if (activeFilter === "Drafts") return item.status === "Draft";
-    return item.status === activeFilter;
-  });
+  const isHttpUrl = (value: string) =>
+    value.startsWith("http://") || value.startsWith("https://");
+
+  const isMinioUrl = (value: string) => {
+    try {
+      const url = new URL(value);
+      return url.host === "s3.yimaruacademy.com";
+    } catch {
+      return false;
+    }
+  };
+
+  const resolveThumbnailToMinioUrl = async (rawValue: string) => {
+    const trimmed = rawValue.trim();
+    if (!trimmed) return "";
+    if (!isHttpUrl(trimmed) || isMinioUrl(trimmed)) return trimmed;
+    const uploaded = await uploadImageFile(trimmed);
+    const uploadedUrl = uploaded.data?.data?.url?.trim();
+    if (!uploadedUrl) throw new Error("Failed to upload thumbnail URL to MinIO");
+    return uploadedUrl;
+  };
+
+  const loadLessons = useCallback(async () => {
+    if (!Number.isFinite(parsedModuleId) || parsedModuleId < 1) {
+      setLessons([]);
+      return;
+    }
+    setLessonsLoading(true);
+    try {
+      const response = await getExamPrepModuleLessons(parsedModuleId, {
+        limit: 20,
+        offset: 0,
+      });
+      const rows = response.data?.data?.lessons;
+      const list = Array.isArray(rows) ? rows : [];
+      setLessons(
+        list.map((row, index) => ({
+          id: Number(row.id),
+          title: row.title?.trim() || `Lesson ${row.id}`,
+          videoUrl: row.video_url?.trim() || "",
+          description: row.description?.trim() || "—",
+          thumbnail: row.thumbnail?.trim() || "",
+          sortOrder: Number(row.sort_order ?? 0),
+          gradient:
+            index % 3 === 1
+              ? "linear-gradient(135deg, rgba(79, 70, 229, 0.35) 0%, rgba(79, 70, 229, 0.6) 100%)"
+              : index % 3 === 2
+                ? "linear-gradient(135deg, rgba(124, 58, 237, 0.35) 0%, rgba(124, 58, 237, 0.6) 100%)"
+                : "linear-gradient(135deg, rgba(158, 40, 145, 0.35) 0%, rgba(158, 40, 145, 0.6) 100%)",
+        })),
+      );
+    } catch (error) {
+      console.error(error);
+      toast.error("Failed to load lessons");
+      setLessons([]);
+    } finally {
+      setLessonsLoading(false);
+    }
+  }, [parsedModuleId]);
+
+  useEffect(() => {
+    if (activeTab !== "video") return;
+    void loadLessons();
+  }, [activeTab, loadLessons]);
+
+  const clearCreateLessonForm = () => {
+    setCreateTitle("");
+    setCreateVideoUrl("");
+    setCreateThumbnail("");
+    setCreateDescription("");
+    if (createThumbnailFileInputRef.current) {
+      createThumbnailFileInputRef.current.value = "";
+    }
+    if (createVideoFileInputRef.current) {
+      createVideoFileInputRef.current.value = "";
+    }
+  };
+
+  const handleCreateLessonVideoFile = async (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    const file = event.target.files?.[0];
+    event.target.value = "";
+    if (!file) return;
+    if (!file.type.startsWith("video/")) {
+      toast.error("Please choose a video file");
+      return;
+    }
+    setUploadingVideo(true);
+    try {
+      const res = await uploadVideoFile(file, {
+        title: createTitle.trim() || "Lesson video",
+        description: createDescription.trim() || undefined,
+      });
+      const finalUrl =
+        res.data?.data?.url?.trim() || res.data?.data?.embed_url?.trim() || "";
+      if (!finalUrl) throw new Error("Upload did not return a video URL");
+      setCreateVideoUrl(finalUrl);
+      toast.success("Video uploaded");
+    } catch (error: unknown) {
+      console.error(error);
+      const message =
+        (error as { response?: { data?: { message?: string } } })?.response?.data
+          ?.message ?? "Failed to upload video";
+      toast.error(message);
+    } finally {
+      setUploadingVideo(false);
+    }
+  };
+
+  const handleCreateLessonThumbnailFile = async (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    const file = event.target.files?.[0];
+    event.target.value = "";
+    if (!file) return;
+    if (!file.type.startsWith("image/")) {
+      toast.error("Please choose an image file");
+      return;
+    }
+    setUploadingThumbnail(true);
+    try {
+      const res = await uploadImageFile(file);
+      const url = res.data?.data?.url?.trim();
+      if (!url) throw new Error("Upload did not return a file URL");
+      setCreateThumbnail(url);
+      toast.success("Thumbnail uploaded");
+    } catch (error: unknown) {
+      console.error(error);
+      const message =
+        (error as { response?: { data?: { message?: string } } })?.response?.data
+          ?.message ?? "Failed to upload thumbnail";
+      toast.error(message);
+    } finally {
+      setUploadingThumbnail(false);
+    }
+  };
+
+  const autoUploadCreateThumbnailUrl = async (rawValue: string) => {
+    const trimmed = rawValue.trim();
+    if (!trimmed || !isHttpUrl(trimmed) || isMinioUrl(trimmed)) return;
+    setUploadingThumbnail(true);
+    try {
+      const minioUrl = await resolveThumbnailToMinioUrl(trimmed);
+      if (minioUrl && minioUrl !== trimmed) {
+        setCreateThumbnail(minioUrl);
+        toast.success("Thumbnail uploaded to MinIO");
+      }
+    } catch (error: unknown) {
+      console.error(error);
+      const message =
+        (error as { response?: { data?: { message?: string } } })?.response?.data
+          ?.message ?? "Failed to upload URL to MinIO";
+      toast.error(message);
+    } finally {
+      setUploadingThumbnail(false);
+    }
+  };
+
+  const handleCreateLesson = async () => {
+    if (!Number.isFinite(parsedModuleId) || parsedModuleId < 1) {
+      toast.error("Invalid module");
+      return;
+    }
+    const title = createTitle.trim();
+    const videoUrl = createVideoUrl.trim();
+    if (!title) {
+      toast.error("Lesson title is required");
+      return;
+    }
+    if (!videoUrl) {
+      toast.error("Video URL is required");
+      return;
+    }
+
+    setCreatingLesson(true);
+    try {
+      const minioThumbnail = await resolveThumbnailToMinioUrl(createThumbnail);
+      await createExamPrepModuleLesson(parsedModuleId, {
+        title,
+        video_url: videoUrl,
+        thumbnail: minioThumbnail || null,
+        description: createDescription.trim() || null,
+      });
+      await loadLessons();
+      toast.success("Lesson created");
+      clearCreateLessonForm();
+      setCreateLessonOpen(false);
+    } catch (error: unknown) {
+      console.error(error);
+      const message =
+        (error as { response?: { data?: { message?: string } } })?.response?.data
+          ?.message ?? "Failed to create lesson";
+      toast.error(message);
+    } finally {
+      setCreatingLesson(false);
+    }
+  };
+
+  const openEditLesson = (lesson: (typeof lessons)[number]) => {
+    setEditingLessonId(lesson.id);
+    setEditTitle(lesson.title ?? "");
+    setEditVideoUrl(lesson.videoUrl ?? "");
+    setEditThumbnail(lesson.thumbnail ?? "");
+    setEditDescription(lesson.description ?? "");
+    setEditSortOrder(String(lesson.sortOrder ?? 1));
+  };
+
+  const closeEditLesson = () => {
+    if (savingEdit || uploadingEditThumbnail || uploadingEditVideo) return;
+    setEditingLessonId(null);
+    setEditTitle("");
+    setEditVideoUrl("");
+    setEditThumbnail("");
+    setEditDescription("");
+    setEditSortOrder("1");
+  };
+
+  const handleEditLessonVideoFile = async (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    const file = event.target.files?.[0];
+    event.target.value = "";
+    if (!file) return;
+    if (!file.type.startsWith("video/")) {
+      toast.error("Please choose a video file");
+      return;
+    }
+    setUploadingEditVideo(true);
+    try {
+      const res = await uploadVideoFile(file, {
+        title: editTitle.trim() || "Lesson video",
+        description: editDescription.trim() || undefined,
+      });
+      const finalUrl =
+        res.data?.data?.url?.trim() || res.data?.data?.embed_url?.trim() || "";
+      if (!finalUrl) throw new Error("Upload did not return a video URL");
+      setEditVideoUrl(finalUrl);
+      toast.success("Video uploaded");
+    } catch (error: unknown) {
+      console.error(error);
+      const message =
+        (error as { response?: { data?: { message?: string } } })?.response?.data
+          ?.message ?? "Failed to upload video";
+      toast.error(message);
+    } finally {
+      setUploadingEditVideo(false);
+    }
+  };
+
+  const handleEditLessonThumbnailFile = async (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    const file = event.target.files?.[0];
+    event.target.value = "";
+    if (!file) return;
+    if (!file.type.startsWith("image/")) {
+      toast.error("Please choose an image file");
+      return;
+    }
+    setUploadingEditThumbnail(true);
+    try {
+      const res = await uploadImageFile(file);
+      const url = res.data?.data?.url?.trim();
+      if (!url) throw new Error("Upload did not return a file URL");
+      setEditThumbnail(url);
+      toast.success("Thumbnail uploaded");
+    } catch (error: unknown) {
+      console.error(error);
+      const message =
+        (error as { response?: { data?: { message?: string } } })?.response?.data
+          ?.message ?? "Failed to upload thumbnail";
+      toast.error(message);
+    } finally {
+      setUploadingEditThumbnail(false);
+    }
+  };
+
+  const autoUploadEditThumbnailUrl = async (rawValue: string) => {
+    const trimmed = rawValue.trim();
+    if (!trimmed || !isHttpUrl(trimmed) || isMinioUrl(trimmed)) return;
+    setUploadingEditThumbnail(true);
+    try {
+      const minioUrl = await resolveThumbnailToMinioUrl(trimmed);
+      if (minioUrl && minioUrl !== trimmed) {
+        setEditThumbnail(minioUrl);
+        toast.success("Thumbnail uploaded to MinIO");
+      }
+    } catch (error: unknown) {
+      console.error(error);
+      const message =
+        (error as { response?: { data?: { message?: string } } })?.response?.data
+          ?.message ?? "Failed to upload URL to MinIO";
+      toast.error(message);
+    } finally {
+      setUploadingEditThumbnail(false);
+    }
+  };
+
+  const handleSaveEditLesson = async () => {
+    if (!editingLessonId) return;
+    const title = editTitle.trim();
+    if (!title) {
+      toast.error("Lesson title is required");
+      return;
+    }
+    const sortOrderNum = Number(editSortOrder);
+    if (!Number.isFinite(sortOrderNum) || sortOrderNum < 0) {
+      toast.error("Sort order must be a valid number");
+      return;
+    }
+
+    setSavingEdit(true);
+    try {
+      const minioThumbnail = await resolveThumbnailToMinioUrl(editThumbnail);
+      await updateExamPrepModuleLesson(editingLessonId, {
+        title,
+        video_url: editVideoUrl.trim() || null,
+        thumbnail: minioThumbnail || null,
+        description: editDescription.trim() || null,
+        sort_order: sortOrderNum,
+      });
+      await loadLessons();
+      toast.success("Lesson updated");
+      closeEditLesson();
+    } catch (error: unknown) {
+      console.error(error);
+      const message =
+        (error as { response?: { data?: { message?: string } } })?.response?.data
+          ?.message ?? "Failed to update lesson";
+      toast.error(message);
+    } finally {
+      setSavingEdit(false);
+    }
+  };
+
+  const handleDeleteLesson = async () => {
+    if (!deletingLessonId) return;
+    setDeletingLesson(true);
+    try {
+      await deleteExamPrepModuleLesson(deletingLessonId);
+      await loadLessons();
+      toast.success("Lesson deleted");
+      setDeletingLessonId(null);
+    } catch (error: unknown) {
+      console.error(error);
+      const message =
+        (error as { response?: { data?: { message?: string } } })?.response?.data
+          ?.message ?? "Failed to delete lesson";
+      toast.error(message);
+    } finally {
+      setDeletingLesson(false);
+    }
+  };
 
   return (
     <div className="space-y-8 animate-in fade-in duration-500 pb-10">
@@ -110,10 +483,188 @@ export function CourseModuleDetailPage() {
             <FileText className="h-5 w-5" />
             Attach Practice
           </Button>
-          <Button className="h-10 px-6 rounded-[6px] bg-brand-500 font-bold text-white shadow-md hover:bg-brand-600 transition-all flex items-center gap-2 text-[15px]">
-            <Plus className="h-5 w-5" />
-            Add Video
-          </Button>
+          <Dialog
+            open={createLessonOpen}
+            onOpenChange={(open) => {
+              if (!open && (creatingLesson || uploadingThumbnail || uploadingVideo))
+                return;
+              setCreateLessonOpen(open);
+            }}
+          >
+            <DialogTrigger asChild>
+              <Button className="h-10 px-6 rounded-[6px] bg-brand-500 font-bold text-white shadow-md hover:bg-brand-600 transition-all flex items-center gap-2 text-[15px]">
+                <Plus className="h-5 w-5" />
+                Add Lesson
+              </Button>
+            </DialogTrigger>
+            <DialogContent className="flex max-h-[min(90vh,calc(100dvh-2rem))] max-w-[600px] flex-col gap-0 overflow-hidden rounded-[16px] border-none p-0">
+              <div className="flex min-h-0 flex-1 flex-col bg-white">
+                <DialogHeader className="shrink-0 px-8 py-6 border-b border-grayScale-200 flex flex-row items-center justify-between">
+                  <DialogTitle className="text-[20px] font-bold relative top-2 text-grayScale-900">
+                    Create Lesson
+                  </DialogTitle>
+                </DialogHeader>
+                <div className="min-h-0 flex-1 overflow-y-auto p-8 space-y-8">
+                  <div className="space-y-3">
+                    <label className="text-[15px] text-grayScale-800">
+                      Lesson Title
+                    </label>
+                    <Input
+                      value={createTitle}
+                      onChange={(e) => setCreateTitle(e.target.value)}
+                      placeholder="e.g. Intro lesson"
+                      className="h-12 border-grayScale-400 rounded-[8px] px-4"
+                      disabled={creatingLesson || uploadingThumbnail || uploadingVideo}
+                    />
+                  </div>
+                  <div className="space-y-3">
+                    <label className="text-[15px] text-grayScale-800">
+                      Video URL
+                    </label>
+                    <input
+                      ref={createVideoFileInputRef}
+                      type="file"
+                      accept="video/*"
+                      className="sr-only"
+                      onChange={(e) => void handleCreateLessonVideoFile(e)}
+                      disabled={creatingLesson || uploadingThumbnail || uploadingVideo}
+                    />
+                    <button
+                      type="button"
+                      className="relative group w-full cursor-pointer"
+                      onClick={() => createVideoFileInputRef.current?.click()}
+                      disabled={creatingLesson || uploadingThumbnail || uploadingVideo}
+                    >
+                      <div className="flex flex-col items-center justify-center rounded-[12px] border-2 border-dashed border-grayScale-400 bg-white py-8 px-10 transition-all">
+                        <div className="mb-4">
+                          <img
+                            src={uploadIcon}
+                            alt="Upload icon"
+                            className="h-10 w-10"
+                          />
+                        </div>
+                        <p className="text-[15px]">
+                          <span className="text-brand-500 font-bold hover:underline">
+                            {uploadingVideo ? "Uploading…" : "Click to upload"}
+                          </span>{" "}
+                          <span className="text-grayScale-500">
+                            video from your computer
+                          </span>
+                        </p>
+                        <p className="mt-1.5 text-[12px] text-grayScale-400 uppercase tracking-widest">
+                          MP4, MOV, WEBM
+                        </p>
+                      </div>
+                    </button>
+                    <Input
+                      value={createVideoUrl}
+                      onChange={(e) => setCreateVideoUrl(e.target.value)}
+                      placeholder="https://example.com/video"
+                      className="h-12 border-grayScale-400 rounded-[8px] px-4"
+                      disabled={creatingLesson || uploadingThumbnail || uploadingVideo}
+                    />
+                  </div>
+                  <div className="space-y-3">
+                    <label className="text-[15px] text-grayScale-800">
+                      Description
+                    </label>
+                    <Textarea
+                      value={createDescription}
+                      onChange={(e) => setCreateDescription(e.target.value)}
+                      placeholder="Optional lesson description"
+                      rows={4}
+                      className="min-h-[96px] rounded-[8px] border-grayScale-400"
+                      disabled={creatingLesson || uploadingThumbnail || uploadingVideo}
+                    />
+                  </div>
+                  <div className="space-y-3">
+                    <label className="text-[15px] text-grayScale-800">
+                      Thumbnail
+                    </label>
+                    <input
+                      ref={createThumbnailFileInputRef}
+                      type="file"
+                      accept="image/*"
+                      className="sr-only"
+                      onChange={(e) => void handleCreateLessonThumbnailFile(e)}
+                      disabled={creatingLesson || uploadingThumbnail || uploadingVideo}
+                    />
+                    <button
+                      type="button"
+                      className="relative group w-full cursor-pointer"
+                      onClick={() => createThumbnailFileInputRef.current?.click()}
+                      disabled={creatingLesson || uploadingThumbnail || uploadingVideo}
+                    >
+                      <div className="flex flex-col items-center justify-center rounded-[12px] border-2 border-dashed border-grayScale-400 bg-white py-8 px-10 transition-all">
+                        <div className="mb-4">
+                          <img
+                            src={uploadIcon}
+                            alt="Upload icon"
+                            className="h-10 w-10"
+                          />
+                        </div>
+                        <p className="text-[15px]">
+                          <span className="text-brand-500 font-bold hover:underline">
+                            {uploadingThumbnail ? "Uploading…" : "Click to upload"}
+                          </span>{" "}
+                          <span className="text-grayScale-500">
+                            or paste a URL below
+                          </span>
+                        </p>
+                        <p className="mt-1.5 text-[12px] text-grayScale-400 uppercase tracking-widest">
+                          JPG, PNG (MAX 5 MB)
+                        </p>
+                      </div>
+                    </button>
+                    {createThumbnail.trim() ? (
+                      <div className="overflow-hidden rounded-xl border border-grayScale-200 bg-grayScale-50">
+                        <ResolvedImage
+                          src={createThumbnail.trim()}
+                          alt=""
+                          className="h-28 w-full object-cover"
+                        />
+                      </div>
+                    ) : null}
+                    <Input
+                      value={createThumbnail}
+                      onChange={(e) => setCreateThumbnail(e.target.value)}
+                      onPaste={(event) => {
+                        const pasted = event.clipboardData?.getData("text")?.trim();
+                        if (!pasted) return;
+                        setTimeout(() => {
+                          void autoUploadCreateThumbnailUrl(pasted);
+                        }, 0);
+                      }}
+                      placeholder="Optional thumbnail URL (or leave empty for null)"
+                      className="h-12 border-grayScale-400 rounded-[8px] px-4"
+                      disabled={creatingLesson || uploadingThumbnail || uploadingVideo}
+                    />
+                  </div>
+                </div>
+                <div className="shrink-0 px-8 py-6 bg-grayScale-50/30 border-t border-grayScale-50 flex justify-end gap-3">
+                  <DialogClose asChild>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      className="h-11 px-8 rounded-[8px] border-grayScale-200 text-grayScale-700 font-bold"
+                      disabled={creatingLesson || uploadingThumbnail || uploadingVideo}
+                      onClick={clearCreateLessonForm}
+                    >
+                      Cancel
+                    </Button>
+                  </DialogClose>
+                  <Button
+                    type="button"
+                    className="h-11 px-8 rounded-[8px] bg-brand-500 text-white font-bold hover:bg-brand-600"
+                    disabled={creatingLesson || uploadingThumbnail || uploadingVideo}
+                    onClick={() => void handleCreateLesson()}
+                  >
+                    {creatingLesson ? "Creating..." : "Create Lesson"}
+                  </Button>
+                </div>
+              </div>
+            </DialogContent>
+          </Dialog>
         </div>
       </div>
 
@@ -128,7 +679,7 @@ export function CourseModuleDetailPage() {
               : "text-grayScale-400 hover:text-grayScale-600",
           )}
         >
-          Video
+          Lesson
         </button>
         <button
           onClick={() => setActiveTab("practice")}
@@ -143,40 +694,245 @@ export function CourseModuleDetailPage() {
         </button>
       </div>
 
-      {/* Filter Bar */}
-      <div className="bg-white border border-grayScale-100 rounded-[16px] p-4 flex items-center gap-8 shadow-sm">
-        <div className="text-[12px] font-bold text-grayScale-300 uppercase tracking-widest pl-4">
-          STATUS:
-        </div>
-        <div className="flex items-center gap-2">
-          {["All", "Published", "Drafts", "Archived"].map((filter) => (
-            <button
-              key={filter}
-              onClick={() => setActiveFilter(filter)}
-              className={cn(
-                "px-5 py-2 rounded-full text-[13px] font-bold transition-all",
-                activeFilter === filter
-                  ? "bg-brand-500 text-white shadow-md shadow-brand-500/20"
-                  : "bg-grayScale-100 text-grayScale-500 hover:bg-grayScale-200",
-              )}
-            >
-              {filter}
-            </button>
-          ))}
-        </div>
-      </div>
-
       {/* Grid of Content */}
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 pt-4">
-        {filteredContent.map((item) => (
-          <ContentCard key={item.id} {...item} />
-        ))}
+        {activeTab === "video" ? (
+          lessonsLoading ? (
+            <p className="text-sm text-grayScale-500">Loading lessons...</p>
+          ) : lessons.length === 0 ? (
+            <div className="col-span-full rounded-xl border border-dashed border-grayScale-200 bg-grayScale-50/50 px-6 py-14 text-center">
+              <p className="text-sm font-medium text-grayScale-600">
+                No lessons for this module yet
+              </p>
+              <p className="mt-1 text-sm text-grayScale-400">
+                Create your first lesson to start building this module.
+              </p>
+            </div>
+          ) : (
+            lessons.map((lesson) => (
+              <VideoCard
+                key={lesson.id}
+                title={lesson.title}
+                thumbnailUrl={lesson.thumbnail}
+                videoUrl={lesson.videoUrl}
+                thumbnailGradient={lesson.gradient}
+                hoverModuleActions
+                onEdit={() => openEditLesson(lesson)}
+                onDelete={() => setDeletingLessonId(lesson.id)}
+              />
+            ))
+          )
+        ) : (
+          MOCK_PRACTICES.map((item) => <PracticeCard key={item.id} {...item} />)
+        )}
       </div>
+
+      <Dialog
+        open={editingLessonId !== null}
+        onOpenChange={(open) => {
+          if (!open && (savingEdit || uploadingEditThumbnail || uploadingEditVideo))
+            return;
+          if (!open) closeEditLesson();
+        }}
+      >
+        <DialogContent className="flex max-h-[min(90vh,calc(100dvh-2rem))] max-w-[600px] flex-col gap-0 overflow-hidden rounded-[16px] border-none p-0">
+          <div className="flex min-h-0 flex-1 flex-col bg-white">
+            <DialogHeader className="shrink-0 px-8 py-6 border-b border-grayScale-200 flex flex-row items-center justify-between">
+              <DialogTitle className="text-[20px] font-bold relative top-2 text-grayScale-900">
+                Edit Lesson
+              </DialogTitle>
+            </DialogHeader>
+            <div className="min-h-0 flex-1 overflow-y-auto p-8 space-y-8">
+              <div className="space-y-3">
+                <label className="text-[15px] text-grayScale-800">Lesson Title</label>
+                <Input
+                  value={editTitle}
+                  onChange={(e) => setEditTitle(e.target.value)}
+                  className="h-12 border-grayScale-400 rounded-[8px] px-4"
+                  disabled={savingEdit || uploadingEditThumbnail || uploadingEditVideo}
+                />
+              </div>
+              <div className="space-y-3">
+                <label className="text-[15px] text-grayScale-800">Video URL</label>
+                <input
+                  ref={editVideoFileInputRef}
+                  type="file"
+                  accept="video/*"
+                  className="sr-only"
+                  onChange={(e) => void handleEditLessonVideoFile(e)}
+                  disabled={savingEdit || uploadingEditThumbnail || uploadingEditVideo}
+                />
+                <button
+                  type="button"
+                  className="relative group w-full cursor-pointer"
+                  onClick={() => editVideoFileInputRef.current?.click()}
+                  disabled={savingEdit || uploadingEditThumbnail || uploadingEditVideo}
+                >
+                  <div className="flex flex-col items-center justify-center rounded-[12px] border-2 border-dashed border-grayScale-400 bg-white py-8 px-10 transition-all">
+                    <div className="mb-4">
+                      <img src={uploadIcon} alt="Upload icon" className="h-10 w-10" />
+                    </div>
+                    <p className="text-[15px]">
+                      <span className="text-brand-500 font-bold hover:underline">
+                        {uploadingEditVideo ? "Uploading…" : "Click to upload"}
+                      </span>{" "}
+                      <span className="text-grayScale-500">
+                        video from your computer
+                      </span>
+                    </p>
+                    <p className="mt-1.5 text-[12px] text-grayScale-400 uppercase tracking-widest">
+                      MP4, MOV, WEBM
+                    </p>
+                  </div>
+                </button>
+                <Input
+                  value={editVideoUrl}
+                  onChange={(e) => setEditVideoUrl(e.target.value)}
+                  placeholder="https://example.com/video"
+                  className="h-12 border-grayScale-400 rounded-[8px] px-4"
+                  disabled={savingEdit || uploadingEditThumbnail || uploadingEditVideo}
+                />
+              </div>
+              <div className="space-y-3">
+                <label className="text-[15px] text-grayScale-800">Description</label>
+                <Textarea
+                  value={editDescription}
+                  onChange={(e) => setEditDescription(e.target.value)}
+                  rows={4}
+                  className="min-h-[96px] rounded-[8px] border-grayScale-400"
+                  disabled={savingEdit || uploadingEditThumbnail || uploadingEditVideo}
+                />
+              </div>
+              <div className="space-y-3">
+                <label className="text-[15px] text-grayScale-800">Sort Order</label>
+                <Input
+                  type="number"
+                  min={0}
+                  value={editSortOrder}
+                  onChange={(e) => setEditSortOrder(e.target.value)}
+                  className="h-12 border-grayScale-400 rounded-[8px] px-4"
+                  disabled={savingEdit || uploadingEditThumbnail || uploadingEditVideo}
+                />
+              </div>
+              <div className="space-y-3">
+                <label className="text-[15px] text-grayScale-800">Thumbnail</label>
+                <input
+                  ref={editThumbnailFileInputRef}
+                  type="file"
+                  accept="image/*"
+                  className="sr-only"
+                  onChange={(e) => void handleEditLessonThumbnailFile(e)}
+                  disabled={savingEdit || uploadingEditThumbnail || uploadingEditVideo}
+                />
+                <button
+                  type="button"
+                  className="relative group w-full cursor-pointer"
+                  onClick={() => editThumbnailFileInputRef.current?.click()}
+                  disabled={savingEdit || uploadingEditThumbnail || uploadingEditVideo}
+                >
+                  <div className="flex flex-col items-center justify-center rounded-[12px] border-2 border-dashed border-grayScale-400 bg-white py-8 px-10 transition-all">
+                    <div className="mb-4">
+                      <img src={uploadIcon} alt="Upload icon" className="h-10 w-10" />
+                    </div>
+                    <p className="text-[15px]">
+                      <span className="text-brand-500 font-bold hover:underline">
+                        {uploadingEditThumbnail ? "Uploading…" : "Click to upload"}
+                      </span>{" "}
+                      <span className="text-grayScale-500">or paste a URL below</span>
+                    </p>
+                    <p className="mt-1.5 text-[12px] text-grayScale-400 uppercase tracking-widest">
+                      JPG, PNG (MAX 5 MB)
+                    </p>
+                  </div>
+                </button>
+                {editThumbnail.trim() ? (
+                  <div className="overflow-hidden rounded-xl border border-grayScale-200 bg-grayScale-50">
+                    <ResolvedImage
+                      src={editThumbnail.trim()}
+                      alt=""
+                      className="h-28 w-full object-cover"
+                    />
+                  </div>
+                ) : null}
+                <Input
+                  value={editThumbnail}
+                  onChange={(e) => setEditThumbnail(e.target.value)}
+                  onPaste={(event) => {
+                    const pasted = event.clipboardData?.getData("text")?.trim();
+                    if (!pasted) return;
+                    setTimeout(() => {
+                      void autoUploadEditThumbnailUrl(pasted);
+                    }, 0);
+                  }}
+                  placeholder="Optional thumbnail URL (or leave empty for null)"
+                  className="h-12 border-grayScale-400 rounded-[8px] px-4"
+                  disabled={savingEdit || uploadingEditThumbnail || uploadingEditVideo}
+                />
+              </div>
+            </div>
+            <div className="shrink-0 px-8 py-6 bg-grayScale-50/30 border-t border-grayScale-50 flex justify-end gap-3">
+              <Button
+                type="button"
+                variant="outline"
+                className="h-11 px-8 rounded-[8px] border-grayScale-200 text-grayScale-700 font-bold"
+                disabled={savingEdit || uploadingEditThumbnail || uploadingEditVideo}
+                onClick={closeEditLesson}
+              >
+                Cancel
+              </Button>
+              <Button
+                type="button"
+                className="h-11 px-8 rounded-[8px] bg-brand-500 text-white font-bold hover:bg-brand-600"
+                disabled={savingEdit || uploadingEditThumbnail || uploadingEditVideo}
+                onClick={() => void handleSaveEditLesson()}
+              >
+                {savingEdit ? "Saving..." : "Save Changes"}
+              </Button>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      <Dialog
+        open={deletingLessonId !== null}
+        onOpenChange={(open) => {
+          if (!open && !deletingLesson) setDeletingLessonId(null);
+        }}
+      >
+        <DialogContent className="max-w-md rounded-[16px] border-none p-0 overflow-hidden">
+          <div className="bg-white">
+            <DialogHeader className="border-b border-grayScale-100 px-6 py-5">
+              <DialogTitle className="text-lg font-bold text-grayScale-900">
+                Delete Lesson
+              </DialogTitle>
+            </DialogHeader>
+            <div className="px-6 py-6 text-sm text-grayScale-600">
+              Are you sure you want to delete this lesson? This action cannot be undone.
+            </div>
+            <div className="flex justify-end gap-3 border-t border-grayScale-100 px-6 py-4">
+              <Button
+                variant="outline"
+                onClick={() => setDeletingLessonId(null)}
+                disabled={deletingLesson}
+              >
+                Cancel
+              </Button>
+              <Button
+                className="bg-red-500 hover:bg-red-600"
+                onClick={() => void handleDeleteLesson()}
+                disabled={deletingLesson}
+              >
+                {deletingLesson ? "Deleting..." : "Delete"}
+              </Button>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }
 
-function ContentCard({
+function PracticeCard({
   title,
   duration,
   status,
@@ -214,9 +970,7 @@ function ContentCard({
             />
             {status}
           </div>
-          <button className="h-8 w-8 rounded-lg flex items-center justify-center text-grayScale-300 hover:text-grayScale-600 transition-colors">
-            <MoreVertical className="h-5 w-5" />
-          </button>
+          <div />
         </div>
 
         <h3 className="text-[14px] font-bold text-[#0F172A] line-clamp-2 leading-snug">
@@ -224,11 +978,7 @@ function ContentCard({
         </h3>
 
         <div className="pt-2 grid grid-cols-1 gap-2 mt-auto">
-          <Button
-            variant="outline"
-            className="w-full h-10 rounded-[10px] border-grayScale-200 text-grayScale-600 font-bold flex items-center justify-center gap-2 text-xs hover:bg-grayScale-25"
-          >
-            <Edit2 className="h-4 w-4" />
+          <Button variant="outline" className="w-full h-10 rounded-[10px] border-grayScale-200 text-grayScale-600 font-bold text-xs">
             Edit
           </Button>
           <Button
@@ -246,3 +996,4 @@ function ContentCard({
     </Card>
   );
 }
+
diff --git a/src/pages/content-management/ProgramDetailPage.tsx b/src/pages/content-management/ProgramDetailPage.tsx
index 93eba0b..0e8fa74 100644
--- a/src/pages/content-management/ProgramDetailPage.tsx
+++ b/src/pages/content-management/ProgramDetailPage.tsx
@@ -1,3 +1,4 @@
+import { useCallback, useEffect, useRef, useState } from "react";
 import { Link, useParams, useNavigate } from "react-router-dom";
 import {
   ArrowLeft,
@@ -6,11 +7,13 @@ import {
   ClipboardList,
   ListChecks,
   ChevronRight,
+  Pencil,
+  Trash2,
   X,
-  Upload,
 } from "lucide-react";
 import { Button } from "../../components/ui/button";
 import { Card } from "../../components/ui/card";
+import { Textarea } from "../../components/ui/textarea";
 import {
   Dialog,
   DialogContent,
@@ -20,12 +23,51 @@ import {
   DialogClose,
 } from "../../components/ui/dialog";
 import { Input } from "../../components/ui/input";
-import { Select } from "../../components/ui/select";
+import { toast } from "sonner";
+import { ResolvedImage } from "../../components/media/ResolvedImage";
+import {
+  createExamPrepCatalogCourse,
+  getExamPrepCatalogCourses,
+  updateExamPrepCatalogCourse,
+  deleteExamPrepCatalogCourse,
+} from "../../api/courses.api";
+import { uploadImageFile } from "../../api/files.api";
 import uploadIcon from "../../assets/icons/upload.png";
 
 export function ProgramDetailPage() {
   const navigate = useNavigate();
   const { programType } = useParams<{ programType: string }>();
+  const [createOpen, setCreateOpen] = useState(false);
+  const [createName, setCreateName] = useState("");
+  const [createDescription, setCreateDescription] = useState("");
+  const [createThumbnail, setCreateThumbnail] = useState("");
+  const [createThumbnailFromUpload, setCreateThumbnailFromUpload] = useState(false);
+  const [creating, setCreating] = useState(false);
+  const [uploadingThumbnail, setUploadingThumbnail] = useState(false);
+  const createThumbnailFileInputRef = useRef<HTMLInputElement>(null);
+  const [createdCourses, setCreatedCourses] = useState<
+    {
+      id: number;
+      name: string;
+      description: string;
+      thumbnail?: string | null;
+      sortOrder: number;
+      unitsCount: number;
+      modulesCount: number;
+      lessonsCount: number;
+    }[]
+  >([]);
+  const [catalogLoading, setCatalogLoading] = useState(false);
+  const [editingCourseId, setEditingCourseId] = useState<number | null>(null);
+  const [editName, setEditName] = useState("");
+  const [editDescription, setEditDescription] = useState("");
+  const [editThumbnail, setEditThumbnail] = useState("");
+  const [editSortOrder, setEditSortOrder] = useState("1");
+  const [savingEdit, setSavingEdit] = useState(false);
+  const [uploadingEditThumbnail, setUploadingEditThumbnail] = useState(false);
+  const editThumbnailFileInputRef = useRef<HTMLInputElement>(null);
+  const [deletingCourseId, setDeletingCourseId] = useState<number | null>(null);
+  const [deletingCourse, setDeletingCourse] = useState(false);
 
   // Mock data for "proficiency" program type
   const programs: Record<string, any> = {
@@ -33,45 +75,7 @@ export function ProgramDetailPage() {
       title: "English Proficiency Exams",
       description:
         "Manage exam-based learning programs such as Duolingo and IELTS.",
-      courses: [
-        {
-          id: "duolingo",
-          name: "Duolingo English Test",
-          description:
-            "Adaptive exam-style practice for speaking, writing, reading, and listening.",
-          coursesCount: 6,
-          questionTypesCount: 13,
-          logo: (
-            <div className="h-14 w-14 rounded-full bg-[#FFB800] flex items-center justify-center relative overflow-hidden">
-              {/* Simple Duolingo-like representation if image not available */}
-              <div className="absolute inset-0 bg-gradient-to-br from-white/20 to-transparent" />
-              <div className="h-8 w-8 bg-white rounded-full flex items-center justify-center">
-                <div className="h-4 w-4 bg-[#FFB800] rounded-sm transform rotate-45" />
-              </div>
-            </div>
-          ),
-          buttonText: "Manage Detail",
-        },
-        {
-          id: "ielts",
-          name: "IELTS Academic",
-          description:
-            "Full preparation for IELTS speaking, writing, listening, and reading.",
-          coursesCount: 4,
-          questionTypesCount: 18,
-          logo: (
-            <div className="flex items-center gap-1">
-              <span className="text-[28px] font-black tracking-tighter text-[#E11D48] ">
-                IELTS
-              </span>
-              <span className="text-[8px] font-bold text-[#E11D48] mt-2 tracking-widest uppercase">
-                ™
-              </span>
-            </div>
-          ),
-          buttonText: "View Detail",
-        },
-      ],
+      courses: [],
     },
     "skill-based": {
       title: "Skill-Based Courses",
@@ -84,6 +88,327 @@ export function ProgramDetailPage() {
   const currentProgram =
     programs[programType || "proficiency"] || programs.proficiency;
 
+  const loadCatalogCourses = useCallback(async () => {
+    if (programType !== "proficiency") return;
+    setCatalogLoading(true);
+    try {
+      const response = await getExamPrepCatalogCourses({ limit: 20, offset: 0 });
+      const rows = response.data?.data?.catalog_courses;
+      const list = Array.isArray(rows) ? rows : [];
+      setCreatedCourses(
+        list.map((row) => ({
+          id: Number(row.id),
+          name: row.name?.trim() || `Course ${row.id}`,
+          description: row.description?.trim() || "—",
+          thumbnail: row.thumbnail?.trim() || null,
+          sortOrder: Number(row.sort_order ?? 0),
+          unitsCount: Number(row.units_count ?? 0),
+          modulesCount: Number(row.modules_count ?? 0),
+          lessonsCount: Number(row.lessons_count ?? 0),
+        })),
+      );
+    } catch (error) {
+      console.error(error);
+      toast.error("Failed to fetch catalog courses");
+      setCreatedCourses([]);
+    } finally {
+      setCatalogLoading(false);
+    }
+  }, [programType]);
+
+  useEffect(() => {
+    void loadCatalogCourses();
+  }, [loadCatalogCourses]);
+  const proficiencyCourses = [
+    ...currentProgram.courses,
+    ...createdCourses.map((course) => ({
+      id: course.id,
+      name: course.name,
+      description: course.description,
+      units_count: course.unitsCount,
+      modules_count: course.modulesCount,
+      lessons_count: course.lessonsCount,
+      logo: null,
+      thumbnail: course.thumbnail ?? "",
+      sort_order: course.sortOrder,
+      buttonText: "View Detail",
+    })),
+  ];
+
+  const isHttpUrl = (value: string) =>
+    value.startsWith("http://") || value.startsWith("https://");
+
+  const isMinioUrl = (value: string) => {
+    try {
+      const url = new URL(value);
+      return url.host === "s3.yimaruacademy.com";
+    } catch {
+      return false;
+    }
+  };
+
+  const autoUploadThumbnailUrlIfNeeded = async (rawValue: string) => {
+    const candidate = rawValue.trim();
+    if (!candidate) return;
+    if (!isHttpUrl(candidate)) return;
+    if (isMinioUrl(candidate)) return;
+    if (uploadingThumbnail || creating) return;
+
+    setUploadingThumbnail(true);
+    try {
+      const uploaded = await uploadImageFile(candidate);
+      const uploadedUrl = uploaded.data?.data?.url?.trim();
+      if (!uploadedUrl) {
+        throw new Error("Failed to upload thumbnail URL to MinIO");
+      }
+      setCreateThumbnail(uploadedUrl);
+      setCreateThumbnailFromUpload(true);
+      toast.success("Thumbnail URL uploaded to MinIO");
+    } catch (error: unknown) {
+      console.error(error);
+      const message =
+        (error as { response?: { data?: { message?: string } } })?.response?.data
+          ?.message ?? "Failed to upload thumbnail URL";
+      toast.error(message);
+    } finally {
+      setUploadingThumbnail(false);
+    }
+  };
+
+  const resolveThumbnailToMinioUrl = async (rawValue: string) => {
+    const trimmed = rawValue.trim();
+    if (!trimmed) return "";
+    if (!isHttpUrl(trimmed) || isMinioUrl(trimmed)) return trimmed;
+    const uploaded = await uploadImageFile(trimmed);
+    const uploadedUrl = uploaded.data?.data?.url?.trim();
+    if (!uploadedUrl) {
+      throw new Error("Failed to upload thumbnail URL to MinIO");
+    }
+    return uploadedUrl;
+  };
+
+  const handleCreateCourse = async () => {
+    if (programType !== "proficiency") {
+      toast.error("Create Course is supported only for proficiency catalog.");
+      return;
+    }
+    const name = createName.trim();
+    if (!name) {
+      toast.error("Course name is required");
+      return;
+    }
+    setCreating(true);
+    try {
+      let thumbnailToSend: string | null = createThumbnail.trim() || null;
+      if (
+        thumbnailToSend &&
+        !createThumbnailFromUpload &&
+        isHttpUrl(thumbnailToSend) &&
+        !isMinioUrl(thumbnailToSend)
+      ) {
+        const uploaded = await uploadImageFile(thumbnailToSend);
+        const uploadedUrl = uploaded.data?.data?.url?.trim();
+        if (!uploadedUrl) {
+          throw new Error("Failed to upload thumbnail URL to MinIO");
+        }
+        thumbnailToSend = uploadedUrl;
+      }
+
+      const response = await createExamPrepCatalogCourse({
+        name,
+        description: createDescription.trim() || null,
+        thumbnail: thumbnailToSend,
+      });
+      const row = response.data?.data;
+      if (!row?.id) {
+        throw new Error("Missing created course payload");
+      }
+      setCreatedCourses((prev) => [
+        {
+          id: row.id,
+          name: row.name ?? name,
+          description: row.description?.trim() || createDescription.trim() || "—",
+          thumbnail: row.thumbnail?.trim() || null,
+          sortOrder: Number(row.sort_order ?? 0),
+          unitsCount: Number(row.units_count ?? 0),
+          modulesCount: Number(row.modules_count ?? 0),
+          lessonsCount: Number(row.lessons_count ?? 0),
+        },
+        ...prev,
+      ]);
+      await loadCatalogCourses();
+      toast.success("Course created");
+      setCreateName("");
+      setCreateDescription("");
+      setCreateThumbnail("");
+      setCreateThumbnailFromUpload(false);
+      setCreateOpen(false);
+    } catch (error: unknown) {
+      console.error(error);
+      const message =
+        (error as { response?: { data?: { message?: string } } })?.response?.data
+          ?.message ?? "Failed to create course";
+      toast.error(message);
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  const openEditCourse = (course: (typeof proficiencyCourses)[number]) => {
+    const idNum = Number(course.id);
+    if (!Number.isFinite(idNum)) return;
+    setEditingCourseId(idNum);
+    setEditName(String(course.name ?? ""));
+    setEditDescription(String(course.description ?? ""));
+    setEditThumbnail(String(course.thumbnail ?? ""));
+    setEditSortOrder(String(course.sort_order ?? 1));
+  };
+
+  const closeEditCourse = () => {
+    if (savingEdit || uploadingEditThumbnail) return;
+    setEditingCourseId(null);
+    setEditName("");
+    setEditDescription("");
+    setEditThumbnail("");
+    setEditSortOrder("1");
+  };
+
+  const handleEditThumbnailFile = async (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    const file = event.target.files?.[0];
+    event.target.value = "";
+    if (!file) return;
+    if (!file.type.startsWith("image/")) {
+      toast.error("Please choose an image file");
+      return;
+    }
+    setUploadingEditThumbnail(true);
+    try {
+      const res = await uploadImageFile(file);
+      const url = res.data?.data?.url?.trim();
+      if (!url) throw new Error("Upload did not return a file URL");
+      setEditThumbnail(url);
+      toast.success("Thumbnail uploaded");
+    } catch (error: unknown) {
+      console.error(error);
+      const message =
+        (error as { response?: { data?: { message?: string } } })?.response?.data
+          ?.message ?? "Failed to upload thumbnail";
+      toast.error(message);
+    } finally {
+      setUploadingEditThumbnail(false);
+    }
+  };
+
+  const handleSaveEditCourse = async () => {
+    if (!editingCourseId) return;
+    const name = editName.trim();
+    if (!name) {
+      toast.error("Course name is required");
+      return;
+    }
+    const sortOrderNum = Number(editSortOrder);
+    if (!Number.isFinite(sortOrderNum) || sortOrderNum < 0) {
+      toast.error("Sort order must be a valid number");
+      return;
+    }
+
+    setSavingEdit(true);
+    try {
+      const minioThumbnail = await resolveThumbnailToMinioUrl(editThumbnail);
+      const response = await updateExamPrepCatalogCourse(editingCourseId, {
+        name,
+        description: editDescription.trim() || null,
+        thumbnail: minioThumbnail || null,
+        sort_order: sortOrderNum,
+      });
+      const row = response.data?.data;
+      setCreatedCourses((prev) =>
+        prev.map((course) =>
+          course.id === editingCourseId
+            ? {
+                ...course,
+                name: row?.name ?? name,
+                description: row?.description?.trim() || editDescription.trim() || "—",
+                thumbnail: row?.thumbnail?.trim() || null,
+                sortOrder: Number(row?.sort_order ?? sortOrderNum),
+                unitsCount: Number(row?.units_count ?? course.unitsCount ?? 0),
+                modulesCount: Number(row?.modules_count ?? course.modulesCount ?? 0),
+                lessonsCount: Number(row?.lessons_count ?? course.lessonsCount ?? 0),
+              }
+            : course,
+        ),
+      );
+      await loadCatalogCourses();
+      toast.success("Course updated");
+      closeEditCourse();
+    } catch (error: unknown) {
+      console.error(error);
+      const message =
+        (error as { response?: { data?: { message?: string } } })?.response?.data
+          ?.message ?? "Failed to update course";
+      toast.error(message);
+    } finally {
+      setSavingEdit(false);
+    }
+  };
+
+  const handleDeleteCourse = async () => {
+    if (!deletingCourseId) return;
+    setDeletingCourse(true);
+    try {
+      await deleteExamPrepCatalogCourse(deletingCourseId);
+      await loadCatalogCourses();
+      toast.success("Course deleted");
+      setDeletingCourseId(null);
+    } catch (error: unknown) {
+      console.error(error);
+      const message =
+        (error as { response?: { data?: { message?: string } } })?.response?.data
+          ?.message ?? "Failed to delete course";
+      toast.error(message);
+    } finally {
+      setDeletingCourse(false);
+    }
+  };
+
+  const handleCreateCourseThumbnailFile = async (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    const file = event.target.files?.[0];
+    event.target.value = "";
+    if (!file) return;
+    if (!file.type.startsWith("image/")) {
+      toast.error("Please choose an image file");
+      return;
+    }
+    const maxBytes = 5 * 1024 * 1024;
+    if (file.size > maxBytes) {
+      toast.error("Image is too large", { description: "Maximum size is 5 MB." });
+      return;
+    }
+    setUploadingThumbnail(true);
+    try {
+      const res = await uploadImageFile(file);
+      const url = res.data?.data?.url?.trim();
+      if (!url) {
+        throw new Error("Upload did not return a file URL");
+      }
+      setCreateThumbnail(url);
+      setCreateThumbnailFromUpload(true);
+      toast.success("Thumbnail uploaded");
+    } catch (error: unknown) {
+      console.error(error);
+      const message =
+        (error as { response?: { data?: { message?: string } } })?.response?.data
+          ?.message ?? "Failed to upload thumbnail";
+      toast.error(message);
+    } finally {
+      setUploadingThumbnail(false);
+    }
+  };
+
   return (
     <div className="space-y-8 animate-in fade-in duration-500 pb-10">
       {/* Navigation */}
@@ -107,84 +432,136 @@ export function ProgramDetailPage() {
         </div>
 
         <div className="flex items-center gap-3 pt-2">
-          <Dialog>
+          <Dialog
+            open={createOpen}
+            onOpenChange={(open) => {
+              if (!open && (creating || uploadingThumbnail)) return;
+              setCreateOpen(open);
+            }}
+          >
             <DialogTrigger asChild>
               <Button className="h-10 px-6 rounded-[6px] bg-brand-500 font-bold text-white transition-all flex items-center gap-2">
                 <Plus className="h-5 w-5" />
                 Create Course
               </Button>
             </DialogTrigger>
-            <DialogContent className="max-w-[600px] p-0 border-none rounded-[16px] overflow-hidden">
-              <div className="bg-white">
-                <DialogHeader className="px-8 py-6 border-b border-grayScale-200 flex flex-row items-center justify-between">
+            <DialogContent className="flex max-h-[min(90vh,calc(100dvh-2rem))] max-w-[600px] flex-col gap-0 overflow-hidden rounded-[16px] border-none p-0">
+              <div className="flex min-h-0 flex-1 flex-col bg-white">
+                <DialogHeader className="shrink-0 border-b border-grayScale-200 px-8 py-6 flex flex-row items-center justify-between">
                   <DialogTitle className="text-[20px] font-bold relative top-2 text-grayScale-900">
                     Create Course
                   </DialogTitle>
                 </DialogHeader>
 
-                <div className="p-8 space-y-8">
+                <div className="min-h-0 flex-1 space-y-8 overflow-y-auto p-8">
                   <div className="space-y-3">
                     <label className="text-[15px] text-grayScale-800">
                       Name
                     </label>
                     <Input
+                      value={createName}
+                      onChange={(e) => setCreateName(e.target.value)}
                       placeholder="e.g. TOEFL, IELTS"
                       className="h-12 border-grayScale-400 rounded-[8px] px-4 placeholder:text-grayScale-400 text-[15px] focus:ring-brand-500/20"
+                      disabled={creating}
                     />
                   </div>
 
                   <div className="space-y-3">
                     <label className="text-[15px] text-grayScale-800">
-                      Course Order
+                      Description
                     </label>
-                    <Select defaultValue="1">
-                      <option value="1">1</option>
-                      <option value="2">2</option>
-                      <option value="3">3</option>
-                    </Select>
+                    <Textarea
+                      value={createDescription}
+                      onChange={(e) => setCreateDescription(e.target.value)}
+                      placeholder="Optional description"
+                      rows={4}
+                      className="min-h-[96px] rounded-[8px] border-grayScale-400"
+                      disabled={creating}
+                    />
                   </div>
 
-                  {/* Thumbnail Field */}
                   <div className="space-y-3">
                     <label className="text-[15px] text-grayScale-800">
                       Thumbnail
                     </label>
-                    <div className="relative group cursor-pointer">
-                      <div className="flex flex-col items-center justify-center rounded-[12px] border-2 border-dashed border-grayScale-400 bg-white py-8 px-10 transition-all ">
+                    <input
+                      ref={createThumbnailFileInputRef}
+                      type="file"
+                      accept="image/*"
+                      className="sr-only"
+                      onChange={(e) => void handleCreateCourseThumbnailFile(e)}
+                      disabled={creating || uploadingThumbnail}
+                    />
+                    <button
+                      type="button"
+                      className="relative w-full cursor-pointer rounded-[12px] border-2 border-dashed border-grayScale-400 bg-white px-10 py-8 text-left transition-all hover:border-brand-300 disabled:cursor-not-allowed disabled:opacity-60"
+                      disabled={creating || uploadingThumbnail}
+                      onClick={() => createThumbnailFileInputRef.current?.click()}
+                    >
+                      <div className="flex flex-col items-center justify-center">
                         <div className="mb-4">
-                          <img
-                            src={uploadIcon}
-                            alt="Upload icon"
-                            className="h-10 w-10"
-                          />
+                          <img src={uploadIcon} alt="" className="h-10 w-10" />
                         </div>
                         <p className="text-[15px]">
-                          <span className="text-brand-500 font-bold hover:underline">
-                            Click to upload
+                          <span className="font-bold text-brand-500">
+                            {uploadingThumbnail ? "Uploading…" : "Click to upload"}
                           </span>{" "}
-                          <span className="text-grayScale-500">
-                            or drag and drop
-                          </span>
+                          <span className="text-grayScale-500">or paste a URL below</span>
                         </p>
-                        <p className="mt-1.5 text-[12px] text-grayScale-400 uppercase tracking-widest">
-                          JPG, PNG (MAX 1 MB)
+                        <p className="mt-1.5 text-[12px] uppercase tracking-widest text-grayScale-400">
+                          JPG, PNG (MAX 5 MB)
                         </p>
                       </div>
-                    </div>
+                    </button>
+                    {createThumbnail.trim() ? (
+                      <div className="overflow-hidden rounded-xl border border-grayScale-200 bg-grayScale-50">
+                        <ResolvedImage
+                          src={createThumbnail.trim()}
+                          alt=""
+                          className="h-28 w-full object-cover"
+                        />
+                      </div>
+                    ) : null}
+                    <Input
+                      value={createThumbnail}
+                      onChange={(e) => {
+                        setCreateThumbnail(e.target.value);
+                        setCreateThumbnailFromUpload(false);
+                      }}
+                      onBlur={(e) => {
+                        void autoUploadThumbnailUrlIfNeeded(e.target.value);
+                      }}
+                      onPaste={(e) => {
+                        const pasted = e.clipboardData.getData("text");
+                        if (!pasted) return;
+                        setCreateThumbnail(pasted);
+                        setCreateThumbnailFromUpload(false);
+                        void autoUploadThumbnailUrlIfNeeded(pasted);
+                      }}
+                      placeholder="Optional thumbnail URL (or leave empty for null)"
+                      className="h-12 border-grayScale-400 rounded-[8px] px-4 placeholder:text-grayScale-400 text-[15px] focus:ring-brand-500/20"
+                      disabled={creating || uploadingThumbnail}
+                    />
                   </div>
                 </div>
 
-                <div className="px-8 py-6 bg-grayScale-50/30 border-t border-grayScale-50 flex justify-end gap-3">
+                <div className="shrink-0 px-8 py-6 bg-grayScale-50/30 border-t border-grayScale-50 flex justify-end gap-3">
                   <DialogClose asChild>
                     <Button
                       variant="outline"
                       className="h-11 px-8 rounded-[8px] border-grayScale-200 text-grayScale-700 font-bold"
+                      disabled={creating || uploadingThumbnail}
                     >
                       Cancel
                     </Button>
                   </DialogClose>
-                  <Button className="h-11 px-8 rounded-[8px] bg-brand-500 text-white font-bold hover:bg-brand-600">
-                    Create Program
+                  <Button
+                    className="h-11 px-8 rounded-[8px] bg-brand-500 text-white font-bold hover:bg-brand-600"
+                    disabled={creating || uploadingThumbnail}
+                    onClick={() => void handleCreateCourse()}
+                  >
+                    {creating ? "Creating..." : "Create Course"}
                   </Button>
                 </div>
               </div>
@@ -221,13 +598,70 @@ export function ProgramDetailPage() {
 
       {/* Cards Grid */}
       <div className="flex flex-wrap gap-8 mt-10">
-        {currentProgram.courses.map((course: any) => (
-          <Card
-            key={course.id}
-            className="bg-white w-[500px] rounded-[20px] border border-grayScale-100 p-6 flex flex-col items-start  shadow-sm hover:shadow-md transition-shadow"
-          >
+        {programType === "proficiency" && catalogLoading ? (
+          <p className="text-sm text-grayScale-500">Loading catalog courses...</p>
+        ) : null}
+        {(programType === "proficiency"
+          ? proficiencyCourses
+          : currentProgram.courses
+        ).length === 0 && !catalogLoading ? (
+          <div className="w-full rounded-xl border border-dashed border-grayScale-200 bg-grayScale-50/50 px-6 py-14 text-center">
+            <p className="text-sm font-medium text-grayScale-600">
+              No catalog courses yet
+            </p>
+            <p className="mt-1 text-sm text-grayScale-400">
+              Create your first exam-prep catalog course to start organizing units, modules, and lessons.
+            </p>
+          </div>
+        ) : (
+          (programType === "proficiency"
+            ? proficiencyCourses
+            : currentProgram.courses
+          ).map((course: any) => (
+            <Card
+              key={course.id}
+              className="group relative bg-white w-[500px] rounded-[20px] border border-grayScale-100 p-6 flex flex-col items-start shadow-sm hover:shadow-md transition-shadow"
+            >
+            {programType === "proficiency" ? (
+              <div className="absolute right-3 top-3 z-10 flex translate-y-1 gap-1 opacity-0 pointer-events-none transition-all duration-300 ease-out group-hover:translate-y-0 group-hover:opacity-100 group-hover:pointer-events-auto">
+                <Button
+                  type="button"
+                  variant="secondary"
+                  size="icon"
+                  className="h-8 w-8 rounded-md bg-white/95 text-grayScale-600 shadow-sm transition-colors hover:bg-white"
+                  onClick={() => openEditCourse(course)}
+                  aria-label={`Edit ${course.name}`}
+                >
+                  <Pencil className="h-3.5 w-3.5" />
+                </Button>
+                <Button
+                  type="button"
+                  variant="secondary"
+                  size="icon"
+                  className="h-8 w-8 rounded-md bg-white/95 text-red-600 shadow-sm transition-colors hover:bg-red-50"
+                  onClick={() => setDeletingCourseId(Number(course.id))}
+                  aria-label={`Delete ${course.name}`}
+                >
+                  <Trash2 className="h-3.5 w-3.5" />
+                </Button>
+              </div>
+            ) : null}
             {/* Logo */}
-            <div className="h-16 flex items-center">{course.logo}</div>
+            <div className="h-16 flex items-center">
+              {course.thumbnail ? (
+                <ResolvedImage
+                  src={course.thumbnail}
+                  alt={course.name}
+                  className="h-14 w-14 rounded-full object-cover"
+                />
+              ) : course.logo ? (
+                course.logo
+              ) : (
+                <div className="h-14 w-14 rounded-full bg-brand-50 text-brand-600 grid place-items-center text-xs font-bold">
+                  {String(course.name ?? "C").slice(0, 2).toUpperCase()}
+                </div>
+              )}
+            </div>
 
             {/* Content */}
             <div className="space-y-4 pt-2 flex-1">
@@ -244,13 +678,19 @@ export function ProgramDetailPage() {
               <div className="h-10 px-4 rounded-[6px] bg-grayScale-100 border border-grayScale-100 flex items-center gap-2 text-grayScale-700">
                 <ClipboardList className="h-3 w-3 text-grayScale-400" />
                 <span className="text-[12px] ">
-                  {course.coursesCount} Courses
+                  {Number(course.units_count ?? 0)} Units
                 </span>
               </div>
               <div className="h-10 px-4 rounded-[6px] bg-grayScale-100 border border-grayScale-100 flex items-center gap-2 text-grayScale-700">
                 <ListChecks className="h-3 w-3 text-grayScale-400" />
                 <span className="text-[12px] ">
-                  {course.questionTypesCount} Question Types
+                  {Number(course.modules_count ?? 0)} Modules
+                </span>
+              </div>
+              <div className="h-10 px-4 rounded-[6px] bg-grayScale-100 border border-grayScale-100 flex items-center gap-2 text-grayScale-700">
+                <ListChecks className="h-3 w-3 text-grayScale-400" />
+                <span className="text-[12px] ">
+                  {Number(course.lessons_count ?? 0)} Lessons
                 </span>
               </div>
             </div>
@@ -265,9 +705,166 @@ export function ProgramDetailPage() {
               {course.buttonText}
               <ChevronRight className="h-5 w-5 transition-transform group-hover/btn:translate-x-1" />
             </Button>
-          </Card>
-        ))}
+            </Card>
+          ))
+        )}
       </div>
+
+      <Dialog
+        open={editingCourseId !== null}
+        onOpenChange={(open) => {
+          if (!open && (savingEdit || uploadingEditThumbnail)) return;
+          if (!open) closeEditCourse();
+        }}
+      >
+        <DialogContent className="flex max-h-[min(90vh,calc(100dvh-2rem))] max-w-[600px] flex-col gap-0 overflow-hidden rounded-[16px] border-none p-0">
+          <div className="flex min-h-0 flex-1 flex-col bg-white">
+            <DialogHeader className="shrink-0 border-b border-grayScale-200 px-8 py-6 flex flex-row items-center justify-between">
+              <DialogTitle className="text-[20px] font-bold relative top-2 text-grayScale-900">
+                Edit Course
+              </DialogTitle>
+            </DialogHeader>
+            <div className="min-h-0 flex-1 space-y-8 overflow-y-auto p-8">
+              <div className="space-y-3">
+                <label className="text-[15px] text-grayScale-800">Name</label>
+                <Input
+                  value={editName}
+                  onChange={(e) => setEditName(e.target.value)}
+                  className="h-12 border-grayScale-400 rounded-[8px] px-4 placeholder:text-grayScale-400 text-[15px] focus:ring-brand-500/20"
+                  disabled={savingEdit || uploadingEditThumbnail}
+                />
+              </div>
+
+              <div className="space-y-3">
+                <label className="text-[15px] text-grayScale-800">Description</label>
+                <Textarea
+                  value={editDescription}
+                  onChange={(e) => setEditDescription(e.target.value)}
+                  rows={4}
+                  className="min-h-[96px] rounded-[8px] border-grayScale-400"
+                  disabled={savingEdit || uploadingEditThumbnail}
+                />
+              </div>
+
+              <div className="space-y-3">
+                <label className="text-[15px] text-grayScale-800">Sort Order</label>
+                <Input
+                  type="number"
+                  min={0}
+                  value={editSortOrder}
+                  onChange={(e) => setEditSortOrder(e.target.value)}
+                  className="h-12 border-grayScale-400 rounded-[8px] px-4 placeholder:text-grayScale-400 text-[15px] focus:ring-brand-500/20"
+                  disabled={savingEdit || uploadingEditThumbnail}
+                />
+              </div>
+
+              <div className="space-y-3">
+                <label className="text-[15px] text-grayScale-800">Thumbnail</label>
+                <input
+                  ref={editThumbnailFileInputRef}
+                  type="file"
+                  accept="image/*"
+                  className="sr-only"
+                  onChange={(e) => void handleEditThumbnailFile(e)}
+                  disabled={savingEdit || uploadingEditThumbnail}
+                />
+                <button
+                  type="button"
+                  className="relative w-full cursor-pointer rounded-[12px] border-2 border-dashed border-grayScale-400 bg-white px-10 py-8 text-left transition-all hover:border-brand-300 disabled:cursor-not-allowed disabled:opacity-60"
+                  onClick={() => editThumbnailFileInputRef.current?.click()}
+                  disabled={savingEdit || uploadingEditThumbnail}
+                >
+                  <div className="flex flex-col items-center justify-center">
+                    <div className="mb-4">
+                      <img src={uploadIcon} alt="" className="h-10 w-10" />
+                    </div>
+                    <p className="text-[15px]">
+                      <span className="font-bold text-brand-500">
+                        {uploadingEditThumbnail ? "Uploading…" : "Click to upload"}
+                      </span>{" "}
+                      <span className="text-grayScale-500">or paste a URL below</span>
+                    </p>
+                    <p className="mt-1.5 text-[12px] uppercase tracking-widest text-grayScale-400">
+                      JPG, PNG (MAX 5 MB)
+                    </p>
+                  </div>
+                </button>
+                {editThumbnail.trim() ? (
+                  <div className="overflow-hidden rounded-xl border border-grayScale-200 bg-grayScale-50">
+                    <ResolvedImage
+                      src={editThumbnail.trim()}
+                      alt=""
+                      className="h-28 w-full object-cover"
+                    />
+                  </div>
+                ) : null}
+                <Input
+                  value={editThumbnail}
+                  onChange={(e) => setEditThumbnail(e.target.value)}
+                  className="h-12 border-grayScale-400 rounded-[8px] px-4 placeholder:text-grayScale-400 text-[15px] focus:ring-brand-500/20"
+                  placeholder="https://..."
+                  disabled={savingEdit || uploadingEditThumbnail}
+                />
+              </div>
+            </div>
+            <div className="shrink-0 px-8 py-6 bg-grayScale-50/30 border-t border-grayScale-50 flex justify-end gap-3">
+              <Button
+                type="button"
+                variant="outline"
+                className="h-11 px-8 rounded-[8px] border-grayScale-200 text-grayScale-700 font-bold"
+                onClick={closeEditCourse}
+                disabled={savingEdit || uploadingEditThumbnail}
+              >
+                Cancel
+              </Button>
+              <Button
+                type="button"
+                className="h-11 px-8 rounded-[8px] bg-brand-500 text-white font-bold hover:bg-brand-600"
+                onClick={() => void handleSaveEditCourse()}
+                disabled={savingEdit || uploadingEditThumbnail}
+              >
+                {savingEdit ? "Saving..." : "Save Changes"}
+              </Button>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      <Dialog
+        open={deletingCourseId !== null}
+        onOpenChange={(open) => {
+          if (!open && !deletingCourse) setDeletingCourseId(null);
+        }}
+      >
+        <DialogContent className="max-w-md rounded-[16px] border-none p-0 overflow-hidden">
+          <div className="bg-white">
+            <DialogHeader className="border-b border-grayScale-100 px-6 py-5">
+              <DialogTitle className="text-lg font-bold text-grayScale-900">
+                Delete Course
+              </DialogTitle>
+            </DialogHeader>
+            <div className="px-6 py-6 text-sm text-grayScale-600">
+              Are you sure you want to delete this course? This action cannot be undone.
+            </div>
+            <div className="flex justify-end gap-3 border-t border-grayScale-100 px-6 py-4">
+              <Button
+                variant="outline"
+                onClick={() => setDeletingCourseId(null)}
+                disabled={deletingCourse}
+              >
+                Cancel
+              </Button>
+              <Button
+                className="bg-red-500 hover:bg-red-600"
+                onClick={() => void handleDeleteCourse()}
+                disabled={deletingCourse}
+              >
+                {deletingCourse ? "Deleting..." : "Delete"}
+              </Button>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }
diff --git a/src/pages/content-management/UnitManagementPage.tsx b/src/pages/content-management/UnitManagementPage.tsx
index 9284d1e..10c59c1 100644
--- a/src/pages/content-management/UnitManagementPage.tsx
+++ b/src/pages/content-management/UnitManagementPage.tsx
@@ -1,3 +1,4 @@
+import { useCallback, useEffect, useRef, useState } from "react";
 import { Link, useParams, useNavigate } from "react-router-dom";
 import {
   ArrowLeft,
@@ -5,11 +6,14 @@ import {
   MessageCircle,
   PlayCircle,
   ClipboardCheck,
+  Pencil,
+  Trash2,
   ArrowRight,
   X,
 } from "lucide-react";
 import { Button } from "../../components/ui/button";
 import { Card } from "../../components/ui/card";
+import { Textarea } from "../../components/ui/textarea";
 import {
   Dialog,
   DialogContent,
@@ -19,8 +23,16 @@ import {
   DialogClose,
 } from "../../components/ui/dialog";
 import { Input } from "../../components/ui/input";
-import { Select } from "../../components/ui/select";
 import uploadIcon from "../../assets/icons/upload.png";
+import { toast } from "sonner";
+import { ResolvedImage } from "../../components/media/ResolvedImage";
+import {
+  createExamPrepUnitModule,
+  getExamPrepUnitModules,
+  updateExamPrepUnitModule,
+  deleteExamPrepUnitModule,
+} from "../../api/courses.api";
+import { uploadImageFile } from "../../api/files.api";
 
 export function UnitManagementPage() {
   const navigate = useNavigate();
@@ -40,35 +52,386 @@ export function UnitManagementPage() {
   const unitDisplayName =
     unitTitles[unitId || ""] || "Greetings & Introductions";
 
-  const modules = [
-    {
-      id: "mod1",
-      name: "Module 1: Basic Phrases",
-      description: "Learn essential phrases for daily conversations.",
-      videos: 3,
-      practices: 3,
-      gradient:
-        "linear-gradient(135deg, rgba(158, 40, 145, 0.4) 0%, rgba(158, 40, 145, 0.7) 100%)",
-    },
-    {
-      id: "mod2",
-      name: "Module 1: Basic Phrases", // Matching Image 2092-1 labels
-      description: "Learn essential phrases for daily conversations.",
-      videos: 3,
-      practices: 3,
-      gradient:
-        "linear-gradient(135deg, rgba(79, 70, 229, 0.4) 0%, rgba(79, 70, 229, 0.7) 100%)",
-    },
-    {
-      id: "mod3",
-      name: "Module 1: Basic Phrases",
-      description: "Learn essential phrases for daily conversations.",
-      videos: 3,
-      practices: 3,
-      gradient:
-        "linear-gradient(135deg, rgba(124, 58, 237, 0.4) 0%, rgba(124, 58, 237, 0.7) 100%)",
-    },
-  ];
+  const parsedUnitId = Number(unitId);
+  const [addModuleOpen, setAddModuleOpen] = useState(false);
+  const [createName, setCreateName] = useState("");
+  const [createDescription, setCreateDescription] = useState("");
+  const [createThumbnail, setCreateThumbnail] = useState("");
+  const [createIcon, setCreateIcon] = useState("");
+  const [creating, setCreating] = useState(false);
+  const [uploadingThumbnail, setUploadingThumbnail] = useState(false);
+  const [uploadingIcon, setUploadingIcon] = useState(false);
+  const createThumbnailFileInputRef = useRef<HTMLInputElement>(null);
+  const createIconFileInputRef = useRef<HTMLInputElement>(null);
+  const [modulesLoading, setModulesLoading] = useState(false);
+  const [modules, setModules] = useState<
+    Array<{
+      id: number;
+      name: string;
+      description: string;
+      thumbnail: string;
+      icon: string;
+      sortOrder: number;
+      videos: number;
+      practices: number;
+      gradient: string;
+    }>
+  >([]);
+  const [editingModuleId, setEditingModuleId] = useState<number | null>(null);
+  const [editName, setEditName] = useState("");
+  const [editDescription, setEditDescription] = useState("");
+  const [editThumbnail, setEditThumbnail] = useState("");
+  const [editIcon, setEditIcon] = useState("");
+  const [editSortOrder, setEditSortOrder] = useState("1");
+  const [savingEdit, setSavingEdit] = useState(false);
+  const [uploadingEditThumbnail, setUploadingEditThumbnail] = useState(false);
+  const [uploadingEditIcon, setUploadingEditIcon] = useState(false);
+  const editThumbnailFileInputRef = useRef<HTMLInputElement>(null);
+  const editIconFileInputRef = useRef<HTMLInputElement>(null);
+  const [deletingModuleId, setDeletingModuleId] = useState<number | null>(null);
+  const [deletingModule, setDeletingModule] = useState(false);
+
+  const isHttpUrl = (value: string) =>
+    value.startsWith("http://") || value.startsWith("https://");
+
+  const isMinioUrl = (value: string) => {
+    try {
+      const url = new URL(value);
+      return url.host === "s3.yimaruacademy.com";
+    } catch {
+      return false;
+    }
+  };
+
+  const resolveToMinioUrl = async (rawValue: string) => {
+    const trimmed = rawValue.trim();
+    if (!trimmed) return "";
+    if (!isHttpUrl(trimmed) || isMinioUrl(trimmed)) return trimmed;
+    const uploaded = await uploadImageFile(trimmed);
+    const uploadedUrl = uploaded.data?.data?.url?.trim();
+    if (!uploadedUrl) throw new Error("Failed to upload URL to MinIO");
+    return uploadedUrl;
+  };
+
+  const loadModules = useCallback(async () => {
+    if (!Number.isFinite(parsedUnitId) || parsedUnitId < 1) {
+      setModules([]);
+      return;
+    }
+    setModulesLoading(true);
+    try {
+      const response = await getExamPrepUnitModules(parsedUnitId, {
+        limit: 20,
+        offset: 0,
+      });
+      const rows = response.data?.data?.modules;
+      const list = Array.isArray(rows) ? rows : [];
+      setModules(
+        list.map((row, index) => ({
+          id: Number(row.id),
+          name: row.name?.trim() || `Module ${row.id}`,
+          description: row.description?.trim() || "—",
+          thumbnail: row.thumbnail?.trim() || "",
+          icon: row.icon?.trim() || "",
+          sortOrder: Number(row.sort_order ?? 0),
+          videos: Number(row.lessons_count ?? row.videos_count ?? 0),
+          practices: Number(row.practices_count ?? 0),
+          gradient:
+            index % 3 === 1
+              ? "linear-gradient(135deg, rgba(79, 70, 229, 0.4) 0%, rgba(79, 70, 229, 0.7) 100%)"
+              : index % 3 === 2
+                ? "linear-gradient(135deg, rgba(124, 58, 237, 0.4) 0%, rgba(124, 58, 237, 0.7) 100%)"
+                : "linear-gradient(135deg, rgba(158, 40, 145, 0.4) 0%, rgba(158, 40, 145, 0.7) 100%)",
+        })),
+      );
+    } catch (error) {
+      console.error(error);
+      toast.error("Failed to load modules");
+      setModules([]);
+    } finally {
+      setModulesLoading(false);
+    }
+  }, [parsedUnitId]);
+
+  useEffect(() => {
+    void loadModules();
+  }, [loadModules]);
+
+  const clearCreateModuleForm = () => {
+    setCreateName("");
+    setCreateDescription("");
+    setCreateThumbnail("");
+    setCreateIcon("");
+    if (createThumbnailFileInputRef.current) {
+      createThumbnailFileInputRef.current.value = "";
+    }
+    if (createIconFileInputRef.current) {
+      createIconFileInputRef.current.value = "";
+    }
+  };
+
+  const handleCreateImageFile = async (
+    event: React.ChangeEvent<HTMLInputElement>,
+    target: "thumbnail" | "icon",
+  ) => {
+    const file = event.target.files?.[0];
+    event.target.value = "";
+    if (!file) return;
+    if (!file.type.startsWith("image/")) {
+      toast.error("Please choose an image file");
+      return;
+    }
+
+    if (target === "thumbnail") {
+      setUploadingThumbnail(true);
+    } else {
+      setUploadingIcon(true);
+    }
+    try {
+      const res = await uploadImageFile(file);
+      const url = res.data?.data?.url?.trim();
+      if (!url) throw new Error("Upload did not return a file URL");
+      if (target === "thumbnail") {
+        setCreateThumbnail(url);
+      } else {
+        setCreateIcon(url);
+      }
+      toast.success(`${target === "thumbnail" ? "Thumbnail" : "Icon"} uploaded`);
+    } catch (error: unknown) {
+      console.error(error);
+      const message =
+        (error as { response?: { data?: { message?: string } } })?.response?.data
+          ?.message ?? "Failed to upload image";
+      toast.error(message);
+    } finally {
+      if (target === "thumbnail") {
+        setUploadingThumbnail(false);
+      } else {
+        setUploadingIcon(false);
+      }
+    }
+  };
+
+  const autoUploadCreateUrl = async (
+    value: string,
+    target: "thumbnail" | "icon",
+  ) => {
+    const trimmed = value.trim();
+    if (!trimmed || !isHttpUrl(trimmed) || isMinioUrl(trimmed)) return;
+    if (target === "thumbnail") {
+      setUploadingThumbnail(true);
+    } else {
+      setUploadingIcon(true);
+    }
+    try {
+      const minioUrl = await resolveToMinioUrl(trimmed);
+      if (target === "thumbnail") {
+        setCreateThumbnail(minioUrl);
+      } else {
+        setCreateIcon(minioUrl);
+      }
+      if (minioUrl !== trimmed) {
+        toast.success(`${target === "thumbnail" ? "Thumbnail" : "Icon"} uploaded to MinIO`);
+      }
+    } catch (error: unknown) {
+      console.error(error);
+      const message =
+        (error as { response?: { data?: { message?: string } } })?.response?.data
+          ?.message ?? "Failed to upload URL to MinIO";
+      toast.error(message);
+    } finally {
+      if (target === "thumbnail") {
+        setUploadingThumbnail(false);
+      } else {
+        setUploadingIcon(false);
+      }
+    }
+  };
+
+  const handleCreateModule = async () => {
+    if (!Number.isFinite(parsedUnitId) || parsedUnitId < 1) {
+      toast.error("Invalid unit");
+      return;
+    }
+    const name = createName.trim();
+    if (!name) {
+      toast.error("Module name is required");
+      return;
+    }
+    setCreating(true);
+    try {
+      const minioThumbnail = await resolveToMinioUrl(createThumbnail);
+      const minioIcon = await resolveToMinioUrl(createIcon);
+      await createExamPrepUnitModule(parsedUnitId, {
+        name,
+        description: createDescription.trim() || null,
+        thumbnail: minioThumbnail || null,
+        icon: minioIcon || null,
+      });
+      await loadModules();
+      toast.success("Module created");
+      clearCreateModuleForm();
+      setAddModuleOpen(false);
+    } catch (error: unknown) {
+      console.error(error);
+      const message =
+        (error as { response?: { data?: { message?: string } } })?.response?.data
+          ?.message ?? "Failed to create module";
+      toast.error(message);
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  const openEditModule = (module: (typeof modules)[number]) => {
+    setEditingModuleId(module.id);
+    setEditName(module.name ?? "");
+    setEditDescription(module.description ?? "");
+    setEditThumbnail(module.thumbnail ?? "");
+    setEditIcon(module.icon ?? "");
+    setEditSortOrder(String(module.sortOrder ?? 1));
+  };
+
+  const closeEditModule = () => {
+    if (savingEdit || uploadingEditThumbnail || uploadingEditIcon) return;
+    setEditingModuleId(null);
+    setEditName("");
+    setEditDescription("");
+    setEditThumbnail("");
+    setEditIcon("");
+    setEditSortOrder("1");
+  };
+
+  const handleEditImageFile = async (
+    event: React.ChangeEvent<HTMLInputElement>,
+    target: "thumbnail" | "icon",
+  ) => {
+    const file = event.target.files?.[0];
+    event.target.value = "";
+    if (!file) return;
+    if (!file.type.startsWith("image/")) {
+      toast.error("Please choose an image file");
+      return;
+    }
+    if (target === "thumbnail") {
+      setUploadingEditThumbnail(true);
+    } else {
+      setUploadingEditIcon(true);
+    }
+    try {
+      const res = await uploadImageFile(file);
+      const url = res.data?.data?.url?.trim();
+      if (!url) throw new Error("Upload did not return a file URL");
+      if (target === "thumbnail") {
+        setEditThumbnail(url);
+      } else {
+        setEditIcon(url);
+      }
+      toast.success(`${target === "thumbnail" ? "Thumbnail" : "Icon"} uploaded`);
+    } catch (error: unknown) {
+      console.error(error);
+      const message =
+        (error as { response?: { data?: { message?: string } } })?.response?.data
+          ?.message ?? "Failed to upload image";
+      toast.error(message);
+    } finally {
+      if (target === "thumbnail") {
+        setUploadingEditThumbnail(false);
+      } else {
+        setUploadingEditIcon(false);
+      }
+    }
+  };
+
+  const autoUploadEditUrl = async (value: string, target: "thumbnail" | "icon") => {
+    const trimmed = value.trim();
+    if (!trimmed || !isHttpUrl(trimmed) || isMinioUrl(trimmed)) return;
+    if (target === "thumbnail") {
+      setUploadingEditThumbnail(true);
+    } else {
+      setUploadingEditIcon(true);
+    }
+    try {
+      const minioUrl = await resolveToMinioUrl(trimmed);
+      if (target === "thumbnail") {
+        setEditThumbnail(minioUrl);
+      } else {
+        setEditIcon(minioUrl);
+      }
+      if (minioUrl !== trimmed) {
+        toast.success(`${target === "thumbnail" ? "Thumbnail" : "Icon"} uploaded to MinIO`);
+      }
+    } catch (error: unknown) {
+      console.error(error);
+      const message =
+        (error as { response?: { data?: { message?: string } } })?.response?.data
+          ?.message ?? "Failed to upload URL to MinIO";
+      toast.error(message);
+    } finally {
+      if (target === "thumbnail") {
+        setUploadingEditThumbnail(false);
+      } else {
+        setUploadingEditIcon(false);
+      }
+    }
+  };
+
+  const handleSaveEditModule = async () => {
+    if (!editingModuleId) return;
+    const name = editName.trim();
+    if (!name) {
+      toast.error("Module name is required");
+      return;
+    }
+    const sortOrderNum = Number(editSortOrder);
+    if (!Number.isFinite(sortOrderNum) || sortOrderNum < 0) {
+      toast.error("Sort order must be a valid number");
+      return;
+    }
+
+    setSavingEdit(true);
+    try {
+      const minioThumbnail = await resolveToMinioUrl(editThumbnail);
+      const minioIcon = await resolveToMinioUrl(editIcon);
+      await updateExamPrepUnitModule(editingModuleId, {
+        name,
+        description: editDescription.trim() || null,
+        thumbnail: minioThumbnail || null,
+        icon: minioIcon || null,
+        sort_order: sortOrderNum,
+      });
+      await loadModules();
+      toast.success("Module updated");
+      closeEditModule();
+    } catch (error: unknown) {
+      console.error(error);
+      const message =
+        (error as { response?: { data?: { message?: string } } })?.response?.data
+          ?.message ?? "Failed to update module";
+      toast.error(message);
+    } finally {
+      setSavingEdit(false);
+    }
+  };
+
+  const handleDeleteModule = async () => {
+    if (!deletingModuleId) return;
+    setDeletingModule(true);
+    try {
+      await deleteExamPrepUnitModule(deletingModuleId);
+      await loadModules();
+      toast.success("Module deleted");
+      setDeletingModuleId(null);
+    } catch (error: unknown) {
+      console.error(error);
+      const message =
+        (error as { response?: { data?: { message?: string } } })?.response?.data
+          ?.message ?? "Failed to delete module";
+      toast.error(message);
+    } finally {
+      setDeletingModule(false);
+    }
+  };
 
   return (
     <div className="space-y-8 animate-in fade-in duration-500 pb-10">
@@ -87,15 +450,21 @@ export function UnitManagementPage() {
           {unitDisplayName}
         </h1>
 
-        <Dialog>
+        <Dialog
+          open={addModuleOpen}
+          onOpenChange={(open) => {
+            if (!open && (creating || uploadingThumbnail || uploadingIcon)) return;
+            setAddModuleOpen(open);
+          }}
+        >
           <DialogTrigger asChild>
             <Button className="h-10 px-6 rounded-[6px] bg-brand-500 font-bold text-white shadow-sm hover:bg-brand-600 transition-all flex items-center gap-2">
               <Plus className="h-5 w-5" />
               Add Modules
             </Button>
           </DialogTrigger>
-          <DialogContent className="max-w-[600px] p-0 border-none rounded-[16px] overflow-hidden">
-            <div className="bg-white">
+          <DialogContent className="flex max-h-[min(90vh,calc(100dvh-2rem))] max-w-[600px] flex-col gap-0 overflow-hidden rounded-[16px] border-none p-0">
+            <div className="flex min-h-0 flex-1 flex-col bg-white">
               <DialogHeader className="px-8 py-6 border-b border-grayScale-200 flex flex-row items-center justify-between">
                 <DialogTitle className="text-[20px] font-bold relative top-2 text-grayScale-900">
                   Create Modules
@@ -106,30 +475,50 @@ export function UnitManagementPage() {
                 </DialogClose>
               </DialogHeader>
 
-              <div className="p-8 space-y-8">
+              <div className="min-h-0 flex-1 overflow-y-auto p-8 space-y-8">
                 <div className="space-y-3">
                   <label className="text-[15px] text-grayScale-800">
                     Module Title
                   </label>
                   <Input
-                    placeholder="e.g. 1.1 Exam types"
+                    value={createName}
+                    onChange={(e) => setCreateName(e.target.value)}
+                    placeholder="e.g. Present tense"
                     className="h-12 border-grayScale-400 rounded-[8px] px-4 placeholder:text-grayScale-400 text-[15px] focus:ring-brand-500/20"
+                    disabled={creating || uploadingThumbnail || uploadingIcon}
                   />
                 </div>
 
                 <div className="space-y-3">
                   <label className="text-[15px] text-grayScale-800">
-                    Module Order
+                    Description
                   </label>
-                  <Select defaultValue="1">
-                    <option value="1">1</option>
-                    <option value="2">2</option>
-                  </Select>
+                  <Textarea
+                    value={createDescription}
+                    onChange={(e) => setCreateDescription(e.target.value)}
+                    placeholder="Optional module description"
+                    rows={4}
+                    className="min-h-[96px] rounded-[8px] border-grayScale-400"
+                    disabled={creating || uploadingThumbnail || uploadingIcon}
+                  />
                 </div>
 
                 <div className="space-y-3">
-                  <label className="text-[15px] text-grayScale-800">Icon</label>
-                  <div className="relative group cursor-pointer">
+                  <label className="text-[15px] text-grayScale-800">Thumbnail</label>
+                  <input
+                    ref={createThumbnailFileInputRef}
+                    type="file"
+                    accept="image/*"
+                    className="sr-only"
+                    onChange={(e) => void handleCreateImageFile(e, "thumbnail")}
+                    disabled={creating || uploadingThumbnail || uploadingIcon}
+                  />
+                  <button
+                    type="button"
+                    className="relative group w-full cursor-pointer"
+                    onClick={() => createThumbnailFileInputRef.current?.click()}
+                    disabled={creating || uploadingThumbnail || uploadingIcon}
+                  >
                     <div className="flex flex-col items-center justify-center rounded-[12px] border-2 border-dashed border-grayScale-400 bg-white py-8 px-10 transition-all ">
                       <div className="mb-4">
                         <img
@@ -140,31 +529,124 @@ export function UnitManagementPage() {
                       </div>
                       <p className="text-[15px]">
                         <span className="text-brand-500 font-bold hover:underline">
-                          Click to upload
+                          {uploadingThumbnail ? "Uploading…" : "Click to upload"}
                         </span>{" "}
                         <span className="text-grayScale-500">
-                          or drag and drop
+                          or paste a URL below
                         </span>
                       </p>
                       <p className="mt-1.5 text-[12px] text-grayScale-400 uppercase tracking-widest">
-                        JPG, PNG (MAX 1 MB)
+                        JPG, PNG (MAX 5 MB)
                       </p>
                     </div>
-                  </div>
+                  </button>
+                  {createThumbnail.trim() ? (
+                    <div className="overflow-hidden rounded-xl border border-grayScale-200 bg-grayScale-50">
+                      <ResolvedImage
+                        src={createThumbnail.trim()}
+                        alt=""
+                        className="h-28 w-full object-cover"
+                      />
+                    </div>
+                  ) : null}
+                  <Input
+                    value={createThumbnail}
+                    onChange={(e) => setCreateThumbnail(e.target.value)}
+                    onPaste={(event) => {
+                      const pasted = event.clipboardData?.getData("text")?.trim();
+                      if (!pasted) return;
+                      setTimeout(() => {
+                        void autoUploadCreateUrl(pasted, "thumbnail");
+                      }, 0);
+                    }}
+                    placeholder="Optional thumbnail URL (or leave empty for null)"
+                    className="h-12 border-grayScale-400 rounded-[8px] px-4"
+                    disabled={creating || uploadingThumbnail || uploadingIcon}
+                  />
+                </div>
+
+                <div className="space-y-3">
+                  <label className="text-[15px] text-grayScale-800">Icon</label>
+                  <input
+                    ref={createIconFileInputRef}
+                    type="file"
+                    accept="image/*"
+                    className="sr-only"
+                    onChange={(e) => void handleCreateImageFile(e, "icon")}
+                    disabled={creating || uploadingThumbnail || uploadingIcon}
+                  />
+                  <button
+                    type="button"
+                    className="relative group w-full cursor-pointer"
+                    onClick={() => createIconFileInputRef.current?.click()}
+                    disabled={creating || uploadingThumbnail || uploadingIcon}
+                  >
+                    <div className="flex flex-col items-center justify-center rounded-[12px] border-2 border-dashed border-grayScale-400 bg-white py-8 px-10 transition-all ">
+                      <div className="mb-4">
+                        <img
+                          src={uploadIcon}
+                          alt="Upload icon"
+                          className="h-10 w-10"
+                        />
+                      </div>
+                      <p className="text-[15px]">
+                        <span className="text-brand-500 font-bold hover:underline">
+                          {uploadingIcon ? "Uploading…" : "Click to upload"}
+                        </span>{" "}
+                        <span className="text-grayScale-500">
+                          or paste a URL below
+                        </span>
+                      </p>
+                      <p className="mt-1.5 text-[12px] text-grayScale-400 uppercase tracking-widest">
+                        JPG, PNG (MAX 5 MB)
+                      </p>
+                    </div>
+                  </button>
+                  {createIcon.trim() ? (
+                    <div className="overflow-hidden rounded-xl border border-grayScale-200 bg-grayScale-50">
+                      <ResolvedImage
+                        src={createIcon.trim()}
+                        alt=""
+                        className="h-24 w-full object-contain bg-white p-2"
+                      />
+                    </div>
+                  ) : null}
+                  <Input
+                    value={createIcon}
+                    onChange={(e) => setCreateIcon(e.target.value)}
+                    onPaste={(event) => {
+                      const pasted = event.clipboardData?.getData("text")?.trim();
+                      if (!pasted) return;
+                      setTimeout(() => {
+                        void autoUploadCreateUrl(pasted, "icon");
+                      }, 0);
+                    }}
+                    placeholder="Optional icon URL (or leave empty for null)"
+                    className="h-12 border-grayScale-400 rounded-[8px] px-4"
+                    disabled={creating || uploadingThumbnail || uploadingIcon}
+                  />
                 </div>
               </div>
 
               <div className="px-8 py-6 bg-grayScale-50/30 border-t border-grayScale-200 flex justify-end gap-3">
                 <DialogClose asChild>
                   <Button
+                    type="button"
                     variant="outline"
                     className="h-11 px-8 rounded-[8px] border-grayScale-200 text-grayScale-700 font-bold"
+                    disabled={creating || uploadingThumbnail || uploadingIcon}
+                    onClick={clearCreateModuleForm}
                   >
                     Cancel
                   </Button>
                 </DialogClose>
-                <Button className="h-11 px-8 rounded-[8px] bg-brand-500 text-white font-bold hover:bg-brand-600">
-                  Create Module
+                <Button
+                  type="button"
+                  className="h-11 px-8 rounded-[8px] bg-brand-500 text-white font-bold hover:bg-brand-600"
+                  onClick={() => void handleCreateModule()}
+                  disabled={creating || uploadingThumbnail || uploadingIcon}
+                >
+                  {creating ? "Creating..." : "Create Module"}
                 </Button>
               </div>
             </div>
@@ -189,66 +671,337 @@ export function UnitManagementPage() {
 
       {/* Grid of Modules */}
       <div className="flex flex-wrap gap-4 pt-4">
-        {modules.map((module, index) => (
-          <Card
-            key={`${module.id}-${index}`}
-            className="group flex w-[400px] flex-col bg-white rounded-[12px] border border-grayScale-100 overflow-hidden shadow-sm hover:shadow-md transition-all"
-          >
-            {/* Gradient Header */}
-            <div
-              className="h-36 w-full"
-              style={{ background: module.gradient }}
-            />
-
-            <div className="p-5 flex flex-col space-y-4">
-              <div className="flex items-start gap-3">
-                {/* Chat Icon */}
-                <div className="mt-1 h-10 w-10 shrink-0 rounded-full bg-[#9E28911A] border border-[#9E289133] flex items-center justify-center">
-                  <MessageCircle className="h-5 w-5 text-brand-500" />
-                </div>
-
-                <div className="space-y-1">
-                  <h3 className="text-[16px] font-medium text-grayScale-900 leading-tight">
-                    {module.name}
-                  </h3>
-                  <p className="text-[12px] text-grayScale-500 font-medium">
-                    {module.description}
-                  </p>
-                </div>
+        {modulesLoading ? (
+          <p className="text-sm text-grayScale-500">Loading modules...</p>
+        ) : modules.length === 0 ? (
+          <div className="w-full rounded-xl border border-dashed border-grayScale-200 bg-grayScale-50/50 px-6 py-14 text-center">
+            <p className="text-sm font-medium text-grayScale-600">
+              No modules for this unit yet
+            </p>
+            <p className="mt-1 text-sm text-grayScale-400">
+              Create your first module to start organizing videos and practices.
+            </p>
+          </div>
+        ) : (
+          modules.map((module, index) => (
+            <Card
+              key={`${module.id}-${index}`}
+              className="group relative flex w-[400px] flex-col bg-white rounded-[12px] border border-grayScale-100 overflow-hidden shadow-sm hover:shadow-md transition-all"
+            >
+              <div className="absolute right-2 top-2 z-10 flex translate-y-1 gap-1 opacity-0 pointer-events-none transition-all duration-300 ease-out group-hover:translate-y-0 group-hover:opacity-100 group-hover:pointer-events-auto">
+                <Button
+                  type="button"
+                  variant="secondary"
+                  size="icon"
+                  className="h-8 w-8 rounded-md bg-white/95 text-grayScale-600 shadow-sm transition-colors hover:bg-white"
+                  onClick={() => openEditModule(module)}
+                  aria-label={`Edit ${module.name}`}
+                >
+                  <Pencil className="h-3.5 w-3.5" />
+                </Button>
+                <Button
+                  type="button"
+                  variant="secondary"
+                  size="icon"
+                  className="h-8 w-8 rounded-md bg-white/95 text-red-600 shadow-sm transition-colors hover:bg-red-50"
+                  onClick={() => setDeletingModuleId(module.id)}
+                  aria-label={`Delete ${module.name}`}
+                >
+                  <Trash2 className="h-3.5 w-3.5" />
+                </Button>
               </div>
-
-              {/* Stats Pills */}
-              <div className="flex items-center gap-3">
-                <div className="h-8 px-3 rounded-[6px] bg-grayScale-100 border border-grayScale-100 flex items-center gap-2 text-grayScale-600">
-                  <PlayCircle className="h-3.5 w-3.5 text-grayScale-400" />
-                  <span className="text-[12px] font-bold">
-                    {module.videos} Videos
-                  </span>
-                </div>
-                <div className="h-8 px-3 rounded-[6px] bg-grayScale-100 border border-grayScale-100 flex items-center gap-2 text-grayScale-600">
-                  <ClipboardCheck className="h-3.5 w-3.5 text-grayScale-400" />
-                  <span className="text-[12px] font-bold">
-                    {module.practices} Practices
-                  </span>
-                </div>
-              </div>
-
-              {/* Action Button */}
-              <Button
-                className="w-full h-10 bg-brand-500 text-white rounded-[6px] font-bold flex items-center justify-center gap-2 group/btn"
-                onClick={() =>
-                  navigate(
-                    `/new-content/courses/${programType}/${courseId}/${unitId}/${module.id}`,
-                  )
-                }
+              {/* Header */}
+              <div
+                className="h-36 w-full overflow-hidden"
+                style={{ background: module.gradient }}
               >
-                View Detail
-                <ArrowRight className="ml-1 h-4 w-4 transition-transform group-hover/btn:translate-x-1" />
+                {module.thumbnail ? (
+                  <ResolvedImage
+                    src={module.thumbnail}
+                    alt={`${module.name} thumbnail`}
+                    className="h-full w-full object-cover"
+                    onError={(event) => {
+                      event.currentTarget.style.display = "none";
+                    }}
+                  />
+                ) : null}
+              </div>
+
+              <div className="p-5 flex flex-col space-y-4">
+                <div className="flex items-start gap-3">
+                  <div className="mt-1 h-10 w-10 shrink-0 rounded-full bg-[#9E28911A] border border-[#9E289133] flex items-center justify-center overflow-hidden">
+                    {module.icon ? (
+                      <ResolvedImage
+                        src={module.icon}
+                        alt={`${module.name} icon`}
+                        className="h-full w-full object-cover"
+                        onError={(event) => {
+                          event.currentTarget.style.display = "none";
+                        }}
+                      />
+                    ) : (
+                      <MessageCircle className="h-5 w-5 text-brand-500" />
+                    )}
+                  </div>
+
+                  <div className="space-y-1">
+                    <h3 className="text-[16px] font-medium text-grayScale-900 leading-tight">
+                      {module.name}
+                    </h3>
+                    <p className="text-[12px] text-grayScale-500 font-medium line-clamp-2">
+                      {module.description}
+                    </p>
+                  </div>
+                </div>
+
+                {/* Stats Pills */}
+                <div className="flex items-center gap-3">
+                  <div className="h-8 px-3 rounded-[6px] bg-grayScale-100 border border-grayScale-100 flex items-center gap-2 text-grayScale-600">
+                    <PlayCircle className="h-3.5 w-3.5 text-grayScale-400" />
+                    <span className="text-[12px] font-bold">
+                      {module.videos} Videos
+                    </span>
+                  </div>
+                  <div className="h-8 px-3 rounded-[6px] bg-grayScale-100 border border-grayScale-100 flex items-center gap-2 text-grayScale-600">
+                    <ClipboardCheck className="h-3.5 w-3.5 text-grayScale-400" />
+                    <span className="text-[12px] font-bold">
+                      {module.practices} Practices
+                    </span>
+                  </div>
+                </div>
+
+                {/* Action Button */}
+                <Button
+                  className="w-full h-10 bg-brand-500 text-white rounded-[6px] font-bold flex items-center justify-center gap-2 group/btn"
+                  onClick={() =>
+                    navigate(
+                      `/new-content/courses/${programType}/${courseId}/${unitId}/${module.id}`,
+                    )
+                  }
+                >
+                  View Detail
+                  <ArrowRight className="ml-1 h-4 w-4 transition-transform group-hover/btn:translate-x-1" />
+                </Button>
+              </div>
+            </Card>
+          ))
+        )}
+      </div>
+
+      <Dialog
+        open={editingModuleId !== null}
+        onOpenChange={(open) => {
+          if (!open && (savingEdit || uploadingEditThumbnail || uploadingEditIcon)) return;
+          if (!open) closeEditModule();
+        }}
+      >
+        <DialogContent className="flex max-h-[min(90vh,calc(100dvh-2rem))] max-w-[600px] flex-col gap-0 overflow-hidden rounded-[16px] border-none p-0">
+          <div className="flex min-h-0 flex-1 flex-col bg-white">
+            <DialogHeader className="px-8 py-6 border-b border-grayScale-200 flex flex-row items-center justify-between">
+              <DialogTitle className="text-[20px] font-bold relative top-2 text-grayScale-900">
+                Edit Module
+              </DialogTitle>
+            </DialogHeader>
+            <div className="min-h-0 flex-1 overflow-y-auto p-8 space-y-8">
+              <div className="space-y-3">
+                <label className="text-[15px] text-grayScale-800">Module Title</label>
+                <Input
+                  value={editName}
+                  onChange={(e) => setEditName(e.target.value)}
+                  className="h-12 border-grayScale-400 rounded-[8px] px-4"
+                  disabled={savingEdit || uploadingEditThumbnail || uploadingEditIcon}
+                />
+              </div>
+              <div className="space-y-3">
+                <label className="text-[15px] text-grayScale-800">Description</label>
+                <Textarea
+                  value={editDescription}
+                  onChange={(e) => setEditDescription(e.target.value)}
+                  rows={4}
+                  className="min-h-[96px] rounded-[8px] border-grayScale-400"
+                  disabled={savingEdit || uploadingEditThumbnail || uploadingEditIcon}
+                />
+              </div>
+              <div className="space-y-3">
+                <label className="text-[15px] text-grayScale-800">Sort Order</label>
+                <Input
+                  type="number"
+                  min={0}
+                  value={editSortOrder}
+                  onChange={(e) => setEditSortOrder(e.target.value)}
+                  className="h-12 border-grayScale-400 rounded-[8px] px-4"
+                  disabled={savingEdit || uploadingEditThumbnail || uploadingEditIcon}
+                />
+              </div>
+              <div className="space-y-3">
+                <label className="text-[15px] text-grayScale-800">Thumbnail</label>
+                <input
+                  ref={editThumbnailFileInputRef}
+                  type="file"
+                  accept="image/*"
+                  className="sr-only"
+                  onChange={(e) => void handleEditImageFile(e, "thumbnail")}
+                  disabled={savingEdit || uploadingEditThumbnail || uploadingEditIcon}
+                />
+                <button
+                  type="button"
+                  className="relative group w-full cursor-pointer"
+                  onClick={() => editThumbnailFileInputRef.current?.click()}
+                  disabled={savingEdit || uploadingEditThumbnail || uploadingEditIcon}
+                >
+                  <div className="flex flex-col items-center justify-center rounded-[12px] border-2 border-dashed border-grayScale-400 bg-white py-8 px-10 transition-all ">
+                    <div className="mb-4">
+                      <img src={uploadIcon} alt="Upload icon" className="h-10 w-10" />
+                    </div>
+                    <p className="text-[15px]">
+                      <span className="text-brand-500 font-bold hover:underline">
+                        {uploadingEditThumbnail ? "Uploading…" : "Click to upload"}
+                      </span>{" "}
+                      <span className="text-grayScale-500">or paste a URL below</span>
+                    </p>
+                    <p className="mt-1.5 text-[12px] text-grayScale-400 uppercase tracking-widest">
+                      JPG, PNG (MAX 5 MB)
+                    </p>
+                  </div>
+                </button>
+                {editThumbnail.trim() ? (
+                  <div className="overflow-hidden rounded-xl border border-grayScale-200 bg-grayScale-50">
+                    <ResolvedImage
+                      src={editThumbnail.trim()}
+                      alt=""
+                      className="h-28 w-full object-cover"
+                    />
+                  </div>
+                ) : null}
+                <Input
+                  value={editThumbnail}
+                  onChange={(e) => setEditThumbnail(e.target.value)}
+                  onPaste={(event) => {
+                    const pasted = event.clipboardData?.getData("text")?.trim();
+                    if (!pasted) return;
+                    setTimeout(() => {
+                      void autoUploadEditUrl(pasted, "thumbnail");
+                    }, 0);
+                  }}
+                  placeholder="Optional thumbnail URL (or leave empty for null)"
+                  className="h-12 border-grayScale-400 rounded-[8px] px-4"
+                  disabled={savingEdit || uploadingEditThumbnail || uploadingEditIcon}
+                />
+              </div>
+              <div className="space-y-3">
+                <label className="text-[15px] text-grayScale-800">Icon</label>
+                <input
+                  ref={editIconFileInputRef}
+                  type="file"
+                  accept="image/*"
+                  className="sr-only"
+                  onChange={(e) => void handleEditImageFile(e, "icon")}
+                  disabled={savingEdit || uploadingEditThumbnail || uploadingEditIcon}
+                />
+                <button
+                  type="button"
+                  className="relative group w-full cursor-pointer"
+                  onClick={() => editIconFileInputRef.current?.click()}
+                  disabled={savingEdit || uploadingEditThumbnail || uploadingEditIcon}
+                >
+                  <div className="flex flex-col items-center justify-center rounded-[12px] border-2 border-dashed border-grayScale-400 bg-white py-8 px-10 transition-all ">
+                    <div className="mb-4">
+                      <img src={uploadIcon} alt="Upload icon" className="h-10 w-10" />
+                    </div>
+                    <p className="text-[15px]">
+                      <span className="text-brand-500 font-bold hover:underline">
+                        {uploadingEditIcon ? "Uploading…" : "Click to upload"}
+                      </span>{" "}
+                      <span className="text-grayScale-500">or paste a URL below</span>
+                    </p>
+                    <p className="mt-1.5 text-[12px] text-grayScale-400 uppercase tracking-widest">
+                      JPG, PNG (MAX 5 MB)
+                    </p>
+                  </div>
+                </button>
+                {editIcon.trim() ? (
+                  <div className="overflow-hidden rounded-xl border border-grayScale-200 bg-grayScale-50">
+                    <ResolvedImage
+                      src={editIcon.trim()}
+                      alt=""
+                      className="h-24 w-full object-contain bg-white p-2"
+                    />
+                  </div>
+                ) : null}
+                <Input
+                  value={editIcon}
+                  onChange={(e) => setEditIcon(e.target.value)}
+                  onPaste={(event) => {
+                    const pasted = event.clipboardData?.getData("text")?.trim();
+                    if (!pasted) return;
+                    setTimeout(() => {
+                      void autoUploadEditUrl(pasted, "icon");
+                    }, 0);
+                  }}
+                  placeholder="Optional icon URL (or leave empty for null)"
+                  className="h-12 border-grayScale-400 rounded-[8px] px-4"
+                  disabled={savingEdit || uploadingEditThumbnail || uploadingEditIcon}
+                />
+              </div>
+            </div>
+            <div className="px-8 py-6 bg-grayScale-50/30 border-t border-grayScale-200 flex justify-end gap-3">
+              <Button
+                type="button"
+                variant="outline"
+                className="h-11 px-8 rounded-[8px] border-grayScale-200 text-grayScale-700 font-bold"
+                disabled={savingEdit || uploadingEditThumbnail || uploadingEditIcon}
+                onClick={closeEditModule}
+              >
+                Cancel
+              </Button>
+              <Button
+                type="button"
+                className="h-11 px-8 rounded-[8px] bg-brand-500 text-white font-bold hover:bg-brand-600"
+                onClick={() => void handleSaveEditModule()}
+                disabled={savingEdit || uploadingEditThumbnail || uploadingEditIcon}
+              >
+                {savingEdit ? "Saving..." : "Save Changes"}
               </Button>
             </div>
-          </Card>
-        ))}
-      </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      <Dialog
+        open={deletingModuleId !== null}
+        onOpenChange={(open) => {
+          if (!open && !deletingModule) setDeletingModuleId(null);
+        }}
+      >
+        <DialogContent className="max-w-md rounded-[16px] border-none p-0 overflow-hidden">
+          <div className="bg-white">
+            <DialogHeader className="border-b border-grayScale-100 px-6 py-5">
+              <DialogTitle className="text-lg font-bold text-grayScale-900">
+                Delete Module
+              </DialogTitle>
+            </DialogHeader>
+            <div className="px-6 py-6 text-sm text-grayScale-600">
+              Are you sure you want to delete this module? This action cannot be undone.
+            </div>
+            <div className="flex justify-end gap-3 border-t border-grayScale-100 px-6 py-4">
+              <Button
+                variant="outline"
+                onClick={() => setDeletingModuleId(null)}
+                disabled={deletingModule}
+              >
+                Cancel
+              </Button>
+              <Button
+                className="bg-red-500 hover:bg-red-600"
+                onClick={() => void handleDeleteModule()}
+                disabled={deletingModule}
+              >
+                {deletingModule ? "Deleting..." : "Delete"}
+              </Button>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }
diff --git a/src/pages/content-management/components/practice-steps/VoicePrompt.tsx b/src/pages/content-management/components/practice-steps/VoicePrompt.tsx
index b570776..714256e 100644
--- a/src/pages/content-management/components/practice-steps/VoicePrompt.tsx
+++ b/src/pages/content-management/components/practice-steps/VoicePrompt.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 import { Play, Pause, X } from "lucide-react";
 import { cn } from "../../../../lib/utils";
+import { resolveDisplayMediaUrl } from "../../../../lib/mediaUrl";
 
 interface VoicePromptProps {
   /** Either a URL/path to the audio file, or a filename string (for display-only mode) */
@@ -21,13 +22,34 @@ export function VoicePrompt({
   const [bars, setBars] = useState<number[]>([]);
   const [isPlaying, setIsPlaying] = useState(false);
   const [progress, setProgress] = useState(0); // 0–1
+  const [playableSrc, setPlayableSrc] = useState("");
 
   const audioRef = useRef<HTMLAudioElement | null>(null);
   const rafRef = useRef<number | null>(null);
 
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      const raw = src?.trim() || "";
+      if (!raw) {
+        setPlayableSrc("");
+        return;
+      }
+      try {
+        const resolved = await resolveDisplayMediaUrl(raw);
+        if (!cancelled) setPlayableSrc(resolved || raw);
+      } catch {
+        if (!cancelled) setPlayableSrc(raw);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [src]);
+
   // ─── Decode audio and build waveform bars ───────────────────────────────────
   useEffect(() => {
-    if (!src) {
+    if (!playableSrc) {
       // No real audio — generate plausible static bars
       setBars(generateFakeBars());
       return;
@@ -36,7 +58,7 @@ export function VoicePrompt({
     let cancelled = false;
     const audioCtx = new AudioContext();
 
-    fetch(src)
+    fetch(playableSrc)
       .then((r) => r.arrayBuffer())
       .then((buf) => audioCtx.decodeAudioData(buf))
       .then((decoded) => {
@@ -62,7 +84,15 @@ export function VoicePrompt({
     return () => {
       cancelled = true;
     };
-  }, [src]);
+  }, [playableSrc]);
+
+  useEffect(() => {
+    audioRef.current?.pause();
+    audioRef.current = null;
+    setIsPlaying(false);
+    setProgress(0);
+    stopProgressLoop();
+  }, [playableSrc]);
 
   // ─── Sync progress while playing ────────────────────────────────────────────
   const startProgressLoop = () => {
@@ -84,10 +114,10 @@ export function VoicePrompt({
 
   // ─── Play / Pause ────────────────────────────────────────────────────────────
   const handlePlayPause = () => {
-    if (!src) return;
+    if (!playableSrc) return;
 
     if (!audioRef.current) {
-      audioRef.current = new Audio(src);
+      audioRef.current = new Audio(playableSrc);
       audioRef.current.onended = () => {
         setIsPlaying(false);
         setProgress(0);
diff --git a/src/types/course.types.ts b/src/types/course.types.ts
index 1637a01..d989635 100644
--- a/src/types/course.types.ts
+++ b/src/types/course.types.ts
@@ -143,6 +143,234 @@ export interface CreateProgramCourseResponse {
   metadata: unknown | null
 }
 
+/** Exam prep catalog course row (e.g. IELTS / DET cards) */
+export interface ExamPrepCatalogCourseItem {
+  id: number
+  name: string
+  description?: string | null
+  thumbnail?: string | null
+  sort_order?: number
+  units_count?: number
+  modules_count?: number
+  lessons_count?: number
+  created_at?: string
+  updated_at?: string
+}
+
+export interface CreateExamPrepCatalogCourseRequest {
+  name: string
+  description?: string | null
+  thumbnail?: string | null
+}
+
+export interface CreateExamPrepCatalogCourseResponse {
+  message: string
+  data: ExamPrepCatalogCourseItem
+  success: boolean
+  status_code: number
+  metadata: unknown | null
+}
+
+export interface GetExamPrepCatalogCoursesResponse {
+  message: string
+  data: {
+    offset: number
+    limit: number
+    total_count: number
+    catalog_courses: ExamPrepCatalogCourseItem[]
+  }
+  success: boolean
+  status_code: number
+  metadata: unknown | null
+}
+
+export interface UpdateExamPrepCatalogCourseRequest {
+  name: string
+  description?: string | null
+  thumbnail?: string | null
+  sort_order: number
+}
+
+export interface UpdateExamPrepCatalogCourseResponse {
+  message: string
+  data: ExamPrepCatalogCourseItem
+  success: boolean
+  status_code: number
+  metadata: unknown | null
+}
+
+export interface ExamPrepCatalogUnitItem {
+  id: number
+  catalog_course_id: number
+  name: string
+  description?: string | null
+  thumbnail?: string | null
+  sort_order?: number
+  modules_count?: number
+  lessons_count?: number
+  videos_count?: number
+  practices_count?: number
+  created_at?: string
+  updated_at?: string
+}
+
+export interface CreateExamPrepCatalogUnitRequest {
+  name: string
+  description?: string | null
+  thumbnail?: string | null
+}
+
+export interface CreateExamPrepCatalogUnitResponse {
+  message: string
+  data: ExamPrepCatalogUnitItem
+  success: boolean
+  status_code: number
+  metadata: unknown | null
+}
+
+export interface UpdateExamPrepCatalogUnitRequest {
+  name: string
+  description?: string | null
+  thumbnail?: string | null
+  sort_order: number
+}
+
+export interface UpdateExamPrepCatalogUnitResponse {
+  message: string
+  data: ExamPrepCatalogUnitItem
+  success: boolean
+  status_code: number
+  metadata: unknown | null
+}
+
+export interface GetExamPrepCatalogUnitsResponse {
+  message: string
+  data: {
+    offset: number
+    limit: number
+    total_count: number
+    units: ExamPrepCatalogUnitItem[]
+  }
+  success: boolean
+  status_code: number
+  metadata: unknown | null
+}
+
+export interface ExamPrepUnitModuleItem {
+  id: number
+  unit_id: number
+  name: string
+  description?: string | null
+  thumbnail?: string | null
+  icon?: string | null
+  sort_order?: number
+  lessons_count?: number
+  videos_count?: number
+  practices_count?: number
+  created_at?: string
+  updated_at?: string
+}
+
+export interface CreateExamPrepUnitModuleRequest {
+  name: string
+  description?: string | null
+  thumbnail?: string | null
+  icon?: string | null
+}
+
+export interface CreateExamPrepUnitModuleResponse {
+  message: string
+  data: ExamPrepUnitModuleItem
+  success: boolean
+  status_code: number
+  metadata: unknown | null
+}
+
+export interface UpdateExamPrepUnitModuleRequest {
+  name: string
+  description?: string | null
+  thumbnail?: string | null
+  icon?: string | null
+  sort_order: number
+}
+
+export interface UpdateExamPrepUnitModuleResponse {
+  message: string
+  data: ExamPrepUnitModuleItem
+  success: boolean
+  status_code: number
+  metadata: unknown | null
+}
+
+export interface GetExamPrepUnitModulesResponse {
+  message: string
+  data: {
+    offset: number
+    limit: number
+    total_count: number
+    modules: ExamPrepUnitModuleItem[]
+  }
+  success: boolean
+  status_code: number
+  metadata: unknown | null
+}
+
+export interface ExamPrepModuleLessonItem {
+  id: number
+  unit_module_id: number
+  title: string
+  video_url: string
+  thumbnail?: string | null
+  description?: string | null
+  sort_order?: number
+  created_at?: string
+  updated_at?: string
+}
+
+export interface CreateExamPrepModuleLessonRequest {
+  title: string
+  video_url: string
+  thumbnail?: string | null
+  description?: string | null
+}
+
+export interface CreateExamPrepModuleLessonResponse {
+  message: string
+  data: ExamPrepModuleLessonItem
+  success: boolean
+  status_code: number
+  metadata: unknown | null
+}
+
+export interface UpdateExamPrepModuleLessonRequest {
+  title: string
+  video_url?: string | null
+  thumbnail?: string | null
+  description?: string | null
+  sort_order: number
+}
+
+export interface UpdateExamPrepModuleLessonResponse {
+  message: string
+  data: ExamPrepModuleLessonItem
+  success: boolean
+  status_code: number
+  metadata: unknown | null
+}
+
+export interface GetExamPrepModuleLessonsResponse {
+  message: string
+  data: {
+    lessons: ExamPrepModuleLessonItem[]
+    total_count: number
+    limit: number
+    offset: number
+  }
+  success: boolean
+  status_code: number
+  metadata: unknown | null
+}
+
 export interface GetProgramCoursesResponse {
   message: string
   data: {