From 588b238b497cc89748d3f3f753bc94d80f468415 Mon Sep 17 00:00:00 2001
From: Yared Yemane <yaredyemane1@gmail.com>
Date: Tue, 14 Apr 2026 05:09:28 -0700
Subject: [PATCH 1/3] fix human language hierarchy rendering after create

Normalize flat hierarchy rows from backend into the nested shape expected by the content-management page so new sub-categories and courses show immediately.

Made-with: Cursor
---
 src/api/courses.api.ts | 180 ++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 179 insertions(+), 1 deletion(-)

diff --git a/src/api/courses.api.ts b/src/api/courses.api.ts
index 2565f64..c93de0f 100644
--- a/src/api/courses.api.ts
+++ b/src/api/courses.api.ts
@@ -507,7 +507,185 @@ export const getHumanLanguageLessonsByCourse = (courseId: number, cefr_level: st
   })
 
 export const getHumanLanguageHierarchy = () =>
-  http.get<GetHumanLanguageHierarchyResponse>("/course-management/hierarchy")
+  http.get<GetHumanLanguageHierarchyResponse>("/course-management/hierarchy").then(async (res) => {
+    const payload = res.data?.data as unknown
+    if (payload && typeof payload === "object" && !Array.isArray(payload) && "sub_categories" in payload) {
+      return res
+    }
+
+    const rows: UnifiedHierarchyRow[] = Array.isArray(payload) ? payload : []
+    const categoryMap = new Map<
+      number,
+      {
+        category_id: number
+        category_name: string
+        sub_categories: Map<
+          number,
+          {
+            sub_category_id: number
+            sub_category_name: string
+            courses: Map<
+              number,
+              {
+                course_id: number
+                course_name: string
+              }
+            >
+          }
+        >
+      }
+    >()
+
+    rows.forEach((row) => {
+      const categoryId = Number(row.category_id)
+      if (!Number.isFinite(categoryId)) return
+
+      if (!categoryMap.has(categoryId)) {
+        categoryMap.set(categoryId, {
+          category_id: categoryId,
+          category_name: row.category_name ?? "",
+          sub_categories: new Map(),
+        })
+      }
+
+      if (!row.sub_category_id) return
+      const subCategoryId = Number(row.sub_category_id)
+      if (!Number.isFinite(subCategoryId)) return
+
+      const categoryNode = categoryMap.get(categoryId)!
+      if (!categoryNode.sub_categories.has(subCategoryId)) {
+        categoryNode.sub_categories.set(subCategoryId, {
+          sub_category_id: subCategoryId,
+          sub_category_name: row.sub_category_name ?? "",
+          courses: new Map(),
+        })
+      }
+
+      if (!row.course_id) return
+      const courseId = Number(row.course_id)
+      if (!Number.isFinite(courseId)) return
+
+      const subCategoryNode = categoryNode.sub_categories.get(subCategoryId)!
+      if (!subCategoryNode.courses.has(courseId)) {
+        subCategoryNode.courses.set(courseId, {
+          course_id: courseId,
+          course_name: row.course_title ?? "",
+        })
+      }
+    })
+
+    const selectedCategory =
+      Array.from(categoryMap.values()).find((c) => c.category_name.toLowerCase().includes("human")) ??
+      Array.from(categoryMap.values())[0]
+
+    if (!selectedCategory) {
+      return {
+        ...res,
+        data: {
+          ...res.data,
+          data: {
+            category_id: 0,
+            category_name: "",
+            sub_categories: [],
+          },
+        },
+      } as unknown as { data: GetHumanLanguageHierarchyResponse }
+    }
+
+    const courses = Array.from(selectedCategory.sub_categories.values()).flatMap((sub) =>
+      Array.from(sub.courses.values()).map((course) => ({ sub_category_id: sub.sub_category_id, course })),
+    )
+
+    const hierarchyResponses = await Promise.all(
+      courses.map(({ course }) =>
+        http
+          .get(`/course-management/courses/${course.course_id}/hierarchy`)
+          .then((courseRes) => ({ course_id: course.course_id, rows: (courseRes.data?.data ?? []) as CourseHierarchyRow[] }))
+          .catch(() => ({ course_id: course.course_id, rows: [] as CourseHierarchyRow[] })),
+      ),
+    )
+
+    const hierarchyByCourse = new Map<number, CourseHierarchyRow[]>(
+      hierarchyResponses.map((h) => [h.course_id, h.rows]),
+    )
+
+    const subCategories = Array.from(selectedCategory.sub_categories.values()).map((sub) => ({
+      sub_category_id: sub.sub_category_id,
+      sub_category_name: sub.sub_category_name,
+      courses: Array.from(sub.courses.values()).map((course) => {
+        const levelMap = new Map<
+          string,
+          {
+            level: string
+            modules: Map<
+              number,
+              {
+                id: number
+                title: string
+                sub_modules: Map<number, { id: number; title: string; videos: []; practices: [] }>
+              }
+            >
+          }
+        >()
+
+        ;(hierarchyByCourse.get(course.course_id) ?? []).forEach((row) => {
+          if (!row.level_id || !row.cefr_level) return
+          const levelKey = String(row.cefr_level).toUpperCase()
+          if (!levelMap.has(levelKey)) {
+            levelMap.set(levelKey, { level: levelKey, modules: new Map() })
+          }
+
+          if (!row.module_id) return
+          const levelNode = levelMap.get(levelKey)!
+          const moduleId = Number(row.module_id)
+          if (!levelNode.modules.has(moduleId)) {
+            levelNode.modules.set(moduleId, {
+              id: moduleId,
+              title: row.module_title ?? "",
+              sub_modules: new Map(),
+            })
+          }
+
+          if (!row.sub_module_id) return
+          const moduleNode = levelNode.modules.get(moduleId)!
+          const subModuleId = Number(row.sub_module_id)
+          if (!moduleNode.sub_modules.has(subModuleId)) {
+            moduleNode.sub_modules.set(subModuleId, {
+              id: subModuleId,
+              title: row.sub_module_title ?? "",
+              videos: [],
+              practices: [],
+            })
+          }
+        })
+
+        return {
+          course_id: course.course_id,
+          course_name: course.course_name,
+          levels: Array.from(levelMap.values()).map((levelNode) => ({
+            level: levelNode.level,
+            modules: Array.from(levelNode.modules.values()).map((moduleNode) => ({
+              id: moduleNode.id,
+              title: moduleNode.title,
+              sub_modules: Array.from(moduleNode.sub_modules.values()),
+            })),
+          })),
+        }
+      }),
+    }))
+
+    return {
+      ...res,
+      data: {
+        ...res.data,
+        data: {
+          category_id: selectedCategory.category_id,
+          category_name: selectedCategory.category_name,
+          sub_categories: subCategories,
+        },
+      },
+    } as unknown as { data: GetHumanLanguageHierarchyResponse }
+  })
 
 export const createHumanLanguageLesson = (data: CreateHumanLanguageLessonRequest) =>
   http

From 1480eefbe6c09bd98037015cc81fcc9cd9fdf761 Mon Sep 17 00:00:00 2001
From: elnatansamuel25 <elnatansamuel25@gmail.com>
Date: Wed, 22 Apr 2026 17:10:43 +0300
Subject: [PATCH 2/3] yes

---
 package-lock.json                             |  10 +-
 package.json                                  |   1 +
 src/app/AppRoutes.tsx                         | 195 +++++++----
 src/assets/icons/upload.png                   | Bin 0 -> 4035 bytes
 src/components/sidebar/Sidebar.tsx            | 112 +++---
 src/components/ui/input.tsx                   |  36 +-
 src/components/ui/stepper.tsx                 |  85 +++--
 .../content-management/AddPracticeFlow.tsx    | 259 ++++++++++++++
 src/pages/content-management/AddVideoFlow.tsx | 155 +++++++++
 .../content-management/CourseDetailPage.tsx   | 160 +++++++++
 .../content-management/LearnEnglishPage.tsx   | 214 ++++++++++++
 .../content-management/ModuleDetailPage.tsx   | 321 ++++++++++++++++++
 .../content-management/NewContentPage.tsx     |  81 +++++
 .../content-management/ProgramCoursesPage.tsx | 265 +++++++++++++++
 .../components/AddModuleModal.tsx             | 131 +++++++
 .../components/VideoCard.tsx                  | 100 ++++++
 .../components/practice-steps/ContextStep.tsx | 146 ++++++++
 .../components/practice-steps/PersonaStep.tsx |  91 +++++
 .../practice-steps/QuestionsStep.tsx          | 140 ++++++++
 .../components/practice-steps/ReviewStep.tsx  | 290 ++++++++++++++++
 .../practice-steps/ScenarioStep.tsx           | 115 +++++++
 .../components/practice-steps/VoicePrompt.tsx |  44 +++
 .../components/practice-steps/constants.ts    |  44 +++
 .../video-steps/ReviewPublishStep.tsx         | 162 +++++++++
 .../video-steps/VideoDetailStep.tsx           | 257 ++++++++++++++
 25 files changed, 3238 insertions(+), 176 deletions(-)
 create mode 100644 src/assets/icons/upload.png
 create mode 100644 src/pages/content-management/AddPracticeFlow.tsx
 create mode 100644 src/pages/content-management/AddVideoFlow.tsx
 create mode 100644 src/pages/content-management/CourseDetailPage.tsx
 create mode 100644 src/pages/content-management/LearnEnglishPage.tsx
 create mode 100644 src/pages/content-management/ModuleDetailPage.tsx
 create mode 100644 src/pages/content-management/NewContentPage.tsx
 create mode 100644 src/pages/content-management/ProgramCoursesPage.tsx
 create mode 100644 src/pages/content-management/components/AddModuleModal.tsx
 create mode 100644 src/pages/content-management/components/VideoCard.tsx
 create mode 100644 src/pages/content-management/components/practice-steps/ContextStep.tsx
 create mode 100644 src/pages/content-management/components/practice-steps/PersonaStep.tsx
 create mode 100644 src/pages/content-management/components/practice-steps/QuestionsStep.tsx
 create mode 100644 src/pages/content-management/components/practice-steps/ReviewStep.tsx
 create mode 100644 src/pages/content-management/components/practice-steps/ScenarioStep.tsx
 create mode 100644 src/pages/content-management/components/practice-steps/VoicePrompt.tsx
 create mode 100644 src/pages/content-management/components/practice-steps/constants.ts
 create mode 100644 src/pages/content-management/components/video-steps/ReviewPublishStep.tsx
 create mode 100644 src/pages/content-management/components/video-steps/VideoDetailStep.tsx

diff --git a/package-lock.json b/package-lock.json
index 0fb2f56..3a96594 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,7 @@
         "lucide-react": "^0.561.0",
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
+        "react-is": "^19.2.5",
         "react-router-dom": "^7.10.1",
         "recharts": "^3.6.0",
         "sonner": "^2.0.7",
@@ -5315,11 +5316,10 @@
       }
     },
     "node_modules/react-is": {
-      "version": "19.2.3",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.3.tgz",
-      "integrity": "sha512-qJNJfu81ByyabuG7hPFEbXqNcWSU3+eVus+KJs+0ncpGfMyYdvSmxiJxbWR65lYi1I+/0HBcliO029gc4F+PnA==",
-      "license": "MIT",
-      "peer": true
+      "version": "19.2.5",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.5.tgz",
+      "integrity": "sha512-Dn0t8IQhCmeIT3wu+Apm1/YVsJXsGWi6k4sPdnBIdqMVtHtv0IGi6dcpNpNkNac0zB2uUAqNX3MHzN8c+z2rwQ==",
+      "license": "MIT"
     },
     "node_modules/react-redux": {
       "version": "9.2.0",
diff --git a/package.json b/package.json
index eba2940..57f998e 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "lucide-react": "^0.561.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "react-is": "^19.2.5",
     "react-router-dom": "^7.10.1",
     "recharts": "^3.6.0",
     "sonner": "^2.0.7",
diff --git a/src/app/AppRoutes.tsx b/src/app/AppRoutes.tsx
index 5c75232..7502414 100644
--- a/src/app/AppRoutes.tsx
+++ b/src/app/AppRoutes.tsx
@@ -1,52 +1,59 @@
-import { Navigate, Route, Routes } from "react-router-dom"
-import { AppLayout } from "../layouts/AppLayout"
-import { DashboardPage } from "../pages/DashboardPage"
-import { AnalyticsPage } from "../pages/analytics/AnalyticsPage"
-import { ContentManagementLayout } from "../pages/content-management/ContentManagementLayout"
-import { CourseCategoryPage } from "../pages/content-management/CourseCategoryPage"
-import { AllCoursesPage } from "../pages/content-management/AllCoursesPage"
-import { CourseFlowBuilderPage } from "../pages/content-management/CourseFlowBuilderPage"
-import { ContentOverviewPage } from "../pages/content-management/ContentOverviewPage"
-import { CoursesPage } from "../pages/content-management/CoursesPage"
-import { PracticeQuestionsPage } from "../pages/content-management/PracticeQuestionsPage"
-import { AddNewPracticePage } from "../pages/content-management/AddNewPracticePage"
-import { SubModulesPage } from "../pages/content-management/SubCoursesPage"
-import { SubModuleContentPage } from "../pages/content-management/SubCourseContentPage"
-import { SpeakingPage } from "../pages/content-management/SpeakingPage"
-import { AddVideoPage } from "../pages/content-management/AddVideoPage"
-import { AddPracticePage } from "../pages/content-management/AddPracticePage"
-import { NotFoundPage } from "../pages/NotFoundPage"
-import { NotificationsPage } from "../pages/notifications/NotificationsPage"
-import { CreateNotificationPage } from "../pages/notifications/CreateNotificationPage"
-import { UserDetailPage } from "../pages/user-management/UserDetailPage"
-import { UserManagementLayout } from "../pages/user-management/UserManagementLayout"
-import { UsersListPage } from "../pages/user-management/UsersListPage"
-import { UserManagementDashboard } from "../pages/user-management/UserManagementDashboard"
-import { UserGroupsPage } from "../pages/user-management/UserGroupsPage"
-import { DeletionRequestsPage } from "../pages/user-management/DeletionRequestsPage"
-import { RoleManagementLayout } from "../pages/role-management/RoleManagementLayout"
-import { RolesListPage } from "../pages/role-management/RolesListPage"
-import { AddRolePage } from "../pages/role-management/AddRolePage"
-import { PracticeDetailsPage } from "../pages/content-management/PracticeDetailsPage"
-import { PracticeMembersPage } from "../pages/content-management/PracticeMembersPage"
-import { QuestionsPage } from "../pages/content-management/QuestionsPage"
-import { AddQuestionPage } from "../pages/content-management/AddQuestionPage"
-import { HumanLanguagePage } from "../pages/content-management/HumanLanguagePage"
-import { HumanLanguageSubModulePage } from "../pages/content-management/HumanLanguageSubModulePage"
-import { UserLogPage } from "../pages/user-log/UserLogPage"
-import { IssuesPage } from "../pages/issues/IssuesPage"
-import { ProfilePage } from "../pages/ProfilePage"
-import { SettingsPage } from "../pages/SettingsPage"
-import { TeamManagementPage } from "../pages/team/TeamManagementPage"
-import { AddTeamMemberPage } from "../pages/team/AddTeamMemberPage"
-import { TeamMemberDetailPage } from "../pages/team/TeamMemberDetailPage"
-import { LoginPage } from "../pages/auth/LoginPage"
-import { ForgotPasswordPage } from "../pages/auth/ForgotPasswordPage"
-import { VerificationPage } from "../pages/auth/VerificationPage"
-import { AboutPage } from "../pages/AboutPage"
-import { TermsPage } from "../pages/TermsPage"
-import { PrivacyPage } from "../pages/PrivacyPage"
-import { AccountDeletionPage } from "../pages/AccountDeletionPage"
+import { Navigate, Route, Routes } from "react-router-dom";
+import { AppLayout } from "../layouts/AppLayout";
+import { DashboardPage } from "../pages/DashboardPage";
+import { AnalyticsPage } from "../pages/analytics/AnalyticsPage";
+import { ContentManagementLayout } from "../pages/content-management/ContentManagementLayout";
+import { CourseCategoryPage } from "../pages/content-management/CourseCategoryPage";
+import { AllCoursesPage } from "../pages/content-management/AllCoursesPage";
+import { CourseFlowBuilderPage } from "../pages/content-management/CourseFlowBuilderPage";
+import { ContentOverviewPage } from "../pages/content-management/ContentOverviewPage";
+import { CoursesPage } from "../pages/content-management/CoursesPage";
+import { PracticeQuestionsPage } from "../pages/content-management/PracticeQuestionsPage";
+import { AddNewPracticePage } from "../pages/content-management/AddNewPracticePage";
+import { SubModulesPage } from "../pages/content-management/SubCoursesPage";
+import { SubModuleContentPage } from "../pages/content-management/SubCourseContentPage";
+import { SpeakingPage } from "../pages/content-management/SpeakingPage";
+import { AddVideoPage } from "../pages/content-management/AddVideoPage";
+import { AddPracticePage } from "../pages/content-management/AddPracticePage";
+import { NewContentPage } from "../pages/content-management/NewContentPage";
+import { LearnEnglishPage } from "../pages/content-management/LearnEnglishPage";
+import { ProgramCoursesPage } from "../pages/content-management/ProgramCoursesPage";
+import { CourseDetailPage } from "../pages/content-management/CourseDetailPage";
+import { ModuleDetailPage } from "../pages/content-management/ModuleDetailPage";
+import { AddVideoFlow } from "../pages/content-management/AddVideoFlow";
+import { AddPracticeFlow } from "../pages/content-management/AddPracticeFlow";
+import { NotFoundPage } from "../pages/NotFoundPage";
+import { NotificationsPage } from "../pages/notifications/NotificationsPage";
+import { CreateNotificationPage } from "../pages/notifications/CreateNotificationPage";
+import { UserDetailPage } from "../pages/user-management/UserDetailPage";
+import { UserManagementLayout } from "../pages/user-management/UserManagementLayout";
+import { UsersListPage } from "../pages/user-management/UsersListPage";
+import { UserManagementDashboard } from "../pages/user-management/UserManagementDashboard";
+import { UserGroupsPage } from "../pages/user-management/UserGroupsPage";
+import { DeletionRequestsPage } from "../pages/user-management/DeletionRequestsPage";
+import { RoleManagementLayout } from "../pages/role-management/RoleManagementLayout";
+import { RolesListPage } from "../pages/role-management/RolesListPage";
+import { AddRolePage } from "../pages/role-management/AddRolePage";
+import { PracticeDetailsPage } from "../pages/content-management/PracticeDetailsPage";
+import { PracticeMembersPage } from "../pages/content-management/PracticeMembersPage";
+import { QuestionsPage } from "../pages/content-management/QuestionsPage";
+import { AddQuestionPage } from "../pages/content-management/AddQuestionPage";
+import { HumanLanguagePage } from "../pages/content-management/HumanLanguagePage";
+import { HumanLanguageSubModulePage } from "../pages/content-management/HumanLanguageSubModulePage";
+import { UserLogPage } from "../pages/user-log/UserLogPage";
+import { IssuesPage } from "../pages/issues/IssuesPage";
+import { ProfilePage } from "../pages/ProfilePage";
+import { SettingsPage } from "../pages/SettingsPage";
+import { TeamManagementPage } from "../pages/team/TeamManagementPage";
+import { AddTeamMemberPage } from "../pages/team/AddTeamMemberPage";
+import { TeamMemberDetailPage } from "../pages/team/TeamMemberDetailPage";
+import { LoginPage } from "../pages/auth/LoginPage";
+import { ForgotPasswordPage } from "../pages/auth/ForgotPasswordPage";
+import { VerificationPage } from "../pages/auth/VerificationPage";
+import { AboutPage } from "../pages/AboutPage";
+import { TermsPage } from "../pages/TermsPage";
+import { PrivacyPage } from "../pages/PrivacyPage";
+import { AccountDeletionPage } from "../pages/AccountDeletionPage";
 
 export function AppRoutes() {
   return (
@@ -91,19 +98,52 @@ export function AppRoutes() {
             path="human-language/:categoryId/:courseId/sub-module/:subModuleId"
             element={<HumanLanguageSubModulePage />}
           />
-          <Route path="category/:categoryId" element={<ContentOverviewPage />} />
-          <Route path="category/:categoryId/courses" element={<CoursesPage />} />
+          <Route
+            path="category/:categoryId"
+            element={<ContentOverviewPage />}
+          />
+          <Route
+            path="category/:categoryId/courses"
+            element={<CoursesPage />}
+          />
           {/* Course → Sub-module → Lesson/Practice */}
-          <Route path="category/:categoryId/courses/:courseId/sub-modules" element={<SubModulesPage />} />
-          <Route path="category/:categoryId/courses/:courseId/sub-modules/:subModuleId" element={<SubModuleContentPage />} />
-          <Route path="category/:categoryId/courses/:courseId/sub-modules/:subModuleId/add-practice" element={<AddNewPracticePage />} />
-          <Route path="category/:categoryId/courses/:courseId/sub-modules/:subModuleId/practices/:practiceId/questions" element={<PracticeQuestionsPage />} />
+          <Route
+            path="category/:categoryId/courses/:courseId/sub-modules"
+            element={<SubModulesPage />}
+          />
+          <Route
+            path="category/:categoryId/courses/:courseId/sub-modules/:subModuleId"
+            element={<SubModuleContentPage />}
+          />
+          <Route
+            path="category/:categoryId/courses/:courseId/sub-modules/:subModuleId/add-practice"
+            element={<AddNewPracticePage />}
+          />
+          <Route
+            path="category/:categoryId/courses/:courseId/sub-modules/:subModuleId/practices/:practiceId/questions"
+            element={<PracticeQuestionsPage />}
+          />
           {/* Legacy aliases */}
-          <Route path="category/:categoryId/courses/:courseId/sub-courses" element={<SubModulesPage />} />
-          <Route path="category/:categoryId/courses/:courseId/sub-courses/:subModuleId" element={<SubModuleContentPage />} />
-          <Route path="category/:categoryId/courses/:courseId/sub-courses/:subModuleId/add-practice" element={<AddNewPracticePage />} />
-          <Route path="category/:categoryId/courses/:courseId/sub-courses/:subModuleId/practices/:practiceId/questions" element={<PracticeQuestionsPage />} />
-          <Route path="category/:categoryId/courses/add-video" element={<AddVideoPage />} />
+          <Route
+            path="category/:categoryId/courses/:courseId/sub-courses"
+            element={<SubModulesPage />}
+          />
+          <Route
+            path="category/:categoryId/courses/:courseId/sub-courses/:subModuleId"
+            element={<SubModuleContentPage />}
+          />
+          <Route
+            path="category/:categoryId/courses/:courseId/sub-courses/:subModuleId/add-practice"
+            element={<AddNewPracticePage />}
+          />
+          <Route
+            path="category/:categoryId/courses/:courseId/sub-courses/:subModuleId/practices/:practiceId/questions"
+            element={<PracticeQuestionsPage />}
+          />
+          <Route
+            path="category/:categoryId/courses/add-video"
+            element={<AddVideoPage />}
+          />
           <Route path="speaking" element={<SpeakingPage />} />
           <Route path="speaking/add-practice" element={<AddPracticePage />} />
           <Route path="practices" element={<PracticeDetailsPage />} />
@@ -113,8 +153,37 @@ export function AppRoutes() {
           <Route path="questions/edit/:id" element={<AddQuestionPage />} />
         </Route>
 
+        <Route path="/new-content" element={<NewContentPage />} />
+        <Route
+          path="/new-content/learn-english"
+          element={<LearnEnglishPage />}
+        />
+        <Route
+          path="/new-content/learn-english/:level/courses"
+          element={<ProgramCoursesPage />}
+        />
+        <Route
+          path="/new-content/learn-english/:level/courses/:courseId"
+          element={<CourseDetailPage />}
+        />
+        <Route
+          path="/new-content/learn-english/:level/courses/:courseId/modules/:moduleId"
+          element={<ModuleDetailPage />}
+        />
+        <Route
+          path="/new-content/learn-english/:level/courses/:courseId/modules/:moduleId/add-video"
+          element={<AddVideoFlow />}
+        />
+        <Route
+          path="/new-content/learn-english/:level/courses/add-practice"
+          element={<AddPracticeFlow />}
+        />
+
         <Route path="/notifications" element={<NotificationsPage />} />
-        <Route path="/notifications/create" element={<CreateNotificationPage />} />
+        <Route
+          path="/notifications/create"
+          element={<CreateNotificationPage />}
+        />
         <Route path="/user-log" element={<UserLogPage />} />
         <Route path="/issues" element={<IssuesPage />} />
         <Route path="/analytics" element={<AnalyticsPage />} />
@@ -128,7 +197,5 @@ export function AppRoutes() {
 
       <Route path="*" element={<NotFoundPage />} />
     </Routes>
-  )
+  );
 }
-
-
diff --git a/src/assets/icons/upload.png b/src/assets/icons/upload.png
new file mode 100644
index 0000000000000000000000000000000000000000..44342e3ce74dc8fb6c15cf95483301a1af018e01
GIT binary patch
literal 4035
zcmZu!XEYmt8jVPZJ=&0`r8c#-Mk#8=tQ~vBP6?$EwP&f?+6cAPsJ(ZGP|;RVYDA5i
zRk78M(%1L@opbMZ&%NjSdH>vJrpCHV^j!1+0DwtfPuu*T=KPNkntvD8$IJIm==}9;
zF#v#s;r~cgu8Obv7gAx&bu|I?BiG6Q49H8vNCN<9N@w`v0{-Wj1K~D-77slGAG<vA
z0O&mM@^vX}!n*+gENc4N8i-)3?E<5qtGetT1zLjR4&UzQ6Mhn>za0PrfQlkAYE<)$
z3a?C%WRPU<kY6#8F8WGk1hBu4MYg3lJl4gE{Q&XuN~YyJL;?$+vi7q4xU0IqkD#n?
zM8S1*256&sA+i4#dvxGFulp;XNqdvdu6pC#)CyC@??2yzMg^6`vLKhJoerKVP(X5*
zfB!7I<5KQLHzK#eYoIo^d3e(t&|`N-I)3$8vp>+FAlj^9F^aPV%Q<I9pQ7!dP+HQy
z_X2!3n#QcylV-6?&BVFBbb87FIez1^iJFtFTC>e6IYk;3?kp3laRQc|myQPjefsPm
z=<XwT05ZyV#x6jkCa6_PbF+=`=&yHdAD3oyZQN+6cq94vg(HJ!!%_KYQGe`Als{z;
z5~{ZgQkc)}2aL(#er6at*V#6Jbl&4F*Wk3ZQ&>T<Tldl<ZxpGUtfvy@o}-4TCQ@fF
zTv(xq-)ACdG?c!JN>+R{taRM@xP<ml6N&1I#9mri>fM*}%et(%i40|q&pbm5P~Fw(
zO-oqU?T{n!cE3-oJpktUsTNwz2t_8DsOtXpqLGh|TqMNuEZ^JJ08@CIjTzA07s0M|
z5g-qBm!;>Sm0y>Ns~}<RO91xS2Gie=>P`O5T7rRevLs|vtkBQs829as2mY&6a_tMC
z_~xj1ykUva#~ONY23*UhomL2MTr+XnJNxwLp(|Gf2AFp#^S!Ama{CDG-bUEE7krm_
znJJWVv6}g<6CG-Io6%)%#|~0z0sJCKkUc%S{S1f^X$5$aNsrR_H%+Y)5{%i-l)k{c
z{U7Q@j|ET)^iB<8(&0%iw{tb0uBU)M`1iAZVEdD2xJ*gJi|@UT=#C3$O{YxTO)o{J
z-hyraC7lWdMjJzh!j#B~oohH&TQB@znnb1|iUhqaZH(&^d8-vUxDJZ4_K6&b5+0I%
zHk=^E`Pb*=qNI)AyC0Ya-JZ4CdQZXN?F=$#nbFy2k;R-=A_uc&YvVECX#BW@6*O=%
zP@62<KL!@(XayfMIR)yeDn|s<h64OhX|`u*?nYM)dl|RVH-Boz*$!#ee8|yI20Ns|
zcgHDgaT*0jx8al=t2NRF({-CKwPdR$G#l{ljL2@oAN}x{FjD#SdSjn|G|4QK6=Xo*
z7;0vIa_;$Vt#cGiz>Ks_d9zr*a*Tz-dQhcNQ$A_kGP<=4*tY%wVLEf<+)vqArQ?nY
z|HIvVx_1M84Af4-aaVK9@K|?OUJpq=#{tn`;u|T~B9C_c3}9)6VC^Qra};wpe3*zS
zpl@ZC>r@w)7j0Tw&UumYdhUC{E6EF5x9z-I6B1E>0Y6NhS_;##uUfq%?{u)j#5t#5
zWwEPA2st0{I2ISC8%Mp=_!!cT4F;vi`C$Dnx$F>sX=)R{a6iNm@0F<4zG~(Cy|Tr+
zkS~bAy|KqX+;`~>L%g;4GicjYY+h{-ou0E>8h$k(DBG%)KWVhF6nMUG7~aAB#&hxz
zuH0hQ^agGIYn@i8aVkGNJF~mQxwKQ*v{|Q7Y|1?OKIT5LJ7m~ZF)_Mht7<Rwk=#z4
zS=yDddR-C#sC5$y@ahZ<;#FeHrf5n7rKh9(yWh}Kja7m%N6A%@+}`3s)$}4Y8$7W*
z>fB9^d85&&{#b02uJ!ul_>d_P*wOSkXuQFSjG2;ZRM|cO*M9n1t@&wE`D;7NUkkn`
zEzJdibwJGWEedR7<7HNdMJ|iV>6XRmZJgD@=-1}JR)pb~GXEA=B{kU7`zY@o$r`IX
zLZR;k_ln$Gw^X0A2?Mg?pCXcm!n0Wz40X+NBjSc@<MT>GB<4}Fg7?g;N&ZIj3x2h8
zp<4&T4^9Ut5n`=I^k&HMo~4V_!G#46xpyz>C1k8~O7@7^-iEDv44$K`r{_$nPdHXX
z3O7}g_wS<820}kr(OXD})n5>^6a_<qU+V|3onEBt$xS%EUbh>OuZhlkkBG^!;@#+?
zk++a#UgHYrS97MCy1vGw?>WlPV*D`-fny*cOx_$Di|RmFeHV36RNm{ljshh*2GW@x
z%8ceNXozYz>U;mw6&`F-0{Ug-kM_j~b=o3tEjJV$sdAT55g>o+Q4U(OA1T^q4oGD=
zHDZLe$2BZMf2>ebheoqq+^C`H+NA%Ev*SN7R#ee*n3-b>$oepsNRz)=D=$sv8MhUr
zi<_hRQw;n8GEfJWmjNmhI|!oU!0<E)JqOiXhcN}*On=wTm&1Uhhr^0@JmPg87+Z2j
z?FxPScmqQGwIRl{L}wLD#CDHpDmWpOG!L4QPE!nzllkkb_ma}bCK|=klY+jHBG2`*
zM~V*EVY&C~DOZlzj@3nt+B27pWXu$Ez}*=q3G*@?wnuo3Lw<|HLz{L&cr7OpHx&U3
z#pXneUFB&Ap>$5*c^CMaHw_BL|IYWnfybnS-A<Aq^2qPdidmDLM|GS=k}=PV7ZgA@
zG9Rc0eCSa@(n%<isF7m}PHevF4|$Ukt{ItBs||HJsQpHj@62DrKj;l^%6Wg1go-!1
zl!#UyG3I1Sgf=ujp=6%f$nLOzo*k}iZSCUtJt%&8*jXlJ{Ujw;{(h6WHE|dPxo-n>
zlS==*?yHzU{X`Fc?Eam080!_O60E4UxFgZ^PHV0W&beBLqu-x7rnhE2WBh24`(1DU
z&#x`mGm=!bDRRp}FsnH>qHoeBJzsjTJdUQg<$irhu@-g&8xORQDv$5A{cC?y{+X+t
zG^ZOnP=MItifiias&7<`Z{DzS@nN?#k&38vk6U=SMOb#R(BHOHvMN{{PRn+t7FieH
z)`-i1=J|08!{u}QUiP1xAHKhxThu5qePdK>?kq1gsBWP6wS2ZjO1UyI1dLGSAZ`<~
z6%MesbBe)?G|o`<ef>UR#=WoQ*WUCAJ-0MM5B|I!pW+i%eCTtS%Hv25w@?+<nI-4G
zo=txjn{KUvUzsW3`#AxZa=9JDF^cs3SFf?S<y}i^{C~<ef$qmQ$3})hzfR!@0D8MD
z%^@gzJ0o{iodYz_OyM27IlCk3k$rtI#01;4Z`-ZysjGb*0aPV$kI$8%9si2)&}SI;
z+`Fz$RLYvL<@(Fjx1qmRx~>*(v3FLVituATk?~z86%*_oFb-butChPk{uwsGA3DXP
zy46862h?k!T<wQ&cl-<7Cx1RXeabH4mYYY+GM-3}-!xfBe^1gm1WrZ2qOIa!s6YqT
zUF*8@>#a_}a6rJT++>?sZOp|6Q>CyBQ8ufa@~xTPVPEE6Snsu8r;4U&3p5F{yGP+?
zel63nW>32IxH`eyZWL~hRElLqc5l{7ww}C`(o{3Zs?|-3xmE1kSyXuExy5EsN@kS<
zVzAu6a-`ZcpNU1lYJe5?A(qcmV58r{u0+5z#9^Yx{;naoT4n&ucv5AGlmh`^qoS~N
zpqQOy(IrfwbgI_V@(x)mn8SWPw(HZa4_B9^0~HTN<Q{KWdp;n0kpld_%T4&lyDjY>
zU8Qleb)hF>4toY9eYR&Wx<!{JL<p7b0dXBFV&(H)9)#QN+-whz%f1nxE=$A&JauhO
zhT9LEInJE+mpRbtjIaX?BK-eT!9#m#MdpmTdohOx$FuMnBIinS)VgMToBTK4CBR?}
zJ74OrFNCgogSQUDCJ4g$Vg2l|$&vkJ<-TUu_g*O>2EQ3qY;(V2<pXj)>c2fncZ>m{
zRm6;ebP|`C^Usb&ZpCl6dwFpEKQU(K`obl);YA7Jg#7Fg4x3AaNWPCFQWkK~(95VI
zWwNNkt!3#~;WYfCb5d!W;1t1LpLL?VWkqPXWa3}@z*NzlDL=^${^h;{S|GCsnGtFn
zam$Jh`|Q)A;>Y*zkj#g?CTZWzSwOOK?R2Z}yuRmSZ<}aY(S}&x^gr`gi+C*AI1ktj
z<lagB63NnXg5J#N_~{GiIG1b`9I1MU?Bi-PL*BX2XRWJO;i}Il+BlF2Wf*!*QT&Cn
z<i~u;dLP*}_*8mJLu>Rzs`_dybfu_yl~h>c-p8lh9GRtEbLIQ)%9ZNDn2>T~wY!;r
z%7lsXBD=}TgOS1)=s;PC>+Oy=1EKFf$PFU0!XCdYJUBf6EKuHRJ>a=+;nCyXeRSF>
zx(@rD^4SBIGhyy+YD307Ankk<Skqc<@z=a3OqNgXHu>uQrJ2dP`sZrcKsaQ^@mt!@
z2U7?e6dUPrlvd9gt;OwXIfp92M)=Ujs3h%Lg7JgOI7nRxiukDxPkJe#QG<XwXN~=F
zS1Q{gv%DxW9N8#jV7j1cYv9Y`X^?*|&(eBwE7{VUAERkODh6hObw>Rl@SxXy>cJv%
z4$7aK3e7?@+BeGTdVfZ^jCl^u6zwHO|6XtvH8KB4){z7X<bP@x?uf8(d;cWJH#q!O
zaiKfv`yPCwRBBsgR*-W-$~3g4?XInepaq{oBX5zOLxg-)8&*A1+k8OeP1^LfiVsYj
zr07qaZpx#m&KIFq5cUNczRUdHyGF7_@zgw51d~1u41x<i=lFM!%9GL?^(p*M)owg4
zP&b-r*LE6^KcVF{8$v6nNhJ)9LfpyJhBoC@H=P*eHA^{n6=k>^#&(o(5t-62u{JF*
z5be=$e0O7TILFIbqf{q!f2^ahVu$;1+GuX3G*pW&2fDTyL&Pjrr>PVQ{d#(l3h^=a
zx#$&Ta8vuyF*Hh(tIrhsp>jF2-{*6D`N&X*FJp@DTx^7XVQcVekVaMB92~l||4sT8
zxog*5d-3`^7v?S9cbhA#<66E5ia}BD*ae6ENQYFTQb_e+#--6+Z3nfd2ECF#($EK{
z1{tzncYChUIy21+w?2CmvmF>h#9e`w^^6ftZ)KTd8*jxp3P<f9X40}?G7FBv2wKqJ
zgkx@>BLPO~xkoGl6i-z750qG<D$B|bFkj=BRYeaPO};Z4G1R7%QFOcxTMS()Kky0{
z93(841i6p8%9b-K$}dx5rj67rO(Z<|KM&Kl&`}BV4fJf&?02d@|KWpfK7*j?aJden
zDCseUEV~$?L;}7M)f-}29{K}lk=rKmI+Qa`o?vP2Y+$6I5K;PdN&Q<FSc4Vxe{t`U
ZrS7D)g|%!z=ikN#=);Y*>ot+F{{;;=tH=NV

literal 0
HcmV?d00001

diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx
index 10bd6da..ce361c2 100644
--- a/src/components/sidebar/Sidebar.tsx
+++ b/src/components/sidebar/Sidebar.tsx
@@ -13,57 +13,65 @@ import {
   Users,
   Users2,
   X,
-} from "lucide-react"
-import { type ComponentType, useEffect, useState } from "react"
-import { NavLink } from "react-router-dom"
-import { cn } from "../../lib/utils"
-import { BrandLogo } from "../brand/BrandLogo"
-import { getUnreadCount } from "../../api/notifications.api"
+} from "lucide-react";
+import { type ComponentType, useEffect, useState } from "react";
+import { NavLink } from "react-router-dom";
+import { cn } from "../../lib/utils";
+import { BrandLogo } from "../brand/BrandLogo";
+import { getUnreadCount } from "../../api/notifications.api";
 
 type NavItem = {
-  label: string
-  to: string
-  icon: ComponentType<{ className?: string }>
-}
+  label: string;
+  to: string;
+  icon: ComponentType<{ className?: string }>;
+};
 
 const navItems: NavItem[] = [
   { label: "Dashboard", to: "/dashboard", icon: LayoutDashboard },
   { label: "User Management", to: "/users", icon: Users },
   { label: "Role Management", to: "/roles", icon: Shield },
   { label: "Content Management", to: "/content", icon: BookOpen },
+  { label: "New Content", to: "/new-content", icon: BookOpen },
+
   { label: "Notifications", to: "/notifications", icon: Bell },
   { label: "User Log", to: "/user-log", icon: ClipboardList },
   { label: "Issue Reports", to: "/issues", icon: CircleAlert },
   { label: "Analytics", to: "/analytics", icon: BarChart3 },
   { label: "Team Management", to: "/team", icon: Users2 },
   { label: "Profile", to: "/profile", icon: UserCircle2 },
-]
+];
 
 type SidebarProps = {
-  isOpen: boolean
-  isCollapsed: boolean
-  onToggleCollapse: () => void
-  onClose: () => void
-}
+  isOpen: boolean;
+  isCollapsed: boolean;
+  onToggleCollapse: () => void;
+  onClose: () => void;
+};
 
-export function Sidebar({ isOpen, isCollapsed, onToggleCollapse, onClose }: SidebarProps) {
-  const [unreadCount, setUnreadCount] = useState(0)
+export function Sidebar({
+  isOpen,
+  isCollapsed,
+  onToggleCollapse,
+  onClose,
+}: SidebarProps) {
+  const [unreadCount, setUnreadCount] = useState(0);
 
   useEffect(() => {
     const fetchUnread = async () => {
       try {
-        const res = await getUnreadCount()
-        setUnreadCount(res.data.unread)
+        const res = await getUnreadCount();
+        setUnreadCount(res.data.unread);
       } catch {
         // silently fail
       }
-    }
+    };
 
-    fetchUnread()
+    fetchUnread();
 
-    window.addEventListener("notifications-updated", fetchUnread)
-    return () => window.removeEventListener("notifications-updated", fetchUnread)
-  }, [])
+    window.addEventListener("notifications-updated", fetchUnread);
+    return () =>
+      window.removeEventListener("notifications-updated", fetchUnread);
+  }, []);
 
   return (
     <>
@@ -86,7 +94,12 @@ export function Sidebar({ isOpen, isCollapsed, onToggleCollapse, onClose }: Side
           isOpen ? "translate-x-0" : "-translate-x-full",
         )}
       >
-        <div className={cn("flex items-center justify-between px-2", isCollapsed && "justify-center")}>
+        <div
+          className={cn(
+            "flex items-center justify-between px-2",
+            isCollapsed && "justify-center",
+          )}
+        >
           {isCollapsed ? (
             <span className="h-10 w-10 overflow-hidden">
               <BrandLogo className="h-10 w-auto max-w-none" />
@@ -103,7 +116,11 @@ export function Sidebar({ isOpen, isCollapsed, onToggleCollapse, onClose }: Side
             onClick={onToggleCollapse}
             aria-label={isCollapsed ? "Expand sidebar" : "Collapse sidebar"}
           >
-            {isCollapsed ? <ChevronRight className="h-5 w-5" /> : <ChevronLeft className="h-5 w-5" />}
+            {isCollapsed ? (
+              <ChevronRight className="h-5 w-5" />
+            ) : (
+              <ChevronLeft className="h-5 w-5" />
+            )}
           </button>
           <button
             type="button"
@@ -117,7 +134,7 @@ export function Sidebar({ isOpen, isCollapsed, onToggleCollapse, onClose }: Side
 
         <nav className="mt-6 flex-1 space-y-1 overflow-y-auto">
           {navItems.map((item) => {
-            const Icon = item.icon
+            const Icon = item.icon;
             return (
               <NavLink
                 key={item.to}
@@ -143,25 +160,36 @@ export function Sidebar({ isOpen, isCollapsed, onToggleCollapse, onClose }: Side
                       )}
                     >
                       <Icon className="h-4 w-4" />
-                      {isCollapsed && item.to === "/notifications" && unreadCount > 0 && (
-                        <span className="absolute -right-1 -top-1 h-2.5 w-2.5 rounded-full bg-destructive" />
-                      )}
+                      {isCollapsed &&
+                        item.to === "/notifications" &&
+                        unreadCount > 0 && (
+                          <span className="absolute -right-1 -top-1 h-2.5 w-2.5 rounded-full bg-destructive" />
+                        )}
                     </span>
-                    {!isCollapsed && <span className="truncate">{item.label}</span>}
-                    {!isCollapsed && item.to === "/notifications" && unreadCount > 0 && (
-                      <span className="ml-auto flex h-5 min-w-[20px] items-center justify-center rounded-full bg-destructive px-1.5 text-[10px] font-bold text-white">
-                        {unreadCount > 99 ? "99+" : unreadCount}
-                      </span>
+                    {!isCollapsed && (
+                      <span className="truncate">{item.label}</span>
                     )}
-                    {!isCollapsed && item.to !== "/notifications" && isActive ? (
+                    {!isCollapsed &&
+                      item.to === "/notifications" &&
+                      unreadCount > 0 && (
+                        <span className="ml-auto flex h-5 min-w-[20px] items-center justify-center rounded-full bg-destructive px-1.5 text-[10px] font-bold text-white">
+                          {unreadCount > 99 ? "99+" : unreadCount}
+                        </span>
+                      )}
+                    {!isCollapsed &&
+                    item.to !== "/notifications" &&
+                    isActive ? (
                       <span className="ml-auto h-6 w-1 rounded-full bg-brand-500/80" />
-                    ) : !isCollapsed && item.to === "/notifications" && unreadCount === 0 && isActive ? (
+                    ) : !isCollapsed &&
+                      item.to === "/notifications" &&
+                      unreadCount === 0 &&
+                      isActive ? (
                       <span className="ml-auto h-6 w-1 rounded-full bg-brand-500/80" />
                     ) : null}
                   </>
                 )}
               </NavLink>
-            )
+            );
           })}
         </nav>
 
@@ -169,8 +197,8 @@ export function Sidebar({ isOpen, isCollapsed, onToggleCollapse, onClose }: Side
           <button
             type="button"
             onClick={() => {
-              localStorage.clear()
-              window.location.href = "/login"
+              localStorage.clear();
+              window.location.href = "/login";
             }}
             className={cn(
               "flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium text-grayScale-500 hover:bg-grayScale-100 hover:text-brand-600",
@@ -184,5 +212,5 @@ export function Sidebar({ isOpen, isCollapsed, onToggleCollapse, onClose }: Side
         </div>
       </aside>
     </>
-  )
+  );
 }
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index c46b5cd..83cec90 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -1,21 +1,21 @@
-import * as React from "react"
-import { cn } from "../../lib/utils"
+import * as React from "react";
+import { cn } from "../../lib/utils";
 
 export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
 
-export const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type, ...props }, ref) => {
-  return (
-    <input
-      type={type}
-      className={cn(
-        "flex h-10 w-full rounded-lg border bg-white px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-grayScale-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-        className,
-      )}
-      ref={ref}
-      {...props}
-    />
-  )
-})
-Input.displayName = "Input"
-
-
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-lg border bg-white px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-grayScale-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Input.displayName = "Input";
diff --git a/src/components/ui/stepper.tsx b/src/components/ui/stepper.tsx
index a4627aa..a0c87a2 100644
--- a/src/components/ui/stepper.tsx
+++ b/src/components/ui/stepper.tsx
@@ -1,61 +1,52 @@
-import * as React from "react"
-import { Check } from "lucide-react"
-import { cn } from "../../lib/utils"
+import { cn } from "../../lib/utils";
 
 export interface StepperProps {
-  steps: string[]
-  currentStep: number
-  className?: string
+  steps: string[];
+  currentStep: number;
+  className?: string;
 }
 
 export function Stepper({ steps, currentStep, className }: StepperProps) {
   return (
-    <div className={cn("flex w-full items-center", className)}>
+    <div className={cn("flex w-full items-start justify-between", className)}>
       {steps.map((step, index) => {
-        const stepNumber = index + 1
-        const isCompleted = stepNumber < currentStep
-        const isCurrent = stepNumber === currentStep
+        const stepNumber = index + 1;
+        const isCurrent = stepNumber === currentStep;
 
         return (
-          <React.Fragment key={step}>
-            <div className="flex items-center">
-              <div className="flex flex-col items-center">
-                <div
-                  className={cn(
-                    "grid h-10 w-10 place-items-center rounded-full border-2 text-sm font-semibold transition-colors",
-                    isCompleted && "border-brand-500 bg-brand-500 text-white",
-                    // Active step should be visually prominent.
-                    isCurrent && "border-brand-500 bg-brand-500 text-white",
-                    !isCompleted && !isCurrent && "border-grayScale-300 bg-white text-grayScale-400",
-                  )}
-                >
-                  {isCompleted ? <Check className="h-5 w-5" /> : stepNumber}
-                </div>
-                <span
-                  className={cn(
-                    "mt-2 text-xs font-medium",
-                    isCurrent && "text-brand-600",
-                    !isCurrent && "text-grayScale-500",
-                  )}
-                >
-                  {step}
-                </span>
-              </div>
-            </div>
+          <div
+            key={step}
+            className="flex-1 relative flex flex-col items-center group"
+          >
+            {/* Connector Line (Behind) */}
             {index < steps.length - 1 && (
-              <div
-                className={cn(
-                  // Keep the connector visually continuous with the step circles.
-                  "mx-2 h-0.5 flex-1",
-                  // Color the track up to the current step.
-                  isCompleted || isCurrent ? "bg-brand-500" : "bg-grayScale-200",
-                )}
-              />
+              <div className="absolute left-1/2 w-[100%] mx-auto top-5 h-[2px] bg-grayScale-200 z-0" />
             )}
-          </React.Fragment>
-        )
+
+            {/* Circle */}
+            <div
+              className={cn(
+                "relative z-10 grid h-10 w-10 place-items-center rounded-full border-2 text-sm font-bold transition-all duration-300 mb-3",
+                isCurrent
+                  ? "border-brand-500 bg-brand-500 text-white shadow-md scale-110"
+                  : "border-grayScale-100 bg-white text-grayScale-400 font-medium",
+              )}
+            >
+              {stepNumber}
+            </div>
+
+            {/* Label */}
+            <span
+              className={cn(
+                "relative z-10 text-[13px] font-bold transition-colors duration-300",
+                isCurrent ? "text-brand-500" : "text-grayScale-400 font-medium",
+              )}
+            >
+              {step}
+            </span>
+          </div>
+        );
       })}
     </div>
-  )
+  );
 }
-
diff --git a/src/pages/content-management/AddPracticeFlow.tsx b/src/pages/content-management/AddPracticeFlow.tsx
new file mode 100644
index 0000000..7e3b742
--- /dev/null
+++ b/src/pages/content-management/AddPracticeFlow.tsx
@@ -0,0 +1,259 @@
+import { useState } from "react";
+import {
+  Link,
+  useNavigate,
+  useParams,
+  useSearchParams,
+} from "react-router-dom";
+import { ArrowLeft } from "lucide-react";
+import { Button } from "../../components/ui/button";
+import { Stepper } from "../../components/ui/stepper";
+import successIcon from "../../assets/success.svg";
+
+import { ContextStep } from "./components/practice-steps/ContextStep";
+import { ScenarioStep } from "./components/practice-steps/ScenarioStep";
+import { PersonaStep } from "./components/practice-steps/PersonaStep";
+import { QuestionsStep } from "./components/practice-steps/QuestionsStep";
+import { ReviewStep } from "./components/practice-steps/ReviewStep";
+
+export function AddPracticeFlow() {
+  const navigate = useNavigate();
+  const { level } = useParams<{ level: string }>();
+  const [searchParams] = useSearchParams();
+  const backTo = searchParams.get("backTo");
+  const courseId = searchParams.get("courseId");
+  const moduleId = searchParams.get("moduleId");
+
+  const isModuleContext = backTo === "module";
+
+  const backLabel =
+    backTo === "module"
+      ? "Back to Module"
+      : backTo === "modules"
+        ? "Back to Modules"
+        : "Back to Courses";
+  const backPath =
+    backTo === "module" && courseId && moduleId
+      ? `/new-content/learn-english/${level}/courses/${courseId}/modules/${moduleId}`
+      : backTo === "modules" && courseId
+        ? `/new-content/learn-english/${level}/courses/${courseId}`
+        : `/new-content/learn-english/${level}/courses`;
+
+  const flowSteps = isModuleContext
+    ? ["Context", "Persona", "Questions", "Review"]
+    : ["Context", "Scenario", "Persona", "Questions", "Review"];
+
+  const [currentStep, setCurrentStep] = useState(1);
+  const [selectedPersona, setSelectedPersona] = useState<string | null>(
+    "dawit",
+  );
+  const [isPublished, setIsPublished] = useState(false);
+
+  const [formData, setFormData] = useState({
+    program: "Intermediate",
+    course: "A2",
+    title: "",
+    description: "",
+    selectedVideo: "",
+    tips: "Focus on using the present perfect continuous tense to describe an action that started in the past and continues now.",
+    questions: [
+      {
+        id: "q1",
+        text: "How long have you been studying English?",
+        type: "Speaking",
+        voicePrompt: "prompt_q1_en.mp3",
+        sampleAnswer: "prompt_q1_en.mp3",
+      },
+    ],
+  });
+
+  const nextStep = () =>
+    setCurrentStep((prev) => Math.min(prev + 1, flowSteps.length));
+  const prevStep = () => setCurrentStep((prev) => Math.max(prev - 1, 1));
+
+  if (isPublished) {
+    return (
+      <div className="flex flex-col items-center justify-center min-h-screen px-4 text-center pb-20 animate-in fade-in zoom-in duration-500 bg-white">
+        <div className="mb-10 relative">
+          <div className="absolute inset-0 bg-brand-500/10 blur-3xl rounded-full" />
+          <img
+            src={successIcon}
+            alt="Success"
+            className="h-[128px] w-[128px] relative"
+          />
+        </div>
+        <h1 className="text-[32px] font-bold text-grayScale-900 mb-4">
+          Practice Published Successfully!
+        </h1>
+        <p className="text-grayScale-600 text-lg mb-14 max-w-lg font-medium leading-relaxed">
+          Your speaking practice is now active and available inside the module.
+        </p>
+        <div className="flex flex-col gap-4 w-full max-w-[400px]">
+          <Button
+            onClick={() => navigate(backPath)}
+            className="h-14 rounded-2xl bg-brand-500 font-bold shadow-xl shadow-brand-500/20 text-[17px] text-white hover:bg-brand-600 transition-all active:scale-95"
+          >
+            Go back to Module
+          </Button>
+          <Button
+            onClick={() => {
+              setIsPublished(false);
+              setCurrentStep(1);
+              setFormData({
+                ...formData,
+                title: "",
+                description: "",
+              });
+            }}
+            variant="outline"
+            className="h-14 rounded-2xl border-brand-200 text-brand-500 font-bold hover:bg-brand-50 transition-all text-[17px] bg-white"
+          >
+            Add Another Practice
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  // Helper to map currentStep to the actual component for the module flow
+  const renderStep = () => {
+    if (!isModuleContext) {
+      switch (currentStep) {
+        case 1:
+          return (
+            <ContextStep
+              formData={formData}
+              setFormData={setFormData}
+              nextStep={nextStep}
+              navigate={navigate}
+              level={level!}
+              isModuleContext={isModuleContext}
+            />
+          );
+        case 2:
+          return (
+            <ScenarioStep
+              formData={formData}
+              setFormData={setFormData}
+              nextStep={nextStep}
+              prevStep={prevStep}
+            />
+          );
+        case 3:
+          return (
+            <PersonaStep
+              selectedPersona={selectedPersona}
+              setSelectedPersona={setSelectedPersona}
+              nextStep={nextStep}
+              prevStep={prevStep}
+            />
+          );
+        case 4:
+          return (
+            <QuestionsStep
+              formData={formData}
+              setFormData={setFormData}
+              nextStep={nextStep}
+              prevStep={prevStep}
+            />
+          );
+        case 5:
+          return (
+            <ReviewStep
+              formData={formData}
+              selectedPersona={selectedPersona}
+              prevStep={prevStep}
+              setIsPublished={setIsPublished}
+              isModuleContext={isModuleContext}
+            />
+          );
+        default:
+          return null;
+      }
+    } else {
+      // Module Context Flow (Skips Scenario)
+      switch (currentStep) {
+        case 1:
+          return (
+            <ContextStep
+              formData={formData}
+              setFormData={setFormData}
+              nextStep={nextStep}
+              navigate={navigate}
+              level={level!}
+              isModuleContext={isModuleContext}
+            />
+          );
+        case 2:
+          return (
+            <PersonaStep
+              selectedPersona={selectedPersona}
+              setSelectedPersona={setSelectedPersona}
+              nextStep={nextStep}
+              prevStep={prevStep}
+            />
+          );
+        case 3:
+          return (
+            <QuestionsStep
+              formData={formData}
+              setFormData={setFormData}
+              nextStep={nextStep}
+              prevStep={prevStep}
+            />
+          );
+        case 4:
+          return (
+            <ReviewStep
+              formData={formData}
+              selectedPersona={selectedPersona}
+              prevStep={prevStep}
+              setIsPublished={setIsPublished}
+              isModuleContext={isModuleContext}
+            />
+          );
+        default:
+          return null;
+      }
+    }
+  };
+
+  return (
+    <div className="space-y-8 pb-32 px-6 pt-6 min-h-screen bg-[#F8FAFC]">
+      {/* Header */}
+      <div className="mx-auto max-w-7xl w-full">
+        <div className="flex items-center justify-between mb-8">
+          <Link
+            to={backPath}
+            className="flex items-center gap-2 text-[15px] font-medium text-grayScale-500 transition-colors hover:text-brand-500 decoration-none"
+          >
+            <ArrowLeft className="h-4 w-4" />
+            {backLabel}
+          </Link>
+          <Button
+            variant="outline"
+            className="rounded-[8px] border-grayScale-200 text-grayScale-600 h-10 px-6 font-bold bg-white hover:bg-grayScale-50"
+            onClick={() => navigate(backPath)}
+          >
+            Cancel
+          </Button>
+        </div>
+
+        <div className="space-y-4 mb-10">
+          <h1 className="text-4xl font-bold text-[#0F172A]">
+            Add New Practice
+          </h1>
+          <p className="text-grayScale-400 text-lg">
+            Create a new immersive practice session for students.
+          </p>
+        </div>
+
+        <div className="mx-auto max-w-4xl mb-12">
+          <Stepper steps={flowSteps} currentStep={currentStep} />
+        </div>
+
+        <div className="mx-auto max-w-4xl">{renderStep()}</div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/content-management/AddVideoFlow.tsx b/src/pages/content-management/AddVideoFlow.tsx
new file mode 100644
index 0000000..7086bd4
--- /dev/null
+++ b/src/pages/content-management/AddVideoFlow.tsx
@@ -0,0 +1,155 @@
+import { useState } from "react";
+import { Link, useNavigate, useParams } from "react-router-dom";
+import { ArrowLeft, Check } from "lucide-react";
+import { Button } from "../../components/ui/button";
+import { Stepper } from "../../components/ui/stepper";
+
+import { VideoDetailStep } from "./components/video-steps/VideoDetailStep";
+import { ReviewPublishStep } from "./components/video-steps/ReviewPublishStep";
+
+const STEPS = [
+  { id: 1, label: "Video Detail" },
+  { id: 2, label: "Review & Publish" },
+];
+
+export function AddVideoFlow() {
+  const navigate = useNavigate();
+  const { level, courseId, moduleId } = useParams<{
+    level: string;
+    courseId: string;
+    moduleId: string;
+  }>();
+  const [currentStep, setCurrentStep] = useState(1);
+  const [isPublished, setIsPublished] = useState(false);
+
+  const [formData, setFormData] = useState({
+    title: "",
+    order: "1",
+    description: "",
+    thumbnail: null,
+    videoFile: null,
+  });
+
+  const nextStep = () => setCurrentStep((prev) => Math.min(prev + 1, 2));
+  const prevStep = () => setCurrentStep((prev) => Math.max(prev - 1, 1));
+
+  const backPath = `/new-content/learn-english/${level}/courses/${courseId}/modules/${moduleId}`;
+
+  if (isPublished) {
+    return (
+      <div className="flex flex-col items-center justify-center min-h-screen px-4 text-center pb-20 animate-in fade-in zoom-in duration-500 bg-white">
+        {/* Success Icon Wrapper (Jagged Circle Style) */}
+        <div className="mb-12 relative scale-110">
+          <div className="absolute inset-0 bg-brand-500/5 blur-3xl rounded-full" />
+          <div className="relative">
+            <div
+              className="h-24 w-24 bg-brand-500 flex items-center justify-center"
+              style={{
+                clipPath:
+                  "polygon(50% 0%, 61% 10%, 75% 10%, 80% 24%, 94% 30%, 90% 44%, 100% 56%, 90% 68%, 94% 82%, 80% 88%, 75% 100%, 61% 100%, 50% 90%, 39% 100%, 25% 100%, 20% 88%, 6% 82%, 10% 68%, 0% 56%, 10% 44%, 6% 30%, 20% 24%, 25% 10%, 39% 10%)",
+              }}
+            >
+              <Check className="h-12 w-12 text-white stroke-[4px]" />
+            </div>
+            {/* Sub-Jagged layer for depth if needed */}
+            <div
+              className="absolute inset-0 bg-brand-500/20 scale-110 -z-10"
+              style={{
+                clipPath:
+                  "polygon(50% 0%, 61% 10%, 75% 10%, 80% 24%, 94% 30%, 90% 44%, 100% 56%, 90% 68%, 94% 82%, 80% 88%, 75% 100%, 61% 100%, 50% 90%, 39% 100%, 25% 100%, 20% 88%, 6% 82%, 10% 68%, 0% 56%, 10% 44%, 6% 30%, 20% 24%, 25% 10%, 39% 10%)",
+                opacity: 0.3,
+              }}
+            />
+          </div>
+        </div>
+
+        <h1 className="text-[32px] font-bold text-grayScale-900 mb-4">
+          Video Published Successfully!
+        </h1>
+        <p className="text-grayScale-600 text-lg mb-14 max-w-lg font-medium leading-relaxed">
+          Your video is now live and available inside the selected module.
+        </p>
+
+        <div className="flex flex-col gap-4 w-full max-w-[400px]">
+          <Button
+            onClick={() => navigate(`/new-content/learn-english/${level}`)}
+            className="h-14 rounded-2xl bg-brand-500 font-bold shadow-xl shadow-brand-500/20 text-[17px] text-white hover:bg-brand-600 transition-all active:scale-95"
+          >
+            Go back to Learn English
+          </Button>
+          <Button
+            onClick={() => {
+              setFormData({
+                title: "",
+                order: "1",
+                description: "",
+                thumbnail: null,
+                videoFile: null,
+              });
+              setIsPublished(false);
+              setCurrentStep(1);
+            }}
+            variant="outline"
+            className="h-14 rounded-2xl border-brand-200 text-brand-500 font-bold hover:bg-brand-50 transition-all text-[17px] active:scale-95 bg-white"
+          >
+            Add Another Video
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-8 pb-32 px-6 pt-6 min-h-screen bg-[#F8FAFC]">
+      {/* Header */}
+      <div className="mx-auto max-w-7xl w-full">
+        <div className="flex items-center justify-between mb-8">
+          <Link
+            to={backPath}
+            className="flex items-center gap-2 text-[15px] font-medium text-grayScale-500 transition-colors hover:text-brand-500 decoration-none"
+          >
+            <ArrowLeft className="h-4 w-4" />
+            Back to Modules
+          </Link>
+          <Button
+            variant="outline"
+            className="rounded-[8px] border-grayScale-200 text-grayScale-600 h-10 px-6 font-bold bg-white hover:bg-grayScale-50"
+            onClick={() => navigate(backPath)}
+          >
+            Cancel
+          </Button>
+        </div>
+
+        <h1 className="text-4xl font-bold text-[#0F172A] mb-10">
+          Add New Video
+        </h1>
+
+        <div className="mx-auto max-w-4xl mb-12">
+          <Stepper
+            steps={STEPS.map((s) => s.label)}
+            currentStep={currentStep}
+          />
+        </div>
+
+        {/* Step Content */}
+        <div className="mx-auto max-w-7xl">
+          {currentStep === 1 && (
+            <VideoDetailStep
+              formData={formData}
+              setFormData={setFormData}
+              nextStep={nextStep}
+            />
+          )}
+
+          {currentStep === 2 && (
+            <ReviewPublishStep
+              formData={formData}
+              prevStep={prevStep}
+              setIsPublished={setIsPublished}
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/content-management/CourseDetailPage.tsx b/src/pages/content-management/CourseDetailPage.tsx
new file mode 100644
index 0000000..52896fd
--- /dev/null
+++ b/src/pages/content-management/CourseDetailPage.tsx
@@ -0,0 +1,160 @@
+import { useState } from "react";
+import { ArrowLeft, Plus, Calendar, Plane, Clock, Hand } from "lucide-react";
+import { Link, useNavigate, useParams } from "react-router-dom";
+import { Button } from "../../components/ui/button";
+import { Card } from "../../components/ui/card";
+import { cn } from "../../lib/utils";
+
+const MODULES = [
+  {
+    id: "m1",
+    title: "Introduction Basics",
+    description: "Learn basic English words, phrases, and simple sentences.",
+    icon: Hand,
+    status: "Published",
+    gradient: "from-[#8E44AD] to-[#C39BD3]",
+  },
+  {
+    id: "m2",
+    title: "Daily Routines",
+    description: "Vocabulary related to waking up, and evening activities.",
+    icon: Clock,
+    status: "Draft",
+    gradient: "from-[#8E44AD] to-[#C39BD3]",
+  },
+  {
+    id: "m3",
+    title: "Travel Essentials",
+    description:
+      "Key phrases for airports, hotels, and asking for help while abroad.",
+    icon: Plane,
+    status: "Draft",
+    gradient: "from-[#8E44AD] to-[#C39BD3]",
+  },
+];
+
+import { AddModuleModal } from "./components/AddModuleModal";
+
+export function CourseDetailPage() {
+  const navigate = useNavigate();
+  const { level, courseId } = useParams<{ level: string; courseId: string }>();
+  const [isAddModuleOpen, setIsAddModuleOpen] = useState(false);
+
+  return (
+    <div className="space-y-10 pb-20">
+      {/* Header Navigation */}
+      <div className="flex items-center gap-2">
+        <Link
+          to={`/new-content/learn-english/${level}/courses`}
+          className="flex items-center gap-2 text-sm font-medium text-grayScale-600 transition-colors hover:text-brand-500"
+        >
+          <ArrowLeft className="h-5 w-5" />
+          Back to Levels
+        </Link>
+      </div>
+
+      {/* Hero Section */}
+      <div className="flex flex-col md:flex-row md:items-end justify-between gap-6">
+        <div className="space-y-2">
+          <h1 className="text-4xl font-extrabold text-grayScale-900 tracking-tight">
+            {courseId?.toUpperCase() || "A1"}
+          </h1>
+          <p className="text-grayScale-500 text-lg max-w-2xl font-medium">
+            Learn basic English words, phrases, and simple sentences for daily
+            situations.
+          </p>
+        </div>
+        <div className="flex items-center gap-4">
+          <Button
+            variant="outline"
+            className="h-12 px-6 rounded-[6px] border-brand-500 text-brand-500 font-bold transition-all gap-2"
+            onClick={() =>
+              navigate(
+                `/new-content/learn-english/${level}/courses/add-practice?backTo=modules&courseId=${courseId}`,
+              )
+            }
+          >
+            <Calendar className="h-5 w-5" />
+            Add Practice
+          </Button>
+          <Button
+            className="h-12 px-6 rounded-[6px] bg-brand-500 font-bold  shadow-lg shadow-brand-500/20 transition-all gap-2"
+            onClick={() => setIsAddModuleOpen(true)}
+          >
+            <Plus className="h-5 w-5" />
+            Add Module
+          </Button>
+        </div>
+      </div>
+
+      <AddModuleModal
+        isOpen={isAddModuleOpen}
+        onClose={() => setIsAddModuleOpen(false)}
+      />
+
+      {/* Gradient Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+        {MODULES.map((module) => (
+          <Card
+            key={module.id}
+            className="group overflow-hidden border 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={cn(
+                "h-36 w-full bg-gradient-to-b opacity-90 transition-transform duration-700",
+                module.gradient,
+              )}
+            />
+
+            <div className="p-2 pb-4 pt-8 flex-1 flex flex-col">
+              <div className="flex gap-4 mb-8">
+                {/* Icon Circle */}
+                <div className="h-12 w-12 rounded-full bg-[#f3e8ff] flex items-center justify-center p-3 flex-shrink-0 border border-purple-100/50">
+                  <module.icon className="h-6 w-6 text-brand-500" />
+                </div>
+
+                {/* Content */}
+                <div className="space-y-1">
+                  <h3 className="text-xl font-bold text-[#0F172A] tracking-tight">
+                    {module.title}
+                  </h3>
+                  <p className="text-grayScale-400 font-medium leading-normal text-[14px]">
+                    {module.description}
+                  </p>
+                </div>
+              </div>
+
+              {/* Actions */}
+              <div className="flex items-center gap-3 mt-auto">
+                <Button
+                  variant="outline"
+                  className="flex-1 h-12 rounded-[6px] border-[#9E2891] text-[#9E2891] font-bold  transition-all text-sm"
+                  onClick={() =>
+                    navigate(
+                      `/new-content/learn-english/${level}/courses/${courseId}/modules/${module.id}`,
+                    )
+                  }
+                >
+                  View Detail
+                </Button>
+                {module.status === "Published" ? (
+                  <Button
+                    disabled
+                    className="flex-1 h-12 rounded-[6px] bg-[#D291BC] text-white font-bold opacity-100 cursor-default border-none shadow-none text-sm"
+                  >
+                    Published
+                  </Button>
+                ) : (
+                  <Button className="flex-1 h-12 rounded-[6px] bg-brand-500 text-white font-bold  shadow-md shadow-brand-500/10 text-sm">
+                    Publish Practice
+                  </Button>
+                )}
+              </div>
+            </div>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/content-management/LearnEnglishPage.tsx b/src/pages/content-management/LearnEnglishPage.tsx
new file mode 100644
index 0000000..05e5070
--- /dev/null
+++ b/src/pages/content-management/LearnEnglishPage.tsx
@@ -0,0 +1,214 @@
+import { Plus, ArrowRight } from "lucide-react";
+import { Link } from "react-router-dom";
+import { Card, CardContent } from "../../components/ui/card";
+import { Button } from "../../components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogTrigger,
+  DialogClose,
+} from "../../components/ui/dialog";
+import { Input } from "../../components/ui/input";
+import { Select } from "../../components/ui/select";
+import uploadIcon from "../../assets/icons/upload.png";
+
+export function LearnEnglishPage() {
+  const levels = [
+    {
+      id: "beginner",
+      title: "Beginner",
+      description:
+        "Designed for learners starting from scratch. Focuses on simple grammar, and everyday communication.",
+    },
+    {
+      id: "intermediate",
+      title: "Intermediate",
+      description:
+        "For learners who can communicate at a basic level and want to improve fluency, accuracy, and confidence.",
+    },
+    {
+      id: "advanced",
+      title: "Advanced",
+      description:
+        "Targets advanced learners aiming for professional, academic, and complex conversational English.",
+    },
+  ];
+
+  return (
+    <div className="space-y-8">
+      {/* Header section */}
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <h1 className="text-2xl font-bold tracking-tight text-grayScale-700">
+            Learn English
+          </h1>
+          <p className="mt-1 text-sm text-grayScale-500">
+            Manage learning content by level
+          </p>
+        </div>
+
+        <Dialog>
+          <DialogTrigger asChild>
+            <Button className="h-11 rounded-xl bg-brand-500 px-6 font-semibold hover:bg-brand-600">
+              <Plus className="mr-2 h-5 w-5" />
+              Add Program
+            </Button>
+          </DialogTrigger>
+          <DialogContent className="max-w-2xl gap-0 border-none p-0">
+            <DialogHeader className="p-8 pb-4">
+              <DialogTitle className="text-2xl font-bold text-grayScale-700">
+                Add New Program
+              </DialogTitle>
+              <DialogDescription className="text-sm text-grayScale-400">
+                Create a learning program to group courses by learner level
+              </DialogDescription>
+            </DialogHeader>
+            {/* Gradient Divider */}
+            <div className="relative">
+              <div
+                className="absolute inset-0 flex items-center"
+                aria-hidden="true"
+              >
+                <div className="w-full border-t border-grayScale-100" />
+              </div>
+              <div className="relative flex justify-center">
+                <div
+                  className="h-[0.5px] w-full opacity-20 rounded-full"
+                  style={{
+                    background: "gray",
+                  }}
+                />
+              </div>
+            </div>
+
+            <form className="space-y-6 p-8 pt-4">
+              <div className="space-y-2">
+                <label className="text-[15px] font-medium text-grayScale-700">
+                  Program Name
+                </label>
+                <Input
+                  placeholder="e.g. Beginner"
+                  className="h-12 rounded-xl"
+                />
+              </div>
+
+              <div className="space-y-2">
+                <label className="text-[15px] font-medium text-grayScale-700">
+                  Description
+                </label>
+                <Input
+                  placeholder="Short description explaining who this program is for"
+                  className="h-12 rounded-xl"
+                />
+              </div>
+
+              <div className="space-y-2">
+                <label className="text-[15px] font-medium text-grayScale-700">
+                  Program Order
+                </label>
+                <Select className="h-12 rounded-xl">
+                  <option value="1">1</option>
+                  <option value="2">2</option>
+                  <option value="3">3</option>
+                </Select>
+              </div>
+
+              <div className="space-y-2">
+                <label className="text-[15px] font-medium text-grayScale-700">
+                  Thumbnail
+                </label>
+                <div className="relative group cursor-pointer">
+                  <div className="flex flex-col items-center justify-center rounded-2xl border-2 border-dashed border-[#9E289133] bg-white p-10 transition-all ">
+                    <div className="mb-4">
+                      <img
+                        src={uploadIcon}
+                        alt="Upload icon"
+                        className="h-10 w-10"
+                      />
+                    </div>
+                    <p className="text-sm">
+                      <span className="font-bold text-[#9E2891]">
+                        Click to upload
+                      </span>{" "}
+                      <span className="text-grayScale-500">
+                        or drag and drop
+                      </span>
+                    </p>
+                    <p className="mt-1 text-xs font-medium text-grayScale-400 uppercase tracking-wider">
+                      JPG, PNG (MAX 1 MB)
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              <div className="flex justify-end gap-3 pt-4">
+                <DialogClose asChild>
+                  <Button
+                    variant="outline"
+                    className="h-12 min-w-[120px] rounded-xl border-grayScale-200 font-semibold"
+                  >
+                    Cancel
+                  </Button>
+                </DialogClose>
+                <Button className="h-12 min-w-[160px] rounded-xl bg-brand-500 font-semibold hover:bg-brand-600">
+                  Create Program
+                </Button>
+              </div>
+            </form>
+          </DialogContent>
+        </Dialog>
+      </div>
+
+      {/* Gradient Divider */}
+      <div className="relative">
+        <div className="absolute inset-0 flex items-center" aria-hidden="true">
+          <div className="w-full border-t border-grayScale-100" />
+        </div>
+        <div className="relative flex justify-center">
+          <div
+            className="h-[0.5px] w-full opacity-20 rounded-full"
+            style={{
+              background: "gray",
+            }}
+          />
+        </div>
+      </div>
+
+      {/* Cards Grid */}
+      <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+        {levels.map((level) => (
+          <Card
+            key={level.title}
+            className="group overflow-hidden border-none shadow-soft transition-all duration-300 hover:-translate-y-1 hover:shadow-lg"
+          >
+            {/* Gradient Header */}
+            <div
+              className="h-32 w-full"
+              style={{
+                background:
+                  "linear-gradient(135deg, #9E289180 0%, #9E2891 100%)",
+              }}
+            />
+            <CardContent className="bg-white p-6">
+              <h3 className="text-xl font-bold text-grayScale-700">
+                {level.title}
+              </h3>
+              <p className="mt-2 text-sm leading-relaxed text-grayScale-500">
+                {level.description}
+              </p>
+              <Link to={`/new-content/learn-english/${level.id}/courses`}>
+                <Button className="mt-8 h-11 w-full rounded-xl bg-brand-500 font-semibold hover:bg-brand-600">
+                  View Courses
+                  <ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
+                </Button>
+              </Link>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/content-management/ModuleDetailPage.tsx b/src/pages/content-management/ModuleDetailPage.tsx
new file mode 100644
index 0000000..834a4b9
--- /dev/null
+++ b/src/pages/content-management/ModuleDetailPage.tsx
@@ -0,0 +1,321 @@
+import { useState } from "react";
+import {
+  ArrowLeft,
+  Video,
+  Calendar,
+  Mic,
+  Layers,
+  Edit2,
+  Trash2,
+} from "lucide-react";
+import { Link, useNavigate, useParams } from "react-router-dom";
+import { Button } from "../../components/ui/button";
+import { cn } from "../../lib/utils";
+import { VideoCard } from "./components/VideoCard";
+
+const MOCK_VIDEOS = [
+  {
+    id: "v1",
+    title: "1.1 Introduction to Formal Greetings",
+    duration: "08:45",
+    status: "Draft",
+    thumbnailGradient: "from-[#CBD5E1] to-[#94A3B8]",
+  },
+  {
+    id: "v2",
+    title: "1.2 Understanding Email Structure",
+    duration: "08:45",
+    status: "Published",
+    thumbnailGradient: "from-[#DBEAFE] to-[#93C5FD]",
+  },
+  {
+    id: "v3",
+    title: "1.3 Common Business Idioms",
+    duration: "08:45",
+    status: "Published",
+    thumbnailGradient: "from-[#FEF3C7] to-[#FCD34D]",
+  },
+  {
+    id: "v4",
+    title: "1.4 Video Conference Etiquette",
+    duration: "08:45",
+    status: "Published",
+    thumbnailGradient: "from-[#FCE7F3] to-[#F9A8D4]",
+  },
+];
+
+const MOCK_PRACTICES = [
+  {
+    id: "p1",
+    title: "Describe a Photo",
+    level: "IELTS",
+    variations: 12,
+    status: "Draft",
+  },
+  {
+    id: "p2",
+    title: "Describe a Photo",
+    level: "IELTS",
+    variations: 12,
+    status: "Draft",
+  },
+  {
+    id: "p3",
+    title: "Describe a Photo",
+    level: "IELTS",
+    variations: 12,
+    status: "Draft",
+  },
+  {
+    id: "p4",
+    title: "Describe a Photo",
+    level: "IELTS",
+    variations: 12,
+    status: "Draft",
+  },
+];
+
+export function ModuleDetailPage() {
+  const navigate = useNavigate();
+  const { level, courseId, moduleId } = useParams<{
+    level: string;
+    courseId: string;
+    moduleId: string;
+  }>();
+  const [activeTab, setActiveTab] = useState<"video" | "practice">("video");
+  const [activeFilter, setActiveFilter] = useState("Draft");
+  const [videos] = useState(MOCK_VIDEOS);
+  const [practices] = useState(MOCK_PRACTICES);
+
+  const moduleTitle =
+    moduleId
+      ?.split("-")
+      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+      .join(" ") || "Business English Fundamentals";
+
+  return (
+    <div className="space-y-10 pb-20 animate-in fade-in duration-500">
+      {/* Header Navigation */}
+      <div className="flex items-center gap-2">
+        <Link
+          to={`/new-content/learn-english/${level}/courses/${courseId}`}
+          className="flex items-center gap-2 text-[15px] font-medium text-grayScale-600 transition-colors hover:text-brand-500"
+        >
+          <ArrowLeft className="h-5 w-5" />
+          Back to Modules
+        </Link>
+      </div>
+
+      {/* Hero Section */}
+      <div className="flex flex-col md:flex-row md:items-start justify-between gap-6">
+        <div className="space-y-2">
+          <h1 className="text-3xl font-extrabold text-grayScale-900 tracking-tight">
+            Module 3: {moduleTitle}
+          </h1>
+          <p className="text-grayScale-500 text-[17px] max-w-2xl font-medium leading-relaxed">
+            This module covers essential vocabulary and phrases used in modern
+            business environments, including email etiquette and meeting
+            protocols.
+          </p>
+        </div>
+        <div className="flex items-center gap-3">
+          <Button
+            variant="outline"
+            className="h-12 px-6 rounded-xl border-brand-500 text-brand-500 font-bold hover:bg-brand-50 transition-all flex items-center gap-2"
+            onClick={() =>
+              navigate(
+                `/new-content/learn-english/${level}/courses/add-practice?backTo=module&courseId=${courseId}&moduleId=${moduleId}`,
+              )
+            }
+          >
+            <Calendar className="h-4 w-4" />
+            Add Practice
+          </Button>
+          <Button
+            className="h-12 px-6 rounded-xl bg-brand-500 font-bold hover:bg-brand-600 shadow-lg shadow-brand-500/20 text-white transition-all flex items-center gap-2"
+            onClick={() =>
+              navigate(
+                `/new-content/learn-english/${level}/courses/${courseId}/modules/${moduleId}/add-video`,
+              )
+            }
+          >
+            <div className="h-4 w-4 flex items-center justify-center">
+              <span className="text-xl leading-none font-light">+</span>
+            </div>
+            Add Video
+          </Button>
+        </div>
+      </div>
+
+      {/* Tabs */}
+      <div className="border-b border-grayScale-50">
+        <div className="flex gap-10">
+          <button
+            onClick={() => setActiveTab("video")}
+            className={cn(
+              "pb-4 text-[17px] font-bold transition-all relative",
+              activeTab === "video"
+                ? "text-brand-500 after:absolute after:bottom-0 after:left-0 after:right-0 after:h-[3px] after:bg-brand-500 after:rounded-t-full"
+                : "text-grayScale-400 hover:text-grayScale-600",
+            )}
+          >
+            Video
+          </button>
+          <button
+            onClick={() => setActiveTab("practice")}
+            className={cn(
+              "pb-4 text-[17px] font-bold transition-all relative",
+              activeTab === "practice"
+                ? "text-brand-500 after:absolute after:bottom-0 after:left-0 after:right-0 after:h-[3px] after:bg-brand-500 after:rounded-t-full"
+                : "text-grayScale-400 hover:text-grayScale-600",
+            )}
+          >
+            Practice
+          </button>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="mt-8">
+        {activeTab === "video" ? (
+          videos.length > 0 ? (
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+              {videos.map((video) => (
+                <VideoCard
+                  key={video.id}
+                  {...(video as any)}
+                  onEdit={() => console.log("Edit", video.id)}
+                  onPublish={() => console.log("Publish", video.id)}
+                />
+              ))}
+            </div>
+          ) : (
+            <div className="flex flex-col items-center justify-center py-32 px-4 rounded-[40px] border-2 border-dashed border-[#F1F5F9] bg-white max-w-4xl mx-auto shadow-sm">
+              <div className="h-20 w-20 rounded-full bg-[#FAF5FF] flex items-center justify-center mb-6">
+                <div className="h-14 w-14 rounded-full bg-[#F5EBFF] flex items-center justify-center">
+                  <Video className="h-7 w-7 text-brand-500 fill-brand-500/10" />
+                </div>
+              </div>
+              <h2 className="text-2xl font-extrabold text-grayScale-900 mb-3">
+                No videos added to this module yet
+              </h2>
+              <p className="text-grayScale-400 font-medium text-[15px] text-center max-w-sm mb-10 leading-relaxed">
+                Videos are a great way to engage students. Start building your
+                module by adding your first video lesson now.
+              </p>
+              <Button
+                variant="outline"
+                className="h-12 px-8 rounded-xl border-brand-500 text-brand-500 font-bold hover:bg-brand-50 transition-all flex items-center gap-2"
+                onClick={() =>
+                  navigate(
+                    `/new-content/learn-english/${level}/courses/${courseId}/modules/${moduleId}/add-video`,
+                  )
+                }
+              >
+                <Video className="h-5 w-5" />
+                Add Video
+              </Button>
+            </div>
+          )
+        ) : (
+          <div className="space-y-8">
+            {/* Practice Tab Filter Bar */}
+            <div className="bg-white border border-grayScale-100 rounded-2xl p-4 flex items-center gap-10 shadow-sm overflow-x-auto whitespace-nowrap px-8">
+              <div className="flex items-center gap-2 text-[12px] font-bold text-grayScale-300 uppercase tracking-widest mr-2">
+                STATUS:
+              </div>
+              <div className="flex items-center gap-3">
+                {["All", "Published", "Draft", "Archived"].map((label) => (
+                  <button
+                    key={label}
+                    onClick={() => setActiveFilter(label)}
+                    className={cn(
+                      "h-9 px-5 rounded-full text-[13px] font-bold transition-all",
+                      activeFilter === label
+                        ? "bg-brand-500 text-white shadow-md shadow-brand-500/20"
+                        : "bg-[#F1F5F9] text-grayScale-500 hover:bg-grayScale-100",
+                    )}
+                  >
+                    {label}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            {/* Practice Cards Grid */}
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+              {practices.map((practice) => (
+                <PracticeCard key={practice.id} {...practice} />
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function PracticeCard({
+  title,
+  level,
+  variations,
+  status,
+}: {
+  title: string;
+  level: string;
+  variations: number;
+  status: string;
+}) {
+  return (
+    <div className="bg-white rounded-[24px] border border-grayScale-50 shadow-sm overflow-hidden hover:shadow-xl hover:shadow-grayScale-400/5 transition-all group p-6 flex flex-col h-full min-h-[340px]">
+      <div className="flex-1 space-y-6">
+        <div className="flex items-center justify-between">
+          <h3 className="text-[20px] font-bold text-grayScale-900 line-clamp-1">
+            {title}
+          </h3>
+        </div>
+
+        <div className="flex items-center gap-3">
+          <span className="bg-[#22C55E] text-white text-[11px] font-bold px-2 py-1 rounded-[4px]">
+            {level}
+          </span>
+          <div className="flex items-center gap-1.5 text-grayScale-500">
+            <Mic className="h-4 w-4" />
+            <span className="text-[13px] font-bold">Speaking</span>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2.5 text-brand-500 bg-brand-50/50 w-fit px-3 py-2 rounded-xl">
+          <Layers className="h-4 w-4" />
+          <span className="text-[14px] font-bold">{variations} Variations</span>
+        </div>
+
+        <div className="flex items-center justify-between pt-2">
+          <div className="bg-grayScale-50 text-grayScale-400 text-[11px] font-bold px-3 py-1.5 rounded-[6px] tracking-wide uppercase">
+            {status}
+          </div>
+          <div className="flex items-center gap-3">
+            <button className="h-8 w-8 rounded-lg border border-grayScale-100 flex items-center justify-center text-grayScale-400 hover:text-brand-500 hover:border-brand-100 transition-all">
+              <Edit2 className="h-4 w-4" />
+            </button>
+            <button className="h-8 w-8 rounded-lg border border-grayScale-100 flex items-center justify-center text-grayScale-400 hover:text-red-500 hover:border-red-100 transition-all">
+              <Trash2 className="h-4 w-4" />
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div className="mt-8 grid grid-cols-2 gap-3">
+        <Button className="bg-brand-500 text-white rounded-xl h-11 text-[13px] font-bold shadow-md shadow-brand-500/10 hover:bg-brand-600 transition-all px-0">
+          Publish Practice
+        </Button>
+        <Button
+          variant="outline"
+          className="border-brand-500 text-brand-500 rounded-xl h-11 text-[13px] font-bold bg-white hover:bg-brand-50 transition-all px-0"
+        >
+          Publish Video
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/content-management/NewContentPage.tsx b/src/pages/content-management/NewContentPage.tsx
new file mode 100644
index 0000000..d382ebd
--- /dev/null
+++ b/src/pages/content-management/NewContentPage.tsx
@@ -0,0 +1,81 @@
+import { Link } from "react-router-dom";
+import { Mic } from "lucide-react";
+import { Card, CardContent } from "../../components/ui/card";
+import { Button } from "../../components/ui/button";
+
+export function NewContentPage() {
+  return (
+    <div className="space-y-8">
+      {/* Header section */}
+      <div>
+        <h1 className="text-2xl font-bold tracking-tight text-grayScale-700">
+          Content Management
+        </h1>
+        <p className="mt-1 text-sm text-grayScale-500">
+          Upload, organize, and manage learning content across programs and
+          courses
+        </p>
+      </div>
+
+      {/* Gradient Divider */}
+      <div className="relative">
+        <div className="absolute inset-0 flex items-center" aria-hidden="true">
+          <div className="w-full border-t border-grayScale-100" />
+        </div>
+        <div className="relative flex justify-center">
+          <div
+            className="h-[0.5px] w-full opacity-20 rounded-full"
+            style={{
+              background: "gray",
+            }}
+          />
+        </div>
+      </div>
+
+      {/* Cards Grid */}
+      <div className="grid max-w-5xl gap-8 grid-cols-1 md:grid-cols-2">
+        {/* Learn English Card */}
+        <Card className="overflow-hidden border-none shadow-soft">
+          <div className="flex h-56 items-center justify-center bg-white/50">
+            <div className="flex h-20 w-20 items-center justify-center rounded-full bg-brand-100/30">
+              <Mic className="h-10 w-10 text-brand-500" />
+            </div>
+          </div>
+          <CardContent className="border-t border-grayScale-100 bg-white p-8 text-center">
+            <h3 className="text-xl font-bold text-grayScale-700">
+              Learn English
+            </h3>
+            <p className="mt-3 text-sm leading-relaxed text-grayScale-500">
+              Manage structured English learning content based on levels and
+              modules.
+            </p>
+            <Link to="/new-content/learn-english">
+              <Button className="mt-8 h-12 w-full rounded-xl bg-brand-500 text-base font-semibold hover:bg-brand-600">
+                Manage Learn English
+              </Button>
+            </Link>
+          </CardContent>
+        </Card>
+
+        {/* Courses Card */}
+        <Card className="overflow-hidden border-none shadow-soft">
+          <div className="flex h-56 items-center justify-center bg-white/50">
+            <div className="flex h-20 w-20 items-center justify-center rounded-full bg-brand-100/30">
+              <Mic className="h-10 w-10 text-brand-500" />
+            </div>
+          </div>
+          <CardContent className="border-t border-grayScale-100 bg-white p-8 text-center">
+            <h3 className="text-xl font-bold text-grayScale-700">Courses</h3>
+            <p className="mt-3 text-sm leading-relaxed text-grayScale-500">
+              Manage skill-based and exam preparation courses such as Duolingo
+              and IELTS.
+            </p>
+            <Button className="mt-8 h-12 w-full rounded-xl bg-brand-500 text-base font-semibold hover:bg-brand-600">
+              Manage Courses
+            </Button>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/content-management/ProgramCoursesPage.tsx b/src/pages/content-management/ProgramCoursesPage.tsx
new file mode 100644
index 0000000..68586b8
--- /dev/null
+++ b/src/pages/content-management/ProgramCoursesPage.tsx
@@ -0,0 +1,265 @@
+import { ArrowLeft, Plus, FileText } from "lucide-react";
+import { Link, useNavigate, useParams } from "react-router-dom";
+import { Card, CardContent } from "../../components/ui/card";
+import { Button } from "../../components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogTrigger,
+  DialogClose,
+} from "../../components/ui/dialog";
+import { Input } from "../../components/ui/input";
+import { Select } from "../../components/ui/select";
+import uploadIcon from "../../assets/icons/upload.png";
+
+export function ProgramCoursesPage() {
+  const navigate = useNavigate();
+  const { level } = useParams<{ level: string }>();
+
+  const courses = [
+    {
+      id: "a1",
+      title: "A1",
+      description:
+        "Learn basic English words, phrases, and simple sentences for daily situations.",
+      stats: {
+        modules: 3,
+        videos: 15,
+        practices: 18,
+      },
+    },
+    {
+      id: "a2",
+      title: "A2",
+      description:
+        "Build on basic skills with longer sentences, and practical conversations.",
+      stats: {
+        modules: 3,
+        videos: 15,
+        practices: 18,
+      },
+    },
+  ];
+
+  return (
+    <div className="space-y-8">
+      {/* Navigation */}
+      <Link
+        to="/new-content/learn-english"
+        className="flex items-center gap-2 text-sm font-medium text-grayScale-500 transition-colors hover:text-brand-500"
+      >
+        <ArrowLeft className="h-4 w-4" />
+        Back to Programs
+      </Link>
+
+      {/* Header section */}
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+        <div className="space-y-1">
+          <h1 className="text-3xl font-bold tracking-tight text-grayScale-700 capitalize">
+            {level || "Program"}
+          </h1>
+          <p className="max-w-2xl text-[15px] leading-relaxed text-grayScale-400">
+            Designed for learners starting from scratch. Focuses on simple
+            grammar, and everyday communication.
+          </p>
+        </div>
+
+        <div className="flex gap-3">
+          <Link to={`/new-content/learn-english/${level}/courses/add-practice`}>
+            <Button
+              variant="outline"
+              className="rounded-[6px] border-brand-500 text-brand-500 "
+            >
+              <FileText className="mr-2 h-4 w-4" />
+              Add Practice
+            </Button>
+          </Link>
+
+          <Dialog>
+            <DialogTrigger asChild>
+              <Button className="rounded-[6px] bg-brand-500 font-semibold hover:bg-brand-600">
+                <Plus className="mr-2 h-5 w-5" />
+                Add Courses
+              </Button>
+            </DialogTrigger>
+            <DialogContent className="max-w-2xl gap-0 border-none p-0">
+              <DialogHeader className="p-8 pb-4">
+                <DialogTitle className="text-2xl font-bold text-grayScale-700">
+                  Add New Course
+                </DialogTitle>
+                <DialogDescription className="text-sm text-grayScale-400">
+                  Create a CEFR-aligned course inside this program.
+                </DialogDescription>
+              </DialogHeader>
+
+              {/* Gradient Divider */}
+              <div className="relative">
+                <div
+                  className="absolute inset-0 flex items-center"
+                  aria-hidden="true"
+                >
+                  <div className="w-full border-t border-grayScale-100" />
+                </div>
+                <div className="relative flex justify-center">
+                  <div
+                    className="h-[0.5px] w-full opacity-20 rounded-full"
+                    style={{
+                      background: "gray",
+                    }}
+                  />
+                </div>
+              </div>
+
+              <form className="space-y-6 p-8 pt-4">
+                <div className="space-y-2">
+                  <label className="text-[15px] font-medium text-grayScale-700">
+                    Course Name
+                  </label>
+                  <Input placeholder="e.g. A1" className="h-12 rounded-xl" />
+                </div>
+
+                <div className="space-y-2">
+                  <label className="text-[15px] font-medium text-grayScale-700">
+                    Description
+                  </label>
+                  <Input
+                    placeholder="Brief overview of what learners will achieve in this course"
+                    className="h-12 rounded-xl"
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <label className="text-[15px] font-medium text-grayScale-700">
+                    Course Order
+                  </label>
+                  <Select className="h-12 rounded-xl">
+                    <option value="1">1</option>
+                    <option value="2">2</option>
+                    <option value="3">3</option>
+                  </Select>
+                </div>
+
+                <div className="space-y-2">
+                  <label className="text-[15px] font-medium text-grayScale-700">
+                    Thumbnail
+                  </label>
+                  <div className="relative group cursor-pointer">
+                    <div className="flex flex-col items-center justify-center rounded-2xl border-2 border-dashed border-[#9E289133] bg-white p-10 transition-all">
+                      <div className="mb-4">
+                        <img
+                          src={uploadIcon}
+                          alt="Upload icon"
+                          className="h-10 w-10"
+                        />
+                      </div>
+                      <p className="text-sm">
+                        <span className="font-bold text-[#9E2891]">
+                          Click to upload
+                        </span>{" "}
+                        <span className="text-grayScale-500">
+                          or drag and drop
+                        </span>
+                      </p>
+                      <p className="mt-1 text-xs font-medium text-grayScale-400 uppercase tracking-wider">
+                        JPG, PNG (MAX 1 MB)
+                      </p>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="flex justify-end gap-3 pt-4">
+                  <DialogClose asChild>
+                    <Button
+                      variant="outline"
+                      className="h-12 min-w-[120px] rounded-xl border-grayScale-200 font-semibold"
+                    >
+                      Cancel
+                    </Button>
+                  </DialogClose>
+                  <Button className="h-12 min-w-[160px] rounded-xl bg-brand-500 font-semibold hover:bg-brand-600">
+                    Create Course
+                  </Button>
+                </div>
+              </form>
+            </DialogContent>
+          </Dialog>
+        </div>
+      </div>
+
+      {/* Cards Grid */}
+      <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+        {courses.map((course) => (
+          <Card
+            key={course.id}
+            className="group overflow-hidden  border border-grayScale-100 shadow-soft transition-all duration-300 hover:shadow-lg"
+          >
+            {/* Gradient Header */}
+            <div
+              className="h-32 w-full"
+              style={{
+                background:
+                  "linear-gradient(135deg, #9E289180 0%, #9E2891 100%)",
+              }}
+            />
+            <CardContent className="p-6">
+              <h3 className="text-xl font-bold text-grayScale-700">
+                {course.title}
+              </h3>
+              <p className="mt-2 text-[13px] leading-relaxed text-grayScale-500 line-clamp-2">
+                {course.description}
+              </p>
+
+              {/* Stats */}
+              <div className="my-6 grid grid-cols-3 gap-4 border-y border-grayScale-50 py-4">
+                <div className="text-center">
+                  <p className="text-base font-bold text-grayScale-700">
+                    {course.stats.modules}
+                  </p>
+                  <p className="text-[10px] font-medium text-grayScale-400 uppercase tracking-wider">
+                    Modules
+                  </p>
+                </div>
+                <div className="text-center">
+                  <p className="text-base font-bold text-grayScale-700">
+                    {course.stats.videos}
+                  </p>
+                  <p className="text-[10px] font-medium text-grayScale-400 uppercase tracking-wider">
+                    Videos
+                  </p>
+                </div>
+                <div className="text-center">
+                  <p className="text-base font-bold text-grayScale-700">
+                    {course.stats.practices}
+                  </p>
+                  <p className="text-[10px] font-medium text-grayScale-400 uppercase tracking-wider">
+                    Practices
+                  </p>
+                </div>
+              </div>
+
+              <div className="flex gap-3">
+                <Button
+                  variant="outline"
+                  className="h-10 flex-1 rounded-[6px] border-brand-500 text-[13px] font-semibold text-brand-500 "
+                  onClick={() =>
+                    navigate(
+                      `/new-content/learn-english/${level}/courses/${course.title.toLowerCase()}`,
+                    )
+                  }
+                >
+                  View Detail
+                </Button>
+                <Button className="h-10 flex-1 rounded-[6px] bg-brand-500 text-[13px] font-semibold ">
+                  Publish Practice
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/content-management/components/AddModuleModal.tsx b/src/pages/content-management/components/AddModuleModal.tsx
new file mode 100644
index 0000000..7cc989f
--- /dev/null
+++ b/src/pages/content-management/components/AddModuleModal.tsx
@@ -0,0 +1,131 @@
+import { X } from "lucide-react";
+import { Button } from "../../../components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogClose,
+} from "../../../components/ui/dialog";
+import { Input } from "../../../components/ui/input";
+import { Select } from "../../../components/ui/select";
+import uploadIcon from "../../../assets/icons/upload.png";
+
+interface AddModuleModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function AddModuleModal({ isOpen, onClose }: AddModuleModalProps) {
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="max-w-2xl gap-0 border-none p-0 overflow-hidden rounded-[16px] shadow-2xl">
+        <DialogHeader className="p-8 pb-4 relative">
+          <DialogTitle className="text-2xl font-bold text-grayScale-700">
+            Add New Module
+          </DialogTitle>
+          <DialogDescription className="text-sm text-grayScale-400">
+            Create a module to organize videos and practices.
+          </DialogDescription>
+          <DialogClose className="absolute right-8 top-8 flex h-10 w-10 items-center justify-center rounded-full hover:bg-grayScale-50 transition-all">
+            <X className="h-6 w-6 text-grayScale-400" />
+            <span className="sr-only">Close</span>
+          </DialogClose>
+        </DialogHeader>
+
+        {/* Gradient Divider */}
+        <div className="relative">
+          <div
+            className="absolute inset-0 flex items-center"
+            aria-hidden="true"
+          >
+            <div className="w-full border-t border-grayScale-100" />
+          </div>
+          <div className="relative flex justify-center">
+            <div
+              className="h-[0.5px] w-full opacity-20"
+              style={{ background: "gray" }}
+            />
+          </div>
+        </div>
+
+        <form className="space-y-6 p-8 pt-4">
+          <div className="space-y-2">
+            <label className="text-[15px] font-medium text-grayScale-700">
+              Module Title
+            </label>
+            <Input
+              placeholder="e.g. Daily Introductions"
+              className="h-12 rounded-xl"
+            />
+          </div>
+
+          <div className="space-y-2">
+            <label className="text-[15px] font-medium text-grayScale-700">
+              Description
+            </label>
+            <Input
+              placeholder="Short description of this module"
+              className="h-12 rounded-xl"
+            />
+          </div>
+
+          <div className="space-y-2">
+            <label className="text-[15px] font-medium text-grayScale-700">
+              Module Order
+            </label>
+            <Select className="h-12 rounded-xl">
+              <option value="1">1</option>
+              <option value="2">2</option>
+              <option value="3">3</option>
+            </Select>
+          </div>
+
+          <div className="space-y-2">
+            <label className="text-[15px] font-medium text-grayScale-700">
+              Icon
+            </label>
+            <div className="relative group cursor-pointer">
+              <div className="flex flex-col items-center justify-center rounded-2xl border-2 border-dashed border-[#9E289133] bg-white p-10 transition-all">
+                <div className="mb-4">
+                  <img
+                    src={uploadIcon}
+                    alt="Upload icon"
+                    className="h-10 w-10"
+                  />
+                </div>
+                <p className="text-sm">
+                  <span className="font-bold text-[#9E2891]">
+                    Click to upload
+                  </span>{" "}
+                  <span className="text-grayScale-500">or drag and drop</span>
+                </p>
+                <p className="mt-1 text-xs font-medium text-grayScale-400 uppercase tracking-wider">
+                  JPG, PNG (MAX 1 MB)
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex justify-end gap-3 pt-4">
+            <DialogClose asChild>
+              <Button
+                variant="outline"
+                className="h-12 min-w-[120px] rounded-xl border-grayScale-200 font-semibold"
+              >
+                Cancel
+              </Button>
+            </DialogClose>
+            <Button
+              type="submit"
+              className="h-12 min-w-[160px] rounded-xl bg-brand-500 font-semibold hover:bg-brand-600 text-white shadow-lg shadow-brand-500/20"
+            >
+              Create Module
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/pages/content-management/components/VideoCard.tsx b/src/pages/content-management/components/VideoCard.tsx
new file mode 100644
index 0000000..63946f3
--- /dev/null
+++ b/src/pages/content-management/components/VideoCard.tsx
@@ -0,0 +1,100 @@
+import { MoreVertical, Edit2, Play } from "lucide-react";
+import { Button } from "../../../components/ui/button";
+import { cn } from "../../../lib/utils";
+
+interface VideoCardProps {
+  id: string;
+  title: string;
+  duration: string;
+  status: "Draft" | "Published";
+  thumbnailGradient: string;
+  onEdit?: () => void;
+  onPublish?: () => void;
+}
+
+export function VideoCard({
+  title,
+  duration,
+  status,
+  thumbnailGradient,
+  onEdit,
+  onPublish,
+}: VideoCardProps) {
+  return (
+    <div className="group bg-white rounded-[24px] border border-grayScale-50 overflow-hidden shadow-sm hover:shadow-lg transition-all duration-300 flex flex-col">
+      {/* Thumbnail */}
+      <div
+        className={cn(
+          "relative h-44 w-full bg-gradient-to-br",
+          thumbnailGradient,
+        )}
+      >
+        {/* Duration Badge */}
+        <div className="absolute bottom-3 right-3 bg-black/70 text-white text-[11px] font-bold px-2 py-1 rounded-md backdrop-blur-sm">
+          {duration}
+        </div>
+        {/* Play Overlay */}
+        <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity bg-black/10">
+          <div className="h-12 w-12 rounded-full bg-white/20 backdrop-blur-md flex items-center justify-center border border-white/30">
+            <Play className="h-6 w-6 text-white fill-current" />
+          </div>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="p-5 space-y-4 flex-1 flex flex-col">
+        <div className="flex items-center justify-between">
+          {/* Status Badge */}
+          <div
+            className={cn(
+              "flex items-center gap-1.5 px-3 py-1 rounded-full text-[11px] font-bold uppercase tracking-wider border",
+              status === "Published"
+                ? "bg-[#ECFDF5] text-[#059669] border-[#D1FAE5]"
+                : "bg-[#F3F4F6] text-[#6B7280] border-[#E5E7EB]",
+            )}
+          >
+            <div
+              className={cn(
+                "h-1.5 w-1.5 rounded-full",
+                status === "Published" ? "bg-[#10B981]" : "bg-[#9CA3AF]",
+              )}
+            />
+            {status}
+          </div>
+          {/* Menu */}
+          <button className="h-8 w-8 flex items-center justify-center rounded-full hover:bg-grayScale-50 transition-colors text-grayScale-400">
+            <MoreVertical className="h-5 w-5" />
+          </button>
+        </div>
+
+        <h3 className="text-[17px] font-bold text-grayScale-900 line-clamp-2 leading-snug">
+          {title}
+        </h3>
+
+        {/* Actions */}
+        <div className="pt-2 space-y-3 mt-auto">
+          <Button
+            variant="outline"
+            onClick={onEdit}
+            className="w-full h-11 rounded-xl border-grayScale-100 text-grayScale-600 font-bold hover:bg-grayScale-50 transition-all flex items-center justify-center gap-2"
+          >
+            <Edit2 className="h-4 w-4" />
+            Edit
+          </Button>
+          <Button
+            disabled={status === "Published"}
+            onClick={onPublish}
+            className={cn(
+              "w-full h-11 rounded-xl font-bold transition-all shadow-sm",
+              status === "Published"
+                ? "bg-[#E9D5E5] text-white opacity-100 cursor-default"
+                : "bg-brand-500 text-white hover:bg-brand-600 shadow-brand-500/10",
+            )}
+          >
+            {status === "Published" ? "Published" : "Publish"}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/content-management/components/practice-steps/ContextStep.tsx b/src/pages/content-management/components/practice-steps/ContextStep.tsx
new file mode 100644
index 0000000..165bfff
--- /dev/null
+++ b/src/pages/content-management/components/practice-steps/ContextStep.tsx
@@ -0,0 +1,146 @@
+import { GraduationCap, ArrowRight, LayoutGrid, Monitor } from "lucide-react";
+import { Button } from "../../../../components/ui/button";
+import { Card } from "../../../../components/ui/card";
+import { Select } from "../../../../components/ui/select";
+
+interface ContextStepProps {
+  formData: any;
+  setFormData: (data: any) => void;
+  nextStep: () => void;
+  navigate: (path: string) => void;
+  level: string;
+  isModuleContext?: boolean;
+}
+
+export function ContextStep({
+  formData,
+  setFormData,
+  nextStep,
+  navigate,
+  level,
+  isModuleContext,
+}: ContextStepProps) {
+  return (
+    <Card className="overflow-hidden border-grayScale-50 shadow-soft rounded-2xl bg-white animate-in fade-in duration-500">
+      <div className="border-b border-grayScale-50 p-8">
+        <h2 className="text-2xl font-bold text-grayScale-900 leading-none">
+          Step 1: Context Definition
+        </h2>
+        <p className="text-grayScale-400 text-base mt-3">
+          Define the educational level and curriculum module for this practice.
+        </p>
+      </div>
+
+      <div className="space-y-10 p-10">
+        {/* Program Field */}
+        <div className="space-y-3">
+          <label className="text-[17px] font-bold text-grayScale-700 ml-1">
+            Program{" "}
+            <span className="text-grayScale-300 font-medium">
+              (Auto-selected)
+            </span>
+          </label>
+          <div className="relative">
+            <div className="absolute left-6 top-1/2 -translate-y-1/2">
+              <GraduationCap className="h-6 w-6 text-grayScale-400" />
+            </div>
+            <Select
+              className="h-16 w-full rounded-2xl border-grayScale-50 bg-[#F9FAFB] pl-16 text-grayScale-700 font-bold focus:border-brand-500 focus:ring-0 transition-all cursor-default"
+              disabled
+            >
+              <option>{formData.program || "Intermediate"}</option>
+            </Select>
+          </div>
+        </div>
+
+        {/* Course Field */}
+        <div className="space-y-3">
+          <label className="text-[17px] font-bold text-grayScale-700 ml-1">
+            Course{" "}
+            <span className="text-grayScale-300 font-medium">
+              (Auto-selected)
+            </span>
+          </label>
+          <div className="relative">
+            <div className="absolute left-6 top-1/2 -translate-y-1/2">
+              <GraduationCap className="h-6 w-6 text-grayScale-400" />
+            </div>
+            <Select
+              className="h-16 w-full rounded-2xl border-grayScale-50 bg-[#F9FAFB] pl-16 text-grayScale-700 font-bold focus:border-brand-500 focus:ring-0 transition-all cursor-default"
+              disabled
+            >
+              <option>{formData.course || "B2"}</option>
+            </Select>
+          </div>
+        </div>
+
+        {/* Select Module Field */}
+        <div className="space-y-3">
+          <label className="text-[17px] font-bold text-grayScale-700 ml-1">
+            Select Module
+          </label>
+          <div className="relative">
+            <div className="absolute left-6 top-1/2 -translate-y-1/2">
+              <LayoutGrid className="h-6 w-6 text-grayScale-400" />
+            </div>
+            <Select className="h-16 w-full rounded-2xl border-grayScale-100 bg-white pl-16 text-grayScale-700 font-bold focus:border-brand-500 focus:ring-0 transition-all ring-offset-0">
+              <option value="">Choose a module...</option>
+              <option value="m1">Introduction Basics</option>
+              <option value="m2">Daily Routines</option>
+              <option value="m3">Travel Essentials</option>
+            </Select>
+          </div>
+          <p className="text-[13px] text-grayScale-400 font-medium px-2">
+            Select the specific learning module this practice will reinforce.
+          </p>
+        </div>
+
+        {/* Select Video Field (Conditional) */}
+        {isModuleContext && (
+          <div className="space-y-3 animate-in fade-in slide-in-from-top-2 duration-300">
+            <label className="text-[17px] font-bold text-grayScale-700 ml-1">
+              Select Video
+            </label>
+            <div className="relative">
+              <div className="absolute left-6 top-1/2 -translate-y-1/2">
+                <Monitor className="h-6 w-6 text-grayScale-400" />
+              </div>
+              <Select
+                className="h-16 w-full rounded-2xl border-grayScale-100 bg-white pl-16 text-grayScale-700 font-bold focus:border-brand-500 focus:ring-0 transition-all"
+                value={formData.selectedVideo}
+                onChange={(e) =>
+                  setFormData({ ...formData, selectedVideo: e.target.value })
+                }
+              >
+                <option value="">Choose a video</option>
+                <option value="v1">Intro to Greetings</option>
+                <option value="v2">Advanced Grammar</option>
+              </Select>
+            </div>
+            <p className="text-[13px] text-grayScale-400 font-medium px-2">
+              Select the specific learning module this practice will reinforce.
+            </p>
+          </div>
+        )}
+      </div>
+
+      <div className="flex items-center justify-between border-t border-grayScale-50 bg-[#F9FAFB]/50 p-10 px-12">
+        <button
+          className="text-[17px] font-bold text-grayScale-500 transition-colors hover:text-grayScale-700"
+          onClick={() =>
+            navigate(`/new-content/learn-english/${level}/courses`)
+          }
+        >
+          Cancel
+        </button>
+        <Button
+          onClick={nextStep}
+          className="h-14 px-10 rounded-2xl bg-brand-500 text-[17px] font-bold text-white hover:bg-brand-600 shadow-xl shadow-brand-500/20 transition-all active:scale-95 flex items-center gap-2"
+        >
+          Next: {isModuleContext ? "Persona" : "Scenario"}{" "}
+          <ArrowRight className="h-5 w-5" />
+        </Button>
+      </div>
+    </Card>
+  );
+}
diff --git a/src/pages/content-management/components/practice-steps/PersonaStep.tsx b/src/pages/content-management/components/practice-steps/PersonaStep.tsx
new file mode 100644
index 0000000..133b6e4
--- /dev/null
+++ b/src/pages/content-management/components/practice-steps/PersonaStep.tsx
@@ -0,0 +1,91 @@
+import { Check, ArrowRight } from "lucide-react";
+import { Button } from "../../../../components/ui/button";
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "../../../../components/ui/avatar";
+import { cn } from "../../../../lib/utils";
+import { PERSONAS } from "./constants";
+
+interface PersonaStepProps {
+  selectedPersona: string | null;
+  setSelectedPersona: (id: string) => void;
+  nextStep: () => void;
+  prevStep: () => void;
+}
+
+export function PersonaStep({
+  selectedPersona,
+  setSelectedPersona,
+  nextStep,
+  prevStep,
+}: PersonaStepProps) {
+  return (
+    <div className="space-y-8">
+      <div className="space-y-1 px-2">
+        <h2 className="text-2xl font-extrabold text-grayScale-700">
+          Select Personas
+        </h2>
+        <p className="text-grayScale-400 text-lg">
+          Choose the characters that will participate in this practice scenario.
+        </p>
+      </div>
+      <div className="grid grid-cols-2 gap-6 sm:grid-cols-4">
+        {PERSONAS.map((persona) => (
+          <div
+            key={persona.id}
+            onClick={() => setSelectedPersona(persona.id)}
+            className={cn(
+              "group relative cursor-pointer rounded-2xl border-2 bg-white p-6 transition-all duration-300",
+              selectedPersona === persona.id
+                ? "border-brand-500 shadow-xl scale-105"
+                : "border-grayScale-50 hover:border-brand-200",
+            )}
+          >
+            <div className="flex flex-col items-center gap-4">
+              <div className="relative">
+                <Avatar className="h-24 w-24 border-4 border-white shadow-lg">
+                  <AvatarImage src={persona.avatar} />
+                  <AvatarFallback>
+                    {persona.name.substring(0, 2)}
+                  </AvatarFallback>
+                </Avatar>
+                {selectedPersona === persona.id && (
+                  <div className="absolute -right-2 top-0 grid h-7 w-7 place-items-center rounded-full bg-brand-500 text-white shadow-xl ring-4 ring-white">
+                    <Check className="h-4 w-4 stroke-[3]" />
+                  </div>
+                )}
+              </div>
+              <span
+                className={cn(
+                  "text-lg font-bold transition-colors",
+                  selectedPersona === persona.id
+                    ? "text-brand-600"
+                    : "text-grayScale-700",
+                )}
+              >
+                {persona.name}
+              </span>
+            </div>
+          </div>
+        ))}
+      </div>
+      <div className="flex items-center justify-between pt-8">
+        <Button
+          onClick={prevStep}
+          variant="outline"
+          className="h-12 w-28 rounded-xl border-grayScale-200 font-bold text-grayScale-600"
+        >
+          Back
+        </Button>
+        <Button
+          onClick={nextStep}
+          className="h-12 rounded-xl bg-brand-500 px-8 font-bold hover:bg-brand-600 shadow-md shadow-brand-500/20"
+        >
+          Next: Questions <ArrowRight className="ml-2 h-4 w-4" />
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/content-management/components/practice-steps/QuestionsStep.tsx b/src/pages/content-management/components/practice-steps/QuestionsStep.tsx
new file mode 100644
index 0000000..184f95c
--- /dev/null
+++ b/src/pages/content-management/components/practice-steps/QuestionsStep.tsx
@@ -0,0 +1,140 @@
+import { GripVertical, Trash2, Plus, ArrowRight } from "lucide-react";
+import { Button } from "../../../../components/ui/button";
+import { Card } from "../../../../components/ui/card";
+import { Input } from "../../../../components/ui/input";
+import { VoicePrompt } from "./VoicePrompt";
+
+interface QuestionsStepProps {
+  formData: any;
+  setFormData: (data: any) => void;
+  nextStep: () => void;
+  prevStep: () => void;
+}
+
+export function QuestionsStep({
+  formData,
+  setFormData,
+  nextStep,
+  prevStep,
+}: QuestionsStepProps) {
+  const addQuestion = () => {
+    const newQuestion = {
+      id: `q${formData.questions.length + 1}`,
+      text: "",
+      type: "Speaking",
+      voicePrompt: "upload_audio.mp3",
+      sampleAnswer: "upload_audio.mp3",
+    };
+    setFormData({
+      ...formData,
+      questions: [...formData.questions, newQuestion],
+    });
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="space-y-1 px-2">
+        <h2 className="text-2xl font-extrabold text-grayScale-700">
+          Create Practice Questions
+        </h2>
+        <p className="text-grayScale-400 text-lg">
+          Define the dialogue flow and interactions for this scenario.
+        </p>
+      </div>
+      <div className="space-y-6">
+        {formData.questions.map((q: any, i: number) => (
+          <Card
+            key={q.id}
+            className="overflow-hidden border-grayScale-50 shadow-soft rounded-2xl bg-white relative"
+          >
+            <div className="absolute left-0 top-0 bottom-0 w-[5px] bg-brand-500" />
+            <div className="px-5 pb-7 pt-2 space-y-6">
+              <div className="flex items-center justify-between border-b border-grayScale-50 pb-4 mb-4">
+                <div className="flex items-center gap-3">
+                  <GripVertical className="h-5 w-5 text-brand-500 cursor-grab" />
+                  <span className="font-bold text-grayScale-500 text-lg">
+                    Question {i + 1}
+                  </span>
+                </div>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="text-brand-500 hover:bg-brand-50 rounded-lg"
+                  onClick={() => {
+                    const newQuestions = formData.questions.filter(
+                      (item: any) => item.id !== q.id,
+                    );
+                    setFormData({ ...formData, questions: newQuestions });
+                  }}
+                >
+                  <Trash2 className="h-5 w-5" />
+                </Button>
+              </div>
+              <div className="grid grid-cols-1 md:grid-cols-12 gap-8">
+                <div className="md:col-span-8 space-y-3">
+                  <label className="text-[10px] font-bold text-grayScale-700 uppercase tracking-widest">
+                    QUESTION PROMPT
+                  </label>
+                  <Input
+                    value={q.text}
+                    onChange={(e) => {
+                      const newQuestions = [...formData.questions];
+                      newQuestions[i].text = e.target.value;
+                      setFormData({ ...formData, questions: newQuestions });
+                    }}
+                    className="h-16 rounded-xl border-grayScale-200 focus:border-brand-500 font-medium px-6 text-lg placeholder:text-grayScale-300 bg-white"
+                    placeholder="e.g. How long have you been studying English?"
+                  />
+                </div>
+                <div className="md:col-span-4 space-y-3">
+                  <label className="text-[10px] font-bold text-grayScale-700 uppercase tracking-widest">
+                    VOICE PROMPT
+                  </label>
+                  <VoicePrompt filename={q.voicePrompt} />
+                </div>
+              </div>
+              <div className="md:w-1/3 space-y-3">
+                <label className="text-[10px] font-bold text-grayScale-700 uppercase tracking-widest">
+                  SAMPLE ANSWER PROMPT
+                </label>
+                <VoicePrompt filename={q.sampleAnswer} />
+              </div>
+            </div>
+          </Card>
+        ))}
+        <div className="flex items-center gap-8 pt-4">
+          <button
+            onClick={addQuestion}
+            className="flex items-center gap-3 text-brand-500 font-bold text-base hover:opacity-80 transition-all"
+          >
+            <div className="flex h-5 w-5 items-center justify-center rounded-full border-2 border-brand-500">
+              <Plus className="h-3 w-3 stroke-[4]" />
+            </div>{" "}
+            Add New Question
+          </button>
+          <button className="flex items-center gap-3 text-brand-500 font-bold text-base hover:opacity-80 transition-all">
+            <div className="flex h-5 w-5 items-center justify-center rounded-full border-2 border-brand-500">
+              <Plus className="h-3 w-3 stroke-[4]" />
+            </div>{" "}
+            Add Tips
+          </button>
+        </div>
+      </div>
+      <div className="flex items-center justify-between pt-8">
+        <Button
+          onClick={prevStep}
+          variant="outline"
+          className="h-12 w-28 rounded-xl border-grayScale-200 font-bold text-grayScale-600 shadow-sm"
+        >
+          Back
+        </Button>
+        <Button
+          onClick={nextStep}
+          className="h-12 rounded-xl bg-brand-500 px-8 font-bold hover:bg-brand-600 shadow-md shadow-brand-500/20"
+        >
+          Next: Review <ArrowRight className="ml-2 h-4 w-4" />
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/content-management/components/practice-steps/ReviewStep.tsx b/src/pages/content-management/components/practice-steps/ReviewStep.tsx
new file mode 100644
index 0000000..649dc7f
--- /dev/null
+++ b/src/pages/content-management/components/practice-steps/ReviewStep.tsx
@@ -0,0 +1,290 @@
+import { Edit2, GripVertical, Trash2, Rocket, Info } from "lucide-react";
+import { Button } from "../../../../components/ui/button";
+import { Card } from "../../../../components/ui/card";
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "../../../../components/ui/avatar";
+import { PERSONAS } from "./constants";
+import { VoicePrompt } from "./VoicePrompt";
+import { cn } from "../../../../lib/utils";
+
+interface ReviewStepProps {
+  formData: any;
+  selectedPersona: string | null;
+  prevStep: () => void;
+  setIsPublished: (val: boolean) => void;
+  isModuleContext?: boolean;
+}
+
+export function ReviewStep({
+  formData,
+  selectedPersona,
+  prevStep,
+  setIsPublished,
+  isModuleContext,
+}: ReviewStepProps) {
+  const persona = PERSONAS.find((p) => p.id === selectedPersona);
+
+  return (
+    <div className="space-y-10 animate-in fade-in duration-700">
+      <div className="flex items-center justify-between px-2">
+        <h2 className="text-2xl font-bold text-grayScale-900 tracking-tight">
+          Review Practice Questions
+        </h2>
+      </div>
+
+      {/* 1. Basic Info Card (Image 1436.1) */}
+      <Card className="overflow-hidden border border-grayScale-50 shadow-soft rounded-2xl bg-white shadow-sm">
+        <div className="border-b border-grayScale-50 p-6 px-10 flex justify-between items-center bg-white">
+          <h3 className="text-[17px] font-extrabold text-grayScale-900">
+            Basic Information
+          </h3>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="text-brand-500 font-bold hover:bg-brand-50 gap-2 h-9"
+          >
+            <Edit2 className="h-4 w-4" />
+            Edit
+          </Button>
+        </div>
+        <div className="p-8 px-10 flex items-center justify-between ">
+          <div className="flex items-center gap-6">
+            <div className="h-[72px] w-[110px] rounded-xl bg-grayScale-100 overflow-hidden shadow-inner flex-shrink-0">
+              <img
+                src="https://images.unsplash.com/photo-1558403194-611308249627?auto=format&fit=crop&q=80&w=200"
+                alt="Banner"
+                className="w-full h-full object-cover opacity-80"
+              />
+            </div>
+            <div className="space-y-2">
+              <h4 className="text-[22px] font-extrabold text-grayScale-900 leading-tight">
+                {formData.title || "Business English 101: Communication"}
+              </h4>
+              <div className="flex items-center gap-6 text-[14px]">
+                <span className="text-grayScale-900 font-bold">
+                  Program:{" "}
+                  <span className="text-brand-500 font-extrabold">
+                    {formData.program}
+                  </span>
+                </span>
+                <span className="text-grayScale-900 font-bold">
+                  Course:{" "}
+                  <span className="text-brand-500 font-extrabold">
+                    {formData.course}
+                  </span>
+                </span>
+                <span className="text-grayScale-900 font-bold">
+                  Module:{" "}
+                  <span className="text-brand-500 font-extrabold">
+                    Module 101
+                  </span>
+                </span>
+              </div>
+            </div>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <span className="text-[11px] font-bold text-grayScale-900 uppercase tracking-widest">
+              Persona
+            </span>
+            <div className="flex items-center gap-2 bg-[#FAF5FF] p-2 pl-2.5 pr-4 rounded-full border border-brand-100/30">
+              <Avatar className="h-8 w-8 border-2 border-white shadow-sm font-bold">
+                <AvatarImage src={persona?.avatar} />
+                <AvatarFallback>P</AvatarFallback>
+              </Avatar>
+              <span className="text-[14px] font-extrabold text-brand-500 capitalize">
+                {persona?.name || "Alex Johnson"}
+              </span>
+            </div>
+          </div>
+        </div>
+      </Card>
+
+      {/* 2. Tips Section (Image 1436.1) */}
+      <div className="space-y-4 px-2">
+        <div className="flex items-center gap-2">
+          <label className="text-[12px] font-bold text-grayScale-900 uppercase tracking-widest leading-none">
+            TIPS / GUIDANCE
+          </label>
+          <Info className="h-4 w-4 text-brand-500" />
+        </div>
+        <div className="px-5 pt-2 pb-8 bg-white border border-[#E2E8F0] shadow-sm rounded-xl">
+          <p className="text-[14px] text-grayScale-500 font-medium leading-relaxed">
+            {formData.tips ||
+              "Focus on using the present perfect continuous tense to describe an action that started in the past and continues now."}
+          </p>
+        </div>
+      </div>
+
+      {isModuleContext ? (
+        /* 3. Split Questions & Answers Layout (Image 1413.1) */
+        <div className="grid grid-cols-1 md:grid-cols-2 bg-white rounded-[24px] border border-grayScale-50 shadow-sm overflow-hidden min-h-[600px]">
+          {/* Left Column: Questions */}
+          <div className="border-r border-grayScale-50 flex flex-col">
+            <div className="p-6 px-10 border-b border-grayScale-50 flex items-center gap-3 bg-white">
+              <h3 className="text-[16px] font-extrabold text-[#0F172A]">
+                Questions
+              </h3>
+              <span className="h-6 w-6 rounded-full bg-grayScale-50 flex items-center justify-center text-[12px] font-extrabold text-grayScale-300">
+                {formData.questions.length}
+              </span>
+            </div>
+            <div className="p-10 space-y-14">
+              {formData.questions.map((q: any, i: number) => (
+                <div key={q.id} className="relative pl-12">
+                  <span className="absolute left-0 top-0 text-[18px] font-bold text-grayScale-400 tracking-tighter opacity-70">
+                    {(i + 1).toString().padStart(2, "0")}
+                  </span>
+                  <div className="space-y-8">
+                    <div className="space-y-4">
+                      <span className="text-[11px] font-extrabold text-grayScale-600 uppercase tracking-[0.1em] block">
+                        TEXT PROMPT
+                      </span>
+                      <p className="text-[16px] font-medium text-grayScale-600 leading-relaxed max-w-[90%]">
+                        {q.text}
+                      </p>
+                    </div>
+                    <div className="space-y-4">
+                      <span className="text-[11px] font-extrabold text-grayScale-300 uppercase tracking-[0.1em] block">
+                        VOICE PROMPT
+                      </span>
+                      <VoicePrompt
+                        filename={q.voicePrompt}
+                        className="bg-[#FAF5FF]/60 border-[#F3E8FF] h-[72px]"
+                      />
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Right Column: Answers */}
+          <div className="flex flex-col">
+            <div className="p-6 px-10 border-b border-grayScale-50 flex items-center justify-between bg-white">
+              <div className="flex items-center gap-3">
+                <h3 className="text-[16px] font-extrabold ">Answers</h3>
+                <span className="h-6 w-6 rounded-full bg-grayScale-50  flex items-center justify-center text-[12px] font-extrabold text-brand-300">
+                  {formData.questions.length}
+                </span>
+              </div>
+              <button className="flex items-center gap-2 text-brand-500 font-bold text-[15px] hover:opacity-80 transition-opacity">
+                <Edit2 className="h-4 w-4" />
+                Edit
+              </button>
+            </div>
+            <div className="p-10 space-y-14">
+              {formData.questions.map((q: any, i: number) => (
+                <div key={q.id + "_ans"} className="relative pl-12">
+                  <span className="absolute left-0 top-0 text-[18px] font-bold text-grayScale-400 tracking-tighter opacity-70">
+                    {(i + 1).toString().padStart(2, "0")}
+                  </span>
+                  <div className="space-y-4">
+                    <span className="text-[11px] font-extrabold text-grayScale-600 uppercase tracking-[0.1em] block">
+                      VOICE PROMPT
+                    </span>
+                    <VoicePrompt
+                      filename={q.sampleAnswer}
+                      className="bg-[#FAF5FF]/60 border-[#F3E8FF] h-[72px]"
+                    />
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      ) : (
+        /* Original Non-Module View */
+        <div className="space-y-6">
+          {formData.questions.map((q: any, i: number) => (
+            <ReviewItem key={q.id} q={q} index={i} />
+          ))}
+        </div>
+      )}
+
+      {/* Action Footer */}
+      <div className="flex items-center justify-between pt-12">
+        <Button
+          onClick={prevStep}
+          variant="outline"
+          className="h-12 px-10 rounded-xl border-grayScale-200 font-bold text-grayScale-600 bg-white shadow-sm hover:bg-grayScale-50 transition-all text-sm"
+        >
+          Back
+        </Button>
+        <div className="flex gap-4">
+          <Button
+            variant="outline"
+            className="h-12 px-8 rounded-xl border-grayScale-100 font-bold text-grayScale-600 bg-white shadow-sm hover:bg-grayScale-50 transition-all text-sm"
+          >
+            Save as Draft
+          </Button>
+          <Button
+            onClick={() => setIsPublished(true)}
+            className="h-12 px-10 rounded-xl bg-brand-500 font-bold hover:bg-brand-600 shadow-xl shadow-brand-500/20 gap-3 active:scale-95 transition-all text-white text-sm"
+          >
+            <Rocket className="h-4 w-4" />
+            Publish Now
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ReviewItem({ q, index }: { q: any; index: number }) {
+  return (
+    <Card className="overflow-hidden border border-grayScale-50 shadow-sm rounded-2xl bg-white relative p-8 group">
+      <div className="absolute left-0 top-0 bottom-0 w-[5px] bg-brand-500 opacity-0 group-hover:opacity-100 transition-opacity" />
+      <div className="space-y-8">
+        <div className="flex items-center justify-between border-b border-grayScale-50 pb-6">
+          <div className="flex items-center gap-4">
+            <GripVertical className="h-4 w-4 text-grayScale-200" />
+            <span className="font-bold text-grayScale-800 text-[18px]">
+              Question {index + 1}
+            </span>
+          </div>
+          <div className="flex items-center gap-3">
+            <button className="h-9 w-9 rounded-lg border border-grayScale-100 flex items-center justify-center text-grayScale-400 hover:text-brand-500 hover:border-brand-100 transition-all">
+              <Edit2 className="h-4 w-4" />
+            </button>
+            <button className="h-9 w-9 rounded-lg border border-grayScale-100 flex items-center justify-center text-grayScale-400 hover:text-red-500 hover:border-red-100 transition-all">
+              <Trash2 className="h-4 w-4" />
+            </button>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
+          <div className="space-y-4">
+            <span className="text-[11px] font-extrabold text-grayScale-300 uppercase tracking-widest block">
+              TEXT PROMPT
+            </span>
+            <p className="text-[16px] font-medium text-grayScale-600 leading-relaxed shadow-sm p-6 border border-grayScale-50 rounded-2xl bg-[#F8FAFC]/30">
+              {q.text}
+            </p>
+          </div>
+          <div className="space-y-4">
+            <span className="text-[11px] font-extrabold text-grayScale-300 uppercase tracking-widest block">
+              VOICE PROMPT
+            </span>
+            <VoicePrompt
+              filename={q.voicePrompt}
+              className="bg-[#FAF5FF]/60 border-[#F3E8FF] h-[76px]"
+            />
+          </div>
+        </div>
+
+        <div className="space-y-4 max-w-sm">
+          <span className="text-[11px] font-extrabold text-grayScale-300 uppercase tracking-widest block">
+            SAMPLE ANSWER
+          </span>
+          <VoicePrompt
+            filename={q.sampleAnswer}
+            className="bg-grayScale-50/10 border-dashed h-[72px]"
+          />
+        </div>
+      </div>
+    </Card>
+  );
+}
diff --git a/src/pages/content-management/components/practice-steps/ScenarioStep.tsx b/src/pages/content-management/components/practice-steps/ScenarioStep.tsx
new file mode 100644
index 0000000..c3ace37
--- /dev/null
+++ b/src/pages/content-management/components/practice-steps/ScenarioStep.tsx
@@ -0,0 +1,115 @@
+import { Upload, ArrowRight } from "lucide-react";
+import { Button } from "../../../../components/ui/button";
+import { Card } from "../../../../components/ui/card";
+import { Input } from "../../../../components/ui/input";
+import { Textarea } from "../../../../components/ui/textarea";
+
+interface ScenarioStepProps {
+  formData: any;
+  setFormData: (data: any) => void;
+  nextStep: () => void;
+  prevStep: () => void;
+}
+
+export function ScenarioStep({
+  formData,
+  setFormData,
+  nextStep,
+  prevStep,
+}: ScenarioStepProps) {
+  return (
+    <div className="space-y-6">
+      <div className="space-y-1 px-2">
+        <h2 className="text-2xl font-extrabold text-grayScale-700">
+          Define Scenario Details
+        </h2>
+        <p className="text-grayScale-400 text-lg">
+          Set the scene and context for this English practice session.
+        </p>
+      </div>
+      <Card className="p-8 space-y-6 border-grayScale-50 shadow-soft rounded-2xl bg-white">
+        <div className="space-y-2">
+          <label className="text-sm font-bold text-grayScale-700">
+            Practice Banner Image
+          </label>
+          <p className="text-xs text-grayScale-400">
+            This image will appear as the background for the scenario.
+          </p>
+          <div className="mt-4 flex flex-col items-center justify-center rounded-2xl border-2 border-dashed border-grayScale-100 bg-[#F8F9FA] p-12 hover:bg-grayScale-50 transition-all">
+            <div className="mb-4 rounded-xl border border-grayScale-100 bg-white p-3 text-brand-500 shadow-sm">
+              <Upload className="h-6 w-6" />
+            </div>
+            <p className="text-sm">
+              <span className="font-bold text-grayScale-700">
+                Click to upload
+              </span>{" "}
+              <span className="text-grayScale-500">or drag and drop</span>
+            </p>
+            <p className="mt-1 text-xs text-grayScale-400 uppercase tracking-wide font-bold">
+              SVG, PNG, JPG (MAX 5MB)
+            </p>
+            <Button
+              variant="outline"
+              className="mt-6 h-10 rounded-xl border-grayScale-200 bg-white px-8 font-bold text-grayScale-600 shadow-sm hover:bg-grayScale-50"
+            >
+              Browse Files
+            </Button>
+          </div>
+        </div>
+      </Card>
+      <Card className="p-8 space-y-6 border-grayScale-50 shadow-soft rounded-2xl bg-white">
+        <div className="space-y-2">
+          <label className="text-sm font-bold text-grayScale-700">
+            Practice Title <span className="text-red-500">*</span>
+          </label>
+          <Input
+            placeholder="e.g., Ordering Coffee at a Cafe"
+            className="h-14 rounded-xl border-grayScale-200 focus:border-brand-500 font-bold placeholder:text-grayScale-300 bg-white"
+            value={formData.title}
+            onChange={(e) =>
+              setFormData({ ...formData, title: e.target.value })
+            }
+          />
+        </div>
+        <div className="space-y-2">
+          <label className="text-sm font-bold text-grayScale-700">
+            Scenario Description <span className="text-red-500">*</span>
+          </label>
+          <div className="relative">
+            <Textarea
+              placeholder="Describe the setting..."
+              className="min-h-[160px] rounded-xl resize-none p-4 border-grayScale-200 focus:border-brand-500 leading-relaxed font-bold placeholder:text-grayScale-300 bg-white"
+              maxLength={1000}
+              value={formData.description}
+              onChange={(e) =>
+                setFormData({
+                  ...formData,
+                  description: e.target.value,
+                })
+              }
+            />
+            <div className="absolute bottom-4 right-4 text-xs font-bold text-grayScale-300">
+              {formData.description.length} / 1000
+            </div>
+          </div>
+        </div>
+      </Card>
+      <div className="flex items-center justify-between pt-4">
+        <Button
+          onClick={prevStep}
+          variant="outline"
+          className="h-12 w-28 rounded-xl border-grayScale-200 font-bold text-grayScale-600 shadow-sm"
+        >
+          Back
+        </Button>
+        <Button
+          onClick={nextStep}
+          disabled={!formData.title || !formData.description}
+          className="h-12 rounded-xl bg-brand-500 px-8 font-bold hover:bg-brand-600 shadow-md shadow-brand-500/20"
+        >
+          Next: Persona <ArrowRight className="ml-2 h-4 w-4" />
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/content-management/components/practice-steps/VoicePrompt.tsx b/src/pages/content-management/components/practice-steps/VoicePrompt.tsx
new file mode 100644
index 0000000..1be5b6c
--- /dev/null
+++ b/src/pages/content-management/components/practice-steps/VoicePrompt.tsx
@@ -0,0 +1,44 @@
+import { Play, X } from "lucide-react";
+import { Button } from "../../../../components/ui/button";
+import { cn } from "../../../../lib/utils";
+
+interface VoicePromptProps {
+  filename: string;
+  className?: string;
+}
+
+export function VoicePrompt({ filename, className }: VoicePromptProps) {
+  return (
+    <div
+      className={cn(
+        "flex items-center gap-4 p-4 bg-brand-50/5 rounded-xl border border-grayScale-50 h-20 shadow-sm",
+        className,
+      )}
+    >
+      <div className="h-10 w-10 rounded-full bg-brand-500 flex items-center justify-center text-white shadow-md flex-shrink-0 cursor-pointer hover:bg-brand-600 transition-colors">
+        <Play className="h-5 w-5 fill-current ml-1" />
+      </div>
+      <div className="flex-1 min-w-0">
+        <div className="h-6 flex items-end gap-[2px] px-1 overflow-hidden opacity-40 mb-1">
+          {[...Array(20)].map((_, idx) => (
+            <div
+              key={idx}
+              className="w-[3px] bg-brand-500 rounded-full"
+              style={{ height: `${Math.random() * 80 + 20}%` }}
+            />
+          ))}
+        </div>
+        <p className="text-[10px] font-bold text-brand-500 truncate">
+          {filename}
+        </p>
+      </div>
+      <Button
+        variant="ghost"
+        size="icon"
+        className="h-8 w-8 text-grayScale-300  rounded-lg"
+      >
+        <X className="h-5 w-5" color="#9E2891" />
+      </Button>
+    </div>
+  );
+}
diff --git a/src/pages/content-management/components/practice-steps/constants.ts b/src/pages/content-management/components/practice-steps/constants.ts
new file mode 100644
index 0000000..fdbc99b
--- /dev/null
+++ b/src/pages/content-management/components/practice-steps/constants.ts
@@ -0,0 +1,44 @@
+export const PERSONAS = [
+  {
+    id: "dawit",
+    name: "Dawit",
+    avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Dawit",
+  },
+  {
+    id: "mahlet",
+    name: "Mahlet",
+    avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Mahlet",
+  },
+  {
+    id: "amanuel",
+    name: "Amanuel",
+    avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Amanuel",
+  },
+  {
+    id: "bethel",
+    name: "Bethel",
+    avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Bethel",
+  },
+  {
+    id: "liya",
+    name: "Liya",
+    avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Liya",
+  },
+  {
+    id: "aseffa",
+    name: "Aseffa",
+    avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Aseffa",
+  },
+  {
+    id: "hana",
+    name: "Hana",
+    avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Hana",
+  },
+  {
+    id: "nahom",
+    name: "Nahom",
+    avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Nahom",
+  },
+];
+
+export const STEPS = ["Context", "Scenario", "Persona", "Questions", "Review"];
diff --git a/src/pages/content-management/components/video-steps/ReviewPublishStep.tsx b/src/pages/content-management/components/video-steps/ReviewPublishStep.tsx
new file mode 100644
index 0000000..e68be15
--- /dev/null
+++ b/src/pages/content-management/components/video-steps/ReviewPublishStep.tsx
@@ -0,0 +1,162 @@
+import { Rocket, Edit2, Layout } from "lucide-react";
+import { Button } from "../../../../components/ui/button";
+
+interface ReviewPublishStepProps {
+  formData: any;
+  prevStep: () => void;
+  setIsPublished: (val: boolean) => void;
+}
+
+export function ReviewPublishStep({
+  formData,
+  prevStep,
+  setIsPublished,
+}: ReviewPublishStepProps) {
+  return (
+    <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500 pb-20">
+      {/* 1. Video Preview Card */}
+      <div className="bg-white rounded-[16px] border border-grayScale-50 shadow-sm overflow-hidden">
+        <div className="px-8 py-5 border-b border-grayScale-50 flex items-center justify-between bg-white">
+          <h3 className="text-[17px] font-bold text-grayScale-900">
+            Video Preview
+          </h3>
+          <span className="bg-[#FAF5FF] text-brand-500 text-[10px] font-bold px-3 py-1.5 rounded-[6px] tracking-wider uppercase border border-brand-100/50">
+            PROCESSED
+          </span>
+        </div>
+        <div className="p-10 flex items-center justify-center bg-[#F8FAFC]/30">
+          <div className="relative w-full max-w-4xl aspect-video rounded-[12px] overflow-hidden bg-black shadow-2xl group border-4 border-white">
+            {/* Mock Player Control Overlays */}
+            <div className="absolute inset-0 flex items-center justify-center">
+              <div className="h-16 w-16 rounded-full bg-white/20 backdrop-blur-md flex items-center justify-center border border-white/30 cursor-pointer hover:scale-110 transition-transform">
+                <div className="w-0 h-0 border-t-[10px] border-t-transparent border-l-[18px] border-l-white border-b-[10px] border-b-transparent ml-1" />
+              </div>
+            </div>
+
+            {/* Bottom Controls Placeholder */}
+            <div className="absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-black/80 to-transparent">
+              <div className="h-1.5 w-full bg-white/20 rounded-full mb-4 relative overflow-hidden">
+                <div className="absolute left-0 top-0 bottom-0 w-1/3 bg-brand-500" />
+                <div className="absolute left-1/3 top-1/2 -translate-y-1/2 h-3 w-3 rounded-full bg-white shadow-lg" />
+              </div>
+              <div className="flex items-center justify-between text-white/90 text-sm font-medium">
+                <span>0:00 / 12:30</span>
+                <div className="flex items-center gap-4">
+                  <div className="h-4 w-6 border-2 border-white/40 rounded-[2px]" />
+                  <div className="h-4 w-4 border-2 border-white/40 rounded-full" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* 2. Content Details Card */}
+      <div className="bg-white rounded-[16px] border border-grayScale-50 shadow-sm overflow-hidden">
+        <div className="px-8 py-5 border-b border-grayScale-50 flex items-center justify-between bg-white">
+          <h3 className="text-[17px] font-bold text-grayScale-900">
+            Content Details
+          </h3>
+          <button
+            onClick={prevStep}
+            className="flex items-center gap-2 text-brand-500 font-bold text-sm hover:opacity-80 transition-opacity"
+          >
+            <Edit2 className="h-4 w-4" />
+            Edit
+          </button>
+        </div>
+
+        <div className="p-8 space-y-10">
+          {/* Metadata Grid */}
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
+            <div className="space-y-2">
+              <span className="text-[11px] font-bold text-grayScale-300 uppercase tracking-widest block">
+                TITLE
+              </span>
+              <p className="text-[15px] font-bold text-grayScale-900">
+                {formData.title || "Introduction to Past Tense"}
+              </p>
+            </div>
+
+            <div className="space-y-2">
+              <span className="text-[11px] font-bold text-grayScale-300 uppercase tracking-widest block">
+                ASSIGNED MODULE
+              </span>
+              <div className="flex items-center gap-2">
+                <Layout className="h-4 w-4 text-grayScale-400" />
+                <p className="text-[14px] font-bold text-grayScale-700">
+                  Grammar Basics - Level 1
+                </p>
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <span className="text-[11px] font-bold text-grayScale-300 uppercase tracking-widest block">
+                TEACHER NAME
+              </span>
+              <p className="text-[15px] font-bold text-grayScale-600">
+                Abebe Kebede
+              </p>
+            </div>
+
+            <div className="space-y-2">
+              <span className="text-[11px] font-bold text-grayScale-300 uppercase tracking-widest block">
+                FILE SIZE
+              </span>
+              <div className="flex items-baseline gap-1.5">
+                <span className="text-[15px] font-bold text-grayScale-900">
+                  245 MB
+                </span>
+                <span className="text-[13px] text-grayScale-400 font-medium">
+                  (1080p MP4)
+                </span>
+              </div>
+            </div>
+          </div>
+
+          {/* Description Section */}
+          <div className="space-y-3">
+            <span className="text-[11px] font-bold text-grayScale-300 uppercase tracking-widest block">
+              DESCRIPTION
+            </span>
+            <div
+              className="text-[14px] text-grayScale-600 font-medium leading-relaxed max-w-4xl"
+              dangerouslySetInnerHTML={{
+                __html:
+                  formData.description ||
+                  "This video covers the fundamental rules of forming the past tense in English, focusing on regular verbs ending in -ed. Suitable for beginners. Includes examples and common pitfalls.",
+              }}
+            />
+          </div>
+        </div>
+
+        {/* 3. Normal Footer (Inside Card) */}
+        <div className="px-8 py-6 border-t border-grayScale-50 flex items-center justify-between bg-white">
+          <Button
+            variant="outline"
+            onClick={prevStep}
+            className="h-12 px-8 rounded-xl border-grayScale-200 font-bold text-grayScale-600 hover:bg-grayScale-50 transition-all shadow-sm"
+          >
+            Back
+          </Button>
+
+          <div className="flex items-center gap-4">
+            <Button
+              variant="outline"
+              className="h-12 px-8 rounded-xl border-grayScale-100 font-bold text-grayScale-600 hover:bg-grayScale-50 transition-all shadow-sm"
+            >
+              Save as Draft
+            </Button>
+            <Button
+              onClick={() => setIsPublished(true)}
+              className="h-12 px-10 rounded-xl bg-brand-500 font-bold text-white hover:bg-brand-600 shadow-lg shadow-brand-500/20 transition-all flex items-center gap-2.5"
+            >
+              <Rocket className="h-4 w-4" />
+              Publish Now
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/content-management/components/video-steps/VideoDetailStep.tsx b/src/pages/content-management/components/video-steps/VideoDetailStep.tsx
new file mode 100644
index 0000000..c66b31d
--- /dev/null
+++ b/src/pages/content-management/components/video-steps/VideoDetailStep.tsx
@@ -0,0 +1,257 @@
+import { useRef, useEffect } from "react";
+import {
+  Video,
+  List,
+  Link as LinkIcon,
+  Lightbulb,
+  ChevronRight,
+  ImageIcon,
+} from "lucide-react";
+import { Button } from "../../../../components/ui/button";
+import { Input } from "../../../../components/ui/input";
+import { Select } from "../../../../components/ui/select";
+
+interface VideoDetailStepProps {
+  formData: any;
+  setFormData: (data: any) => void;
+  nextStep: () => void;
+}
+
+export function VideoDetailStep({
+  formData,
+  setFormData,
+  nextStep,
+}: VideoDetailStepProps) {
+  const editorRef = useRef<HTMLDivElement>(null);
+  const isInternalChange = useRef(false);
+
+  // Initialize editor content only once or when needed from outside
+  useEffect(() => {
+    if (editorRef.current && !isInternalChange.current) {
+      editorRef.current.innerHTML = formData.description || "";
+    }
+  }, []);
+
+  const handleCommand = (command: string, value?: string) => {
+    document.execCommand(command, false, value);
+    syncState();
+  };
+
+  const syncState = () => {
+    if (editorRef.current) {
+      isInternalChange.current = true;
+      setFormData({ ...formData, description: editorRef.current.innerHTML });
+      // Reset after a short delay to allow exterior updates if any (e.g., from step change)
+      setTimeout(() => {
+        isInternalChange.current = false;
+      }, 0);
+    }
+  };
+
+  const handleInput = () => {
+    syncState();
+  };
+
+  return (
+    <div className="animate-in fade-in slide-in-from-bottom-4 duration-700 max-w-[1200px] mx-auto pb-20">
+      {/* Single Unified Card for Everything */}
+      <div className="bg-white rounded-[24px] border border-grayScale-50 p-10 shadow-sm space-y-12">
+        {/* 1. Upload Video Section */}
+        <div className="space-y-6">
+          <h3 className="text-[20px] font-bold text-grayScale-900 ml-1">
+            Upload Video
+          </h3>
+          <div className="relative group cursor-pointer">
+            <div className="flex flex-col items-center justify-center rounded-[20px] border-2 border-dashed border-[#E2E8F0] bg-[#F8FAFC]/30 p-14 transition-all hover:border-brand-200 hover:bg-brand-50/5">
+              <div className="h-16 w-16 rounded-full bg-white shadow-sm flex items-center justify-center mb-6">
+                <div className="h-10 w-10 rounded-full bg-[#FAF5FF] flex items-center justify-center">
+                  <div className="h-6 w-6 relative flex items-center justify-center">
+                    <div className="absolute inset-0 bg-brand-500/10 rounded-full blur-sm" />
+                    <Video className="h-5 w-5 text-brand-500 relative" />
+                  </div>
+                </div>
+              </div>
+              <h4 className="text-[17px] font-bold text-grayScale-900 mb-2">
+                Drag and drop video files here
+              </h4>
+              <p className="text-grayScale-400 font-medium text-[13px] mb-8">
+                MP4, MOV, WebM. Max size 2GB.
+              </p>
+
+              <div className="flex items-center gap-4 w-full max-w-[200px] mb-8">
+                <div className="flex-1 h-[1px] bg-grayScale-100" />
+                <span className="text-[10px] font-bold text-grayScale-300 uppercase tracking-widest">
+                  OR
+                </span>
+                <div className="flex-1 h-[1px] bg-grayScale-100" />
+              </div>
+
+              <Button
+                variant="outline"
+                className="h-11 px-8 rounded-xl border-grayScale-200 bg-white font-bold text-brand-500 hover:border-brand-500 hover:bg-brand-50 transition-all shadow-sm text-sm"
+              >
+                Browse Files
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        {/* 2. Form & Side Panel Grid */}
+        <div className="flex flex-col lg:flex-row gap-12 items-start pt-4 border-t border-grayScale-50">
+          {/* Left Column: Title, Order, Description */}
+          <div className="flex-1 w-full space-y-10">
+            <div className="space-y-3">
+              <label className="text-[14px] font-bold text-grayScale-900 ml-1">
+                Video Title
+              </label>
+              <Input
+                placeholder="e.g., Introduction to Past Tense Verbs"
+                className="h-14 rounded-xl border-grayScale-100 bg-white px-6 text-[15px] text-grayScale-800 placeholder:text-grayScale-300 focus:border-brand-500 font-medium transition-all shadow-sm"
+                value={formData.title}
+                onChange={(e) =>
+                  setFormData({ ...formData, title: e.target.value })
+                }
+              />
+            </div>
+
+            <div className="space-y-3">
+              <label className="text-[14px] font-bold text-grayScale-900 ml-1">
+                Video Order
+              </label>
+              <Select
+                className="h-14 rounded-xl border-grayScale-100 bg-white px-6 text-[15px] text-grayScale-800 font-medium cursor-pointer focus:border-brand-500 shadow-sm"
+                value={formData.order}
+                onChange={(e) =>
+                  setFormData({ ...formData, order: (e.target as any).value })
+                }
+              >
+                <option value="1">1</option>
+                <option value="2">2</option>
+                <option value="3">3</option>
+              </Select>
+            </div>
+
+            <div className="space-y-3">
+              <label className="text-[14px] font-bold text-grayScale-900 ml-1">
+                Description
+              </label>
+              <div className="rounded-xl border border-grayScale-100 bg-white overflow-hidden flex flex-col min-h-[380px] shadow-sm focus-within:border-brand-200 transition-all">
+                {/* Toolbar */}
+                <div className="flex items-center gap-1 p-2 bg-[#F8FAFC]">
+                  <div className="flex items-center gap-1 w-fit bg-transparent px-2 py-1 rounded-lg">
+                    <button
+                      onClick={() => handleCommand("bold")}
+                      className="h-9 w-9 flex items-center justify-center rounded-lg hover:bg-white hover:shadow-sm text-grayScale-900 transition-all font-serif font-bold text-[17px] pb-0.5 active:bg-grayScale-50"
+                    >
+                      B
+                    </button>
+                    <button
+                      onClick={() => handleCommand("italic")}
+                      className="h-9 w-9 flex items-center justify-center rounded-lg hover:bg-white hover:shadow-sm text-grayScale-900 transition-all font-serif italic text-[17px] pr-0.5 active:bg-grayScale-50"
+                    >
+                      I
+                    </button>
+                    <button
+                      onClick={() => handleCommand("insertUnorderedList")}
+                      className="h-9 w-9 flex items-center justify-center rounded-lg hover:bg-white hover:shadow-sm text-grayScale-900 transition-all active:bg-grayScale-50"
+                    >
+                      <List className="h-5 w-5" />
+                    </button>
+                    <button
+                      onClick={() => {
+                        const url = prompt("Enter URL:");
+                        if (url) handleCommand("createLink", url);
+                      }}
+                      className="h-9 w-9 flex items-center justify-center rounded-lg hover:bg-white hover:shadow-sm text-grayScale-900 transition-all active:bg-grayScale-50"
+                    >
+                      <LinkIcon className="h-4 w-4" />
+                    </button>
+                  </div>
+                </div>
+
+                <div className="relative p-6 flex-1">
+                  {(!formData.description ||
+                    formData.description === "<br>" ||
+                    formData.description === "" ||
+                    formData.description === "<div><br></div>") && (
+                    <div className="absolute top-6 left-6 text-grayScale-300 font-medium text-[15px] pointer-events-none">
+                      Provide a brief summary of what the student will learn...
+                    </div>
+                  )}
+                  <div
+                    ref={editorRef}
+                    contentEditable
+                    onInput={handleInput}
+                    className="w-full h-full min-h-[300px] focus:outline-none text-[15px] text-grayScale-700 font-medium leading-relaxed prose prose-sm max-w-none"
+                    // Removed dangerouslySetInnerHTML to prevent cursor jumping
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Right Column: Thumbnail, Pro Tip */}
+          <div className="w-full lg:w-[320px] space-y-10">
+            {/* Thumbnail Section */}
+            <div className="space-y-4">
+              <div className="space-y-1 ml-1">
+                <h3 className="text-[14px] font-bold text-grayScale-900">
+                  Thumbnail
+                </h3>
+                <p className="text-[12px] text-grayScale-400 font-medium leading-relaxed">
+                  Upload your video thumbnail. 1280×720px recommended.
+                </p>
+              </div>
+              <div className="relative group cursor-pointer aspect-video">
+                <div className="h-full w-full flex flex-col items-center justify-center rounded-xl border-2 border-dashed border-[#E2E8F0] bg-[#F8FAFC]/50 p-6 transition-all group-hover:border-brand-200">
+                  <div className="h-10 w-10 rounded bg-white shadow-sm flex items-center justify-center mb-3">
+                    <ImageIcon className="h-5 w-5 text-grayScale-400" />
+                  </div>
+                  <p className="text-[13px] font-bold text-brand-500">
+                    Click to upload
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            {/* Pro Tip Section */}
+            <div className="bg-[#FAF5FF] rounded-xl border border-[#F3E8FF] p-6 space-y-3">
+              <div className="flex items-center gap-3">
+                <div className="h-8 w-8 flex-shrink-0 rounded-full bg-white flex items-center justify-center border border-[#F3E8FF] shadow-sm">
+                  <Lightbulb className="h-4 w-4 text-brand-50" fill="#A855F7" />
+                  <div className="absolute inset-0 flex items-center justify-center">
+                    <Lightbulb className="h-4 w-4 text-brand-500" />
+                  </div>
+                </div>
+                <h3 className="text-[14px] font-bold text-grayScale-900">
+                  Pro Tip
+                </h3>
+              </div>
+              <p className="text-[12px] text-grayScale-700 font-medium leading-relaxed">
+                Short, descriptive titles work best. Include keywords like
+                "Grammar" or "Vocabulary" to help students find your content.
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Footer (Inside Card Container) */}
+        <div className="pt-10 border-t border-grayScale-50 flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="h-2 w-2 rounded-full bg-brand-500 animate-pulse" />
+            <span className="text-[14px] font-bold text-grayScale-400">
+              Last saved: Just now
+            </span>
+          </div>
+          <Button
+            onClick={nextStep}
+            className="h-12 px-10 rounded-xl bg-brand-500 font-bold text-white hover:bg-brand-600 shadow-lg shadow-brand-500/20 transition-all flex items-center gap-2 text-sm group active:scale-95"
+          >
+            Continue
+            <ChevronRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

From d4d61bfed20ad5a3fc551edcb8b4570f7c29896c Mon Sep 17 00:00:00 2001
From: elnatansamuel25 <elnatansamuel25@gmail.com>
Date: Fri, 24 Apr 2026 15:20:51 +0300
Subject: [PATCH 3/3] course

---
 src/app/AppRoutes.tsx                         |   35 +
 src/components/ui/dialog.tsx                  |   77 +-
 src/components/ui/input.tsx                   |    2 +-
 src/components/ui/select.tsx                  |   15 +-
 src/components/ui/stepper.tsx                 |   11 +-
 .../content-management/AddNewPracticePage.tsx | 1969 ++++++++++-------
 .../content-management/AddPracticeFlow.tsx    |   51 +-
 src/pages/content-management/AddVideoFlow.tsx |   37 +-
 .../content-management/AttachPracticeFlow.tsx |  193 ++
 .../AttachProgramPracticeFlow.tsx             |  157 ++
 .../content-management/CourseDetailPage.tsx   |   54 +-
 .../CourseManagementPage.tsx                  |  264 +++
 .../CourseModuleDetailPage.tsx                |  248 +++
 .../content-management/LearnEnglishPage.tsx   |   42 +-
 .../content-management/ModuleDetailPage.tsx   |   36 +-
 .../content-management/NewContentPage.tsx     |   14 +-
 .../content-management/ProgramCoursesPage.tsx |   21 +-
 .../content-management/ProgramDetailPage.tsx  |  273 +++
 .../ProgramTypeSelectionPage.tsx              |   82 +
 .../content-management/UnitManagementPage.tsx |  254 +++
 .../components/AddModuleModal.tsx             |    4 -
 .../components/VideoCard.tsx                  |    6 +-
 .../AttachPracticeReviewStep.tsx              |  232 ++
 .../practice-steps/AttachPracticeStep1.tsx    |  168 ++
 .../components/practice-steps/ContextStep.tsx |   82 +-
 .../components/practice-steps/PersonaStep.tsx |   79 +-
 .../ProgramAttachReviewStep.tsx               |  107 +
 .../practice-steps/ProgramAttachStep1.tsx     |  141 ++
 .../practice-steps/QuestionsStep.tsx          |   32 +-
 .../components/practice-steps/ReviewStep.tsx  |  143 +-
 .../practice-steps/ScenarioStep.tsx           |   41 +-
 .../components/practice-steps/VoicePrompt.tsx |  180 +-
 .../video-steps/ReviewPublishStep.tsx         |   91 +-
 .../video-steps/VideoDetailStep.tsx           |   85 +-
 34 files changed, 3979 insertions(+), 1247 deletions(-)
 create mode 100644 src/pages/content-management/AttachPracticeFlow.tsx
 create mode 100644 src/pages/content-management/AttachProgramPracticeFlow.tsx
 create mode 100644 src/pages/content-management/CourseManagementPage.tsx
 create mode 100644 src/pages/content-management/CourseModuleDetailPage.tsx
 create mode 100644 src/pages/content-management/ProgramDetailPage.tsx
 create mode 100644 src/pages/content-management/ProgramTypeSelectionPage.tsx
 create mode 100644 src/pages/content-management/UnitManagementPage.tsx
 create mode 100644 src/pages/content-management/components/practice-steps/AttachPracticeReviewStep.tsx
 create mode 100644 src/pages/content-management/components/practice-steps/AttachPracticeStep1.tsx
 create mode 100644 src/pages/content-management/components/practice-steps/ProgramAttachReviewStep.tsx
 create mode 100644 src/pages/content-management/components/practice-steps/ProgramAttachStep1.tsx

diff --git a/src/app/AppRoutes.tsx b/src/app/AppRoutes.tsx
index 7502414..b93e3ba 100644
--- a/src/app/AppRoutes.tsx
+++ b/src/app/AppRoutes.tsx
@@ -22,6 +22,13 @@ import { CourseDetailPage } from "../pages/content-management/CourseDetailPage";
 import { ModuleDetailPage } from "../pages/content-management/ModuleDetailPage";
 import { AddVideoFlow } from "../pages/content-management/AddVideoFlow";
 import { AddPracticeFlow } from "../pages/content-management/AddPracticeFlow";
+import { CourseModuleDetailPage } from "../pages/content-management/CourseModuleDetailPage";
+import { AttachPracticeFlow } from "../pages/content-management/AttachPracticeFlow";
+import { AttachProgramPracticeFlow } from "../pages/content-management/AttachProgramPracticeFlow";
+import { ProgramTypeSelectionPage } from "../pages/content-management/ProgramTypeSelectionPage";
+import { ProgramDetailPage } from "../pages/content-management/ProgramDetailPage";
+import { CourseManagementPage } from "../pages/content-management/CourseManagementPage";
+import { UnitManagementPage } from "../pages/content-management/UnitManagementPage";
 import { NotFoundPage } from "../pages/NotFoundPage";
 import { NotificationsPage } from "../pages/notifications/NotificationsPage";
 import { CreateNotificationPage } from "../pages/notifications/CreateNotificationPage";
@@ -154,6 +161,34 @@ export function AppRoutes() {
         </Route>
 
         <Route path="/new-content" element={<NewContentPage />} />
+        <Route
+          path="/new-content/courses"
+          element={<ProgramTypeSelectionPage />}
+        />
+        <Route
+          path="/new-content/courses/:programType"
+          element={<ProgramDetailPage />}
+        />
+        <Route
+          path="/new-content/courses/:programType/attach-practice"
+          element={<AttachProgramPracticeFlow />}
+        />
+        <Route
+          path="/new-content/courses/:programType/:courseId/unit/:unitId/module/:moduleId/attach-practice"
+          element={<AttachPracticeFlow />}
+        />
+        <Route
+          path="/new-content/courses/:programType/:courseId"
+          element={<CourseManagementPage />}
+        />
+        <Route
+          path="/new-content/courses/:programType/:courseId/:unitId"
+          element={<UnitManagementPage />}
+        />
+        <Route
+          path="/new-content/courses/:programType/:courseId/:unitId/:moduleId"
+          element={<CourseModuleDetailPage />}
+        />
         <Route
           path="/new-content/learn-english"
           element={<LearnEnglishPage />}
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index 5095b8b..37ed927 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -1,12 +1,12 @@
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { X } from "lucide-react"
-import { cn } from "../../lib/utils"
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import { cn } from "../../lib/utils";
 
-const Dialog = DialogPrimitive.Root
-const DialogTrigger = DialogPrimitive.Trigger
-const DialogPortal = DialogPrimitive.Portal
-const DialogClose = DialogPrimitive.Close
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogPortal = DialogPrimitive.Portal;
+const DialogClose = DialogPrimitive.Close;
 
 const DialogOverlay = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Overlay>,
@@ -20,8 +20,8 @@ const DialogOverlay = React.forwardRef<
     )}
     {...props}
   />
-))
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
@@ -38,27 +38,42 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <X className="h-4 w-4" />
+      <DialogPrimitive.Close className="absolute right-6 top-10 rounded-sm opacity-60 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-6 w-6" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>
   </DialogPortal>
-))
-DialogContent.displayName = DialogPrimitive.Content.displayName
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
 
-const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
-)
-DialogHeader.displayName = "DialogHeader"
-
-const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className,
+    )}
     {...props}
   />
-)
-DialogFooter.displayName = "DialogFooter"
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className,
+    )}
+    {...props}
+  />
+);
+DialogFooter.displayName = "DialogFooter";
 
 const DialogTitle = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Title>,
@@ -66,11 +81,14 @@ const DialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Title
     ref={ref}
-    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className,
+    )}
     {...props}
   />
-))
-DialogTitle.displayName = DialogPrimitive.Title.displayName
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
 
 const DialogDescription = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Description>,
@@ -81,8 +99,8 @@ const DialogDescription = React.forwardRef<
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-))
-DialogDescription.displayName = DialogPrimitive.Description.displayName
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 export {
   Dialog,
@@ -95,5 +113,4 @@ export {
   DialogFooter,
   DialogTitle,
   DialogDescription,
-}
-
+};
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index 83cec90..ba422f1 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -9,7 +9,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-lg border bg-white px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-grayScale-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-10 w-full rounded-[6px] border bg-white px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-grayScale-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
           className,
         )}
         ref={ref}
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
index 278e514..7af6a45 100644
--- a/src/components/ui/select.tsx
+++ b/src/components/ui/select.tsx
@@ -1,6 +1,6 @@
-import * as React from "react"
-import { ChevronDown } from "lucide-react"
-import { cn } from "../../lib/utils"
+import * as React from "react";
+import { ChevronDown } from "lucide-react";
+import { cn } from "../../lib/utils";
 
 export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {}
 
@@ -18,10 +18,9 @@ export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
         >
           {children}
         </select>
-        <ChevronDown className="pointer-events-none absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 text-grayScale-400" />
+        <ChevronDown className="pointer-events-none absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 text-grayScale-600" />
       </div>
-    )
+    );
   },
-)
-Select.displayName = "Select"
-
+);
+Select.displayName = "Select";
diff --git a/src/components/ui/stepper.tsx b/src/components/ui/stepper.tsx
index a0c87a2..0fe69de 100644
--- a/src/components/ui/stepper.tsx
+++ b/src/components/ui/stepper.tsx
@@ -18,15 +18,18 @@ export function Stepper({ steps, currentStep, className }: StepperProps) {
             key={step}
             className="flex-1 relative flex flex-col items-center group"
           >
-            {/* Connector Line (Behind) */}
+            {/* Connector Line - floats between circles with gap on both sides */}
             {index < steps.length - 1 && (
-              <div className="absolute left-1/2 w-[100%] mx-auto top-5 h-[2px] bg-grayScale-200 z-0" />
+              <div
+                className="absolute top-4 h-[1.5px] bg-grayScale-200 z-0"
+                style={{ left: "calc(50% + 24px)", right: "calc(-50% + 24px)" }}
+              />
             )}
 
             {/* Circle */}
             <div
               className={cn(
-                "relative z-10 grid h-10 w-10 place-items-center rounded-full border-2 text-sm font-bold transition-all duration-300 mb-3",
+                "relative z-10 grid h-8 w-8 place-items-center rounded-full border-2 text-sm font-bold transition-all duration-300 mb-3",
                 isCurrent
                   ? "border-brand-500 bg-brand-500 text-white shadow-md scale-110"
                   : "border-grayScale-100 bg-white text-grayScale-400 font-medium",
@@ -38,7 +41,7 @@ export function Stepper({ steps, currentStep, className }: StepperProps) {
             {/* Label */}
             <span
               className={cn(
-                "relative z-10 text-[13px] font-bold transition-colors duration-300",
+                "relative z-10 text-[12px] font-bold transition-colors duration-300",
                 isCurrent ? "text-brand-500" : "text-grayScale-400 font-medium",
               )}
             >
diff --git a/src/pages/content-management/AddNewPracticePage.tsx b/src/pages/content-management/AddNewPracticePage.tsx
index b6f01fa..ad370db 100644
--- a/src/pages/content-management/AddNewPracticePage.tsx
+++ b/src/pages/content-management/AddNewPracticePage.tsx
@@ -1,99 +1,156 @@
-import { useMemo, useRef, useState, type ChangeEvent } from "react"
-import { Link, useLocation, useParams, useNavigate } from "react-router-dom"
-import { ArrowLeft, ArrowRight, ChevronDown, Grid3X3, Check, Plus, Trash2, GripVertical, Edit, Rocket, Loader2, Upload } from "lucide-react"
-import { toast } from "sonner"
-import { Card } from "../../components/ui/card"
-import { Button } from "../../components/ui/button"
-import { Input } from "../../components/ui/input"
-import { PracticeQuestionEditorFields } from "../../components/content-management/PracticeQuestionEditorFields"
-import { createQuestionSet, createQuestion, addQuestionToSet } from "../../api/courses.api"
-import { uploadVideoFile } from "../../api/files.api"
-import { Select } from "../../components/ui/select"
-import type { QuestionOption } from "../../types/course.types"
+import { useMemo, useRef, useState, type ChangeEvent } from "react";
+import { Link, useLocation, useParams, useNavigate } from "react-router-dom";
+import {
+  ArrowLeft,
+  ArrowRight,
+  ChevronDown,
+  Grid3X3,
+  Check,
+  Plus,
+  Trash2,
+  GripVertical,
+  Edit,
+  Rocket,
+  Loader2,
+  Upload,
+} from "lucide-react";
+import { toast } from "sonner";
+import { Card } from "../../components/ui/card";
+import { Button } from "../../components/ui/button";
+import { Input } from "../../components/ui/input";
+import { PracticeQuestionEditorFields } from "../../components/content-management/PracticeQuestionEditorFields";
+import {
+  createQuestionSet,
+  createQuestion,
+  addQuestionToSet,
+} from "../../api/courses.api";
+import { uploadVideoFile } from "../../api/files.api";
+import { Select } from "../../components/ui/select";
+import type { QuestionOption } from "../../types/course.types";
 
-type Step = 1 | 2 | 3 | 4 | 5
-type ResultStatus = "success" | "error"
-type QuestionType = "MCQ" | "TRUE_FALSE" | "SHORT" | "AUDIO"
-type DifficultyLevel = "EASY" | "MEDIUM" | "HARD"
+type Step = 1 | 2 | 3 | 4 | 5;
+type ResultStatus = "success" | "error";
+type QuestionType = "MCQ" | "TRUE_FALSE" | "SHORT" | "AUDIO";
+type DifficultyLevel = "EASY" | "MEDIUM" | "HARD";
 
 interface Persona {
-  id: string
-  name: string
-  avatar: string
+  id: string;
+  name: string;
+  avatar: string;
 }
 
 interface MCQOption {
-  text: string
-  isCorrect: boolean
+  text: string;
+  isCorrect: boolean;
 }
 
 interface Question {
-  id: string
-  questionText: string
-  questionType: QuestionType
-  difficultyLevel: DifficultyLevel
-  points: number
-  tips: string
-  explanation: string
-  options: MCQOption[]
-  voicePrompt: string
-  sampleAnswerVoicePrompt: string
-  audioCorrectAnswerText: string
-  shortAnswers: string[]
-  imageUrl: string
+  id: string;
+  questionText: string;
+  questionType: QuestionType;
+  difficultyLevel: DifficultyLevel;
+  points: number;
+  tips: string;
+  explanation: string;
+  options: MCQOption[];
+  voicePrompt: string;
+  sampleAnswerVoicePrompt: string;
+  audioCorrectAnswerText: string;
+  shortAnswers: string[];
+  imageUrl: string;
 }
 
 const PERSONAS: Persona[] = [
-  { id: "1", name: "Dawit", avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Dawit" },
-  { id: "2", name: "Mahlet", avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Mahlet" },
-  { id: "3", name: "Amanuel", avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Amanuel" },
-  { id: "4", name: "Bethel", avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Bethel" },
-  { id: "5", name: "Liya", avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Liya" },
-  { id: "6", name: "Aseffa", avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Aseffa" },
-  { id: "7", name: "Hana", avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Hana" },
-  { id: "8", name: "Nahom", avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Nahom" },
-]
+  {
+    id: "1",
+    name: "Dawit",
+    avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Dawit",
+  },
+  {
+    id: "2",
+    name: "Mahlet",
+    avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Mahlet",
+  },
+  {
+    id: "3",
+    name: "Amanuel",
+    avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Amanuel",
+  },
+  {
+    id: "4",
+    name: "Bethel",
+    avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Bethel",
+  },
+  {
+    id: "5",
+    name: "Liya",
+    avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Liya",
+  },
+  {
+    id: "6",
+    name: "Aseffa",
+    avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Aseffa",
+  },
+  {
+    id: "7",
+    name: "Hana",
+    avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Hana",
+  },
+  {
+    id: "8",
+    name: "Nahom",
+    avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Nahom",
+  },
+];
 
 const STEPS = [
   { number: 1, label: "Context" },
   { number: 2, label: "Persona" },
   { number: 3, label: "Questions" },
   { number: 4, label: "Review" },
-]
+];
 
 /** Prefer direct storage URL; for Vimeo pipeline match SubCourseContentPage player URL shape. */
-function introVideoUrlFromUploadResponse(data: { url?: string; embed_url?: string } | undefined): string | null {
-  if (!data) return null
-  const pageUrl = data.url?.trim()
-  const embedUrl = data.embed_url?.trim()
+function introVideoUrlFromUploadResponse(
+  data: { url?: string; embed_url?: string } | undefined,
+): string | null {
+  if (!data) return null;
+  const pageUrl = data.url?.trim();
+  const embedUrl = data.embed_url?.trim();
   if (embedUrl) {
-    const hashFromUrl = pageUrl ? pageUrl.split("/").filter(Boolean).at(-1) : undefined
-    return hashFromUrl ? `${embedUrl}?h=${hashFromUrl}` : embedUrl
+    const hashFromUrl = pageUrl
+      ? pageUrl.split("/").filter(Boolean).at(-1)
+      : undefined;
+    return hashFromUrl ? `${embedUrl}?h=${hashFromUrl}` : embedUrl;
   }
-  return pageUrl || null
+  return pageUrl || null;
 }
 
 function toVimeoEmbedUrl(rawUrl: string): string | null {
   try {
-    const parsed = new URL(rawUrl.trim())
-    const host = parsed.hostname.toLowerCase()
-    if (!host.includes("vimeo.com")) return null
-    if (host.includes("player.vimeo.com") && parsed.pathname.includes("/video/")) return parsed.toString()
-    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")
+    const parsed = new URL(rawUrl.trim());
+    const host = parsed.hostname.toLowerCase();
+    if (!host.includes("vimeo.com")) return null;
+    if (
+      host.includes("player.vimeo.com") &&
+      parsed.pathname.includes("/video/")
+    )
+      return parsed.toString();
+    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");
     return hash
       ? `https://player.vimeo.com/video/${videoId}?h=${encodeURIComponent(hash)}`
-      : `https://player.vimeo.com/video/${videoId}`
+      : `https://player.vimeo.com/video/${videoId}`;
   } catch {
-    return null
+    return null;
   }
 }
 
 function isDirectVideoFile(url: string): boolean {
-  const clean = url.split("?")[0].toLowerCase()
-  return /\.(mp4|webm|ogg|mov|m4v)$/.test(clean)
+  const clean = url.split("?")[0].toLowerCase();
+  return /\.(mp4|webm|ogg|mov|m4v)$/.test(clean);
 }
 
 function escapeHtml(raw: string): string {
@@ -102,45 +159,56 @@ function escapeHtml(raw: string): string {
     .replaceAll("<", "&lt;")
     .replaceAll(">", "&gt;")
     .replaceAll('"', "&quot;")
-    .replaceAll("'", "&#39;")
+    .replaceAll("'", "&#39;");
 }
 
 function sanitizeAdminRichTextHtml(input: string): string {
-  if (!input.trim()) return ""
+  if (!input.trim()) return "";
   try {
-    const parser = new DOMParser()
-    const doc = parser.parseFromString(input, "text/html")
-    const blockedTags = new Set(["script", "style", "iframe", "object", "embed", "link", "meta"])
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(input, "text/html");
+    const blockedTags = new Set([
+      "script",
+      "style",
+      "iframe",
+      "object",
+      "embed",
+      "link",
+      "meta",
+    ]);
     doc.body.querySelectorAll("*").forEach((el) => {
-      const tagName = el.tagName.toLowerCase()
+      const tagName = el.tagName.toLowerCase();
       if (blockedTags.has(tagName)) {
-        el.remove()
-        return
+        el.remove();
+        return;
       }
-      const attrs = [...el.attributes]
+      const attrs = [...el.attributes];
       attrs.forEach((attr) => {
-        const name = attr.name.toLowerCase()
-        const value = attr.value.trim().toLowerCase()
+        const name = attr.name.toLowerCase();
+        const value = attr.value.trim().toLowerCase();
         if (name.startsWith("on")) {
-          el.removeAttribute(attr.name)
-          return
+          el.removeAttribute(attr.name);
+          return;
         }
-        if ((name === "href" || name === "src") && value.startsWith("javascript:")) {
-          el.removeAttribute(attr.name)
+        if (
+          (name === "href" || name === "src") &&
+          value.startsWith("javascript:")
+        ) {
+          el.removeAttribute(attr.name);
         }
-      })
-    })
-    return doc.body.innerHTML
+      });
+    });
+    return doc.body.innerHTML;
   } catch {
-    return escapeHtml(input).replace(/\r?\n/g, "<br />")
+    return escapeHtml(input).replace(/\r?\n/g, "<br />");
   }
 }
 
 function formatDescriptionForPreview(raw: string): string {
-  if (!raw.trim()) return ""
-  const hasHtml = /<\/?[a-z][\s\S]*>/i.test(raw)
-  if (hasHtml) return sanitizeAdminRichTextHtml(raw)
-  return escapeHtml(raw).replace(/\r?\n/g, "<br />")
+  if (!raw.trim()) return "";
+  const hasHtml = /<\/?[a-z][\s\S]*>/i.test(raw);
+  if (hasHtml) return sanitizeAdminRichTextHtml(raw);
+  return escapeHtml(raw).replace(/\r?\n/g, "<br />");
 }
 
 function createEmptyQuestion(id: string): Question {
@@ -163,178 +231,197 @@ function createEmptyQuestion(id: string): Question {
     audioCorrectAnswerText: "",
     shortAnswers: [],
     imageUrl: "",
-  }
+  };
 }
 
 export function AddNewPracticePage() {
-  const { categoryId, courseId, subModuleId } = useParams()
-  const location = useLocation()
-  const navigate = useNavigate()
-  const searchParams = new URLSearchParams(location.search)
-  const source = searchParams.get("source")
+  const { categoryId, courseId, subModuleId } = useParams();
+  const location = useLocation();
+  const navigate = useNavigate();
+  const searchParams = new URLSearchParams(location.search);
+  const source = searchParams.get("source");
   const backTo = useMemo(() => {
-    if (location.pathname.includes("/content/human-language/") && location.pathname.includes("/sub-module/")) {
-      return `/content/human-language/${categoryId}/${courseId}/sub-module/${subModuleId}`
+    if (
+      location.pathname.includes("/content/human-language/") &&
+      location.pathname.includes("/sub-module/")
+    ) {
+      return `/content/human-language/${categoryId}/${courseId}/sub-module/${subModuleId}`;
     }
-    if (source === "human-language") return "/content/human-language"
-    return `/content/category/${categoryId}/courses/${courseId}/sub-modules/${subModuleId}`
-  }, [location.pathname, source, categoryId, courseId, subModuleId])
-  
-  const [currentStep, setCurrentStep] = useState<Step>(1)
-  const [saving, setSaving] = useState(false)
+    if (source === "human-language") return "/content/human-language";
+    return `/content/category/${categoryId}/courses/${courseId}/sub-modules/${subModuleId}`;
+  }, [location.pathname, source, categoryId, courseId, subModuleId]);
+
+  const [currentStep, setCurrentStep] = useState<Step>(1);
+  const [saving, setSaving] = useState(false);
 
   // Step 1: Context
-  const [selectedProgram] = useState("Intermediate")
-  const [selectedCourse] = useState("B2")
-  const [practiceTitle, setPracticeTitle] = useState("")
-  const [practiceDescription, setPracticeDescription] = useState("")
-  const [introVideoUrl, setIntroVideoUrl] = useState("")
-  const [uploadingIntroVideo, setUploadingIntroVideo] = useState(false)
-  const [importingIntroVideoUrl, setImportingIntroVideoUrl] = useState(false)
-  const introVideoFileInputRef = useRef<HTMLInputElement>(null)
-  const [shuffleQuestions, setShuffleQuestions] = useState(false)
-  const [passingScore, setPassingScore] = useState(50)
-  const [timeLimitMinutes, setTimeLimitMinutes] = useState(60)
-  const [saveError, setSaveError] = useState<string | null>(null)
-  const [resultStatus, setResultStatus] = useState<ResultStatus | null>(null)
-  const [resultMessage, setResultMessage] = useState("")
+  const [selectedProgram] = useState("Intermediate");
+  const [selectedCourse] = useState("B2");
+  const [practiceTitle, setPracticeTitle] = useState("");
+  const [practiceDescription, setPracticeDescription] = useState("");
+  const [introVideoUrl, setIntroVideoUrl] = useState("");
+  const [uploadingIntroVideo, setUploadingIntroVideo] = useState(false);
+  const [importingIntroVideoUrl, setImportingIntroVideoUrl] = useState(false);
+  const introVideoFileInputRef = useRef<HTMLInputElement>(null);
+  const [shuffleQuestions, setShuffleQuestions] = useState(false);
+  const [passingScore, setPassingScore] = useState(50);
+  const [timeLimitMinutes, setTimeLimitMinutes] = useState(60);
+  const [saveError, setSaveError] = useState<string | null>(null);
+  const [resultStatus, setResultStatus] = useState<ResultStatus | null>(null);
+  const [resultMessage, setResultMessage] = useState("");
 
   // Step 2: Persona
-  const [selectedPersona, setSelectedPersona] = useState<string | null>(null)
+  const [selectedPersona, setSelectedPersona] = useState<string | null>(null);
 
   // Step 3: Questions
   const [questions, setQuestions] = useState<Question[]>([
     createEmptyQuestion("1"),
-  ])
+  ]);
 
   const handleNext = () => {
     if (currentStep < 4) {
-      setCurrentStep((currentStep + 1) as Step)
+      setCurrentStep((currentStep + 1) as Step);
     }
-  }
+  };
 
   const handleBack = () => {
     if (currentStep > 1) {
-      setCurrentStep((currentStep - 1) as Step)
+      setCurrentStep((currentStep - 1) as Step);
     }
-  }
+  };
 
   const handleCancel = () => {
-    navigate(backTo)
-  }
+    navigate(backTo);
+  };
 
-  const handleIntroVideoFileChange = async (event: ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0]
-    event.target.value = ""
-    if (!file) return
+  const handleIntroVideoFileChange = async (
+    event: ChangeEvent<HTMLInputElement>,
+  ) => {
+    const file = event.target.files?.[0];
+    event.target.value = "";
+    if (!file) return;
 
-    setUploadingIntroVideo(true)
+    setUploadingIntroVideo(true);
     try {
       const uploadRes = await uploadVideoFile(file, {
-        title: practiceTitle.trim() || file.name.replace(/\.[^.]+$/, "") || "Practice intro",
+        title:
+          practiceTitle.trim() ||
+          file.name.replace(/\.[^.]+$/, "") ||
+          "Practice intro",
         description: practiceDescription.trim() || undefined,
-      })
-      const finalUrl = introVideoUrlFromUploadResponse(uploadRes.data?.data)
-      if (!finalUrl) throw new Error("Missing uploaded video url")
-      setIntroVideoUrl(finalUrl)
-      toast.success("Intro video uploaded", { description: "The URL has been filled in for you." })
+      });
+      const finalUrl = introVideoUrlFromUploadResponse(uploadRes.data?.data);
+      if (!finalUrl) throw new Error("Missing uploaded video url");
+      setIntroVideoUrl(finalUrl);
+      toast.success("Intro video uploaded", {
+        description: "The URL has been filled in for you.",
+      });
     } catch (error) {
-      console.error("Failed to upload intro video:", error)
-      toast.error("Failed to upload intro video")
+      console.error("Failed to upload intro video:", error);
+      toast.error("Failed to upload intro video");
     } finally {
-      setUploadingIntroVideo(false)
+      setUploadingIntroVideo(false);
     }
-  }
+  };
 
   const handleImportIntroVideoFromUrl = async () => {
-    const source = introVideoUrl.trim()
-    if (!source || !/^https?:\/\//i.test(source)) return
-    const vimeoEmbed = toVimeoEmbedUrl(source)
+    const source = introVideoUrl.trim();
+    if (!source || !/^https?:\/\//i.test(source)) return;
+    const vimeoEmbed = toVimeoEmbedUrl(source);
     // Vimeo page URLs can be protected by anti-bot checks when server-side fetched.
     // For those links, prefer local normalization to player URL instead of failing import.
     if (vimeoEmbed) {
-      setIntroVideoUrl(vimeoEmbed)
-      return
+      setIntroVideoUrl(vimeoEmbed);
+      return;
     }
 
-    setImportingIntroVideoUrl(true)
+    setImportingIntroVideoUrl(true);
     try {
       const uploadRes = await uploadVideoFile(source, {
         title: practiceTitle.trim() || "Practice intro",
         description: practiceDescription.trim() || undefined,
-      })
-      const finalUrl = introVideoUrlFromUploadResponse(uploadRes.data?.data)
-      if (!finalUrl) throw new Error("Missing uploaded video url")
-      setIntroVideoUrl(finalUrl)
-      toast.success("Intro video URL imported", { description: "Processed via /files/upload." })
+      });
+      const finalUrl = introVideoUrlFromUploadResponse(uploadRes.data?.data);
+      if (!finalUrl) throw new Error("Missing uploaded video url");
+      setIntroVideoUrl(finalUrl);
+      toast.success("Intro video URL imported", {
+        description: "Processed via /files/upload.",
+      });
     } catch (error) {
-      console.error("Failed to import intro video URL:", error)
-      toast.error("Failed to import intro video URL")
+      console.error("Failed to import intro video URL:", error);
+      toast.error("Failed to import intro video URL");
     } finally {
-      setImportingIntroVideoUrl(false)
+      setImportingIntroVideoUrl(false);
     }
-  }
+  };
 
   const introVideoPreview = useMemo(() => {
-    const raw = introVideoUrl.trim()
-    if (!raw) return null
-    const vimeoEmbedUrl = toVimeoEmbedUrl(raw)
-    if (vimeoEmbedUrl) return { kind: "vimeo" as const, url: vimeoEmbedUrl }
-    if (isDirectVideoFile(raw)) return { kind: "video" as const, url: raw }
-    return null
-  }, [introVideoUrl])
+    const raw = introVideoUrl.trim();
+    if (!raw) return null;
+    const vimeoEmbedUrl = toVimeoEmbedUrl(raw);
+    if (vimeoEmbedUrl) return { kind: "vimeo" as const, url: vimeoEmbedUrl };
+    if (isDirectVideoFile(raw)) return { kind: "video" as const, url: raw };
+    return null;
+  }, [introVideoUrl]);
 
   const descriptionPreviewHtml = useMemo(
     () => formatDescriptionForPreview(practiceDescription),
     [practiceDescription],
-  )
+  );
 
   const addQuestion = () => {
-    setQuestions([...questions, createEmptyQuestion(String(Date.now()))])
-  }
+    setQuestions([...questions, createEmptyQuestion(String(Date.now()))]);
+  };
 
   const removeQuestion = (id: string) => {
     if (questions.length > 1) {
-      setQuestions(questions.filter(q => q.id !== id))
+      setQuestions(questions.filter((q) => q.id !== id));
     }
-  }
+  };
 
   const updateQuestion = (id: string, updates: Partial<Question>) => {
-    setQuestions(questions.map(q => q.id === id ? { ...q, ...updates } : q))
-  }
+    setQuestions(
+      questions.map((q) => (q.id === id ? { ...q, ...updates } : q)),
+    );
+  };
 
   const saveQuestionSet = async (status: "DRAFT" | "PUBLISHED") => {
-    setSaving(true)
-    setSaveError(null)
+    setSaving(true);
+    setSaveError(null);
     try {
-      const persona = PERSONAS.find(p => p.id === selectedPersona)
+      const persona = PERSONAS.find((p) => p.id === selectedPersona);
       const setRes = await createQuestionSet({
         title: practiceTitle || "Untitled Practice",
         set_type: "PRACTICE",
         owner_type: "SUB_MODULE",
         owner_id: Number(subModuleId),
-        ...(practiceDescription.trim() ? { description: practiceDescription.trim() } : {}),
+        ...(practiceDescription.trim()
+          ? { description: practiceDescription.trim() }
+          : {}),
         ...(persona?.name ? { persona: persona.name } : {}),
         shuffle_questions: shuffleQuestions,
         status,
         passing_score: passingScore,
         time_limit_minutes: timeLimitMinutes,
-        ...(introVideoUrl.trim() ? { intro_video_url: introVideoUrl.trim() } : {}),
-      })
+        ...(introVideoUrl.trim()
+          ? { intro_video_url: introVideoUrl.trim() }
+          : {}),
+      });
 
-      const questionSetId = setRes.data?.data?.id
+      const questionSetId = setRes.data?.data?.id;
       if (questionSetId) {
         for (let i = 0; i < questions.length; i++) {
-          const q = questions[i]
-          if (!q.questionText.trim()) continue
+          const q = questions[i];
+          if (!q.questionText.trim()) continue;
 
-          const options: QuestionOption[] = q.questionType === "MCQ"
-            ? q.options.map((opt, idx) => ({
-                option_order: idx + 1,
-                option_text: opt.text,
-                is_correct: opt.isCorrect,
-              }))
-            : []
+          const options: QuestionOption[] =
+            q.questionType === "MCQ"
+              ? q.options.map((opt, idx) => ({
+                  option_order: idx + 1,
+                  option_text: opt.text,
+                  is_correct: opt.isCorrect,
+                }))
+              : [];
 
           const qRes = await createQuestion({
             question_text: q.questionText,
@@ -349,734 +436,926 @@ export function AddNewPracticePage() {
             sample_answer_voice_prompt: q.sampleAnswerVoicePrompt || undefined,
             audio_correct_answer_text: q.audioCorrectAnswerText || undefined,
             image_url: q.imageUrl.trim() || undefined,
-            short_answers: q.shortAnswers.length > 0 ? q.shortAnswers : undefined,
-          })
+            short_answers:
+              q.shortAnswers.length > 0 ? q.shortAnswers : undefined,
+          });
 
-          const questionId = qRes.data?.data?.id
+          const questionId = qRes.data?.data?.id;
           if (questionId) {
             await addQuestionToSet(questionSetId, {
               display_order: i + 1,
               question_id: questionId,
-            })
+            });
           }
         }
       }
 
-      setResultStatus("success")
+      setResultStatus("success");
       setResultMessage(
         status === "PUBLISHED"
           ? "Your speaking practice is now active."
-          : "Your practice has been saved as a draft."
-      )
-      setCurrentStep(5)
+          : "Your practice has been saved as a draft.",
+      );
+      setCurrentStep(5);
     } catch (err: unknown) {
-      console.error("Failed to save practice:", err)
-      const errorMsg = err instanceof Error ? err.message : "An unexpected error occurred."
-      setResultStatus("error")
-      setResultMessage(errorMsg)
-      setCurrentStep(5)
+      console.error("Failed to save practice:", err);
+      const errorMsg =
+        err instanceof Error ? err.message : "An unexpected error occurred.";
+      setResultStatus("error");
+      setResultMessage(errorMsg);
+      setCurrentStep(5);
     } finally {
-      setSaving(false)
+      setSaving(false);
     }
-  }
+  };
 
-  const handleSaveAsDraft = () => saveQuestionSet("DRAFT")
-  const handlePublish = () => saveQuestionSet("PUBLISHED")
+  const handleSaveAsDraft = () => saveQuestionSet("DRAFT");
+  const handlePublish = () => saveQuestionSet("PUBLISHED");
 
   const getNextButtonLabel = () => {
     switch (currentStep) {
-      case 1: return "Next: Persona"
-      case 2: return "Next: Questions"
-      case 3: return "Next: Review"
-      default: return "Next"
+      case 1:
+        return "Next: Persona";
+      case 2:
+        return "Next: Questions";
+      case 3:
+        return "Next: Review";
+      default:
+        return "Next";
     }
-  }
+  };
 
   return (
     <div className="mx-auto w-full max-w-7xl px-4 pb-12 sm:px-6 lg:px-8">
       <div className="space-y-5 sm:space-y-6">
-      {currentStep !== 5 && (
-        <>
-          {/* Back Link */}
-          <Link
-            to={backTo}
-            className="group inline-flex items-center gap-2 rounded-lg px-3 py-1.5 text-sm font-medium text-grayScale-600 transition-colors hover:bg-brand-50 hover:text-brand-600"
-          >
-            <ArrowLeft className="h-4 w-4 transition-transform group-hover:-translate-x-0.5" />
-            Back to Sub-course
-          </Link>
-
-          {/* Header */}
-          <div className="border-b border-grayScale-100 pb-6 sm:pb-8">
-            <h1 className="text-2xl font-bold tracking-tight text-grayScale-900 sm:text-3xl">Add New Practice</h1>
-            <p className="mt-2 max-w-3xl text-sm leading-relaxed text-grayScale-500 sm:text-[15px]">
-              Create a new immersive practice session for students.
-            </p>
-          </div>
-        </>
-      )}
-
-      {/* Step Tracker */}
-      {currentStep !== 5 && (
-      <div className="flex items-center justify-center rounded-2xl border border-grayScale-100 bg-grayScale-50/40 px-3 py-4 sm:px-6 sm:py-5">
-        {STEPS.map((step, index) => (
-          <div key={step.number} className="flex items-center">
-            <div className="flex flex-col items-center">
-              <div
-                className={`flex h-9 w-9 items-center justify-center rounded-full text-xs font-semibold shadow-sm transition-all duration-300 sm:h-10 sm:w-10 sm:text-sm ${
-                  currentStep === step.number
-                    ? "bg-brand-500 text-white ring-4 ring-brand-100"
-                    : currentStep > step.number
-                    ? "bg-brand-500 text-white"
-                    : "border-2 border-grayScale-300 bg-white text-grayScale-400"
-                }`}
-              >
-                {currentStep > step.number ? <Check className="h-4 w-4" /> : step.number}
-              </div>
-              <span
-                className={`mt-2 max-w-[4.5rem] text-center text-[10px] font-semibold uppercase tracking-wide sm:mt-2.5 sm:max-w-none sm:text-xs sm:normal-case sm:tracking-wide ${
-                  currentStep === step.number
-                    ? "text-brand-600"
-                    : currentStep > step.number
-                    ? "text-brand-500"
-                    : "text-grayScale-400"
-                }`}
-              >
-                {step.label}
-              </span>
-            </div>
-            {index < STEPS.length - 1 && (
-              <div
-                className={`mx-2 h-0.5 w-10 shrink-0 rounded-full transition-colors duration-300 sm:mx-4 sm:w-20 md:w-28 lg:w-36 xl:w-44 ${
-                  currentStep > step.number ? "bg-brand-500" : "bg-grayScale-200"
-                }`}
-              />
-            )}
-          </div>
-        ))}
-      </div>
-      )}
-
-      {/* Step Content */}
-      {currentStep === 1 && (
-        <Card className="overflow-hidden border-grayScale-200/80 shadow-sm">
-          <div className="border-b border-grayScale-100 bg-gradient-to-r from-grayScale-50/80 to-white px-5 py-5 sm:px-8 sm:py-6">
-            <h2 className="text-lg font-semibold tracking-tight text-grayScale-900 sm:text-xl">Step 1: Context</h2>
-            <p className="mt-1.5 max-w-3xl text-sm leading-relaxed text-grayScale-500">
-              Define details and rules for this practice. Curriculum context is shown on the right.
-            </p>
-          </div>
-
-          <div className="p-5 sm:p-8 lg:p-10">
-            <div className="grid gap-8 lg:grid-cols-12 lg:gap-10">
-              <div className="space-y-6 lg:col-span-7">
-                <div className="space-y-2">
-                  <label className="text-sm font-medium text-grayScale-700">Practice Title</label>
-                  <Input
-                    value={practiceTitle}
-                    onChange={(e) => setPracticeTitle(e.target.value)}
-                    placeholder="Enter practice title"
-                    className="h-11"
-                  />
-                </div>
-
-                <div className="space-y-2">
-                  <label className="text-sm font-medium text-grayScale-700">Description</label>
-                  <textarea
-                    value={practiceDescription}
-                    onChange={(e) => setPracticeDescription(e.target.value)}
-                    placeholder="Enter practice description"
-                    className="min-h-[88px] w-full rounded-lg border border-grayScale-200 px-3 py-2.5 text-sm transition-colors focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-100"
-                    rows={3}
-                  />
-                  <p className="text-xs text-grayScale-500">
-                    Supports plain text and formatted HTML (for headings, lists, italics, and emphasis).
-                  </p>
-                </div>
-
-                <div className="space-y-2">
-                  <label className="text-sm font-medium text-grayScale-700">
-                    Intro video URL <span className="font-normal text-grayScale-400">(optional)</span>
-                  </label>
-                  <Input
-                    value={introVideoUrl}
-                    onChange={(e) => setIntroVideoUrl(e.target.value)}
-                    onBlur={() => void handleImportIntroVideoFromUrl()}
-                    placeholder="https://…"
-                    type="url"
-                    inputMode="url"
-                    autoComplete="off"
-                    className="h-11 font-mono text-[13px]"
-                  />
-                  <input
-                    ref={introVideoFileInputRef}
-                    type="file"
-                    accept="video/*"
-                    className="hidden"
-                    onChange={handleIntroVideoFileChange}
-                    disabled={uploadingIntroVideo || importingIntroVideoUrl}
-                  />
-                  <div className="flex flex-wrap items-center gap-2">
-                    <Button
-                      type="button"
-                      variant="outline"
-                      size="sm"
-                      disabled={uploadingIntroVideo || importingIntroVideoUrl}
-                      onClick={() => introVideoFileInputRef.current?.click()}
-                      className="gap-1.5"
-                    >
-                      {uploadingIntroVideo ? (
-                        <Loader2 className="h-4 w-4 animate-spin" />
-                      ) : (
-                        <Upload className="h-4 w-4" />
-                      )}
-                      {uploadingIntroVideo ? "Uploading…" : "Upload video from computer"}
-                    </Button>
-                    <Button
-                      type="button"
-                      variant="outline"
-                      size="sm"
-                      disabled={uploadingIntroVideo || importingIntroVideoUrl || !introVideoUrl.trim()}
-                      onClick={() => void handleImportIntroVideoFromUrl()}
-                    >
-                      {importingIntroVideoUrl ? (
-                        <>
-                          <Loader2 className="mr-1.5 h-4 w-4 animate-spin" />
-                          Importing URL…
-                        </>
-                      ) : (
-                        "Import URL via /files/upload"
-                      )}
-                    </Button>
-                    {introVideoUrl.trim() ? (
-                      <Button type="button" variant="ghost" size="sm" onClick={() => setIntroVideoUrl("")}>
-                        Clear URL
-                      </Button>
-                    ) : null}
-                  </div>
-                  {introVideoPreview ? (
-                    <div className="rounded-xl border border-grayScale-200 bg-grayScale-50/40 p-3">
-                      <p className="mb-2 text-xs font-medium text-grayScale-500">Preview</p>
-                      {introVideoPreview.kind === "vimeo" ? (
-                        <div className="overflow-hidden rounded-lg border border-grayScale-200 bg-black">
-                          <iframe
-                            src={introVideoPreview.url}
-                            title="Intro video preview"
-                            className="aspect-video w-full"
-                            allow="autoplay; fullscreen; picture-in-picture"
-                            allowFullScreen
-                          />
-                        </div>
-                      ) : (
-                        <video
-                          controls
-                          src={introVideoPreview.url}
-                          className="aspect-video w-full rounded-lg border border-grayScale-200 bg-black"
-                        />
-                      )}
-                    </div>
-                  ) : null}
-                  <p className="text-xs leading-relaxed text-grayScale-500">
-                    Paste a link or upload from your computer; uploads go through the file service (optional, not tied to sub-course video rows).
-                  </p>
-                </div>
-              </div>
-
-              <aside className="space-y-5 lg:col-span-5">
-                <div className="rounded-xl border border-grayScale-200 bg-grayScale-50/40 p-5 shadow-sm ring-1 ring-grayScale-100/80">
-                  <h3 className="text-xs font-semibold uppercase tracking-wider text-grayScale-500">Scoring & behavior</h3>
-                  <div className="mt-4 grid grid-cols-2 gap-4">
-                    <div className="space-y-2">
-                      <label className="text-sm font-medium text-grayScale-700">Passing score</label>
-                      <Input
-                        type="number"
-                        value={passingScore}
-                        onChange={(e) => setPassingScore(Number(e.target.value))}
-                        placeholder="50"
-                        min={0}
-                        max={100}
-                        className="h-10"
-                      />
-                    </div>
-                    <div className="space-y-2">
-                      <label className="text-sm font-medium text-grayScale-700">Time (min)</label>
-                      <Input
-                        type="number"
-                        value={timeLimitMinutes}
-                        onChange={(e) => setTimeLimitMinutes(Number(e.target.value))}
-                        placeholder="60"
-                        min={0}
-                        className="h-10"
-                      />
-                    </div>
-                  </div>
-                  <div className="mt-4 flex items-center justify-between gap-3 rounded-lg border border-grayScale-200/80 bg-white px-4 py-3">
-                    <label className="text-sm font-medium text-grayScale-700">Shuffle questions</label>
-                    <button
-                      type="button"
-                      onClick={() => setShuffleQuestions(!shuffleQuestions)}
-                      className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out ${
-                        shuffleQuestions ? "bg-brand-500" : "bg-grayScale-300"
-                      }`}
-                    >
-                      <span
-                        className={`pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow-md ring-0 transition-transform duration-200 ease-in-out ${
-                          shuffleQuestions ? "translate-x-5" : "translate-x-0"
-                        }`}
-                      />
-                    </button>
-                  </div>
-                </div>
-
-                <div className="rounded-xl border border-grayScale-200 bg-white p-5 shadow-sm ring-1 ring-grayScale-100/80">
-                  <h3 className="text-xs font-semibold uppercase tracking-wider text-grayScale-500">Curriculum context</h3>
-                  <p className="mt-1 text-xs text-grayScale-400">Read-only for this flow.</p>
-                  <div className="mt-4 space-y-3">
-                    <div className="space-y-2">
-                      <label className="text-sm font-medium text-grayScale-700">
-                        Program{" "}
-                        <span className="rounded bg-brand-50 px-1.5 py-0.5 text-xs font-medium text-brand-500">Auto</span>
-                      </label>
-                      <div className="flex items-center gap-3 rounded-lg border border-dashed border-grayScale-200 bg-grayScale-50/50 px-3 py-2.5">
-                        <Grid3X3 className="h-4 w-4 shrink-0 text-grayScale-400" />
-                        <span className="min-w-0 flex-1 truncate text-sm font-medium text-grayScale-700">{selectedProgram}</span>
-                        <ChevronDown className="h-4 w-4 shrink-0 text-grayScale-300" />
-                      </div>
-                    </div>
-                    <div className="space-y-2">
-                      <label className="text-sm font-medium text-grayScale-700">
-                        Course{" "}
-                        <span className="rounded bg-brand-50 px-1.5 py-0.5 text-xs font-medium text-brand-500">Auto</span>
-                      </label>
-                      <div className="flex items-center gap-3 rounded-lg border border-dashed border-grayScale-200 bg-grayScale-50/50 px-3 py-2.5">
-                        <Grid3X3 className="h-4 w-4 shrink-0 text-grayScale-400" />
-                        <span className="min-w-0 flex-1 truncate text-sm font-medium text-grayScale-700">{selectedCourse}</span>
-                        <ChevronDown className="h-4 w-4 shrink-0 text-grayScale-300" />
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </aside>
-            </div>
-          </div>
-
-          <div className="flex flex-col-reverse items-stretch justify-between gap-3 border-t border-grayScale-100 bg-grayScale-50/30 px-5 py-4 sm:flex-row sm:items-center sm:px-8 sm:py-5">
-            <Button variant="ghost" onClick={handleCancel} className="sm:w-auto">
-              Cancel
-            </Button>
-            <Button className="w-full bg-brand-500 hover:bg-brand-600 sm:w-auto sm:min-w-[180px]" onClick={handleNext}>
-              {getNextButtonLabel()}
-              <ArrowRight className="ml-2 h-4 w-4" />
-            </Button>
-          </div>
-        </Card>
-      )}
-
-      {currentStep === 2 && (
-        <Card className="overflow-hidden border-grayScale-200/80 shadow-sm">
-          <div className="border-b border-grayScale-100 bg-gradient-to-r from-grayScale-50/80 to-white px-5 py-5 sm:px-8 sm:py-6">
-            <h2 className="text-lg font-semibold tracking-tight text-grayScale-900 sm:text-xl">Step 2: Persona</h2>
-            <p className="mt-1.5 max-w-3xl text-sm leading-relaxed text-grayScale-500">
-              Choose the character students will interact with in this practice.
-            </p>
-          </div>
-
-          <div className="p-5 sm:p-8 lg:p-10">
-          <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 sm:gap-4 lg:grid-cols-4 lg:gap-5">
-            {PERSONAS.map((persona) => (
-              <button
-                key={persona.id}
-                onClick={() => setSelectedPersona(persona.id)}
-                className={`group relative flex flex-col items-center rounded-xl border-2 p-6 transition-all duration-200 ${
-                  selectedPersona === persona.id
-                    ? "border-brand-500 bg-brand-50 shadow-md shadow-brand-100"
-                    : "border-grayScale-200 bg-white hover:border-brand-300 hover:shadow-sm"
-                }`}
-              >
-                {selectedPersona === persona.id && (
-                  <div className="absolute right-2.5 top-2.5 flex h-6 w-6 items-center justify-center rounded-full bg-brand-500 text-white shadow-sm">
-                    <Check className="h-3.5 w-3.5" />
-                  </div>
-                )}
-                <div className={`mb-3 h-20 w-20 overflow-hidden rounded-full bg-grayScale-100 ring-2 transition-all duration-200 ${
-                  selectedPersona === persona.id ? "ring-brand-300 ring-offset-2" : "ring-transparent group-hover:ring-grayScale-200"
-                }`}>
-                  <img
-                    src={persona.avatar}
-                    alt={persona.name}
-                    className="h-full w-full object-cover"
-                  />
-                </div>
-                <span className={`text-sm font-semibold transition-colors ${
-                  selectedPersona === persona.id ? "text-brand-600" : "text-grayScale-900"
-                }`}>{persona.name}</span>
-              </button>
-            ))}
-          </div>
-          </div>
-
-          <div className="flex flex-col-reverse items-stretch justify-between gap-3 border-t border-grayScale-100 bg-grayScale-50/30 px-5 py-4 sm:flex-row sm:items-center sm:px-8 sm:py-5">
-            <Button variant="outline" onClick={handleBack} className="sm:w-auto">
-              Back
-            </Button>
-            <Button className="w-full bg-brand-500 hover:bg-brand-600 sm:w-auto sm:min-w-[180px]" onClick={handleNext}>
-              {getNextButtonLabel()}
-              <ArrowRight className="ml-2 h-4 w-4" />
-            </Button>
-          </div>
-        </Card>
-      )}
-
-      {currentStep === 3 && (
-        <div className="w-full space-y-6">
-          <div className="rounded-2xl border border-grayScale-200/80 bg-gradient-to-r from-grayScale-50/80 to-white px-5 py-5 shadow-sm sm:px-8 sm:py-6">
-            <h2 className="text-lg font-semibold tracking-tight text-grayScale-900 sm:text-xl">Step 3: Questions</h2>
-            <p className="mt-1.5 max-w-3xl text-sm leading-relaxed text-grayScale-500">
-              Add MCQ, True/False, Short Answer, or Audio items. Use the full width for stems and options.
-            </p>
-          </div>
-
-          <div className="space-y-4 sm:space-y-5">
-            {questions.map((question, index) => (
-              <Card key={question.id} className="border border-grayScale-200/90 border-l-4 border-l-brand-500 p-5 shadow-sm transition-shadow hover:shadow-md sm:p-6 lg:p-8">
-                <div className="flex items-start justify-between">
-                  <div className="flex items-center gap-3">
-                    <GripVertical className="h-5 w-5 cursor-grab text-grayScale-300 transition-colors hover:text-grayScale-500" />
-                    <span className="text-base font-semibold text-grayScale-900">Question {index + 1}</span>
-                  </div>
-                  <button
-                    onClick={() => removeQuestion(question.id)}
-                    className="rounded-lg p-1.5 text-grayScale-400 transition-colors hover:bg-red-50 hover:text-red-500"
-                  >
-                    <Trash2 className="h-4 w-4" />
-                  </button>
-                </div>
-
-                <PracticeQuestionEditorFields
-                  value={{
-                    questionText: question.questionText,
-                    questionType: question.questionType,
-                    difficultyLevel: question.difficultyLevel,
-                    points: question.points,
-                    tips: question.tips,
-                    explanation: question.explanation,
-                    options: question.options,
-                    voicePrompt: question.voicePrompt,
-                    sampleAnswerVoicePrompt: question.sampleAnswerVoicePrompt,
-                    audioCorrectAnswerText: question.audioCorrectAnswerText,
-                    shortAnswer: question.shortAnswers[0] ?? "",
-                    imageUrl: question.imageUrl,
-                  }}
-                  onChange={(next) => {
-                    updateQuestion(question.id, {
-                      questionText: next.questionText,
-                      questionType: next.questionType as QuestionType,
-                      difficultyLevel: next.difficultyLevel as DifficultyLevel,
-                      points: next.points,
-                      tips: next.tips,
-                      explanation: next.explanation,
-                      options: next.options,
-                      voicePrompt: next.voicePrompt,
-                      sampleAnswerVoicePrompt: next.sampleAnswerVoicePrompt,
-                      audioCorrectAnswerText: next.audioCorrectAnswerText,
-                      shortAnswers: next.shortAnswer.trim() ? [next.shortAnswer.trim()] : [],
-                      imageUrl: next.imageUrl,
-                    })
-                  }}
-                  mediaBusy={saving}
-                />
-              </Card>
-            ))}
-          </div>
-
-          <div>
-            <button
-              type="button"
-              onClick={addQuestion}
-              className="inline-flex w-full items-center justify-center gap-2 rounded-xl border-2 border-dashed border-brand-200/90 bg-brand-50/20 px-4 py-3.5 text-sm font-semibold text-brand-600 transition-all hover:border-brand-300 hover:bg-brand-50/60 hover:text-brand-700 sm:py-3"
+        {currentStep !== 5 && (
+          <>
+            {/* Back Link */}
+            <Link
+              to={backTo}
+              className="group inline-flex items-center gap-2 rounded-lg px-3 py-1.5 text-sm font-medium text-grayScale-600 transition-colors hover:bg-brand-50 hover:text-brand-600"
             >
-              <Plus className="h-4 w-4" />
-              Add another question
-            </button>
-          </div>
+              <ArrowLeft className="h-4 w-4 transition-transform group-hover:-translate-x-0.5" />
+              Back to Sub-course
+            </Link>
 
-          <div className="flex flex-col-reverse items-stretch justify-between gap-3 rounded-2xl border border-grayScale-200/80 bg-grayScale-50/30 px-4 py-4 sm:flex-row sm:items-center sm:px-6 sm:py-5">
-            <Button variant="outline" onClick={handleBack} className="sm:w-auto">
-              Back
-            </Button>
-            <Button className="w-full bg-brand-500 hover:bg-brand-600 sm:w-auto sm:min-w-[180px]" onClick={handleNext}>
-              {getNextButtonLabel()}
-              <ArrowRight className="ml-2 h-4 w-4" />
-            </Button>
-          </div>
-        </div>
-      )}
-
-      {currentStep === 4 && (
-        <div className="w-full space-y-6">
-          <div className="rounded-2xl border border-grayScale-200/80 bg-gradient-to-r from-grayScale-50/80 to-white px-5 py-5 shadow-sm sm:px-8 sm:py-6">
-            <h2 className="text-lg font-semibold tracking-tight text-grayScale-900 sm:text-xl">Step 4: Review & publish</h2>
-            <p className="mt-1.5 max-w-3xl text-sm leading-relaxed text-grayScale-500">
-              Confirm context, persona, and questions before saving or publishing.
-            </p>
-          </div>
-
-          <div className="grid gap-6 lg:grid-cols-2 lg:items-start lg:gap-8">
-          {/* Basic Information Card */}
-          <Card className="overflow-hidden border-grayScale-200/80 p-0 shadow-sm">
-            <div className="flex items-center justify-between border-b border-grayScale-100 px-6 py-4">
-              <h3 className="font-semibold text-grayScale-900">Basic Information</h3>
-              <button
-                onClick={() => setCurrentStep(1)}
-                className="flex items-center gap-1.5 rounded-md px-2.5 py-1 text-sm font-medium text-brand-500 transition-colors hover:bg-brand-50 hover:text-brand-600"
-              >
-                <Edit className="h-3.5 w-3.5" />
-                Edit
-              </button>
+            {/* Header */}
+            <div className="border-b border-grayScale-100 pb-6 sm:pb-8">
+              <h1 className="text-2xl font-bold tracking-tight text-grayScale-900 sm:text-xl">
+                Add New Practice
+              </h1>
+              <p className="mt-2 max-w-3xl text-sm leading-relaxed text-grayScale-500 sm:text-[15px]">
+                Create a new immersive practice session for students.
+              </p>
             </div>
-            <div className="divide-y divide-grayScale-100">
-              <div className="flex justify-between px-6 py-3.5 odd:bg-grayScale-50/50">
-                <span className="text-sm text-grayScale-500">Title</span>
-                <span className="text-sm font-medium text-grayScale-900">{practiceTitle || "Untitled Practice"}</span>
-              </div>
-              <div className="bg-grayScale-50/50 px-6 py-4">
-                <span className="text-sm text-grayScale-500">Description</span>
-                {descriptionPreviewHtml ? (
+          </>
+        )}
+
+        {/* Step Tracker */}
+        {currentStep !== 5 && (
+          <div className="flex items-center justify-center rounded-2xl border border-grayScale-100 bg-grayScale-50/40 px-3 py-4 sm:px-6 sm:py-5">
+            {STEPS.map((step, index) => (
+              <div key={step.number} className="flex items-center">
+                <div className="flex flex-col items-center">
                   <div
-                    className="mt-2 rounded-lg border border-grayScale-200 bg-white px-4 py-3 text-sm leading-relaxed text-grayScale-800 [&_h1]:text-xl [&_h1]:font-semibold [&_h2]:text-lg [&_h2]:font-semibold [&_ol]:list-decimal [&_ol]:pl-6 [&_p]:mb-2 [&_strong]:font-semibold [&_ul]:list-disc [&_ul]:pl-6"
-                    dangerouslySetInnerHTML={{ __html: descriptionPreviewHtml }}
-                  />
-                ) : (
-                  <p className="mt-2 text-sm text-grayScale-400">—</p>
-                )}
-              </div>
-              <div className="flex justify-between px-6 py-3.5">
-                <span className="text-sm text-grayScale-500">Intro video URL</span>
-                <span className="max-w-[min(28rem,55%)] break-all text-right text-sm text-grayScale-700">
-                  {introVideoUrl.trim() || "—"}
-                </span>
-              </div>
-              {introVideoPreview ? (
-                <div className="bg-grayScale-50/50 px-6 py-4">
-                  <span className="text-sm text-grayScale-500">Intro video preview</span>
-                  <div className="mt-2 rounded-lg border border-grayScale-200 bg-white p-3">
-                    {introVideoPreview.kind === "vimeo" ? (
-                      <div className="overflow-hidden rounded-lg border border-grayScale-200 bg-black">
-                        <iframe
-                          src={introVideoPreview.url}
-                          title="Intro video preview"
-                          className="aspect-video w-full"
-                          allow="autoplay; fullscreen; picture-in-picture"
-                          allowFullScreen
-                        />
-                      </div>
+                    className={`flex h-9 w-9 items-center justify-center rounded-full text-xs font-semibold shadow-sm transition-all duration-300 sm:h-10 sm:w-10 sm:text-sm ${
+                      currentStep === step.number
+                        ? "bg-brand-500 text-white ring-4 ring-brand-100"
+                        : currentStep > step.number
+                          ? "bg-brand-500 text-white"
+                          : "border-2 border-grayScale-300 bg-white text-grayScale-400"
+                    }`}
+                  >
+                    {currentStep > step.number ? (
+                      <Check className="h-4 w-4" />
                     ) : (
-                      <video
-                        controls
-                        src={introVideoPreview.url}
-                        className="aspect-video w-full rounded-lg border border-grayScale-200 bg-black"
-                      />
+                      step.number
                     )}
                   </div>
+                  <span
+                    className={`mt-2 max-w-[4.5rem] text-center text-[10px] font-semibold uppercase tracking-wide sm:mt-2.5 sm:max-w-none sm:text-xs sm:normal-case sm:tracking-wide ${
+                      currentStep === step.number
+                        ? "text-brand-600"
+                        : currentStep > step.number
+                          ? "text-brand-500"
+                          : "text-grayScale-400"
+                    }`}
+                  >
+                    {step.label}
+                  </span>
                 </div>
-              ) : null}
-              <div className="flex justify-between bg-grayScale-50/50 px-6 py-3.5">
-                <span className="text-sm text-grayScale-500">Passing Score</span>
-                <span className="text-sm font-medium text-grayScale-900">{passingScore}%</span>
+                {index < STEPS.length - 1 && (
+                  <div
+                    className={`mx-2 h-0.5 w-10 shrink-0 rounded-full transition-colors duration-300 sm:mx-4 sm:w-20 md:w-28 lg:w-36 xl:w-44 ${
+                      currentStep > step.number
+                        ? "bg-brand-500"
+                        : "bg-grayScale-200"
+                    }`}
+                  />
+                )}
               </div>
-              <div className="flex justify-between px-6 py-3.5">
-                <span className="text-sm text-grayScale-500">Time Limit</span>
-                <span className="text-sm font-medium text-grayScale-900">{timeLimitMinutes} minutes</span>
+            ))}
+          </div>
+        )}
+
+        {/* Step Content */}
+        {currentStep === 1 && (
+          <Card className="overflow-hidden border-grayScale-200/80 shadow-sm">
+            <div className="border-b border-grayScale-100 bg-gradient-to-r from-grayScale-50/80 to-white px-5 py-5 sm:px-8 sm:py-6">
+              <h2 className="text-lg font-semibold tracking-tight text-grayScale-900 sm:text-xl">
+                Step 1: Context
+              </h2>
+              <p className="mt-1.5 max-w-3xl text-sm leading-relaxed text-grayScale-500">
+                Define details and rules for this practice. Curriculum context
+                is shown on the right.
+              </p>
+            </div>
+
+            <div className="p-5 sm:p-8 lg:p-10">
+              <div className="grid gap-8 lg:grid-cols-12 lg:gap-10">
+                <div className="space-y-6 lg:col-span-7">
+                  <div className="space-y-2">
+                    <label className="text-sm font-medium text-grayScale-700">
+                      Practice Title
+                    </label>
+                    <Input
+                      value={practiceTitle}
+                      onChange={(e) => setPracticeTitle(e.target.value)}
+                      placeholder="Enter practice title"
+                      className="h-11"
+                    />
+                  </div>
+
+                  <div className="space-y-2">
+                    <label className="text-sm font-medium text-grayScale-700">
+                      Description
+                    </label>
+                    <textarea
+                      value={practiceDescription}
+                      onChange={(e) => setPracticeDescription(e.target.value)}
+                      placeholder="Enter practice description"
+                      className="min-h-[88px] w-full rounded-lg border border-grayScale-200 px-3 py-2.5 text-sm transition-colors focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-100"
+                      rows={3}
+                    />
+                    <p className="text-xs text-grayScale-500">
+                      Supports plain text and formatted HTML (for headings,
+                      lists, italics, and emphasis).
+                    </p>
+                  </div>
+
+                  <div className="space-y-2">
+                    <label className="text-sm font-medium text-grayScale-700">
+                      Intro video URL{" "}
+                      <span className="font-normal text-grayScale-400">
+                        (optional)
+                      </span>
+                    </label>
+                    <Input
+                      value={introVideoUrl}
+                      onChange={(e) => setIntroVideoUrl(e.target.value)}
+                      onBlur={() => void handleImportIntroVideoFromUrl()}
+                      placeholder="https://…"
+                      type="url"
+                      inputMode="url"
+                      autoComplete="off"
+                      className="h-11 font-mono text-[13px]"
+                    />
+                    <input
+                      ref={introVideoFileInputRef}
+                      type="file"
+                      accept="video/*"
+                      className="hidden"
+                      onChange={handleIntroVideoFileChange}
+                      disabled={uploadingIntroVideo || importingIntroVideoUrl}
+                    />
+                    <div className="flex flex-wrap items-center gap-2">
+                      <Button
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        disabled={uploadingIntroVideo || importingIntroVideoUrl}
+                        onClick={() => introVideoFileInputRef.current?.click()}
+                        className="gap-1.5"
+                      >
+                        {uploadingIntroVideo ? (
+                          <Loader2 className="h-4 w-4 animate-spin" />
+                        ) : (
+                          <Upload className="h-4 w-4" />
+                        )}
+                        {uploadingIntroVideo
+                          ? "Uploading…"
+                          : "Upload video from computer"}
+                      </Button>
+                      <Button
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        disabled={
+                          uploadingIntroVideo ||
+                          importingIntroVideoUrl ||
+                          !introVideoUrl.trim()
+                        }
+                        onClick={() => void handleImportIntroVideoFromUrl()}
+                      >
+                        {importingIntroVideoUrl ? (
+                          <>
+                            <Loader2 className="mr-1.5 h-4 w-4 animate-spin" />
+                            Importing URL…
+                          </>
+                        ) : (
+                          "Import URL via /files/upload"
+                        )}
+                      </Button>
+                      {introVideoUrl.trim() ? (
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => setIntroVideoUrl("")}
+                        >
+                          Clear URL
+                        </Button>
+                      ) : null}
+                    </div>
+                    {introVideoPreview ? (
+                      <div className="rounded-xl border border-grayScale-200 bg-grayScale-50/40 p-3">
+                        <p className="mb-2 text-xs font-medium text-grayScale-500">
+                          Preview
+                        </p>
+                        {introVideoPreview.kind === "vimeo" ? (
+                          <div className="overflow-hidden rounded-lg border border-grayScale-200 bg-black">
+                            <iframe
+                              src={introVideoPreview.url}
+                              title="Intro video preview"
+                              className="aspect-video w-full"
+                              allow="autoplay; fullscreen; picture-in-picture"
+                              allowFullScreen
+                            />
+                          </div>
+                        ) : (
+                          <video
+                            controls
+                            src={introVideoPreview.url}
+                            className="aspect-video w-full rounded-lg border border-grayScale-200 bg-black"
+                          />
+                        )}
+                      </div>
+                    ) : null}
+                    <p className="text-xs leading-relaxed text-grayScale-500">
+                      Paste a link or upload from your computer; uploads go
+                      through the file service (optional, not tied to sub-course
+                      video rows).
+                    </p>
+                  </div>
+                </div>
+
+                <aside className="space-y-5 lg:col-span-5">
+                  <div className="rounded-xl border border-grayScale-200 bg-grayScale-50/40 p-5 shadow-sm ring-1 ring-grayScale-100/80">
+                    <h3 className="text-xs font-semibold uppercase tracking-wider text-grayScale-500">
+                      Scoring & behavior
+                    </h3>
+                    <div className="mt-4 grid grid-cols-2 gap-4">
+                      <div className="space-y-2">
+                        <label className="text-sm font-medium text-grayScale-700">
+                          Passing score
+                        </label>
+                        <Input
+                          type="number"
+                          value={passingScore}
+                          onChange={(e) =>
+                            setPassingScore(Number(e.target.value))
+                          }
+                          placeholder="50"
+                          min={0}
+                          max={100}
+                          className="h-10"
+                        />
+                      </div>
+                      <div className="space-y-2">
+                        <label className="text-sm font-medium text-grayScale-700">
+                          Time (min)
+                        </label>
+                        <Input
+                          type="number"
+                          value={timeLimitMinutes}
+                          onChange={(e) =>
+                            setTimeLimitMinutes(Number(e.target.value))
+                          }
+                          placeholder="60"
+                          min={0}
+                          className="h-10"
+                        />
+                      </div>
+                    </div>
+                    <div className="mt-4 flex items-center justify-between gap-3 rounded-lg border border-grayScale-200/80 bg-white px-4 py-3">
+                      <label className="text-sm font-medium text-grayScale-700">
+                        Shuffle questions
+                      </label>
+                      <button
+                        type="button"
+                        onClick={() => setShuffleQuestions(!shuffleQuestions)}
+                        className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out ${
+                          shuffleQuestions ? "bg-brand-500" : "bg-grayScale-300"
+                        }`}
+                      >
+                        <span
+                          className={`pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow-md ring-0 transition-transform duration-200 ease-in-out ${
+                            shuffleQuestions ? "translate-x-5" : "translate-x-0"
+                          }`}
+                        />
+                      </button>
+                    </div>
+                  </div>
+
+                  <div className="rounded-xl border border-grayScale-200 bg-white p-5 shadow-sm ring-1 ring-grayScale-100/80">
+                    <h3 className="text-xs font-semibold uppercase tracking-wider text-grayScale-500">
+                      Curriculum context
+                    </h3>
+                    <p className="mt-1 text-xs text-grayScale-400">
+                      Read-only for this flow.
+                    </p>
+                    <div className="mt-4 space-y-3">
+                      <div className="space-y-2">
+                        <label className="text-sm font-medium text-grayScale-700">
+                          Program{" "}
+                          <span className="rounded bg-brand-50 px-1.5 py-0.5 text-xs font-medium text-brand-500">
+                            Auto
+                          </span>
+                        </label>
+                        <div className="flex items-center gap-3 rounded-lg border border-dashed border-grayScale-200 bg-grayScale-50/50 px-3 py-2.5">
+                          <Grid3X3 className="h-4 w-4 shrink-0 text-grayScale-400" />
+                          <span className="min-w-0 flex-1 truncate text-sm font-medium text-grayScale-700">
+                            {selectedProgram}
+                          </span>
+                          <ChevronDown className="h-4 w-4 shrink-0 text-grayScale-300" />
+                        </div>
+                      </div>
+                      <div className="space-y-2">
+                        <label className="text-sm font-medium text-grayScale-700">
+                          Course{" "}
+                          <span className="rounded bg-brand-50 px-1.5 py-0.5 text-xs font-medium text-brand-500">
+                            Auto
+                          </span>
+                        </label>
+                        <div className="flex items-center gap-3 rounded-lg border border-dashed border-grayScale-200 bg-grayScale-50/50 px-3 py-2.5">
+                          <Grid3X3 className="h-4 w-4 shrink-0 text-grayScale-400" />
+                          <span className="min-w-0 flex-1 truncate text-sm font-medium text-grayScale-700">
+                            {selectedCourse}
+                          </span>
+                          <ChevronDown className="h-4 w-4 shrink-0 text-grayScale-300" />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </aside>
               </div>
-              <div className="flex justify-between bg-grayScale-50/50 px-6 py-3.5">
-                <span className="text-sm text-grayScale-500">Shuffle Questions</span>
-                <span className="text-sm font-medium text-grayScale-900">{shuffleQuestions ? "Yes" : "No"}</span>
-              </div>
-              <div className="flex justify-between px-6 py-3.5">
-                <span className="text-sm text-grayScale-500">Persona</span>
-                <div className="flex items-center gap-2">
-                  {selectedPersona && (
-                    <div className="h-6 w-6 overflow-hidden rounded-full bg-grayScale-100 ring-2 ring-brand-100">
+            </div>
+
+            <div className="flex flex-col-reverse items-stretch justify-between gap-3 border-t border-grayScale-100 bg-grayScale-50/30 px-5 py-4 sm:flex-row sm:items-center sm:px-8 sm:py-5">
+              <Button
+                variant="ghost"
+                onClick={handleCancel}
+                className="sm:w-auto"
+              >
+                Cancel
+              </Button>
+              <Button
+                className="w-full bg-brand-500 hover:bg-brand-600 sm:w-auto sm:min-w-[180px]"
+                onClick={handleNext}
+              >
+                {getNextButtonLabel()}
+                <ArrowRight className="ml-2 h-4 w-4" />
+              </Button>
+            </div>
+          </Card>
+        )}
+
+        {currentStep === 2 && (
+          <Card className="overflow-hidden border-grayScale-200/80 shadow-sm">
+            <div className="border-b border-grayScale-100 bg-gradient-to-r from-grayScale-50/80 to-white px-5 py-5 sm:px-8 sm:py-6">
+              <h2 className="text-lg font-semibold tracking-tight text-grayScale-900 sm:text-xl">
+                Step 2: Persona
+              </h2>
+              <p className="mt-1.5 max-w-3xl text-sm leading-relaxed text-grayScale-500">
+                Choose the character students will interact with in this
+                practice.
+              </p>
+            </div>
+
+            <div className="p-5 sm:p-8 lg:p-10">
+              <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 sm:gap-4 lg:grid-cols-4 lg:gap-5">
+                {PERSONAS.map((persona) => (
+                  <button
+                    key={persona.id}
+                    onClick={() => setSelectedPersona(persona.id)}
+                    className={`group relative flex flex-col items-center rounded-xl border-2 p-6 transition-all duration-200 ${
+                      selectedPersona === persona.id
+                        ? "border-brand-500 bg-brand-50 shadow-md shadow-brand-100"
+                        : "border-grayScale-200 bg-white hover:border-brand-300 hover:shadow-sm"
+                    }`}
+                  >
+                    {selectedPersona === persona.id && (
+                      <div className="absolute right-2.5 top-2.5 flex h-6 w-6 items-center justify-center rounded-full bg-brand-500 text-white shadow-sm">
+                        <Check className="h-3.5 w-3.5" />
+                      </div>
+                    )}
+                    <div
+                      className={`mb-3 h-20 w-20 overflow-hidden rounded-full bg-grayScale-100 ring-2 transition-all duration-200 ${
+                        selectedPersona === persona.id
+                          ? "ring-brand-300 ring-offset-2"
+                          : "ring-transparent group-hover:ring-grayScale-200"
+                      }`}
+                    >
                       <img
-                        src={PERSONAS.find(p => p.id === selectedPersona)?.avatar}
-                        alt="Persona"
+                        src={persona.avatar}
+                        alt={persona.name}
                         className="h-full w-full object-cover"
                       />
                     </div>
-                  )}
-                  <span className="text-sm font-medium text-brand-600">
-                    {PERSONAS.find(p => p.id === selectedPersona)?.name || "None selected"}
-                  </span>
-                </div>
+                    <span
+                      className={`text-sm font-semibold transition-colors ${
+                        selectedPersona === persona.id
+                          ? "text-brand-600"
+                          : "text-grayScale-900"
+                      }`}
+                    >
+                      {persona.name}
+                    </span>
+                  </button>
+                ))}
               </div>
             </div>
+
+            <div className="flex flex-col-reverse items-stretch justify-between gap-3 border-t border-grayScale-100 bg-grayScale-50/30 px-5 py-4 sm:flex-row sm:items-center sm:px-8 sm:py-5">
+              <Button
+                variant="outline"
+                onClick={handleBack}
+                className="sm:w-auto"
+              >
+                Back
+              </Button>
+              <Button
+                className="w-full bg-brand-500 hover:bg-brand-600 sm:w-auto sm:min-w-[180px]"
+                onClick={handleNext}
+              >
+                {getNextButtonLabel()}
+                <ArrowRight className="ml-2 h-4 w-4" />
+              </Button>
+            </div>
           </Card>
+        )}
 
-          {/* Questions Review */}
-          <Card className="overflow-hidden border-grayScale-200/80 p-0 shadow-sm lg:min-h-0">
-            <div className="flex items-center justify-between border-b border-grayScale-100 px-6 py-4">
-              <div className="flex items-center gap-2.5">
-                <h3 className="font-semibold text-grayScale-900">Questions</h3>
-                <span className="flex h-6 w-6 items-center justify-center rounded-full bg-brand-100 text-xs font-semibold text-brand-600">
-                  {questions.length}
-                </span>
-              </div>
+        {currentStep === 3 && (
+          <div className="w-full space-y-6">
+            <div className="rounded-2xl border border-grayScale-200/80 bg-gradient-to-r from-grayScale-50/80 to-white px-5 py-5 shadow-sm sm:px-8 sm:py-6">
+              <h2 className="text-lg font-semibold tracking-tight text-grayScale-900 sm:text-xl">
+                Step 3: Questions
+              </h2>
+              <p className="mt-1.5 max-w-3xl text-sm leading-relaxed text-grayScale-500">
+                Add MCQ, True/False, Short Answer, or Audio items. Use the full
+                width for stems and options.
+              </p>
+            </div>
+
+            <div className="space-y-4 sm:space-y-5">
+              {questions.map((question, index) => (
+                <Card
+                  key={question.id}
+                  className="border border-grayScale-200/90 border-l-4 border-l-brand-500 p-5 shadow-sm transition-shadow hover:shadow-md sm:p-6 lg:p-8"
+                >
+                  <div className="flex items-start justify-between">
+                    <div className="flex items-center gap-3">
+                      <GripVertical className="h-5 w-5 cursor-grab text-grayScale-300 transition-colors hover:text-grayScale-500" />
+                      <span className="text-base font-semibold text-grayScale-900">
+                        Question {index + 1}
+                      </span>
+                    </div>
+                    <button
+                      onClick={() => removeQuestion(question.id)}
+                      className="rounded-lg p-1.5 text-grayScale-400 transition-colors hover:bg-red-50 hover:text-red-500"
+                    >
+                      <Trash2 className="h-4 w-4" />
+                    </button>
+                  </div>
+
+                  <PracticeQuestionEditorFields
+                    value={{
+                      questionText: question.questionText,
+                      questionType: question.questionType,
+                      difficultyLevel: question.difficultyLevel,
+                      points: question.points,
+                      tips: question.tips,
+                      explanation: question.explanation,
+                      options: question.options,
+                      voicePrompt: question.voicePrompt,
+                      sampleAnswerVoicePrompt: question.sampleAnswerVoicePrompt,
+                      audioCorrectAnswerText: question.audioCorrectAnswerText,
+                      shortAnswer: question.shortAnswers[0] ?? "",
+                      imageUrl: question.imageUrl,
+                    }}
+                    onChange={(next) => {
+                      updateQuestion(question.id, {
+                        questionText: next.questionText,
+                        questionType: next.questionType as QuestionType,
+                        difficultyLevel:
+                          next.difficultyLevel as DifficultyLevel,
+                        points: next.points,
+                        tips: next.tips,
+                        explanation: next.explanation,
+                        options: next.options,
+                        voicePrompt: next.voicePrompt,
+                        sampleAnswerVoicePrompt: next.sampleAnswerVoicePrompt,
+                        audioCorrectAnswerText: next.audioCorrectAnswerText,
+                        shortAnswers: next.shortAnswer.trim()
+                          ? [next.shortAnswer.trim()]
+                          : [],
+                        imageUrl: next.imageUrl,
+                      });
+                    }}
+                    mediaBusy={saving}
+                  />
+                </Card>
+              ))}
+            </div>
+
+            <div>
               <button
-                onClick={() => setCurrentStep(3)}
-                className="flex items-center gap-1.5 rounded-md px-2.5 py-1 text-sm font-medium text-brand-500 transition-colors hover:bg-brand-50 hover:text-brand-600"
+                type="button"
+                onClick={addQuestion}
+                className="inline-flex w-full items-center justify-center gap-2 rounded-xl border-2 border-dashed border-brand-200/90 bg-brand-50/20 px-4 py-3.5 text-sm font-semibold text-brand-600 transition-all hover:border-brand-300 hover:bg-brand-50/60 hover:text-brand-700 sm:py-3"
               >
-                <Edit className="h-3.5 w-3.5" />
-                Edit
+                <Plus className="h-4 w-4" />
+                Add another question
               </button>
             </div>
-            <div className="max-h-[min(70vh,52rem)] space-y-3 overflow-y-auto px-4 py-4 sm:px-6">
-              {questions.map((question, index) => (
-                <div key={question.id} className="rounded-xl border border-grayScale-200 bg-grayScale-50/20 p-4 transition-colors hover:border-grayScale-300 sm:p-4">
-                  <div className="flex items-start gap-3">
-                    <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-brand-100 text-xs font-bold text-brand-600">
-                      {index + 1}
+
+            <div className="flex flex-col-reverse items-stretch justify-between gap-3 rounded-2xl border border-grayScale-200/80 bg-grayScale-50/30 px-4 py-4 sm:flex-row sm:items-center sm:px-6 sm:py-5">
+              <Button
+                variant="outline"
+                onClick={handleBack}
+                className="sm:w-auto"
+              >
+                Back
+              </Button>
+              <Button
+                className="w-full bg-brand-500 hover:bg-brand-600 sm:w-auto sm:min-w-[180px]"
+                onClick={handleNext}
+              >
+                {getNextButtonLabel()}
+                <ArrowRight className="ml-2 h-4 w-4" />
+              </Button>
+            </div>
+          </div>
+        )}
+
+        {currentStep === 4 && (
+          <div className="w-full space-y-6">
+            <div className="rounded-2xl border border-grayScale-200/80 bg-gradient-to-r from-grayScale-50/80 to-white px-5 py-5 shadow-sm sm:px-8 sm:py-6">
+              <h2 className="text-lg font-semibold tracking-tight text-grayScale-900 sm:text-xl">
+                Step 4: Review & publish
+              </h2>
+              <p className="mt-1.5 max-w-3xl text-sm leading-relaxed text-grayScale-500">
+                Confirm context, persona, and questions before saving or
+                publishing.
+              </p>
+            </div>
+
+            <div className="grid gap-6 lg:grid-cols-2 lg:items-start lg:gap-8">
+              {/* Basic Information Card */}
+              <Card className="overflow-hidden border-grayScale-200/80 p-0 shadow-sm">
+                <div className="flex items-center justify-between border-b border-grayScale-100 px-6 py-4">
+                  <h3 className="font-semibold text-grayScale-900">
+                    Basic Information
+                  </h3>
+                  <button
+                    onClick={() => setCurrentStep(1)}
+                    className="flex items-center gap-1.5 rounded-md px-2.5 py-1 text-sm font-medium text-brand-500 transition-colors hover:bg-brand-50 hover:text-brand-600"
+                  >
+                    <Edit className="h-3.5 w-3.5" />
+                    Edit
+                  </button>
+                </div>
+                <div className="divide-y divide-grayScale-100">
+                  <div className="flex justify-between px-6 py-3.5 odd:bg-grayScale-50/50">
+                    <span className="text-sm text-grayScale-500">Title</span>
+                    <span className="text-sm font-medium text-grayScale-900">
+                      {practiceTitle || "Untitled Practice"}
                     </span>
-                    <div className="flex-1 space-y-2.5">
-                      <p className="text-sm font-medium leading-relaxed text-grayScale-900">{question.questionText}</p>
-                      <div className="flex flex-wrap items-center gap-2">
-                        <span className="rounded-md bg-blue-50 px-2 py-0.5 text-xs font-medium text-blue-600">
-                          {question.questionType === "MCQ"
-                            ? "Multiple Choice"
-                            : question.questionType === "TRUE_FALSE"
-                              ? "True/False"
-                              : question.questionType === "AUDIO"
-                                ? "Audio"
-                                : "Short Answer"}
-                        </span>
-                        <span className="rounded-md bg-purple-50 px-2 py-0.5 text-xs font-medium text-purple-600">
-                          {question.difficultyLevel}
-                        </span>
-                        <span className="rounded-md bg-grayScale-100 px-2 py-0.5 text-xs font-medium text-grayScale-600">{question.points} pt{question.points !== 1 ? "s" : ""}</span>
+                  </div>
+                  <div className="bg-grayScale-50/50 px-6 py-4">
+                    <span className="text-sm text-grayScale-500">
+                      Description
+                    </span>
+                    {descriptionPreviewHtml ? (
+                      <div
+                        className="mt-2 rounded-lg border border-grayScale-200 bg-white px-4 py-3 text-sm leading-relaxed text-grayScale-800 [&_h1]:text-xl [&_h1]:font-semibold [&_h2]:text-lg [&_h2]:font-semibold [&_ol]:list-decimal [&_ol]:pl-6 [&_p]:mb-2 [&_strong]:font-semibold [&_ul]:list-disc [&_ul]:pl-6"
+                        dangerouslySetInnerHTML={{
+                          __html: descriptionPreviewHtml,
+                        }}
+                      />
+                    ) : (
+                      <p className="mt-2 text-sm text-grayScale-400">—</p>
+                    )}
+                  </div>
+                  <div className="flex justify-between px-6 py-3.5">
+                    <span className="text-sm text-grayScale-500">
+                      Intro video URL
+                    </span>
+                    <span className="max-w-[min(28rem,55%)] break-all text-right text-sm text-grayScale-700">
+                      {introVideoUrl.trim() || "—"}
+                    </span>
+                  </div>
+                  {introVideoPreview ? (
+                    <div className="bg-grayScale-50/50 px-6 py-4">
+                      <span className="text-sm text-grayScale-500">
+                        Intro video preview
+                      </span>
+                      <div className="mt-2 rounded-lg border border-grayScale-200 bg-white p-3">
+                        {introVideoPreview.kind === "vimeo" ? (
+                          <div className="overflow-hidden rounded-lg border border-grayScale-200 bg-black">
+                            <iframe
+                              src={introVideoPreview.url}
+                              title="Intro video preview"
+                              className="aspect-video w-full"
+                              allow="autoplay; fullscreen; picture-in-picture"
+                              allowFullScreen
+                            />
+                          </div>
+                        ) : (
+                          <video
+                            controls
+                            src={introVideoPreview.url}
+                            className="aspect-video w-full rounded-lg border border-grayScale-200 bg-black"
+                          />
+                        )}
                       </div>
-                      {question.questionType === "MCQ" && question.options.length > 0 && (
-                        <div className="mt-2 space-y-1">
-                          {question.options.map((opt, i) => (
-                            <div
-                              key={i}
-                              className={`flex items-center gap-2 rounded-md px-2.5 py-1.5 text-sm ${
-                                opt.isCorrect ? "bg-green-50 font-medium text-green-700" : "text-grayScale-600"
-                              }`}
-                            >
-                              {opt.isCorrect && <Check className="h-3.5 w-3.5" />}
-                              {opt.text || `Option ${i + 1}`}
-                            </div>
-                          ))}
+                    </div>
+                  ) : null}
+                  <div className="flex justify-between bg-grayScale-50/50 px-6 py-3.5">
+                    <span className="text-sm text-grayScale-500">
+                      Passing Score
+                    </span>
+                    <span className="text-sm font-medium text-grayScale-900">
+                      {passingScore}%
+                    </span>
+                  </div>
+                  <div className="flex justify-between px-6 py-3.5">
+                    <span className="text-sm text-grayScale-500">
+                      Time Limit
+                    </span>
+                    <span className="text-sm font-medium text-grayScale-900">
+                      {timeLimitMinutes} minutes
+                    </span>
+                  </div>
+                  <div className="flex justify-between bg-grayScale-50/50 px-6 py-3.5">
+                    <span className="text-sm text-grayScale-500">
+                      Shuffle Questions
+                    </span>
+                    <span className="text-sm font-medium text-grayScale-900">
+                      {shuffleQuestions ? "Yes" : "No"}
+                    </span>
+                  </div>
+                  <div className="flex justify-between px-6 py-3.5">
+                    <span className="text-sm text-grayScale-500">Persona</span>
+                    <div className="flex items-center gap-2">
+                      {selectedPersona && (
+                        <div className="h-6 w-6 overflow-hidden rounded-full bg-grayScale-100 ring-2 ring-brand-100">
+                          <img
+                            src={
+                              PERSONAS.find((p) => p.id === selectedPersona)
+                                ?.avatar
+                            }
+                            alt="Persona"
+                            className="h-full w-full object-cover"
+                          />
                         </div>
                       )}
-                      {question.tips && (
-                        <p className="rounded-md bg-amber-50 px-2.5 py-1.5 text-xs text-amber-600">💡 Tip: {question.tips}</p>
-                      )}
-                      {question.explanation && (
-                        <p className="rounded-md bg-grayScale-50 px-2.5 py-1.5 text-xs text-grayScale-500">Explanation: {question.explanation}</p>
-                      )}
+                      <span className="text-sm font-medium text-brand-600">
+                        {PERSONAS.find((p) => p.id === selectedPersona)?.name ||
+                          "None selected"}
+                      </span>
                     </div>
                   </div>
                 </div>
-              ))}
-            </div>
-          </Card>
-          </div>
+              </Card>
 
-          {saveError && (
-            <div className="rounded-lg border border-red-200 bg-red-50 px-4 py-3">
-              <p className="text-sm font-medium text-red-600">{saveError}</p>
+              {/* Questions Review */}
+              <Card className="overflow-hidden border-grayScale-200/80 p-0 shadow-sm lg:min-h-0">
+                <div className="flex items-center justify-between border-b border-grayScale-100 px-6 py-4">
+                  <div className="flex items-center gap-2.5">
+                    <h3 className="font-semibold text-grayScale-900">
+                      Questions
+                    </h3>
+                    <span className="flex h-6 w-6 items-center justify-center rounded-full bg-brand-100 text-xs font-semibold text-brand-600">
+                      {questions.length}
+                    </span>
+                  </div>
+                  <button
+                    onClick={() => setCurrentStep(3)}
+                    className="flex items-center gap-1.5 rounded-md px-2.5 py-1 text-sm font-medium text-brand-500 transition-colors hover:bg-brand-50 hover:text-brand-600"
+                  >
+                    <Edit className="h-3.5 w-3.5" />
+                    Edit
+                  </button>
+                </div>
+                <div className="max-h-[min(70vh,52rem)] space-y-3 overflow-y-auto px-4 py-4 sm:px-6">
+                  {questions.map((question, index) => (
+                    <div
+                      key={question.id}
+                      className="rounded-xl border border-grayScale-200 bg-grayScale-50/20 p-4 transition-colors hover:border-grayScale-300 sm:p-4"
+                    >
+                      <div className="flex items-start gap-3">
+                        <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-brand-100 text-xs font-bold text-brand-600">
+                          {index + 1}
+                        </span>
+                        <div className="flex-1 space-y-2.5">
+                          <p className="text-sm font-medium leading-relaxed text-grayScale-900">
+                            {question.questionText}
+                          </p>
+                          <div className="flex flex-wrap items-center gap-2">
+                            <span className="rounded-md bg-blue-50 px-2 py-0.5 text-xs font-medium text-blue-600">
+                              {question.questionType === "MCQ"
+                                ? "Multiple Choice"
+                                : question.questionType === "TRUE_FALSE"
+                                  ? "True/False"
+                                  : question.questionType === "AUDIO"
+                                    ? "Audio"
+                                    : "Short Answer"}
+                            </span>
+                            <span className="rounded-md bg-purple-50 px-2 py-0.5 text-xs font-medium text-purple-600">
+                              {question.difficultyLevel}
+                            </span>
+                            <span className="rounded-md bg-grayScale-100 px-2 py-0.5 text-xs font-medium text-grayScale-600">
+                              {question.points} pt
+                              {question.points !== 1 ? "s" : ""}
+                            </span>
+                          </div>
+                          {question.questionType === "MCQ" &&
+                            question.options.length > 0 && (
+                              <div className="mt-2 space-y-1">
+                                {question.options.map((opt, i) => (
+                                  <div
+                                    key={i}
+                                    className={`flex items-center gap-2 rounded-md px-2.5 py-1.5 text-sm ${
+                                      opt.isCorrect
+                                        ? "bg-green-50 font-medium text-green-700"
+                                        : "text-grayScale-600"
+                                    }`}
+                                  >
+                                    {opt.isCorrect && (
+                                      <Check className="h-3.5 w-3.5" />
+                                    )}
+                                    {opt.text || `Option ${i + 1}`}
+                                  </div>
+                                ))}
+                              </div>
+                            )}
+                          {question.tips && (
+                            <p className="rounded-md bg-amber-50 px-2.5 py-1.5 text-xs text-amber-600">
+                              💡 Tip: {question.tips}
+                            </p>
+                          )}
+                          {question.explanation && (
+                            <p className="rounded-md bg-grayScale-50 px-2.5 py-1.5 text-xs text-grayScale-500">
+                              Explanation: {question.explanation}
+                            </p>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </Card>
             </div>
-          )}
 
-          <div className="flex flex-col-reverse items-stretch justify-between gap-3 rounded-2xl border border-grayScale-200/80 bg-grayScale-50/30 px-4 py-4 sm:flex-row sm:items-center sm:px-6 sm:py-5">
-            <Button variant="outline" onClick={handleBack} className="sm:w-auto">
-              Back
-            </Button>
-            <div className="flex w-full flex-col gap-3 sm:w-auto sm:flex-row sm:justify-end">
-              <Button variant="outline" onClick={handleSaveAsDraft} disabled={saving} className="sm:min-w-[140px]">
-                {saving ? "Saving..." : "Save as Draft"}
-              </Button>
-              <Button className="bg-brand-500 hover:bg-brand-600 sm:min-w-[160px]" onClick={handlePublish} disabled={saving}>
-                <Rocket className="mr-2 h-4 w-4" />
-                {saving ? "Publishing..." : "Publish Now"}
-              </Button>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* Step 5: Result */}
-      {currentStep === 5 && resultStatus && (
-        <div className="flex flex-col items-center justify-center px-4 py-20">
-          {resultStatus === "success" ? (
-            <>
-              <div className="flex h-32 w-32 items-center justify-center rounded-full bg-gradient-to-br from-brand-100 to-brand-200 shadow-lg shadow-brand-100/50">
-                <svg viewBox="0 0 24 24" className="h-16 w-16 text-brand-500" fill="none" stroke="currentColor" strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round">
-                  <path d="M20 6 9 17l-5-5" />
-                </svg>
+            {saveError && (
+              <div className="rounded-lg border border-red-200 bg-red-50 px-4 py-3">
+                <p className="text-sm font-medium text-red-600">{saveError}</p>
               </div>
-              <h2 className="mt-8 text-center text-2xl font-bold tracking-tight text-grayScale-900">
-                Practice Published Successfully!
-              </h2>
-              <p className="mt-3 text-center text-sm text-grayScale-500">{resultMessage}</p>
-              <div className="mt-10 flex w-full max-w-sm flex-col gap-3">
-                <Button
-                  className="w-full bg-brand-500 hover:bg-brand-600"
-                  onClick={() => navigate(backTo)}
-                >
-                  Go back to Course
-                </Button>
+            )}
+
+            <div className="flex flex-col-reverse items-stretch justify-between gap-3 rounded-2xl border border-grayScale-200/80 bg-grayScale-50/30 px-4 py-4 sm:flex-row sm:items-center sm:px-6 sm:py-5">
+              <Button
+                variant="outline"
+                onClick={handleBack}
+                className="sm:w-auto"
+              >
+                Back
+              </Button>
+              <div className="flex w-full flex-col gap-3 sm:w-auto sm:flex-row sm:justify-end">
                 <Button
                   variant="outline"
-                  className="w-full border-brand-500 text-brand-500 hover:bg-brand-50"
-                  onClick={() => {
-                    setCurrentStep(1)
-                    setPracticeTitle("")
-                    setPracticeDescription("")
-                    setIntroVideoUrl("")
-                    setShuffleQuestions(false)
-                    setPassingScore(50)
-                    setTimeLimitMinutes(60)
-                    setSelectedPersona(null)
-                    setQuestions([createEmptyQuestion("1")])
-                    setSaveError(null)
-                    setResultStatus(null)
-                    setResultMessage("")
-                  }}
+                  onClick={handleSaveAsDraft}
+                  disabled={saving}
+                  className="sm:min-w-[140px]"
                 >
-                  Add Another Practice
+                  {saving ? "Saving..." : "Save as Draft"}
                 </Button>
-              </div>
-            </>
-          ) : (
-            <>
-              <div className="flex h-32 w-32 items-center justify-center rounded-full bg-gradient-to-br from-amber-100 to-amber-200 shadow-lg shadow-amber-100/50">
-                <svg viewBox="0 0 24 24" className="h-16 w-16 text-amber-500" fill="none" stroke="currentColor" strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round">
-                  <path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
-                  <line x1="12" y1="9" x2="12" y2="13" />
-                  <line x1="12" y1="17" x2="12.01" y2="17" />
-                </svg>
-              </div>
-              <h2 className="mt-8 text-center text-2xl font-bold tracking-tight text-grayScale-900">
-                Publish Error!
-              </h2>
-              <p className="mt-3 max-w-md text-center text-sm text-grayScale-500">{resultMessage}</p>
-              <div className="mt-10 flex w-full max-w-sm flex-col gap-3">
                 <Button
-                  className="w-full bg-brand-500 hover:bg-brand-600"
-                  onClick={() => {
-                    setCurrentStep(4)
-                    setResultStatus(null)
-                  }}
+                  className="bg-brand-500 hover:bg-brand-600 sm:min-w-[160px]"
+                  onClick={handlePublish}
+                  disabled={saving}
                 >
-                  Try Again
+                  <Rocket className="mr-2 h-4 w-4" />
+                  {saving ? "Publishing..." : "Publish Now"}
                 </Button>
               </div>
-            </>
-          )}
-        </div>
-      )}
+            </div>
+          </div>
+        )}
+
+        {/* Step 5: Result */}
+        {currentStep === 5 && resultStatus && (
+          <div className="flex flex-col items-center justify-center px-4 py-20">
+            {resultStatus === "success" ? (
+              <>
+                <div className="flex h-32 w-32 items-center justify-center rounded-full bg-gradient-to-br from-brand-100 to-brand-200 shadow-lg shadow-brand-100/50">
+                  <svg
+                    viewBox="0 0 24 24"
+                    className="h-16 w-16 text-brand-500"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth={2.5}
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
+                    <path d="M20 6 9 17l-5-5" />
+                  </svg>
+                </div>
+                <h2 className="mt-8 text-center text-2xl font-bold tracking-tight text-grayScale-900">
+                  Practice Published Successfully!
+                </h2>
+                <p className="mt-3 text-center text-sm text-grayScale-500">
+                  {resultMessage}
+                </p>
+                <div className="mt-10 flex w-full max-w-sm flex-col gap-3">
+                  <Button
+                    className="w-full bg-brand-500 hover:bg-brand-600"
+                    onClick={() => navigate(backTo)}
+                  >
+                    Go back to Course
+                  </Button>
+                  <Button
+                    variant="outline"
+                    className="w-full border-brand-500 text-brand-500 hover:bg-brand-50"
+                    onClick={() => {
+                      setCurrentStep(1);
+                      setPracticeTitle("");
+                      setPracticeDescription("");
+                      setIntroVideoUrl("");
+                      setShuffleQuestions(false);
+                      setPassingScore(50);
+                      setTimeLimitMinutes(60);
+                      setSelectedPersona(null);
+                      setQuestions([createEmptyQuestion("1")]);
+                      setSaveError(null);
+                      setResultStatus(null);
+                      setResultMessage("");
+                    }}
+                  >
+                    Add Another Practice
+                  </Button>
+                </div>
+              </>
+            ) : (
+              <>
+                <div className="flex h-32 w-32 items-center justify-center rounded-full bg-gradient-to-br from-amber-100 to-amber-200 shadow-lg shadow-amber-100/50">
+                  <svg
+                    viewBox="0 0 24 24"
+                    className="h-16 w-16 text-amber-500"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth={2.5}
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
+                    <path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
+                    <line x1="12" y1="9" x2="12" y2="13" />
+                    <line x1="12" y1="17" x2="12.01" y2="17" />
+                  </svg>
+                </div>
+                <h2 className="mt-8 text-center text-2xl font-bold tracking-tight text-grayScale-900">
+                  Publish Error!
+                </h2>
+                <p className="mt-3 max-w-md text-center text-sm text-grayScale-500">
+                  {resultMessage}
+                </p>
+                <div className="mt-10 flex w-full max-w-sm flex-col gap-3">
+                  <Button
+                    className="w-full bg-brand-500 hover:bg-brand-600"
+                    onClick={() => {
+                      setCurrentStep(4);
+                      setResultStatus(null);
+                    }}
+                  >
+                    Try Again
+                  </Button>
+                </div>
+              </>
+            )}
+          </div>
+        )}
       </div>
     </div>
-  )
+  );
 }
diff --git a/src/pages/content-management/AddPracticeFlow.tsx b/src/pages/content-management/AddPracticeFlow.tsx
index 7e3b742..360d16d 100644
--- a/src/pages/content-management/AddPracticeFlow.tsx
+++ b/src/pages/content-management/AddPracticeFlow.tsx
@@ -25,6 +25,7 @@ export function AddPracticeFlow() {
   const moduleId = searchParams.get("moduleId");
 
   const isModuleContext = backTo === "module";
+  const isCourseContext = backTo === "modules";
 
   const backLabel =
     backTo === "module"
@@ -73,7 +74,7 @@ export function AddPracticeFlow() {
 
   if (isPublished) {
     return (
-      <div className="flex flex-col items-center justify-center min-h-screen px-4 text-center pb-20 animate-in fade-in zoom-in duration-500 bg-white">
+      <div className="flex flex-col items-center justify-center min-h-screen px-4 text-center pb-20 animate-in fade-in zoom-in duration-500">
         <div className="mb-10 relative">
           <div className="absolute inset-0 bg-brand-500/10 blur-3xl rounded-full" />
           <img
@@ -82,16 +83,16 @@ export function AddPracticeFlow() {
             className="h-[128px] w-[128px] relative"
           />
         </div>
-        <h1 className="text-[32px] font-bold text-grayScale-900 mb-4">
+        <h1 className="text-[28px] font-bold text-grayScale-900 mb-2">
           Practice Published Successfully!
         </h1>
-        <p className="text-grayScale-600 text-lg mb-14 max-w-lg font-medium leading-relaxed">
+        <p className="text-grayScale-600 text-md mb-14 max-w-lg font-medium leading-relaxed">
           Your speaking practice is now active and available inside the module.
         </p>
         <div className="flex flex-col gap-4 w-full max-w-[400px]">
           <Button
             onClick={() => navigate(backPath)}
-            className="h-14 rounded-2xl bg-brand-500 font-bold shadow-xl shadow-brand-500/20 text-[17px] text-white hover:bg-brand-600 transition-all active:scale-95"
+            className="h-14 rounded-[6px] bg-[#9E2891] font-bold shadow-xl shadow-brand-500/20 text-[16px] text-white "
           >
             Go back to Module
           </Button>
@@ -106,7 +107,7 @@ export function AddPracticeFlow() {
               });
             }}
             variant="outline"
-            className="h-14 rounded-2xl border-brand-200 text-brand-500 font-bold hover:bg-brand-50 transition-all text-[17px] bg-white"
+            className="h-14 rounded-[6px] border-[#9E2891] text-[#9E2891] font-semibold text-[16px] bg-white "
           >
             Add Another Practice
           </Button>
@@ -128,6 +129,7 @@ export function AddPracticeFlow() {
               navigate={navigate}
               level={level!}
               isModuleContext={isModuleContext}
+              isCourseContext={isCourseContext}
             />
           );
         case 2:
@@ -182,6 +184,7 @@ export function AddPracticeFlow() {
               navigate={navigate}
               level={level!}
               isModuleContext={isModuleContext}
+              isCourseContext={isCourseContext}
             />
           );
         case 2:
@@ -219,40 +222,46 @@ export function AddPracticeFlow() {
   };
 
   return (
-    <div className="space-y-8 pb-32 px-6 pt-6 min-h-screen bg-[#F8FAFC]">
+    <div className="space-y-8 pb-32 px-6 pt-6 min-h-screen ">
       {/* Header */}
       <div className="mx-auto max-w-7xl w-full">
         <div className="flex items-center justify-between mb-8">
           <Link
             to={backPath}
-            className="flex items-center gap-2 text-[15px] font-medium text-grayScale-500 transition-colors hover:text-brand-500 decoration-none"
+            className="flex items-center gap-2 text-[15px] font-medium text-grayScale-600 transition-colors hover:text-brand-500 decoration-none"
           >
             <ArrowLeft className="h-4 w-4" />
             {backLabel}
           </Link>
-          <Button
-            variant="outline"
-            className="rounded-[8px] border-grayScale-200 text-grayScale-600 h-10 px-6 font-bold bg-white hover:bg-grayScale-50"
-            onClick={() => navigate(backPath)}
-          >
-            Cancel
-          </Button>
         </div>
 
-        <div className="space-y-4 mb-10">
-          <h1 className="text-4xl font-bold text-[#0F172A]">
-            Add New Practice
-          </h1>
-          <p className="text-grayScale-400 text-lg">
+        <div className=" mb-10">
+          <div className="flex items-center justify-between">
+            <h1 className="text-3xl font-bold text-[#0F172A]">
+              Add New Practice
+            </h1>
+            <Button
+              variant="outline"
+              className="rounded-[8px] border-grayScale-200 text-grayScale-600 h-10 px-6 font-bold bg-white hover:bg-grayScale-50"
+              onClick={() => navigate(backPath)}
+            >
+              Cancel
+            </Button>
+          </div>
+          <p className="text-grayScale-400 text-base">
             Create a new immersive practice session for students.
           </p>
         </div>
 
-        <div className="mx-auto max-w-4xl mb-12">
+        <div className="mx-auto w-[70%] mb-12">
           <Stepper steps={flowSteps} currentStep={currentStep} />
         </div>
 
-        <div className="mx-auto max-w-4xl">{renderStep()}</div>
+        <div
+          className={`mx-auto ${(!isModuleContext && currentStep === 3) || (isModuleContext && currentStep === 2) || currentStep === 5 ? "max-w-6xl" : "max-w-4xl"}`}
+        >
+          {renderStep()}
+        </div>
       </div>
     </div>
   );
diff --git a/src/pages/content-management/AddVideoFlow.tsx b/src/pages/content-management/AddVideoFlow.tsx
index 7086bd4..9278496 100644
--- a/src/pages/content-management/AddVideoFlow.tsx
+++ b/src/pages/content-management/AddVideoFlow.tsx
@@ -6,6 +6,7 @@ import { Stepper } from "../../components/ui/stepper";
 
 import { VideoDetailStep } from "./components/video-steps/VideoDetailStep";
 import { ReviewPublishStep } from "./components/video-steps/ReviewPublishStep";
+import successIcon from "../../assets/success.svg";
 
 const STEPS = [
   { id: 1, label: "Video Detail" },
@@ -37,43 +38,31 @@ export function AddVideoFlow() {
 
   if (isPublished) {
     return (
-      <div className="flex flex-col items-center justify-center min-h-screen px-4 text-center pb-20 animate-in fade-in zoom-in duration-500 bg-white">
+      <div className="flex flex-col items-center justify-center min-h-screen px-4 text-center pb-20 animate-in fade-in zoom-in duration-500 ">
         {/* Success Icon Wrapper (Jagged Circle Style) */}
         <div className="mb-12 relative scale-110">
           <div className="absolute inset-0 bg-brand-500/5 blur-3xl rounded-full" />
           <div className="relative">
-            <div
-              className="h-24 w-24 bg-brand-500 flex items-center justify-center"
-              style={{
-                clipPath:
-                  "polygon(50% 0%, 61% 10%, 75% 10%, 80% 24%, 94% 30%, 90% 44%, 100% 56%, 90% 68%, 94% 82%, 80% 88%, 75% 100%, 61% 100%, 50% 90%, 39% 100%, 25% 100%, 20% 88%, 6% 82%, 10% 68%, 0% 56%, 10% 44%, 6% 30%, 20% 24%, 25% 10%, 39% 10%)",
-              }}
-            >
-              <Check className="h-12 w-12 text-white stroke-[4px]" />
-            </div>
-            {/* Sub-Jagged layer for depth if needed */}
-            <div
-              className="absolute inset-0 bg-brand-500/20 scale-110 -z-10"
-              style={{
-                clipPath:
-                  "polygon(50% 0%, 61% 10%, 75% 10%, 80% 24%, 94% 30%, 90% 44%, 100% 56%, 90% 68%, 94% 82%, 80% 88%, 75% 100%, 61% 100%, 50% 90%, 39% 100%, 25% 100%, 20% 88%, 6% 82%, 10% 68%, 0% 56%, 10% 44%, 6% 30%, 20% 24%, 25% 10%, 39% 10%)",
-                opacity: 0.3,
-              }}
+            <div className="absolute inset-0 bg-brand-500/10 blur-3xl rounded-full" />
+            <img
+              src={successIcon}
+              alt="Success"
+              className="h-[128px] w-[128px] relative"
             />
           </div>
         </div>
 
-        <h1 className="text-[32px] font-bold text-grayScale-900 mb-4">
+        <h1 className="text-[26px] font-bold text-grayScale-900 mb-4">
           Video Published Successfully!
         </h1>
-        <p className="text-grayScale-600 text-lg mb-14 max-w-lg font-medium leading-relaxed">
+        <p className="text-grayScale-600 text-base mb-14 max-w-lg font-medium leading-relaxed">
           Your video is now live and available inside the selected module.
         </p>
 
         <div className="flex flex-col gap-4 w-full max-w-[400px]">
           <Button
             onClick={() => navigate(`/new-content/learn-english/${level}`)}
-            className="h-14 rounded-2xl bg-brand-500 font-bold shadow-xl shadow-brand-500/20 text-[17px] text-white hover:bg-brand-600 transition-all active:scale-95"
+            className="h-12 rounded-[6px] bg-brand-500 font-bold text-[17px] text-white  transition-all active:scale-95"
           >
             Go back to Learn English
           </Button>
@@ -90,7 +79,7 @@ export function AddVideoFlow() {
               setCurrentStep(1);
             }}
             variant="outline"
-            className="h-14 rounded-2xl border-brand-200 text-brand-500 font-bold hover:bg-brand-50 transition-all text-[17px] active:scale-95 bg-white"
+            className="h-12 rounded-[6px] border-brand-200 text-brand-500 font-bold text-[17px] active:scale-95 bg-white"
           >
             Add Another Video
           </Button>
@@ -100,7 +89,7 @@ export function AddVideoFlow() {
   }
 
   return (
-    <div className="space-y-8 pb-32 px-6 pt-6 min-h-screen bg-[#F8FAFC]">
+    <div className="space-y-8 pb-32 px-6 pt-6 min-h-screen ">
       {/* Header */}
       <div className="mx-auto max-w-7xl w-full">
         <div className="flex items-center justify-between mb-8">
@@ -120,7 +109,7 @@ export function AddVideoFlow() {
           </Button>
         </div>
 
-        <h1 className="text-4xl font-bold text-[#0F172A] mb-10">
+        <h1 className="text-2xl font-bold text-[#0F172A] mb-10">
           Add New Video
         </h1>
 
diff --git a/src/pages/content-management/AttachPracticeFlow.tsx b/src/pages/content-management/AttachPracticeFlow.tsx
new file mode 100644
index 0000000..948f51c
--- /dev/null
+++ b/src/pages/content-management/AttachPracticeFlow.tsx
@@ -0,0 +1,193 @@
+import { useState } from "react";
+import { Link, useNavigate, useParams } from "react-router-dom";
+import { ArrowLeft, Clock, FileVideo, Check } from "lucide-react";
+import { Button } from "../../components/ui/button";
+import { Stepper } from "../../components/ui/stepper";
+import successIcon from "../../assets/success.svg";
+
+import { AttachPracticeStep1 } from "./components/practice-steps/AttachPracticeStep1";
+import { AttachPracticeReviewStep } from "./components/practice-steps/AttachPracticeReviewStep";
+
+export function AttachPracticeFlow() {
+  const navigate = useNavigate();
+  const { programType, courseId, unitId, moduleId } = useParams<{
+    programType: string;
+    courseId: string;
+    unitId: string;
+    moduleId: string;
+  }>();
+
+  const backPath = `/new-content/courses/${programType}/${courseId}/${unitId}/${moduleId}`;
+  const [currentStep, setCurrentStep] = useState(1);
+  const [isPublished, setIsPublished] = useState(false);
+
+  const [formData, setFormData] = useState({
+    program:
+      programType === "skill"
+        ? "Skill-Based Courses"
+        : "English Proficiency Exams",
+    module: "Module 4: Interactive Speaking",
+    video: "Intro to Interactive Speaking",
+    questionType: "speaking",
+    version: "v1",
+  });
+
+  const steps = ["Set Video", "Review & Publish"];
+
+  const nextStep = () =>
+    setCurrentStep((prev) => Math.min(prev + 1, steps.length));
+  const prevStep = () => setCurrentStep((prev) => Math.max(prev - 1, 1));
+
+  if (isPublished) {
+    return (
+      <div className="flex flex-col items-center justify-center min-h-screen px-4 text-center pb-20 animate-in fade-in zoom-in duration-700 ">
+        {/* Scalloped Success Icon */}
+        <div className="mb-10 relative">
+          <div className="absolute inset-0 bg-brand-500/10 blur-3xl rounded-full" />
+          <img
+            src={successIcon}
+            alt="Success"
+            className="h-[128px] w-[128px] relative"
+          />
+        </div>
+
+        <h1 className="text-[28px] font-bold text-grayScale-900 mb-2">
+          Practice Attached Successfully!
+        </h1>
+        <p className="text-grayScale-600 text-md mb-14 max-w-2xl font-medium leading-relaxed">
+          The practice has been successfully linked to a video{" "}
+          <span className="text-[#9E2891]">“{formData.video}”</span>
+        </p>
+
+        {/* Video Info Card */}
+        <div className="w-full max-w-[600px] bg-[#9E289114] border border-[#9E2891] rounded-[12px] p-4 flex items-center justify-between mb-16 shadow-sm">
+          <div className="flex items-center gap-5">
+            <div className="h-[60px] w-[120px] rounded-xl overflow-hidden shadow-inner flex-shrink-0">
+              <img
+                src="https://images.unsplash.com/photo-1557425955-df376b5903c8?auto=format&fit=crop&q=80&w=400"
+                alt="Video Thumbnail"
+                className="w-full h-full object-cover"
+              />
+            </div>
+            <div className="text-left space-y-1.5">
+              <h4 className="text-[14px] font-medium text-grayScale-900">
+                Intro to IELTS Speaking Part 1
+              </h4>
+              <div className="flex items-center gap-3 text-grayScale-400 font-medium text-[12px]">
+                <div className="flex items-center gap-1.5 uppercase tracking-wide">
+                  <Clock className="h-3 w-3" />
+                  10:42 mins
+                </div>
+                <span>•</span>
+                <div className="flex items-center gap-1.5 uppercase tracking-wide">
+                  MP4
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="pr-4">
+            <Check className="h-5 w-5 text-[#9E2891] stroke-[3px]" />
+          </div>
+        </div>
+
+        {/* Action Buttons */}
+        <div className="flex flex-col gap-4 w-full max-w-[440px]">
+          <Button
+            onClick={() => navigate(backPath)}
+            className="h-14 rounded-[6px] bg-[#9E2891] font-bold shadow-xl shadow-brand-500/20 text-[16px] text-white"
+          >
+            Go back to Videos
+          </Button>
+          <Button
+            variant="outline"
+            onClick={() => {
+              setIsPublished(false);
+              setCurrentStep(1);
+            }}
+            className="h-14 rounded-[6px] border-[#9E2891] text-[#9E2891] font-semibold text-[16px] bg-white"
+          >
+            Attach More Practice
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  const renderStep = () => {
+    switch (currentStep) {
+      case 1:
+        return (
+          <AttachPracticeStep1
+            formData={formData}
+            setFormData={setFormData}
+            nextStep={nextStep}
+            onCancel={() => navigate(backPath)}
+          />
+        );
+      case 2:
+        return (
+          <AttachPracticeReviewStep
+            formData={formData}
+            prevStep={prevStep}
+            onPublish={() => setIsPublished(true)}
+          />
+        );
+      default:
+        return null;
+    }
+  };
+
+  const title =
+    currentStep === 1 ? "Attach Practice to a Video" : "Review & Publish";
+  const description =
+    currentStep === 1
+      ? "Create a new immersive practice session for a video."
+      : "Verify practice details before publishing it.";
+
+  return (
+    <div className="space-y-8 pb-32 px-6 pt-10 min-h-screen  animate-in fade-in duration-500">
+      <div className="mx-auto w-full">
+        {/* Navigation Breadcrumb */}
+        <div className="flex items-center justify-between mb-12">
+          <Link
+            to={backPath}
+            className="flex items-center gap-2 text-[15px] font-bold text-grayScale-600 transition-colors hover:text-brand-500 group"
+          >
+            <ArrowLeft className="h-5 w-5 transition-transform group-hover:-translate-x-1" />
+            Back to Videos
+          </Link>
+        </div>
+
+        {/* Stepper Area */}
+        <div className="mb-20 w-full pointer-events-none">
+          <Stepper steps={steps} currentStep={currentStep} />
+        </div>
+
+        {/* Page Title & Header Actions */}
+        <div className="mb-10 flex items-start justify-between">
+          <div className="">
+            <h1 className="text-[30px] font-bold text-[#0D1421] ">{title}</h1>
+            <p className="text-grayScale-400 text-[16px] font-medium ">
+              {description}
+            </p>
+          </div>
+          <div className="flex items-center gap-3">
+            <Button
+              variant="outline"
+              className="h-10 px-8 rounded-[6px] border-grayScale-100 text-grayScale-600 font-bold bg-white hover:bg-grayScale-50 shadow-sm"
+              onClick={() => navigate(backPath)}
+            >
+              Cancel
+            </Button>
+            <Button className="h-10 px-8 rounded-[6px] bg-[#9E2891] font-bold text-white shadow-md hover:bg-[#8A237E] transition-all">
+              Save as Draft
+            </Button>
+          </div>
+        </div>
+
+        {/* Form Content */}
+        <div className="w-full">{renderStep()}</div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/content-management/AttachProgramPracticeFlow.tsx b/src/pages/content-management/AttachProgramPracticeFlow.tsx
new file mode 100644
index 0000000..106fd63
--- /dev/null
+++ b/src/pages/content-management/AttachProgramPracticeFlow.tsx
@@ -0,0 +1,157 @@
+import { useState } from "react";
+import { Link, useNavigate, useParams } from "react-router-dom";
+import { ArrowLeft, Check } from "lucide-react";
+import { Button } from "../../components/ui/button";
+import { Stepper } from "../../components/ui/stepper";
+import successIcon from "../../assets/success.svg";
+
+import { ProgramAttachStep1 } from "./components/practice-steps/ProgramAttachStep1";
+import { ProgramAttachReviewStep } from "./components/practice-steps/ProgramAttachReviewStep";
+
+export function AttachProgramPracticeFlow() {
+  const navigate = useNavigate();
+  const { programType } = useParams<{ programType: string }>();
+
+  const backPath = `/new-content/courses/${programType}`;
+  const [currentStep, setCurrentStep] = useState(1);
+  const [isPublished, setIsPublished] = useState(false);
+
+  const [formData, setFormData] = useState({
+    program: "English Proficiency Exams",
+    test: "Mock Exam 1",
+    questionType: "Speaking Practice",
+    version: "V 1.0",
+  });
+
+  const steps = ["Set Program", "Review & Publish"];
+
+  const nextStep = () =>
+    setCurrentStep((prev) => Math.min(prev + 1, steps.length));
+  const prevStep = () => setCurrentStep((prev) => Math.max(prev - 1, 1));
+
+  if (isPublished) {
+    return (
+      <div className="flex flex-col items-center justify-center min-h-screen px-4 text-center pb-20 animate-in fade-in zoom-in duration-700 bg-white">
+        {/* Scalloped Success Icon */}
+        <div className="mb-10 relative">
+          <div className="absolute inset-0 bg-brand-500/10 blur-3xl rounded-full" />
+          <img
+            src={successIcon}
+            alt="Success"
+            className="h-[128px] w-[128px] relative"
+          />
+        </div>
+
+        <h1 className="text-[28px] font-bold text-grayScale-900 mb-2">
+          Practice Attached Successfully!
+        </h1>
+        <p className="text-grayScale-600 text-md mb-14 max-w-lg font-medium leading-relaxed">
+          The practice has been successfully linked to the program{" "}
+          <span className="text-[#9E2891]">“{formData.program}”</span>
+        </p>
+
+        <div className="flex flex-col gap-4 w-full max-w-[440px]">
+          <Button
+            onClick={() => navigate(backPath)}
+            className="h-14 rounded-[12px] bg-[#9E2891] font-bold shadow-xl shadow-brand-500/20 text-[16px] text-white "
+          >
+            Go back to Program
+          </Button>
+          <Button
+            variant="outline"
+            onClick={() => {
+              setIsPublished(false);
+              setCurrentStep(1);
+            }}
+            className="h-14 rounded-[12px] border-[#9E2891] text-[#9E2891] font-bold text-[16px] bg-white "
+          >
+            Attach More Practice
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  const renderStep = () => {
+    switch (currentStep) {
+      case 1:
+        return (
+          <ProgramAttachStep1
+            formData={formData}
+            setFormData={setFormData}
+            nextStep={nextStep}
+            onCancel={() => navigate(backPath)}
+          />
+        );
+      case 2:
+        return (
+          <ProgramAttachReviewStep
+            formData={formData}
+            prevStep={prevStep}
+            onPublish={() => setIsPublished(true)}
+            onCancel={() => navigate(backPath)}
+          />
+        );
+      default:
+        return null;
+    }
+  };
+
+  const title =
+    currentStep === 1 ? "Attach Practice to a program" : "Review & Publish";
+  const description =
+    currentStep === 1
+      ? "Create a new immersive practice session for a video."
+      : "Verify practice details before publishing it.";
+
+  return (
+    <div className="space-y-8 px-6 pt-10 min-h-screen animate-in fade-in duration-500">
+      <div className=" w-full">
+        {/* Navigation Breadcrumb */}
+        <div className="flex items-center justify-between mb-12">
+          <Link
+            to={backPath}
+            className="flex items-center gap-2 text-[15px] font-bold text-grayScale-600 transition-colors hover:text-brand-500 group"
+          >
+            <ArrowLeft className="h-5 w-5 transition-transform group-hover:-translate-x-1" />
+            Back to Program
+          </Link>
+        </div>
+
+        {/* Stepper Area */}
+        <div className="mb-20 pointer-events-none">
+          <Stepper steps={steps} currentStep={currentStep} />
+        </div>
+
+        {/* Page Title & Header Actions */}
+        <div className="mb-10 flex items-start justify-between">
+          <div className="">
+            <h1 className="text-[30px] font-bold text-[#0D1421] ">{title}</h1>
+            <p className="text-grayScale-500 text-[14px]">{description}</p>
+          </div>
+          <div className="flex items-center gap-3">
+            <Button
+              variant="outline"
+              className="h-10 px-8 rounded-[6px] border-grayScale-100 text-grayScale-600 font-bold bg-white hover:bg-grayScale-50 shadow-sm"
+              onClick={() => navigate(backPath)}
+            >
+              Cancel
+            </Button>
+            <Button className="h-10 px-8 rounded-[6px] bg-[#9E2891] font-bold text-white shadow-md hover:bg-[#8A237E] transition-all">
+              Save as Draft
+            </Button>
+          </div>
+        </div>
+
+        {/* Form Content */}
+        <div
+          className={`w-full mx-auto ${
+            currentStep === 1 ? "max-w-4xl" : "max-w-none"
+          }`}
+        >
+          {renderStep()}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/content-management/CourseDetailPage.tsx b/src/pages/content-management/CourseDetailPage.tsx
index 52896fd..1493eae 100644
--- a/src/pages/content-management/CourseDetailPage.tsx
+++ b/src/pages/content-management/CourseDetailPage.tsx
@@ -41,7 +41,7 @@ export function CourseDetailPage() {
   const [isAddModuleOpen, setIsAddModuleOpen] = useState(false);
 
   return (
-    <div className="space-y-10 pb-20">
+    <div className="space-y-10 pb-20 pt-10">
       {/* Header Navigation */}
       <div className="flex items-center gap-2">
         <Link
@@ -55,11 +55,11 @@ export function CourseDetailPage() {
 
       {/* Hero Section */}
       <div className="flex flex-col md:flex-row md:items-end justify-between gap-6">
-        <div className="space-y-2">
-          <h1 className="text-4xl font-extrabold text-grayScale-900 tracking-tight">
+        <div className="">
+          <h1 className="text-2xl font-medium text-grayScale-900 tracking-tight">
             {courseId?.toUpperCase() || "A1"}
           </h1>
-          <p className="text-grayScale-500 text-lg max-w-2xl font-medium">
+          <p className="text-grayScale-500 text-sm max-w-2xl font-medium">
             Learn basic English words, phrases, and simple sentences for daily
             situations.
           </p>
@@ -67,37 +67,51 @@ export function CourseDetailPage() {
         <div className="flex items-center gap-4">
           <Button
             variant="outline"
-            className="h-12 px-6 rounded-[6px] border-brand-500 text-brand-500 font-bold transition-all gap-2"
+            className="rounded-[6px] border-brand-500 text-brand-500 "
             onClick={() =>
               navigate(
                 `/new-content/learn-english/${level}/courses/add-practice?backTo=modules&courseId=${courseId}`,
               )
             }
           >
-            <Calendar className="h-5 w-5" />
+            <Calendar className="h-4 w-4" />
             Add Practice
           </Button>
           <Button
-            className="h-12 px-6 rounded-[6px] bg-brand-500 font-bold  shadow-lg shadow-brand-500/20 transition-all gap-2"
+            className="rounded-[6px] bg-brand-500 font-semibold hover:bg-brand-600"
             onClick={() => setIsAddModuleOpen(true)}
           >
-            <Plus className="h-5 w-5" />
+            <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">
+          <div className="w-full border-t border-grayScale-200" />
+        </div>
+        <div className="relative flex justify-center">
+          <div
+            className="h-[0.5px] w-full opacity-20 rounded-full"
+            style={{
+              background: "gray",
+            }}
+          />
+        </div>
+      </div>
 
       <AddModuleModal
         isOpen={isAddModuleOpen}
         onClose={() => setIsAddModuleOpen(false)}
       />
+      {/* Gradient Divider */}
 
       {/* Gradient Grid */}
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+      <div className="flex flex-warp gap-10">
         {MODULES.map((module) => (
           <Card
             key={module.id}
-            className="group overflow-hidden border border-grayScale-50 shadow-sm hover:shadow-lg transition-all duration-300 rounded-[16px] bg-white flex flex-col h-full"
+            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
@@ -107,19 +121,23 @@ export function CourseDetailPage() {
               )}
             />
 
-            <div className="p-2 pb-4 pt-8 flex-1 flex flex-col">
+            <div className="p-2 pb-4 pt-4 flex-1 flex flex-col">
               <div className="flex gap-4 mb-8">
                 {/* Icon Circle */}
-                <div className="h-12 w-12 rounded-full bg-[#f3e8ff] flex items-center justify-center p-3 flex-shrink-0 border border-purple-100/50">
-                  <module.icon className="h-6 w-6 text-brand-500" />
+                <div
+                  className={`h-12 w-12 rounded-full ${module.id === "m2" ? "bg-[#F8FAFC]" : "bg-[#f3e8ff]"} flex items-center justify-center p-3 flex-shrink-0 border border-purple-100/50`}
+                >
+                  <module.icon
+                    className={`h-6 w-6 ${module.id === "m2" ? "text-[#64748B]" : "text-brand-500"}`}
+                  />
                 </div>
 
                 {/* Content */}
                 <div className="space-y-1">
-                  <h3 className="text-xl font-bold text-[#0F172A] tracking-tight">
+                  <h3 className="text-lg font-bold text-[#0F172A] tracking-tight">
                     {module.title}
                   </h3>
-                  <p className="text-grayScale-400 font-medium leading-normal text-[14px]">
+                  <p className="text-grayScale-400 font-medium  text-[12px]">
                     {module.description}
                   </p>
                 </div>
@@ -129,7 +147,7 @@ export function CourseDetailPage() {
               <div className="flex items-center gap-3 mt-auto">
                 <Button
                   variant="outline"
-                  className="flex-1 h-12 rounded-[6px] border-[#9E2891] text-[#9E2891] font-bold  transition-all text-sm"
+                  className="flex-1 h-10 rounded-[6px] border-[#9E2891] text-[#9E2891]  transition-all text-sm"
                   onClick={() =>
                     navigate(
                       `/new-content/learn-english/${level}/courses/${courseId}/modules/${module.id}`,
@@ -141,12 +159,12 @@ export function CourseDetailPage() {
                 {module.status === "Published" ? (
                   <Button
                     disabled
-                    className="flex-1 h-12 rounded-[6px] bg-[#D291BC] text-white font-bold opacity-100 cursor-default border-none shadow-none text-sm"
+                    className="flex-1 h-10 rounded-[6px] bg-[#D291BC] text-white  opacity-100 cursor-default border-none shadow-none text-sm"
                   >
                     Published
                   </Button>
                 ) : (
-                  <Button className="flex-1 h-12 rounded-[6px] bg-brand-500 text-white font-bold  shadow-md shadow-brand-500/10 text-sm">
+                  <Button className="flex-1 h-10 rounded-[6px] bg-brand-500 text-white  shadow-md shadow-brand-500/10 text-sm">
                     Publish Practice
                   </Button>
                 )}
diff --git a/src/pages/content-management/CourseManagementPage.tsx b/src/pages/content-management/CourseManagementPage.tsx
new file mode 100644
index 0000000..f423d1b
--- /dev/null
+++ b/src/pages/content-management/CourseManagementPage.tsx
@@ -0,0 +1,264 @@
+import { Link, useParams, useNavigate } from "react-router-dom";
+import {
+  ArrowLeft,
+  Plus,
+  FileText,
+  LayoutGrid,
+  PlayCircle,
+  ClipboardCheck,
+  ChevronRight,
+  ArrowRight,
+  X,
+} from "lucide-react";
+import { Button } from "../../components/ui/button";
+import { Card } from "../../components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DialogClose,
+} from "../../components/ui/dialog";
+import { Input } from "../../components/ui/input";
+import uploadIcon from "../../assets/icons/upload.png";
+
+export function CourseManagementPage() {
+  const navigate = useNavigate();
+  const { programType, courseId } = useParams<{
+    programType: string;
+    courseId: string;
+  }>();
+
+  // Mock data for display titles
+  const courseTitles: Record<string, string> = {
+    duolingo: "Duolingo English Test",
+    ielts: "IELTS Academic",
+  };
+
+  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%)",
+    },
+  ];
+
+  return (
+    <div className="space-y-8 animate-in fade-in duration-500 pb-10">
+      {/* Navigation */}
+      <Link
+        to={`/new-content/courses/${programType}`}
+        className="flex items-center gap-2.5 text-[15px] font-semibold text-grayScale-600 hover:text-brand-500 transition-colors pt-4 group"
+      >
+        <ArrowLeft className="h-5 w-5 transition-transform group-hover:-translate-x-1" />
+        Back to Courses
+      </Link>
+
+      {/* Header section */}
+      <div className="flex items-start justify-between">
+        <div className="space-y-2">
+          <h1 className="text-[28px] font-medium tracking-tight text-grayScale-900">
+            {courseDisplayName}
+          </h1>
+          <p className="max-w-2xl text-[15px] font-medium leading-relaxed text-grayScale-500">
+            Manage units and modules inside the {courseDisplayName}
+          </p>
+        </div>
+
+        <div className="flex items-center gap-3 pt-2">
+          <Dialog>
+            <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">
+                  <DialogTitle className="text-[20px] font-bold relative top-2 text-grayScale-900">
+                    Create Courses
+                  </DialogTitle>
+                </DialogHeader>
+
+                <div className="p-8 space-y-8">
+                  <div className="space-y-3">
+                    <label className="text-[15px] text-grayScale-800">
+                      Unit Name
+                    </label>
+                    <Input
+                      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"
+                    />
+                  </div>
+
+                  <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 ">
+                        <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">
+                            Click to upload
+                          </span>{" "}
+                          <span className="text-grayScale-500">
+                            or drag and drop
+                          </span>
+                        </p>
+                        <p className="mt-1.5 text-[12px] text-grayScale-400 uppercase tracking-widest">
+                          JPG, PNG (MAX 1 MB)
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="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"
+                    >
+                      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>
+                </div>
+              </div>
+            </DialogContent>
+          </Dialog>
+
+          <Button
+            variant="outline"
+            className="h-10 px-6 rounded-[6px] border-brand-500 text-brand-500 font-bold hover:bg-brand-50 transition-all flex items-center gap-2"
+            onClick={() =>
+              navigate(`/new-content/courses/${programType}/attach-practice`)
+            }
+          >
+            <FileText className="h-5 w-5" />
+            Attach Practice
+          </Button>
+        </div>
+      </div>
+
+      {/* Horizontal Divider */}
+      <div className="relative">
+        <div className="absolute inset-0 flex items-center" aria-hidden="true">
+          <div className="w-full border-t border-grayScale-200" />
+        </div>
+        <div className="relative flex justify-center">
+          <div
+            className="h-[0.5px] w-full opacity-20 rounded-full"
+            style={{
+              background: "gray",
+            }}
+          />
+        </div>
+      </div>
+
+      {/* Grid of Units */}
+      <div className="flex flex-wrap gap-4 pt-4">
+        {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"
+          >
+            {/* Gradient Header */}
+            <div
+              className="h-36 w-full transition-transform duration-500 "
+              style={{ background: unit.gradient }}
+            />
+
+            <div className="p-4 flex flex-col flex-1 space-y-6">
+              <div className="space-y-3 flex-1">
+                <h3 className="text-[18px] font-medium text-grayScale-900  transition-colors">
+                  {unit.name}
+                </h3>
+                <p className="text-[12px] text-grayScale-500 font-medium line-clamp-3">
+                  {unit.description}
+                </p>
+              </div>
+
+              {/* Stats Pills */}
+              <div className="flex flex-wrap gap-3">
+                <div className="h-9 px-3 rounded-[6px] bg-grayScale-100 border border-grayScale-100 flex items-center gap-2 text-grayScale-600">
+                  <LayoutGrid className="h-3.5 w-3.5 text-grayScale-400" />
+                  <span className="text-[12px] font-bold">
+                    {unit.modules} Modules
+                  </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">
+                  <PlayCircle className="h-3.5 w-3.5 text-grayScale-400" />
+                  <span className="text-[12px] font-bold">
+                    {unit.videos} Videos
+                  </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">
+                  <ClipboardCheck className="h-3.5 w-3.5 text-grayScale-400" />
+                  <span className="text-[12px] font-bold">
+                    {unit.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}/${unit.id}`,
+                  )
+                }
+              >
+                View Detail
+                <ArrowRight className="ml-2 h-4 w-4" />
+              </Button>
+            </div>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/content-management/CourseModuleDetailPage.tsx b/src/pages/content-management/CourseModuleDetailPage.tsx
new file mode 100644
index 0000000..fdda4ab
--- /dev/null
+++ b/src/pages/content-management/CourseModuleDetailPage.tsx
@@ -0,0 +1,248 @@
+import { useState } from "react";
+import { ArrowLeft, Plus, FileText, MoreVertical, Edit2 } 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]",
+  },
+];
+
+const MOCK_PRACTICES = [
+  {
+    id: "p1",
+    title: "1.1 Conversation Practice",
+    duration: "08:45",
+    status: "Published",
+    thumbnailColor: "bg-[#E0F2FE]",
+  },
+  {
+    id: "p2",
+    title: "1.2 Roleplay Scenario",
+    duration: "08:45",
+    status: "Draft",
+    thumbnailColor: "bg-[#F0FDF4]",
+  },
+];
+
+export function CourseModuleDetailPage() {
+  const navigate = useNavigate();
+  const { programType, courseId, unitId, moduleId } = useParams<{
+    programType: string;
+    courseId: string;
+    unitId: string;
+    moduleId: string;
+  }>();
+
+  const [activeTab, setActiveTab] = useState<"video" | "practice">("video");
+  const [activeFilter, setActiveFilter] = useState("All");
+
+  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;
+  });
+
+  return (
+    <div className="space-y-8 animate-in fade-in duration-500 pb-10">
+      {/* Navigation */}
+      <Link
+        to={`/new-content/courses/${programType}/${courseId}/${unitId}`}
+        className="flex items-center gap-2.5 text-[15px] font-bold text-grayScale-600 hover:text-brand-500 transition-colors pt-4 group"
+      >
+        <ArrowLeft className="h-5 w-5 transition-transform group-hover:-translate-x-1" />
+        Back to Modules
+      </Link>
+
+      {/* Header section */}
+      <div className="flex items-start justify-between">
+        <div className="space-y-2">
+          <h1 className="text-[32px] font-extrabold tracking-tight text-[#0D1421]">
+            {moduleTitle}
+          </h1>
+          <p className="max-w-2xl text-[16px] font-medium leading-relaxed text-grayScale-400">
+            {moduleDescription}
+          </p>
+        </div>
+
+        <div className="flex items-center gap-3 pt-2">
+          <Button
+            variant="outline"
+            className="h-10 px-6 rounded-[6px] border-brand-500 text-brand-500 font-bold hover:bg-brand-50 transition-all flex items-center gap-2 shadow-sm"
+            onClick={() =>
+              navigate(
+                `/new-content/courses/${programType}/${courseId}/unit/${unitId}/module/${moduleId}/attach-practice`,
+              )
+            }
+          >
+            <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>
+        </div>
+      </div>
+
+      {/* Tabs */}
+      <div className="flex gap-10 border-b border-grayScale-100">
+        <button
+          onClick={() => setActiveTab("video")}
+          className={cn(
+            "pb-4 text-[16px] font-bold transition-all relative px-2",
+            activeTab === "video"
+              ? "text-brand-500 after:absolute after:bottom-0 after:left-0 after:right-0 after:h-[2px] after:bg-brand-500"
+              : "text-grayScale-400 hover:text-grayScale-600",
+          )}
+        >
+          Video
+        </button>
+        <button
+          onClick={() => setActiveTab("practice")}
+          className={cn(
+            "pb-4 text-[16px] font-bold transition-all relative px-2",
+            activeTab === "practice"
+              ? "text-brand-500 after:absolute after:bottom-0 after:left-0 after:right-0 after:h-[2px] after:bg-brand-500"
+              : "text-grayScale-400 hover:text-grayScale-600",
+          )}
+        >
+          Practice
+        </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} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function ContentCard({
+  title,
+  duration,
+  status,
+  thumbnailColor,
+}: {
+  title: string;
+  duration: string;
+  status: string;
+  thumbnailColor: string;
+}) {
+  return (
+    <Card className="group flex flex-col bg-white rounded-[20px] border border-grayScale-50 overflow-hidden shadow-sm hover:shadow-xl hover:shadow-grayScale-400/5 transition-all">
+      {/* Thumbnail Area */}
+      <div className={cn("h-44 w-full relative", thumbnailColor)}>
+        <div className="absolute bottom-3 right-3 bg-black/60 text-white text-[11px] font-bold px-2 py-0.5 rounded backdrop-blur-sm">
+          {duration}
+        </div>
+      </div>
+
+      <div className="p-5 flex flex-col flex-1 space-y-5">
+        <div className="flex items-center justify-between">
+          <div
+            className={cn(
+              "px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider flex items-center gap-2 border",
+              status === "Published"
+                ? "bg-[#F0FDF4] text-[#16A34A] border-[#DCFCE7]"
+                : "bg-grayScale-50 text-grayScale-400 border-grayScale-100",
+            )}
+          >
+            <div
+              className={cn(
+                "h-1.5 w-1.5 rounded-full",
+                status === "Published" ? "bg-[#16A34A]" : "bg-grayScale-300",
+              )}
+            />
+            {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>
+
+        <h3 className="text-[14px] font-bold text-[#0F172A] line-clamp-2 leading-snug">
+          {title}
+        </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" />
+            Edit
+          </Button>
+          <Button
+            className={cn(
+              "w-full h-10 rounded-[10px] font-bold text-xs shadow-sm",
+              status === "Published"
+                ? "bg-[#ECD5E9] text-[#9E2891] hover:bg-[#EBD0E7]"
+                : "bg-brand-500 text-white hover:bg-brand-600",
+            )}
+          >
+            {status === "Published" ? "Published" : "Publish"}
+          </Button>
+        </div>
+      </div>
+    </Card>
+  );
+}
diff --git a/src/pages/content-management/LearnEnglishPage.tsx b/src/pages/content-management/LearnEnglishPage.tsx
index 05e5070..c2db052 100644
--- a/src/pages/content-management/LearnEnglishPage.tsx
+++ b/src/pages/content-management/LearnEnglishPage.tsx
@@ -52,7 +52,7 @@ export function LearnEnglishPage() {
 
         <Dialog>
           <DialogTrigger asChild>
-            <Button className="h-11 rounded-xl bg-brand-500 px-6 font-semibold hover:bg-brand-600">
+            <Button className="h-11 rounded-[6px] bg-brand-500 px-6 font-semibold ">
               <Plus className="mr-2 h-5 w-5" />
               Add Program
             </Button>
@@ -72,7 +72,7 @@ export function LearnEnglishPage() {
                 className="absolute inset-0 flex items-center"
                 aria-hidden="true"
               >
-                <div className="w-full border-t border-grayScale-100" />
+                <div className="w-full border-t border-grayScale-200" />
               </div>
               <div className="relative flex justify-center">
                 <div
@@ -86,17 +86,17 @@ export function LearnEnglishPage() {
 
             <form className="space-y-6 p-8 pt-4">
               <div className="space-y-2">
-                <label className="text-[15px] font-medium text-grayScale-700">
+                <label className="text-[15px] text-grayScale-700">
                   Program Name
                 </label>
                 <Input
                   placeholder="e.g. Beginner"
-                  className="h-12 rounded-xl"
+                  className="h-12 rounded-xl ring-0"
                 />
               </div>
 
               <div className="space-y-2">
-                <label className="text-[15px] font-medium text-grayScale-700">
+                <label className="text-[15px] text-grayScale-700">
                   Description
                 </label>
                 <Input
@@ -106,7 +106,7 @@ export function LearnEnglishPage() {
               </div>
 
               <div className="space-y-2">
-                <label className="text-[15px] font-medium text-grayScale-700">
+                <label className="text-[15px]  text-grayScale-700">
                   Program Order
                 </label>
                 <Select className="h-12 rounded-xl">
@@ -117,7 +117,7 @@ export function LearnEnglishPage() {
               </div>
 
               <div className="space-y-2">
-                <label className="text-[15px] font-medium text-grayScale-700">
+                <label className="text-[15px] text-grayScale-700">
                   Thumbnail
                 </label>
                 <div className="relative group cursor-pointer">
@@ -148,12 +148,12 @@ export function LearnEnglishPage() {
                 <DialogClose asChild>
                   <Button
                     variant="outline"
-                    className="h-12 min-w-[120px] rounded-xl border-grayScale-200 font-semibold"
+                    className="h-12 min-w-[120px] rounded-[6px] border-grayScale-200 font-semibold"
                   >
                     Cancel
                   </Button>
                 </DialogClose>
-                <Button className="h-12 min-w-[160px] rounded-xl bg-brand-500 font-semibold hover:bg-brand-600">
+                <Button className="h-12 min-w-[160px] rounded-[6px] bg-brand-500 font-semibold hover:bg-brand-600">
                   Create Program
                 </Button>
               </div>
@@ -165,7 +165,7 @@ export function LearnEnglishPage() {
       {/* Gradient Divider */}
       <div className="relative">
         <div className="absolute inset-0 flex items-center" aria-hidden="true">
-          <div className="w-full border-t border-grayScale-100" />
+          <div className="w-full border-t border-grayScale-200" />
         </div>
         <div className="relative flex justify-center">
           <div
@@ -178,11 +178,11 @@ export function LearnEnglishPage() {
       </div>
 
       {/* Cards Grid */}
-      <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+      <div className="flex flex-warp gap-10">
         {levels.map((level) => (
           <Card
             key={level.title}
-            className="group overflow-hidden border-none shadow-soft transition-all duration-300 hover:-translate-y-1 hover:shadow-lg"
+            className="group w-[290px] overflow-hidden border-none shadow-soft transition-all duration-300 hover:-translate-y-1 hover:shadow-lg"
           >
             {/* Gradient Header */}
             <div
@@ -192,15 +192,17 @@ export function LearnEnglishPage() {
                   "linear-gradient(135deg, #9E289180 0%, #9E2891 100%)",
               }}
             />
-            <CardContent className="bg-white p-6">
-              <h3 className="text-xl font-bold text-grayScale-700">
-                {level.title}
-              </h3>
-              <p className="mt-2 text-sm leading-relaxed text-grayScale-500">
-                {level.description}
-              </p>
+            <CardContent className="bg-white p-6 flex flex-col h-[280px]">
+              <div className="flex-1">
+                <h3 className="text-xl font-bold text-grayScale-700">
+                  {level.title}
+                </h3>
+                <p className="mt-2 text-sm leading-relaxed text-grayScale-500">
+                  {level.description}
+                </p>
+              </div>
               <Link to={`/new-content/learn-english/${level.id}/courses`}>
-                <Button className="mt-8 h-11 w-full rounded-xl bg-brand-500 font-semibold hover:bg-brand-600">
+                <Button className="h-11 w-full rounded-[6px] bg-brand-500 font-semibold hover:bg-brand-600">
                   View Courses
                   <ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
                 </Button>
diff --git a/src/pages/content-management/ModuleDetailPage.tsx b/src/pages/content-management/ModuleDetailPage.tsx
index 834a4b9..4acbb94 100644
--- a/src/pages/content-management/ModuleDetailPage.tsx
+++ b/src/pages/content-management/ModuleDetailPage.tsx
@@ -94,7 +94,7 @@ export function ModuleDetailPage() {
       .join(" ") || "Business English Fundamentals";
 
   return (
-    <div className="space-y-10 pb-20 animate-in fade-in duration-500">
+    <div className="space-y-10 pt-10 pb-20 animate-in fade-in duration-500">
       {/* Header Navigation */}
       <div className="flex items-center gap-2">
         <Link
@@ -108,11 +108,11 @@ export function ModuleDetailPage() {
 
       {/* Hero Section */}
       <div className="flex flex-col md:flex-row md:items-start justify-between gap-6">
-        <div className="space-y-2">
-          <h1 className="text-3xl font-extrabold text-grayScale-900 tracking-tight">
+        <div className="">
+          <h1 className="text-2xl font-medium text-grayScale-900 tracking-tight">
             Module 3: {moduleTitle}
           </h1>
-          <p className="text-grayScale-500 text-[17px] max-w-2xl font-medium leading-relaxed">
+          <p className="text-grayScale-500 text-[14px] max-w-2xl">
             This module covers essential vocabulary and phrases used in modern
             business environments, including email etiquette and meeting
             protocols.
@@ -121,7 +121,7 @@ export function ModuleDetailPage() {
         <div className="flex items-center gap-3">
           <Button
             variant="outline"
-            className="h-12 px-6 rounded-xl border-brand-500 text-brand-500 font-bold hover:bg-brand-50 transition-all flex items-center gap-2"
+            className="rounded-[6px] border-brand-500 text-brand-500 "
             onClick={() =>
               navigate(
                 `/new-content/learn-english/${level}/courses/add-practice?backTo=module&courseId=${courseId}&moduleId=${moduleId}`,
@@ -132,7 +132,7 @@ export function ModuleDetailPage() {
             Add Practice
           </Button>
           <Button
-            className="h-12 px-6 rounded-xl bg-brand-500 font-bold hover:bg-brand-600 shadow-lg shadow-brand-500/20 text-white transition-all flex items-center gap-2"
+            className="rounded-[6px] bg-brand-500 font-semibold hover:bg-brand-600"
             onClick={() =>
               navigate(
                 `/new-content/learn-english/${level}/courses/${courseId}/modules/${moduleId}/add-video`,
@@ -148,12 +148,12 @@ export function ModuleDetailPage() {
       </div>
 
       {/* Tabs */}
-      <div className="border-b border-grayScale-50">
+      <div className="border-b border-grayScale-200">
         <div className="flex gap-10">
           <button
             onClick={() => setActiveTab("video")}
             className={cn(
-              "pb-4 text-[17px] font-bold transition-all relative",
+              "pb-4 text-[16px] font-medium transition-all relative",
               activeTab === "video"
                 ? "text-brand-500 after:absolute after:bottom-0 after:left-0 after:right-0 after:h-[3px] after:bg-brand-500 after:rounded-t-full"
                 : "text-grayScale-400 hover:text-grayScale-600",
@@ -164,7 +164,7 @@ export function ModuleDetailPage() {
           <button
             onClick={() => setActiveTab("practice")}
             className={cn(
-              "pb-4 text-[17px] font-bold transition-all relative",
+              "pb-4 text-[16px] font-medium transition-all relative",
               activeTab === "practice"
                 ? "text-brand-500 after:absolute after:bottom-0 after:left-0 after:right-0 after:h-[3px] after:bg-brand-500 after:rounded-t-full"
                 : "text-grayScale-400 hover:text-grayScale-600",
@@ -270,12 +270,12 @@ function PracticeCard({
     <div className="bg-white rounded-[24px] border border-grayScale-50 shadow-sm overflow-hidden hover:shadow-xl hover:shadow-grayScale-400/5 transition-all group p-6 flex flex-col h-full min-h-[340px]">
       <div className="flex-1 space-y-6">
         <div className="flex items-center justify-between">
-          <h3 className="text-[20px] font-bold text-grayScale-900 line-clamp-1">
+          <h3 className="text-[18px] font-bold text-grayScale-900 line-clamp-1">
             {title}
           </h3>
         </div>
 
-        <div className="flex items-center gap-3">
+        <div className="flex items-center justify-between gap-3">
           <span className="bg-[#22C55E] text-white text-[11px] font-bold px-2 py-1 rounded-[4px]">
             {level}
           </span>
@@ -285,21 +285,21 @@ function PracticeCard({
           </div>
         </div>
 
-        <div className="flex items-center gap-2.5 text-brand-500 bg-brand-50/50 w-fit px-3 py-2 rounded-xl">
+        <div className="flex items-center gap-2.5 text-brand-400 w-fit py-2  rounded-xl">
           <Layers className="h-4 w-4" />
           <span className="text-[14px] font-bold">{variations} Variations</span>
         </div>
 
-        <div className="flex items-center justify-between pt-2">
-          <div className="bg-grayScale-50 text-grayScale-400 text-[11px] font-bold px-3 py-1.5 rounded-[6px] tracking-wide uppercase">
+        <div className="flex border-t border-grayScale-200 items-center justify-between pt-2">
+          <div className="bg-grayScale-100 text-grayScale-400 text-[11px] font-bold px-3 py-1.5 rounded-[6px] tracking-wide uppercase">
             {status}
           </div>
           <div className="flex items-center gap-3">
-            <button className="h-8 w-8 rounded-lg border border-grayScale-100 flex items-center justify-center text-grayScale-400 hover:text-brand-500 hover:border-brand-100 transition-all">
-              <Edit2 className="h-4 w-4" />
+            <button className="h-8 w-8 rounded-lg  flex items-center justify-center text-grayScale-400 hover:text-brand-500 hover:border-brand-100 transition-all">
+              <Edit2 className="h-5 w-5" />
             </button>
-            <button className="h-8 w-8 rounded-lg border border-grayScale-100 flex items-center justify-center text-grayScale-400 hover:text-red-500 hover:border-red-100 transition-all">
-              <Trash2 className="h-4 w-4" />
+            <button className="h-8 w-8 rounded-lg  flex items-center justify-center text-grayScale-400 hover:text-red-500 hover:border-red-100 transition-all">
+              <Trash2 className="h-5 w-5" />
             </button>
           </div>
         </div>
diff --git a/src/pages/content-management/NewContentPage.tsx b/src/pages/content-management/NewContentPage.tsx
index d382ebd..094e453 100644
--- a/src/pages/content-management/NewContentPage.tsx
+++ b/src/pages/content-management/NewContentPage.tsx
@@ -41,7 +41,7 @@ export function NewContentPage() {
               <Mic className="h-10 w-10 text-brand-500" />
             </div>
           </div>
-          <CardContent className="border-t border-grayScale-100 bg-white p-8 text-center">
+          <CardContent className="border-t border-grayScale-200 bg-white p-8 text-center">
             <h3 className="text-xl font-bold text-grayScale-700">
               Learn English
             </h3>
@@ -50,7 +50,7 @@ export function NewContentPage() {
               modules.
             </p>
             <Link to="/new-content/learn-english">
-              <Button className="mt-8 h-12 w-full rounded-xl bg-brand-500 text-base font-semibold hover:bg-brand-600">
+              <Button className="mt-8 h-12 w-full rounded-[6px] bg-brand-500 text-base font-semibold ">
                 Manage Learn English
               </Button>
             </Link>
@@ -64,15 +64,17 @@ export function NewContentPage() {
               <Mic className="h-10 w-10 text-brand-500" />
             </div>
           </div>
-          <CardContent className="border-t border-grayScale-100 bg-white p-8 text-center">
+          <CardContent className="border-t border-grayScale-200 bg-white p-8 text-center">
             <h3 className="text-xl font-bold text-grayScale-700">Courses</h3>
             <p className="mt-3 text-sm leading-relaxed text-grayScale-500">
               Manage skill-based and exam preparation courses such as Duolingo
               and IELTS.
             </p>
-            <Button className="mt-8 h-12 w-full rounded-xl bg-brand-500 text-base font-semibold hover:bg-brand-600">
-              Manage Courses
-            </Button>
+            <Link to="/new-content/courses" className="block w-full">
+              <Button className="mt-8 h-12 w-full rounded-[6px] bg-brand-500 text-base font-semibold ">
+                Manage Courses
+              </Button>
+            </Link>
           </CardContent>
         </Card>
       </div>
diff --git a/src/pages/content-management/ProgramCoursesPage.tsx b/src/pages/content-management/ProgramCoursesPage.tsx
index 68586b8..2195cb7 100644
--- a/src/pages/content-management/ProgramCoursesPage.tsx
+++ b/src/pages/content-management/ProgramCoursesPage.tsx
@@ -45,7 +45,7 @@ export function ProgramCoursesPage() {
   ];
 
   return (
-    <div className="space-y-8">
+    <div className="space-y-8 pt-10">
       {/* Navigation */}
       <Link
         to="/new-content/learn-english"
@@ -189,12 +189,27 @@ export function ProgramCoursesPage() {
         </div>
       </div>
 
+      {/* Gradient Divider */}
+      <div className="relative">
+        <div className="absolute inset-0 flex items-center" aria-hidden="true">
+          <div className="w-full border-t border-grayScale-200" />
+        </div>
+        <div className="relative flex justify-center">
+          <div
+            className="h-[0.5px] w-full opacity-20 rounded-full"
+            style={{
+              background: "gray",
+            }}
+          />
+        </div>
+      </div>
+
       {/* Cards Grid */}
-      <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+      <div className="flex flex-warp gap-10 ">
         {courses.map((course) => (
           <Card
             key={course.id}
-            className="group overflow-hidden  border border-grayScale-100 shadow-soft transition-all duration-300 hover:shadow-lg"
+            className="group w-[290px] overflow-hidden  border border-grayScale-100 shadow-soft transition-all duration-300 hover:shadow-lg"
           >
             {/* Gradient Header */}
             <div
diff --git a/src/pages/content-management/ProgramDetailPage.tsx b/src/pages/content-management/ProgramDetailPage.tsx
new file mode 100644
index 0000000..93eba0b
--- /dev/null
+++ b/src/pages/content-management/ProgramDetailPage.tsx
@@ -0,0 +1,273 @@
+import { Link, useParams, useNavigate } from "react-router-dom";
+import {
+  ArrowLeft,
+  Plus,
+  FileText,
+  ClipboardList,
+  ListChecks,
+  ChevronRight,
+  X,
+  Upload,
+} from "lucide-react";
+import { Button } from "../../components/ui/button";
+import { Card } from "../../components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DialogClose,
+} from "../../components/ui/dialog";
+import { Input } from "../../components/ui/input";
+import { Select } from "../../components/ui/select";
+import uploadIcon from "../../assets/icons/upload.png";
+
+export function ProgramDetailPage() {
+  const navigate = useNavigate();
+  const { programType } = useParams<{ programType: string }>();
+
+  // Mock data for "proficiency" program type
+  const programs: Record<string, any> = {
+    proficiency: {
+      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",
+        },
+      ],
+    },
+    "skill-based": {
+      title: "Skill-Based Courses",
+      description:
+        "Practice-focused communication and skills training for real-world scenarios.",
+      courses: [], // To be implemented or shown if needed
+    },
+  };
+
+  const currentProgram =
+    programs[programType || "proficiency"] || programs.proficiency;
+
+  return (
+    <div className="space-y-8 animate-in fade-in duration-500 pb-10">
+      {/* Navigation */}
+      <Link
+        to="/new-content/courses"
+        className="flex items-center gap-2.5 text-[15px] font-semibold text-grayScale-600 hover:text-brand-500 transition-colors pt-4 group"
+      >
+        <ArrowLeft className="h-5 w-5 transition-transform group-hover:-translate-x-1" />
+        Back
+      </Link>
+
+      {/* Header section */}
+      <div className="flex items-start justify-between">
+        <div className="space-y-2">
+          <h1 className="text-[26px] font-medium tracking-tight text-grayScale-900">
+            {currentProgram.title}
+          </h1>
+          <p className="max-w-2xl text-[15px] font-medium  text-grayScale-500">
+            {currentProgram.description}
+          </p>
+        </div>
+
+        <div className="flex items-center gap-3 pt-2">
+          <Dialog>
+            <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">
+                  <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="space-y-3">
+                    <label className="text-[15px] text-grayScale-800">
+                      Name
+                    </label>
+                    <Input
+                      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"
+                    />
+                  </div>
+
+                  <div className="space-y-3">
+                    <label className="text-[15px] text-grayScale-800">
+                      Course Order
+                    </label>
+                    <Select defaultValue="1">
+                      <option value="1">1</option>
+                      <option value="2">2</option>
+                      <option value="3">3</option>
+                    </Select>
+                  </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 ">
+                        <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">
+                            Click to upload
+                          </span>{" "}
+                          <span className="text-grayScale-500">
+                            or drag and drop
+                          </span>
+                        </p>
+                        <p className="mt-1.5 text-[12px] text-grayScale-400 uppercase tracking-widest">
+                          JPG, PNG (MAX 1 MB)
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="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"
+                    >
+                      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>
+                </div>
+              </div>
+            </DialogContent>
+          </Dialog>
+
+          <Button
+            variant="outline"
+            className="h-10 px-6 rounded-[6px] border-brand-500 text-brand-500 font-bold  flex items-center gap-2"
+            onClick={() =>
+              navigate(`/new-content/courses/${programType}/attach-practice`)
+            }
+          >
+            <FileText className="h-5 w-5" />
+            Attach Practice
+          </Button>
+        </div>
+      </div>
+
+      {/* Gradient Divider */}
+      <div className="relative">
+        <div className="absolute inset-0 flex items-center" aria-hidden="true">
+          <div className="w-full border-t border-grayScale-200" />
+        </div>
+        <div className="relative flex justify-center">
+          <div
+            className="h-[0.5px] w-full opacity-20 rounded-full"
+            style={{
+              background: "gray",
+            }}
+          />
+        </div>
+      </div>
+
+      {/* 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"
+          >
+            {/* Logo */}
+            <div className="h-16 flex items-center">{course.logo}</div>
+
+            {/* Content */}
+            <div className="space-y-4 pt-2 flex-1">
+              <h3 className="text-[18px] font-medium text-grayScale-900">
+                {course.name}
+              </h3>
+              <p className="text-[14px] text-grayScale-500 font-medium">
+                {course.description}
+              </p>
+            </div>
+
+            {/* Badges/Stats */}
+            <div className="flex items-center pt-4 gap-4">
+              <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
+                </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
+                </span>
+              </div>
+            </div>
+
+            {/* Action Button */}
+            <Button
+              className="w-full mt-4 h-10 bg-brand-500  text-white rounded-[8px] font-bold flex items-center justify-center gap-2 group/btn"
+              onClick={() =>
+                navigate(`/new-content/courses/${programType}/${course.id}`)
+              }
+            >
+              {course.buttonText}
+              <ChevronRight className="h-5 w-5 transition-transform group-hover/btn:translate-x-1" />
+            </Button>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/content-management/ProgramTypeSelectionPage.tsx b/src/pages/content-management/ProgramTypeSelectionPage.tsx
new file mode 100644
index 0000000..090018c
--- /dev/null
+++ b/src/pages/content-management/ProgramTypeSelectionPage.tsx
@@ -0,0 +1,82 @@
+import { Link } from "react-router-dom";
+import { GraduationCap, Brain } from "lucide-react";
+import { Button } from "../../components/ui/button";
+
+export function ProgramTypeSelectionPage() {
+  return (
+    <div className="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
+      {/* Header section */}
+      <div className="flex items-start justify-between">
+        <div className="space-y-1.5 pt-2">
+          <h1 className="text-[28px] font-bold tracking-tight text-grayScale-900">
+            Courses
+          </h1>
+          <p className="max-w-2xl text-[15px] font-medium  text-grayScale-500">
+            Organize courses under skill-based learning or English proficiency
+            exams. Select a program type to manage curriculum and modules.
+          </p>
+        </div>
+        <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 mt-4">
+          Manage Question Types
+        </Button>
+      </div>
+
+      {/* Gradient Divider */}
+      <div className="relative">
+        <div className="absolute inset-0 flex items-center" aria-hidden="true">
+          <div className="w-full border-t border-grayScale-200" />
+        </div>
+        <div className="relative flex justify-center">
+          <div
+            className="h-[0.5px] w-full opacity-20 rounded-full"
+            style={{
+              background: "gray",
+            }}
+          />
+        </div>
+      </div>
+
+      {/* Selection Cards Grid */}
+      <div className="flex flex-warp gap-10 pt-4">
+        {/* Skill-Based Courses Card */}
+        <Link to="/new-content/courses/skill-based" className="group h-full">
+          <div className="bg-white rounded-[6px] w-[500px] border border-grayScale-100 px-10 py-12 h-full transition-all flex flex-col items-start gap-10">
+            <div className="h-16 w-16 rounded-full bg-brand-50/10 flex items-center justify-center">
+              <Brain className="h-8 w-8 text-brand-500" />
+            </div>
+
+            <div className="space-y-3 flex-1">
+              <h3 className="text-[20px] font-bold text-grayScale-900">
+                Skill-Based Courses
+              </h3>
+              <p className="text-[15px] leading-relaxed text-grayScale-500 font-medium">
+                Practice-focused communication and skills training. Create
+                modules for vocabulary, grammar, and real-world conversation
+                scenarios.
+              </p>
+            </div>
+          </div>
+        </Link>
+
+        {/* English Proficiency Exams Card */}
+        <Link to="/new-content/courses/proficiency" className="group h-full">
+          <div className="bg-white w-[500px] rounded-[6px] border border-grayScale-100 px-10 py-12 h-full transition-all flex flex-col items-start gap-10">
+            <div className="h-16 w-16 rounded-full bg-brand-50/10 flex items-center justify-center">
+              <GraduationCap className="h-8 w-8 text-brand-500" />
+            </div>
+
+            <div className="space-y-3 flex-1">
+              <h3 className="text-[20px] font-bold text-grayScale-900 transition-colors">
+                English Proficiency Exams
+              </h3>
+              <p className="text-[15px] leading-relaxed text-grayScale-500 font-medium">
+                Exam preparation courses such as IELTS, and Duolingo. Structure
+                content by band scores, sections, and mock tests.
+              </p>
+            </div>
+          </div>
+        </Link>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/content-management/UnitManagementPage.tsx b/src/pages/content-management/UnitManagementPage.tsx
new file mode 100644
index 0000000..9284d1e
--- /dev/null
+++ b/src/pages/content-management/UnitManagementPage.tsx
@@ -0,0 +1,254 @@
+import { Link, useParams, useNavigate } from "react-router-dom";
+import {
+  ArrowLeft,
+  Plus,
+  MessageCircle,
+  PlayCircle,
+  ClipboardCheck,
+  ArrowRight,
+  X,
+} from "lucide-react";
+import { Button } from "../../components/ui/button";
+import { Card } from "../../components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DialogClose,
+} from "../../components/ui/dialog";
+import { Input } from "../../components/ui/input";
+import { Select } from "../../components/ui/select";
+import uploadIcon from "../../assets/icons/upload.png";
+
+export function UnitManagementPage() {
+  const navigate = useNavigate();
+  const { programType, courseId, unitId } = useParams<{
+    programType: string;
+    courseId: string;
+    unitId: string;
+  }>();
+
+  // Mock titles
+  const unitTitles: Record<string, string> = {
+    unit1: "Greetings & Introductions",
+    unit2: "Speaking",
+    unit3: "Reading",
+  };
+
+  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%)",
+    },
+  ];
+
+  return (
+    <div className="space-y-8 animate-in fade-in duration-500 pb-10">
+      {/* Navigation */}
+      <Link
+        to={`/new-content/courses/${programType}/${courseId}`}
+        className="flex items-center gap-2.5 text-[15px] font-semibold text-grayScale-600 hover:text-brand-500 transition-colors pt-4 group"
+      >
+        <ArrowLeft className="h-5 w-5 transition-transform group-hover:-translate-x-1" />
+        Back to Courses
+      </Link>
+
+      {/* Header section */}
+      <div className="flex items-start justify-between">
+        <h1 className="text-[28px] font-medium tracking-tight text-grayScale-900">
+          {unitDisplayName}
+        </h1>
+
+        <Dialog>
+          <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">
+              <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
+                </DialogTitle>
+                <DialogClose className="rounded-full p-1.5 hover:bg-grayScale-50 transition-colors">
+                  <X className="h-5 w-5 text-grayScale-400" />
+                  <span className="sr-only">Close</span>
+                </DialogClose>
+              </DialogHeader>
+
+              <div className="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"
+                    className="h-12 border-grayScale-400 rounded-[8px] px-4 placeholder:text-grayScale-400 text-[15px] focus:ring-brand-500/20"
+                  />
+                </div>
+
+                <div className="space-y-3">
+                  <label className="text-[15px] text-grayScale-800">
+                    Module Order
+                  </label>
+                  <Select defaultValue="1">
+                    <option value="1">1</option>
+                    <option value="2">2</option>
+                  </Select>
+                </div>
+
+                <div className="space-y-3">
+                  <label className="text-[15px] text-grayScale-800">Icon</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 ">
+                      <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">
+                          Click to upload
+                        </span>{" "}
+                        <span className="text-grayScale-500">
+                          or drag and drop
+                        </span>
+                      </p>
+                      <p className="mt-1.5 text-[12px] text-grayScale-400 uppercase tracking-widest">
+                        JPG, PNG (MAX 1 MB)
+                      </p>
+                    </div>
+                  </div>
+                </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
+                    variant="outline"
+                    className="h-11 px-8 rounded-[8px] border-grayScale-200 text-grayScale-700 font-bold"
+                  >
+                    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>
+              </div>
+            </div>
+          </DialogContent>
+        </Dialog>
+      </div>
+
+      {/* Gradient Divider */}
+      <div className="relative">
+        <div className="absolute inset-0 flex items-center" aria-hidden="true">
+          <div className="w-full border-t border-grayScale-200" />
+        </div>
+        <div className="relative flex justify-center">
+          <div
+            className="h-[0.5px] w-full opacity-20 rounded-full"
+            style={{
+              background: "gray",
+            }}
+          />
+        </div>
+      </div>
+
+      {/* 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>
+              </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>
+    </div>
+  );
+}
diff --git a/src/pages/content-management/components/AddModuleModal.tsx b/src/pages/content-management/components/AddModuleModal.tsx
index 7cc989f..8c92dbb 100644
--- a/src/pages/content-management/components/AddModuleModal.tsx
+++ b/src/pages/content-management/components/AddModuleModal.tsx
@@ -28,10 +28,6 @@ export function AddModuleModal({ isOpen, onClose }: AddModuleModalProps) {
           <DialogDescription className="text-sm text-grayScale-400">
             Create a module to organize videos and practices.
           </DialogDescription>
-          <DialogClose className="absolute right-8 top-8 flex h-10 w-10 items-center justify-center rounded-full hover:bg-grayScale-50 transition-all">
-            <X className="h-6 w-6 text-grayScale-400" />
-            <span className="sr-only">Close</span>
-          </DialogClose>
         </DialogHeader>
 
         {/* Gradient Divider */}
diff --git a/src/pages/content-management/components/VideoCard.tsx b/src/pages/content-management/components/VideoCard.tsx
index 63946f3..bd271a7 100644
--- a/src/pages/content-management/components/VideoCard.tsx
+++ b/src/pages/content-management/components/VideoCard.tsx
@@ -67,7 +67,7 @@ export function VideoCard({
           </button>
         </div>
 
-        <h3 className="text-[17px] font-bold text-grayScale-900 line-clamp-2 leading-snug">
+        <h3 className="text-[16px] font-medium text-grayScale-900 line-clamp-2 leading-snug">
           {title}
         </h3>
 
@@ -76,7 +76,7 @@ export function VideoCard({
           <Button
             variant="outline"
             onClick={onEdit}
-            className="w-full h-11 rounded-xl border-grayScale-100 text-grayScale-600 font-bold hover:bg-grayScale-50 transition-all flex items-center justify-center gap-2"
+            className="w-full h-10 rounded-xl border-grayScale-200 text-grayScale-600 font-bold hover:bg-grayScale-50 transition-all flex items-center justify-center gap-2"
           >
             <Edit2 className="h-4 w-4" />
             Edit
@@ -85,7 +85,7 @@ export function VideoCard({
             disabled={status === "Published"}
             onClick={onPublish}
             className={cn(
-              "w-full h-11 rounded-xl font-bold transition-all shadow-sm",
+              "w-full h-10 rounded-xl font-bold transition-all shadow-sm",
               status === "Published"
                 ? "bg-[#E9D5E5] text-white opacity-100 cursor-default"
                 : "bg-brand-500 text-white hover:bg-brand-600 shadow-brand-500/10",
diff --git a/src/pages/content-management/components/practice-steps/AttachPracticeReviewStep.tsx b/src/pages/content-management/components/practice-steps/AttachPracticeReviewStep.tsx
new file mode 100644
index 0000000..f700406
--- /dev/null
+++ b/src/pages/content-management/components/practice-steps/AttachPracticeReviewStep.tsx
@@ -0,0 +1,232 @@
+import {
+  Rocket,
+  GraduationCap,
+  Folder,
+  ChevronUp,
+  ChevronDown,
+  Eye,
+  Video as VideoIcon,
+  ClipboardList,
+} from "lucide-react";
+import { useState } from "react";
+import { Button } from "../../../../components/ui/button";
+import { Card } from "../../../../components/ui/card";
+import { cn } from "../../../../lib/utils";
+
+interface AttachPracticeReviewStepProps {
+  formData: any;
+  prevStep: () => void;
+  onPublish: () => void;
+}
+
+export function AttachPracticeReviewStep({
+  formData,
+  prevStep,
+  onPublish,
+}: AttachPracticeReviewStepProps) {
+  const [isExpanded, setIsExpanded] = useState(true);
+  const [isConfirmed, setIsConfirmed] = useState(false);
+
+  const questions = [
+    { order: "01", text: "What is the main idea of the passage?" },
+    { order: "02", text: "What does the speaker mainly talk about in the..." },
+    { order: "03", text: "Which option best completes the sentence?" },
+  ];
+
+  return (
+    <div className="space-y-10 animate-in fade-in duration-500  mx-auto">
+      {/* 1. Video Summary Card */}
+      <Card className="p-6 border-grayScale-200  rounded-2xl bg-white overflow-hidden">
+        <div className="flex gap-8 items-start">
+          {/* Thumbnail */}
+          <div className="relative h-[150px] w-[260px] rounded-xl overflow-hidden shadow-inner flex-shrink-0">
+            <img
+              src="https://images.unsplash.com/photo-1557425955-df376b5903c8?auto=format&fit=crop&q=80&w=600"
+              alt="Video Thumbnail"
+              className="w-full h-full object-cover"
+            />
+            <div className="absolute bottom-2 right-2 bg-black/70 text-white text-[11px] font-bold px-2 py-0.5 rounded flex items-center gap-1.5">
+              <VideoIcon className="h-3 w-3" />
+              12:30
+            </div>
+          </div>
+
+          {/* Details */}
+          <div className="pt-12">
+            <h3 className="text-[20px] font-bold text-grayScale-900 leading-tight">
+              Intro to Interactive Speaking
+            </h3>
+            <div className="flex flex-wrap gap-3">
+              <div className="h-8 pr-2 rounded-full flex items-center gap-2 text-brand-500  text-[13px]">
+                <GraduationCap className="h-4 w-4" />
+                IELTS
+              </div>
+              <div className="h-8 pr-2 rounded-full  flex items-center gap-2 text-brand-500  text-[13px]">
+                <Folder className="h-4 w-4" />
+                Unit 2: Speaking
+              </div>
+              <div className="h-8 rounded-full   flex items-center gap-2 text-brand-500  text-[13px]">
+                <Folder className="h-4 w-4" />
+                Module 4: Interactive Speaking
+              </div>
+            </div>
+          </div>
+        </div>
+      </Card>
+
+      {/* 2. Attached Practices Section */}
+      <div className="space-y-6">
+        <div className="flex items-center justify-between ">
+          <h2 className="text-[20px] font-bold text-[#0F172A] flex items-center gap-3">
+            Attached Practices
+          </h2>
+          <span className="h-6 px-3 rounded-full bg-grayScale-200/40 text-grayScale-500 text-[12px] font-bold flex items-center justify-center">
+            Total Items: 3
+          </span>
+        </div>
+
+        <Card className="overflow-hidden border border-grayScale-200 shadow-sm rounded-2xl bg-white">
+          {/* Header */}
+          <div
+            className="p-6 flex items-center justify-between transition-colors hover:bg-grayScale-25 cursor-pointer"
+            onClick={() => setIsExpanded(!isExpanded)}
+          >
+            <div className="flex items-center gap-4">
+              <div className="h-12 w-12 rounded-full bg-[#FDF2F8] flex items-center justify-center text-[#9E2891]">
+                <ClipboardList className="h-6 w-6" />
+              </div>
+              <div className="space-y-0.5">
+                <h4 className="text-[17px] font-medium text-grayScale-900">
+                  Multiple Choice
+                </h4>
+                <p className="text-[14px] text-grayScale-400 font-medium">
+                  3 Questions • ~4 min to complete
+                </p>
+              </div>
+            </div>
+            <div className="flex items-center gap-6">
+              <button className="flex items-center gap-2 text-[#9E2891] font-medium text-[14px] hover:opacity-80 transition-opacity">
+                <Eye className="h-4 w-4" />
+                Preview
+              </button>
+              {isExpanded ? (
+                <ChevronUp className="h-6 w-6 text-grayScale-300" />
+              ) : (
+                <ChevronDown className="h-6 w-6 text-grayScale-300" />
+              )}
+            </div>
+          </div>
+
+          {/* Expanded Content (Table) */}
+          {isExpanded && (
+            <div className="animate-in slide-in-from-top-2 duration-300">
+              <div className="border-t border-grayScale-100">
+                <table className="w-full text-left border-collapse">
+                  <thead>
+                    <tr className="bg-white">
+                      <th className="py-4 pl-10 pr-0 w-[80px]"></th>
+                      <th className="py-4 px-4 text-[13px] font-medium text-[#A5B4C1] uppercase tracking-wide w-24">
+                        Order
+                      </th>
+                      <th className="py-4 px-4 text-[13px] font-medium text-[#A5B4C1] uppercase tracking-wide">
+                        Versions
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody className="border-t border-grayScale-100">
+                    {questions.map((q, i) => (
+                      <tr
+                        key={i}
+                        className="border-b border-grayScale-200 last:border-0 group hover:bg-grayScale-25 transition-colors"
+                      >
+                        <td className="py-6 pl-10 pr-0 text-center">
+                          <GripVertical className="h-4 w-4 text-[#A5B4C1]" />
+                        </td>
+                        <td className="py-6 px-4">
+                          <span className="text-[15px] text-[#A5B4C1]">
+                            {q.order}
+                          </span>
+                        </td>
+                        <td className="py-6 px-4">
+                          <p className="text-[15px] font-medium text-[#0D1421]">
+                            {q.text}
+                          </p>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          )}
+        </Card>
+      </div>
+
+      {/* 3. Confirmation Checkbox */}
+      <div className="bg-[#F1F5F9] border border-[#E2E8F0] px-6 py-4 rounded-[12px] flex items-start gap-4">
+        <input
+          type="checkbox"
+          id="confirm"
+          checked={isConfirmed}
+          onChange={(e) => setIsConfirmed(e.target.checked)}
+          className="mt-1 h-5 w-5 rounded border-grayScale-300 text-brand-500 focus:ring-brand-500 cursor-pointer"
+        />
+        <div className="">
+          <label
+            htmlFor="confirm"
+            className="text-[16px] font-bold text-grayScale-900 cursor-pointer"
+          >
+            I confirm these details are correct
+          </label>
+          <p className="text-[13px] text-grayScale-400">
+            This action cannot be undone immediately. Rollback requires manual
+            intervention.
+          </p>
+        </div>
+      </div>
+
+      {/* 4. Action Footer */}
+      <div className="flex items-center justify-between pt-10 px-2">
+        <Button
+          onClick={prevStep}
+          variant="outline"
+          className="h-12 px-10 rounded-[6px] bg-transparent border-grayScale-400 font-bold text-grayScale-600  transition-all"
+        >
+          Back
+        </Button>
+        <div className="flex gap-4">
+          <Button
+            variant="outline"
+            className="h-12 px-10 rounded-[6px] border-grayScale-200 font-bold text-grayScale-600 bg-white shadow-none transition-all"
+          >
+            Save as Draft
+          </Button>
+          <Button
+            onClick={onPublish}
+            disabled={!isConfirmed}
+            className={cn(
+              "h-12 px-10 rounded-[6px] font-bold text-white shadow-xl flex items-center gap-3 transition-all active:scale-95",
+              isConfirmed
+                ? "bg-[#9E2891] hover:bg-[#8A237E] shadow-[#9E2891]/20"
+                : "bg-grayScale-200 cursor-not-allowed opacity-50",
+            )}
+          >
+            <Rocket className="h-5 w-5" />
+            Publish Now
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// Add GripVertical helper since it might not be imported from lucide-react if I missed it
+function GripVertical({ className }: { className?: string }) {
+  return (
+    <div className={cn("grid grid-cols-2 gap-0.5", className)}>
+      {[...Array(6)].map((_, i) => (
+        <div key={i} className="h-0.5 w-0.5 rounded-full bg-current" />
+      ))}
+    </div>
+  );
+}
diff --git a/src/pages/content-management/components/practice-steps/AttachPracticeStep1.tsx b/src/pages/content-management/components/practice-steps/AttachPracticeStep1.tsx
new file mode 100644
index 0000000..9cdfe38
--- /dev/null
+++ b/src/pages/content-management/components/practice-steps/AttachPracticeStep1.tsx
@@ -0,0 +1,168 @@
+import { LayoutGrid, Video, ArrowRight } from "lucide-react";
+import { Button } from "../../../../components/ui/button";
+import { Card } from "../../../../components/ui/card";
+import { Select } from "../../../../components/ui/select";
+import { cn } from "../../../../lib/utils";
+
+interface AttachPracticeStep1Props {
+  formData: any;
+  setFormData: (data: any) => void;
+  nextStep: () => void;
+  onCancel: () => void;
+}
+
+export function AttachPracticeStep1({
+  formData,
+  setFormData,
+  nextStep,
+  onCancel,
+}: AttachPracticeStep1Props) {
+  return (
+    <Card className="overflow-hidden max-w-4xl mx-auto border-grayScale-100 rounded-3xl bg-white shadow-sm animate-in fade-in duration-500">
+      <div className="space-y-6 p-12">
+        {/* Select Program */}
+        <div className="space-y-4">
+          <label className="text-[14px] font-medium text-[#0F172A] ml-1">
+            Select Program
+          </label>
+          <div className="relative">
+            <div className="absolute left-5 top-1/2 -translate-y-1/2 pointer-events-none z-10">
+              <LayoutGrid className="h-5 w-5 text-grayScale-400" />
+            </div>
+            <Select
+              className="h-[56px] w-full rounded-[10px] border-grayScale-200 bg-[#fff] pl-14 text-grayScale-800 font-bold focus:border-brand-500 transition-all text-sm"
+              value={formData.program}
+              onChange={(e) =>
+                setFormData({ ...formData, program: e.target.value })
+              }
+            >
+              <option value="">Choose Program</option>
+              <option value="skill">Skill-Based Courses</option>
+              <option value="exams">English Proficiency Exams</option>
+            </Select>
+          </div>
+        </div>
+
+        {/* Select Module */}
+        <div className="space-y-4">
+          <label className="text-[14px] font-medium text-[#0F172A] ml-1">
+            Select Module
+          </label>
+          <div className="relative">
+            <div className="absolute left-5 top-1/2 -translate-y-1/2 pointer-events-none z-10">
+              <LayoutGrid className="h-5 w-5 text-grayScale-400" />
+            </div>
+            <Select
+              className="h-[56px] w-full rounded-[10px] border-grayScale-200 bg-[#fff] pl-14 text-grayScale-800 font-bold focus:border-brand-500 transition-all text-sm"
+              value={formData.module}
+              onChange={(e) =>
+                setFormData({ ...formData, module: e.target.value })
+              }
+            >
+              <option value="">Choose Module</option>
+              <option value="m1">Module 1: Basic Phrases</option>
+              <option value="m2">Module 2: Intermediate Grammar</option>
+            </Select>
+          </div>
+          <p className="text-[13px] text-grayScale-400 font-medium px-1">
+            Select the specific learning module this practice will reinforce.
+          </p>
+        </div>
+
+        {/* Select Video */}
+        <div className="space-y-4">
+          <label className="text-[14px] font-medium text-[#0F172A] ml-1">
+            Select Video
+          </label>
+          <div className="relative">
+            <div className="absolute left-5 top-1/2 -translate-y-1/2 pointer-events-none z-10">
+              <Video className="h-5 w-5 text-grayScale-400" />
+            </div>
+            <Select
+              className="h-[56px] w-full rounded-[10px] border-grayScale-200 bg-[#fff] pl-14 text-grayScale-800 font-bold focus:border-brand-500 transition-all text-sm"
+              value={formData.video}
+              onChange={(e) =>
+                setFormData({ ...formData, video: e.target.value })
+              }
+            >
+              <option value="">Choose a video</option>
+              <option value="v1">Intro to Interactive Speaking</option>
+              <option value="v2">Business Meeting Etiquette</option>
+            </Select>
+          </div>
+          <p className="text-[13px] text-grayScale-400 font-medium px-1">
+            Select the specific video this practice will reinforce.
+          </p>
+        </div>
+
+        {/* Select Question Type */}
+        <div className="space-y-4">
+          <label className="text-[14px] font-medium text-[#0F172A] ml-1">
+            Select Question Type
+          </label>
+          <div className="relative">
+            <div className="absolute left-5 top-1/2 -translate-y-1/2 pointer-events-none z-10">
+              <LayoutGrid className="h-5 w-5 text-grayScale-400" />
+            </div>
+            <Select
+              className="h-[56px] w-full rounded-[10px] border-grayScale-200 bg-[#fff] pl-14 text-grayScale-800 font-bold focus:border-brand-500 transition-all text-sm"
+              value={formData.questionType}
+              onChange={(e) =>
+                setFormData({ ...formData, questionType: e.target.value })
+              }
+            >
+              <option value="">Choose question type</option>
+              <option value="speaking">Speaking Practice</option>
+              <option value="listening">Listening Quiz</option>
+            </Select>
+          </div>
+          <p className="text-[13px] text-grayScale-400 font-medium px-1">
+            Select one question type that associates with th selected video
+          </p>
+        </div>
+
+        {/* Set Version */}
+        <div className="space-y-4">
+          <label className="text-[14px] font-medium text-[#0F172A] ml-1">
+            Set Version
+          </label>
+          <div className="relative">
+            <div className="absolute left-5 top-1/2 -translate-y-1/2 pointer-events-none z-10">
+              <LayoutGrid className="h-5 w-5 text-grayScale-400" />
+            </div>
+            <Select
+              className="h-[56px] w-full rounded-[10px] border-grayScale-200 bg-[#fff] pl-14 text-grayScale-800 font-bold focus:border-brand-500 transition-all text-sm"
+              value={formData.version}
+              onChange={(e) =>
+                setFormData({ ...formData, version: e.target.value })
+              }
+            >
+              <option value="">Choose versions</option>
+              <option value="v1">Version 1.0</option>
+              <option value="v2">Version 2.0</option>
+            </Select>
+          </div>
+          <p className="text-[13px] text-grayScale-400 font-medium px-1">
+            Select one or more versions
+          </p>
+        </div>
+      </div>
+
+      <div className="flex items-center justify-between border-t border-grayScale-200 bg-[#F8FAFC] py-4 px-12">
+        <button
+          className="text-[14px] text-grayScale-500 transition-colors hover:text-grayScale-700"
+          onClick={onCancel}
+        >
+          Cancel
+        </button>
+        <Button
+          onClick={nextStep}
+          className="h-10 px-12 rounded-[6px] bg-[#9E2891] text-[14px] font-bold text-white shadow-lg shadow-brand-500/10 transition-all active:scale-95 flex items-center gap-3"
+        >
+          Next: Review
+          <ArrowRight className="h-4 w-4" />
+        </Button>
+      </div>
+    </Card>
+  );
+}
diff --git a/src/pages/content-management/components/practice-steps/ContextStep.tsx b/src/pages/content-management/components/practice-steps/ContextStep.tsx
index 165bfff..11898c5 100644
--- a/src/pages/content-management/components/practice-steps/ContextStep.tsx
+++ b/src/pages/content-management/components/practice-steps/ContextStep.tsx
@@ -10,6 +10,7 @@ interface ContextStepProps {
   navigate: (path: string) => void;
   level: string;
   isModuleContext?: boolean;
+  isCourseContext?: boolean;
 }
 
 export function ContextStep({
@@ -19,22 +20,37 @@ export function ContextStep({
   navigate,
   level,
   isModuleContext,
+  isCourseContext,
 }: ContextStepProps) {
   return (
-    <Card className="overflow-hidden border-grayScale-50 shadow-soft rounded-2xl bg-white animate-in fade-in duration-500">
-      <div className="border-b border-grayScale-50 p-8">
-        <h2 className="text-2xl font-bold text-grayScale-900 leading-none">
+    <Card className="overflow-hidden border-grayScale-300  rounded-2xl bg-white animate-in fade-in duration-500">
+      <div className="border-b border-grayScale-50 px-8 pt-8 pb-4">
+        <h2 className="text-xl font-bold text-grayScale-900 leading-none">
           Step 1: Context Definition
         </h2>
-        <p className="text-grayScale-400 text-base mt-3">
+        <p className="text-grayScale-600 text-base mt-3">
           Define the educational level and curriculum module for this practice.
         </p>
       </div>
 
+      <div className="relative">
+        <div className="absolute inset-0 flex items-center" aria-hidden="true">
+          <div className="w-full border-t border-grayScale-200" />
+        </div>
+        <div className="relative flex justify-center">
+          <div
+            className="h-[0.5px] w-full opacity-20 rounded-full"
+            style={{
+              background: "gray",
+            }}
+          />
+        </div>
+      </div>
+
       <div className="space-y-10 p-10">
         {/* Program Field */}
         <div className="space-y-3">
-          <label className="text-[17px] font-bold text-grayScale-700 ml-1">
+          <label className="text-[16px] text-grayScale-700 ml-1">
             Program{" "}
             <span className="text-grayScale-300 font-medium">
               (Auto-selected)
@@ -42,10 +58,10 @@ export function ContextStep({
           </label>
           <div className="relative">
             <div className="absolute left-6 top-1/2 -translate-y-1/2">
-              <GraduationCap className="h-6 w-6 text-grayScale-400" />
+              <GraduationCap className="h-6 w-6 text-grayScale-600" />
             </div>
             <Select
-              className="h-16 w-full rounded-2xl border-grayScale-50 bg-[#F9FAFB] pl-16 text-grayScale-700 font-bold focus:border-brand-500 focus:ring-0 transition-all cursor-default"
+              className="h-12 w-full rounded-[6px] border-grayScale-400 bg-[#fff] pl-16 text-grayScale-800 font-bold focus:border-brand-500 focus:ring-0 transition-all cursor-default"
               disabled
             >
               <option>{formData.program || "Intermediate"}</option>
@@ -55,7 +71,7 @@ export function ContextStep({
 
         {/* Course Field */}
         <div className="space-y-3">
-          <label className="text-[17px] font-bold text-grayScale-700 ml-1">
+          <label className="text-[16px] font-bold text-grayScale-700 ml-1">
             Course{" "}
             <span className="text-grayScale-300 font-medium">
               (Auto-selected)
@@ -63,10 +79,10 @@ export function ContextStep({
           </label>
           <div className="relative">
             <div className="absolute left-6 top-1/2 -translate-y-1/2">
-              <GraduationCap className="h-6 w-6 text-grayScale-400" />
+              <GraduationCap className="h-6 w-6 text-grayScale-600" />
             </div>
             <Select
-              className="h-16 w-full rounded-2xl border-grayScale-50 bg-[#F9FAFB] pl-16 text-grayScale-700 font-bold focus:border-brand-500 focus:ring-0 transition-all cursor-default"
+              className="h-12 w-full rounded-[6px] border-grayScale-400 bg-[#fff] pl-16 text-grayScale-800 font-bold focus:border-brand-500 focus:ring-0 transition-all cursor-default"
               disabled
             >
               <option>{formData.course || "B2"}</option>
@@ -75,30 +91,32 @@ export function ContextStep({
         </div>
 
         {/* Select Module Field */}
-        <div className="space-y-3">
-          <label className="text-[17px] font-bold text-grayScale-700 ml-1">
-            Select Module
-          </label>
-          <div className="relative">
-            <div className="absolute left-6 top-1/2 -translate-y-1/2">
-              <LayoutGrid className="h-6 w-6 text-grayScale-400" />
+        {(isModuleContext || isCourseContext) && (
+          <div className="space-y-3">
+            <label className="text-[16px] font-bold text-grayScale-700 ml-1">
+              Select Module
+            </label>
+            <div className="relative">
+              <div className="absolute left-6 top-1/2 -translate-y-1/2">
+                <LayoutGrid className="h-6 w-6 text-grayScale-400" />
+              </div>
+              <Select className="h-12 w-full rounded-[6px] border-grayScale-300 bg-[#fff] pl-16 text-grayScale-800 font-bold focus:border-brand-500 focus:ring-0 transition-all">
+                <option value="">Choose a module...</option>
+                <option value="m1">Introduction Basics</option>
+                <option value="m2">Daily Routines</option>
+                <option value="m3">Travel Essentials</option>
+              </Select>
             </div>
-            <Select className="h-16 w-full rounded-2xl border-grayScale-100 bg-white pl-16 text-grayScale-700 font-bold focus:border-brand-500 focus:ring-0 transition-all ring-offset-0">
-              <option value="">Choose a module...</option>
-              <option value="m1">Introduction Basics</option>
-              <option value="m2">Daily Routines</option>
-              <option value="m3">Travel Essentials</option>
-            </Select>
+            <p className="text-[13px] text-grayScale-400 font-medium px-2">
+              Select the specific learning module this practice will reinforce.
+            </p>
           </div>
-          <p className="text-[13px] text-grayScale-400 font-medium px-2">
-            Select the specific learning module this practice will reinforce.
-          </p>
-        </div>
+        )}
 
         {/* Select Video Field (Conditional) */}
         {isModuleContext && (
           <div className="space-y-3 animate-in fade-in slide-in-from-top-2 duration-300">
-            <label className="text-[17px] font-bold text-grayScale-700 ml-1">
+            <label className="text-[16px] font-bold text-grayScale-700 ml-1">
               Select Video
             </label>
             <div className="relative">
@@ -106,7 +124,7 @@ export function ContextStep({
                 <Monitor className="h-6 w-6 text-grayScale-400" />
               </div>
               <Select
-                className="h-16 w-full rounded-2xl border-grayScale-100 bg-white pl-16 text-grayScale-700 font-bold focus:border-brand-500 focus:ring-0 transition-all"
+                className="h-12 w-full rounded-[6px] border-grayScale-300 bg-[#fff] pl-16 text-grayScale-800 font-bold focus:border-brand-500 focus:ring-0 transition-all"
                 value={formData.selectedVideo}
                 onChange={(e) =>
                   setFormData({ ...formData, selectedVideo: e.target.value })
@@ -124,9 +142,9 @@ export function ContextStep({
         )}
       </div>
 
-      <div className="flex items-center justify-between border-t border-grayScale-50 bg-[#F9FAFB]/50 p-10 px-12">
+      <div className="flex items-center justify-between border-t border-grayScale-100 bg-[#F8FAFC] p-4 px-12">
         <button
-          className="text-[17px] font-bold text-grayScale-500 transition-colors hover:text-grayScale-700"
+          className="text-[14px] font-bold text-grayScale-500 transition-colors hover:text-grayScale-700"
           onClick={() =>
             navigate(`/new-content/learn-english/${level}/courses`)
           }
@@ -135,7 +153,7 @@ export function ContextStep({
         </button>
         <Button
           onClick={nextStep}
-          className="h-14 px-10 rounded-2xl bg-brand-500 text-[17px] font-bold text-white hover:bg-brand-600 shadow-xl shadow-brand-500/20 transition-all active:scale-95 flex items-center gap-2"
+          className="h-10 px-10 rounded-[6px] bg-brand-500 text-[14px] font-bold text-white  transition-all active:scale-95 flex items-center gap-2"
         >
           Next: {isModuleContext ? "Persona" : "Scenario"}{" "}
           <ArrowRight className="h-5 w-5" />
diff --git a/src/pages/content-management/components/practice-steps/PersonaStep.tsx b/src/pages/content-management/components/practice-steps/PersonaStep.tsx
index 133b6e4..d197a1a 100644
--- a/src/pages/content-management/components/practice-steps/PersonaStep.tsx
+++ b/src/pages/content-management/components/practice-steps/PersonaStep.tsx
@@ -32,56 +32,59 @@ export function PersonaStep({
         </p>
       </div>
       <div className="grid grid-cols-2 gap-6 sm:grid-cols-4">
-        {PERSONAS.map((persona) => (
-          <div
-            key={persona.id}
-            onClick={() => setSelectedPersona(persona.id)}
-            className={cn(
-              "group relative cursor-pointer rounded-2xl border-2 bg-white p-6 transition-all duration-300",
-              selectedPersona === persona.id
-                ? "border-brand-500 shadow-xl scale-105"
-                : "border-grayScale-50 hover:border-brand-200",
-            )}
-          >
-            <div className="flex flex-col items-center gap-4">
-              <div className="relative">
-                <Avatar className="h-24 w-24 border-4 border-white shadow-lg">
-                  <AvatarImage src={persona.avatar} />
-                  <AvatarFallback>
-                    {persona.name.substring(0, 2)}
-                  </AvatarFallback>
-                </Avatar>
-                {selectedPersona === persona.id && (
-                  <div className="absolute -right-2 top-0 grid h-7 w-7 place-items-center rounded-full bg-brand-500 text-white shadow-xl ring-4 ring-white">
-                    <Check className="h-4 w-4 stroke-[3]" />
-                  </div>
-                )}
+        {PERSONAS.map((persona) => {
+          const isSelected = selectedPersona === persona.id;
+          return (
+            <div
+              key={persona.id}
+              onClick={() => setSelectedPersona(persona.id)}
+              className={cn(
+                "group relative w-[260px] cursor-pointer rounded-2xl border-2 bg-white p-6 transition-all duration-300",
+                isSelected
+                  ? "border-brand-500"
+                  : "border-grayScale-100 hover:border-brand-200",
+              )}
+            >
+              {/* Top-right checkmark badge */}
+              {isSelected && (
+                <div className="absolute right-2.5 top-2.5 grid h-6 w-6 place-items-center rounded-full bg-brand-500 text-white  z-10">
+                  <Check className="h-4 w-4 stroke-[3]" />
+                </div>
+              )}
+              <div className="flex flex-col items-center gap-4">
+                {/* Avatar with conditional purple ring */}
+                <div
+                  className={cn(
+                    "rounded-full p-[3px] transition-all duration-300",
+                    isSelected ? "bg-brand-500" : "bg-transparent",
+                  )}
+                >
+                  <Avatar className="h-24 w-24 border-2 border-white">
+                    <AvatarImage src={persona.avatar} />
+                    <AvatarFallback>
+                      {persona.name.substring(0, 2)}
+                    </AvatarFallback>
+                  </Avatar>
+                </div>
+                <span className="text-lg font-bold text-grayScale-700">
+                  {persona.name}
+                </span>
               </div>
-              <span
-                className={cn(
-                  "text-lg font-bold transition-colors",
-                  selectedPersona === persona.id
-                    ? "text-brand-600"
-                    : "text-grayScale-700",
-                )}
-              >
-                {persona.name}
-              </span>
             </div>
-          </div>
-        ))}
+          );
+        })}
       </div>
       <div className="flex items-center justify-between pt-8">
         <Button
           onClick={prevStep}
           variant="outline"
-          className="h-12 w-28 rounded-xl border-grayScale-200 font-bold text-grayScale-600"
+          className="h-10 w-20 rounded-[6px] border-grayScale-200  text-grayScale-600"
         >
           Back
         </Button>
         <Button
           onClick={nextStep}
-          className="h-12 rounded-xl bg-brand-500 px-8 font-bold hover:bg-brand-600 shadow-md shadow-brand-500/20"
+          className="h-10 rounded-[6px] bg-brand-500 px-8  hover:bg-brand-600 shadow-md shadow-brand-500/20"
         >
           Next: Questions <ArrowRight className="ml-2 h-4 w-4" />
         </Button>
diff --git a/src/pages/content-management/components/practice-steps/ProgramAttachReviewStep.tsx b/src/pages/content-management/components/practice-steps/ProgramAttachReviewStep.tsx
new file mode 100644
index 0000000..cd0422c
--- /dev/null
+++ b/src/pages/content-management/components/practice-steps/ProgramAttachReviewStep.tsx
@@ -0,0 +1,107 @@
+import { Edit2, Trash2, ArrowRight } from "lucide-react";
+import { Button } from "../../../../components/ui/button";
+import { Card } from "../../../../components/ui/card";
+import { cn } from "../../../../lib/utils";
+
+interface ProgramAttachReviewStepProps {
+  formData: any;
+  prevStep: () => void;
+  onPublish: () => void;
+  onCancel: () => void;
+}
+
+const MOCK_QUESTIONS = [
+  {
+    id: "q1",
+    title: "1. Speak About The Photo",
+    description:
+      'Passage: "Good morning, everyone. I\'d like to start by reviewing the quarterly figures. As you can see from the chart..."',
+  },
+  {
+    id: "q2",
+    title: "2. Fill In the Blank",
+    description:
+      'Passage: "Attention passengers on Flight 492 to London. We are now inviting passengers with small children..."',
+  },
+  {
+    id: "q3",
+    title: "3. Writing Part 1",
+    description:
+      'Passage: "In today\'s lecture on astrophysics, we will discuss the concept of event horizons and their implications..."',
+  },
+];
+
+export function ProgramAttachReviewStep({
+  formData,
+  prevStep,
+  onPublish,
+  onCancel,
+}: ProgramAttachReviewStepProps) {
+  return (
+    <div className="space-y-6 animate-in fade-in duration-500">
+      {/* Questions List */}
+      <div className="space-y-6">
+        {MOCK_QUESTIONS.map((q) => (
+          <Card
+            key={q.id}
+            className="group relative flex border-grayScale-200 rounded-2xl bg-white  overflow-hidden  transition-all"
+          >
+            {/* Grip Area */}
+            <div className="w-[50px] flex items-center justify-center bg-white border-r border-grayScale-200">
+              <GripVertical className="h-3 w-3 text-grayScale-600" />
+            </div>
+
+            {/* Content Area */}
+            <div className="flex-1 p-8 py-10">
+              <h4 className="text-[18px] font-medium text-[#0F172A] mb-3 leading-tight">
+                {q.title}
+              </h4>
+              <p className="text-[14px] text-grayScale-400  leading-relaxed line-clamp-2">
+                {q.description}
+              </p>
+            </div>
+
+            {/* Actions Area (Vertical Stack) */}
+            <div className="w-[50px] border-l border-grayScale-200 flex flex-col items-center justify-center divide-y divide-grayScale-50">
+              <button className="flex-1 w-full flex items-center justify-center text-grayScale-600 hover:text-brand-500 transition-colors border-b border-grayScale-200">
+                <Edit2 className="h-4 w-4" />
+              </button>
+              <button className="flex-1 w-full flex items-center justify-center text-grayScale-600 hover:text-red-500 transition-colors">
+                <Trash2 className="h-4 w-4" />
+              </button>
+            </div>
+          </Card>
+        ))}
+      </div>
+
+      {/* Footer Actions */}
+      <div className="flex bg-[#F8FAFC] border border-grayScale-200 items-center rounded-[12px] justify-between py-4 px-6">
+        <Button
+          onClick={onCancel}
+          variant="outline"
+          className="h-10 px-6 rounded-[6px] border-grayScale-100 font-bold text-grayScale-500 bg-white hover:bg-grayScale-50 transition-all text-lg"
+        >
+          Cancel
+        </Button>
+        <Button
+          onClick={onPublish}
+          className="h-10 px-10 rounded-[6px] bg-[#9E2891] text-[16px] font-medium text-white  transition-all active:scale-95 flex items-center gap-3"
+        >
+          Next: Review & Publish
+          <ArrowRight className="h-4 w-4" />
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+// GripVertical helper
+function GripVertical({ className }: { className?: string }) {
+  return (
+    <div className={cn("grid grid-cols-2 gap-0.5", className)}>
+      {[...Array(6)].map((_, i) => (
+        <div key={i} className="h-1 w-1 rounded-full bg-current" />
+      ))}
+    </div>
+  );
+}
diff --git a/src/pages/content-management/components/practice-steps/ProgramAttachStep1.tsx b/src/pages/content-management/components/practice-steps/ProgramAttachStep1.tsx
new file mode 100644
index 0000000..45fe4cb
--- /dev/null
+++ b/src/pages/content-management/components/practice-steps/ProgramAttachStep1.tsx
@@ -0,0 +1,141 @@
+import { LayoutGrid, Plus, ArrowRight } from "lucide-react";
+import { Button } from "../../../../components/ui/button";
+import { Card } from "../../../../components/ui/card";
+import { Select } from "../../../../components/ui/select";
+import { cn } from "../../../../lib/utils";
+
+interface ProgramAttachStep1Props {
+  formData: any;
+  setFormData: (data: any) => void;
+  nextStep: () => void;
+  onCancel: () => void;
+}
+
+export function ProgramAttachStep1({
+  formData,
+  setFormData,
+  nextStep,
+  onCancel,
+}: ProgramAttachStep1Props) {
+  return (
+    <Card className="overflow-hidden border-grayScale-100 rounded-[16px] bg-white shadow-sm animate-in fade-in duration-500">
+      <div className="space-y-6 p-8 pb-16">
+        {/* Select Program */}
+        <div className="space-y-4">
+          <label className="text-[14px] font-medium text-[#0F172A] ml-1">
+            Select Program
+          </label>
+          <div className="relative">
+            <div className="absolute left-6 top-1/2 -translate-y-1/2 pointer-events-none z-10">
+              <LayoutGrid className="h-5 w-5 text-grayScale-400" />
+            </div>
+            <Select
+              className="h-[56px] w-full rounded-[12px] border-grayScale-200 bg-white pl-16 text-grayScale-700 font-medium focus:border-brand-500 transition-all text-sm appearance-none"
+              value={formData.program}
+              onChange={(e) =>
+                setFormData({ ...formData, program: e.target.value })
+              }
+            >
+              <option value="">Choose Program</option>
+              <option value="exams">English Proficiency Exams</option>
+              <option value="skill">Skill-Based Courses</option>
+            </Select>
+          </div>
+        </div>
+
+        {/* Tests (Auto Select) */}
+        <div className="space-y-4">
+          <label className="text-[14px] font-medium text-grayScale-900 ml-1">
+            Tests{" "}
+            <span className="text-grayScale-400 font-medium">
+              (Auto Select)
+            </span>
+          </label>
+          <div className="relative">
+            <div className="absolute left-6 top-1/2 -translate-y-1/2 pointer-events-none z-10">
+              <LayoutGrid className="h-5 w-5 text-grayScale-400" />
+            </div>
+            <div className="h-[56px] w-full rounded-[12px] border border-grayScale-200 bg-white flex items-center pl-16 text-grayScale-700 font-medium text-sm">
+              Mock Exam 1
+            </div>
+          </div>
+        </div>
+
+        <div className="w-full border-t border-grayScale-300" />
+
+        {/* Select Question Type */}
+        <div className="space-y-4">
+          <label className="text-[14px] font-medium text-[#0F172A] ml-1">
+            Select Question Type
+          </label>
+          <div className="relative">
+            <div className="absolute left-6 top-1/2 -translate-y-1/2 pointer-events-none z-10">
+              <LayoutGrid className="h-5 w-5 text-grayScale-400" />
+            </div>
+            <Select
+              className="h-[56px] w-full rounded-[12px] border-grayScale-200 bg-white pl-16 text-grayScale-700 font-medium focus:border-brand-500 transition-all text-sm appearance-none"
+              value={formData.questionType}
+              onChange={(e) =>
+                setFormData({ ...formData, questionType: e.target.value })
+              }
+            >
+              <option value="">Choose question type</option>
+              <option value="Speaking Practice">Speaking Practice</option>
+              <option value="Writing Part 1">Writing Part 1</option>
+            </Select>
+          </div>
+          <p className="text-[13px] text-grayScale-400 font-medium px-1">
+            Select one question type that associates with th selected video
+          </p>
+        </div>
+
+        {/* Set Version */}
+        <div className="space-y-4">
+          <label className="text-[14px] font-medium text-[#0F172A] ml-1">
+            Set Version
+          </label>
+          <div className="relative">
+            <div className="absolute left-6 top-1/2 -translate-y-1/2 pointer-events-none z-10">
+              <LayoutGrid className="h-5 w-5 text-grayScale-400" />
+            </div>
+            <Select
+              className="h-[56px] w-full rounded-[12px] border-grayScale-200 bg-white pl-16 text-grayScale-700 font-medium focus:border-brand-500 transition-all text-sm appearance-none"
+              value={formData.version}
+              onChange={(e) =>
+                setFormData({ ...formData, version: e.target.value })
+              }
+            >
+              <option value="">Choose a version</option>
+              <option value="V 1.0">V 1.0</option>
+              <option value="V 2.0">V 2.0</option>
+            </Select>
+          </div>
+        </div>
+
+        {/* Add More Button */}
+        <button className="flex items-center gap-2 text-[#9E2891] font-medium text-[14px] group transition-all hover:translate-x-1">
+          <div className="h-5 w-5 rounded-full border-2 border-[#9E2891] flex items-center justify-center">
+            <Plus className="h-3 w-3" />
+          </div>
+          Add More
+        </button>
+      </div>
+
+      <div className="flex items-center justify-between border-t border-grayScale-200 bg-[#F8FAFC] py-4 px-12">
+        <button
+          className="text-[14px] text-grayScale-500 transition-colors hover:text-grayScale-700"
+          onClick={onCancel}
+        >
+          Cancel
+        </button>
+        <Button
+          onClick={nextStep}
+          className="h-10 px-12 rounded-[6px] bg-[#9E2891] text-[14px] font-bold text-white shadow-lg shadow-brand-500/10 transition-all active:scale-95 flex items-center gap-3"
+        >
+          Next: Review
+          <ArrowRight className="h-4 w-4" />
+        </Button>
+      </div>
+    </Card>
+  );
+}
diff --git a/src/pages/content-management/components/practice-steps/QuestionsStep.tsx b/src/pages/content-management/components/practice-steps/QuestionsStep.tsx
index 184f95c..77c6742 100644
--- a/src/pages/content-management/components/practice-steps/QuestionsStep.tsx
+++ b/src/pages/content-management/components/practice-steps/QuestionsStep.tsx
@@ -34,7 +34,7 @@ export function QuestionsStep({
   return (
     <div className="space-y-6">
       <div className="space-y-1 px-2">
-        <h2 className="text-2xl font-extrabold text-grayScale-700">
+        <h2 className="text-2xl font-bold text-grayScale-700">
           Create Practice Questions
         </h2>
         <p className="text-grayScale-400 text-lg">
@@ -52,7 +52,7 @@ export function QuestionsStep({
               <div className="flex items-center justify-between border-b border-grayScale-50 pb-4 mb-4">
                 <div className="flex items-center gap-3">
                   <GripVertical className="h-5 w-5 text-brand-500 cursor-grab" />
-                  <span className="font-bold text-grayScale-500 text-lg">
+                  <span className="font-bold text-grayScale-500 text-base">
                     Question {i + 1}
                   </span>
                 </div>
@@ -67,7 +67,7 @@ export function QuestionsStep({
                     setFormData({ ...formData, questions: newQuestions });
                   }}
                 >
-                  <Trash2 className="h-5 w-5" />
+                  <Trash2 className="h-4 w-4" />
                 </Button>
               </div>
               <div className="grid grid-cols-1 md:grid-cols-12 gap-8">
@@ -82,7 +82,7 @@ export function QuestionsStep({
                       newQuestions[i].text = e.target.value;
                       setFormData({ ...formData, questions: newQuestions });
                     }}
-                    className="h-16 rounded-xl border-grayScale-200 focus:border-brand-500 font-medium px-6 text-lg placeholder:text-grayScale-300 bg-white"
+                    className="h-16 rounded-xl border-grayScale-200 font-medium px-6 text-base placeholder:text-grayScale-400 bg-white text-grayScale-700"
                     placeholder="e.g. How long have you been studying English?"
                   />
                 </div>
@@ -90,14 +90,30 @@ export function QuestionsStep({
                   <label className="text-[10px] font-bold text-grayScale-700 uppercase tracking-widest">
                     VOICE PROMPT
                   </label>
-                  <VoicePrompt filename={q.voicePrompt} />
+                  <VoicePrompt
+                    src={q.voicePrompt}
+                    filename={q.voicePrompt}
+                    onRemove={() => {
+                      const newQuestions = [...formData.questions];
+                      newQuestions[i].voicePrompt = "";
+                      setFormData({ ...formData, questions: newQuestions });
+                    }}
+                  />
                 </div>
               </div>
               <div className="md:w-1/3 space-y-3">
                 <label className="text-[10px] font-bold text-grayScale-700 uppercase tracking-widest">
                   SAMPLE ANSWER PROMPT
                 </label>
-                <VoicePrompt filename={q.sampleAnswer} />
+                <VoicePrompt
+                  src={q.sampleAnswer}
+                  filename={q.sampleAnswer}
+                  onRemove={() => {
+                    const newQuestions = [...formData.questions];
+                    newQuestions[i].sampleAnswer = "";
+                    setFormData({ ...formData, questions: newQuestions });
+                  }}
+                />
               </div>
             </div>
           </Card>
@@ -124,13 +140,13 @@ export function QuestionsStep({
         <Button
           onClick={prevStep}
           variant="outline"
-          className="h-12 w-28 rounded-xl border-grayScale-200 font-bold text-grayScale-600 shadow-sm"
+          className="h-10 w-20 rounded-[6px] border-grayScale-200 font-bold text-grayScale-600 shadow-sm"
         >
           Back
         </Button>
         <Button
           onClick={nextStep}
-          className="h-12 rounded-xl bg-brand-500 px-8 font-bold hover:bg-brand-600 shadow-md shadow-brand-500/20"
+          className="h-10 rounded-[6px] bg-brand-500 px-8 font-bold  "
         >
           Next: Review <ArrowRight className="ml-2 h-4 w-4" />
         </Button>
diff --git a/src/pages/content-management/components/practice-steps/ReviewStep.tsx b/src/pages/content-management/components/practice-steps/ReviewStep.tsx
index 649dc7f..cb87758 100644
--- a/src/pages/content-management/components/practice-steps/ReviewStep.tsx
+++ b/src/pages/content-management/components/practice-steps/ReviewStep.tsx
@@ -1,6 +1,7 @@
 import { Edit2, GripVertical, Trash2, Rocket, Info } from "lucide-react";
 import { Button } from "../../../../components/ui/button";
 import { Card } from "../../../../components/ui/card";
+import { Input } from "../../../../components/ui/input";
 import {
   Avatar,
   AvatarFallback,
@@ -8,7 +9,6 @@ import {
 } from "../../../../components/ui/avatar";
 import { PERSONAS } from "./constants";
 import { VoicePrompt } from "./VoicePrompt";
-import { cn } from "../../../../lib/utils";
 
 interface ReviewStepProps {
   formData: any;
@@ -36,8 +36,8 @@ export function ReviewStep({
       </div>
 
       {/* 1. Basic Info Card (Image 1436.1) */}
-      <Card className="overflow-hidden border border-grayScale-50 shadow-soft rounded-2xl bg-white shadow-sm">
-        <div className="border-b border-grayScale-50 p-6 px-10 flex justify-between items-center bg-white">
+      <Card className="overflow-hidden border border-grayScale-200 rounded-2xl bg-white ">
+        <div className="border-b border-grayScale-50 p-4 px-5 flex justify-between items-center bg-white">
           <h3 className="text-[17px] font-extrabold text-grayScale-900">
             Basic Information
           </h3>
@@ -50,9 +50,26 @@ export function ReviewStep({
             Edit
           </Button>
         </div>
-        <div className="p-8 px-10 flex items-center justify-between ">
+        {/* Gradient Divider */}
+        <div className="relative">
+          <div
+            className="absolute inset-0 flex items-center"
+            aria-hidden="true"
+          >
+            <div className="w-full border-t border-grayScale-100" />
+          </div>
+          <div className="relative flex justify-center">
+            <div
+              className="h-[0.5px] w-full opacity-20 rounded-full"
+              style={{
+                background: "gray",
+              }}
+            />
+          </div>
+        </div>
+        <div className="p-8 px-5 flex items-center justify-between ">
           <div className="flex items-center gap-6">
-            <div className="h-[72px] w-[110px] rounded-xl bg-grayScale-100 overflow-hidden shadow-inner flex-shrink-0">
+            <div className="h-[70px] w-[85px] rounded-xl bg-grayScale-100 overflow-hidden shadow-inner flex-shrink-0">
               <img
                 src="https://images.unsplash.com/photo-1558403194-611308249627?auto=format&fit=crop&q=80&w=200"
                 alt="Banner"
@@ -60,21 +77,17 @@ export function ReviewStep({
               />
             </div>
             <div className="space-y-2">
-              <h4 className="text-[22px] font-extrabold text-grayScale-900 leading-tight">
+              <h4 className="text-[22px] font-bold text-grayScale-900 leading-tight">
                 {formData.title || "Business English 101: Communication"}
               </h4>
               <div className="flex items-center gap-6 text-[14px]">
-                <span className="text-grayScale-900 font-bold">
+                <span className="text-grayScale-900 ">
                   Program:{" "}
-                  <span className="text-brand-500 font-extrabold">
-                    {formData.program}
-                  </span>
+                  <span className="text-brand-500 ">{formData.program}</span>
                 </span>
-                <span className="text-grayScale-900 font-bold">
+                <span className="text-grayScale-900 ">
                   Course:{" "}
-                  <span className="text-brand-500 font-extrabold">
-                    {formData.course}
-                  </span>
+                  <span className="text-brand-500 ">{formData.course}</span>
                 </span>
                 <span className="text-grayScale-900 font-bold">
                   Module:{" "}
@@ -86,15 +99,15 @@ export function ReviewStep({
             </div>
           </div>
           <div className="flex flex-col items-center gap-2">
-            <span className="text-[11px] font-bold text-grayScale-900 uppercase tracking-widest">
+            <span className="text-[11px] text-left font-medium text-grayScale-900 ">
               Persona
             </span>
-            <div className="flex items-center gap-2 bg-[#FAF5FF] p-2 pl-2.5 pr-4 rounded-full border border-brand-100/30">
+            <div className="flex items-center gap-2 bg-[#FAF5FF] py-1 pl-2.5 pr-4 rounded-full border border-brand-100/30">
               <Avatar className="h-8 w-8 border-2 border-white shadow-sm font-bold">
                 <AvatarImage src={persona?.avatar} />
                 <AvatarFallback>P</AvatarFallback>
               </Avatar>
-              <span className="text-[14px] font-extrabold text-brand-500 capitalize">
+              <span className="text-[14px]  text-brand-500 capitalize">
                 {persona?.name || "Alex Johnson"}
               </span>
             </div>
@@ -120,18 +133,18 @@ export function ReviewStep({
 
       {isModuleContext ? (
         /* 3. Split Questions & Answers Layout (Image 1413.1) */
-        <div className="grid grid-cols-1 md:grid-cols-2 bg-white rounded-[24px] border border-grayScale-50 shadow-sm overflow-hidden min-h-[600px]">
+        <div className="grid grid-cols-1 md:grid-cols-2 bg-white rounded-[12px] border border-grayScale-50 shadow-sm overflow-hidden min-h-[600px]">
           {/* Left Column: Questions */}
-          <div className="border-r border-grayScale-50 flex flex-col">
-            <div className="p-6 px-10 border-b border-grayScale-50 flex items-center gap-3 bg-white">
+          <div className="border-r border-grayScale-200 flex flex-col">
+            <div className="p-4  border-b border-grayScale-50 flex items-center gap-3 bg-white">
               <h3 className="text-[16px] font-extrabold text-[#0F172A]">
                 Questions
               </h3>
-              <span className="h-6 w-6 rounded-full bg-grayScale-50 flex items-center justify-center text-[12px] font-extrabold text-grayScale-300">
+              <span className="h-6 w-6 rounded-full bg-grayScale-100 flex items-center justify-center text-[12px] font-extrabold text-grayScale-500">
                 {formData.questions.length}
               </span>
             </div>
-            <div className="p-10 space-y-14">
+            <div className="p-4 space-y-14">
               {formData.questions.map((q: any, i: number) => (
                 <div key={q.id} className="relative pl-12">
                   <span className="absolute left-0 top-0 text-[18px] font-bold text-grayScale-400 tracking-tighter opacity-70">
@@ -163,19 +176,19 @@ export function ReviewStep({
 
           {/* Right Column: Answers */}
           <div className="flex flex-col">
-            <div className="p-6 px-10 border-b border-grayScale-50 flex items-center justify-between bg-white">
+            <div className="p-4 border-b border-grayScale-50 flex items-center justify-between bg-white">
               <div className="flex items-center gap-3">
                 <h3 className="text-[16px] font-extrabold ">Answers</h3>
-                <span className="h-6 w-6 rounded-full bg-grayScale-50  flex items-center justify-center text-[12px] font-extrabold text-brand-300">
+                <span className="h-6 w-6 rounded-full bg-grayScale-100  flex items-center justify-center text-[12px] font-extrabold text-grayScale-500">
                   {formData.questions.length}
                 </span>
               </div>
               <button className="flex items-center gap-2 text-brand-500 font-bold text-[15px] hover:opacity-80 transition-opacity">
-                <Edit2 className="h-4 w-4" />
+                <Edit2 className="h-3 w-3" />
                 Edit
               </button>
             </div>
-            <div className="p-10 space-y-14">
+            <div className="p-4 space-y-14">
               {formData.questions.map((q: any, i: number) => (
                 <div key={q.id + "_ans"} className="relative pl-12">
                   <span className="absolute left-0 top-0 text-[18px] font-bold text-grayScale-400 tracking-tighter opacity-70">
@@ -187,7 +200,7 @@ export function ReviewStep({
                     </span>
                     <VoicePrompt
                       filename={q.sampleAnswer}
-                      className="bg-[#FAF5FF]/60 border-[#F3E8FF] h-[72px]"
+                      className="bg-[#FAF5FF]/60 border-[#F3E8FF] h-[60px]"
                     />
                   </div>
                 </div>
@@ -209,20 +222,20 @@ export function ReviewStep({
         <Button
           onClick={prevStep}
           variant="outline"
-          className="h-12 px-10 rounded-xl border-grayScale-200 font-bold text-grayScale-600 bg-white shadow-sm hover:bg-grayScale-50 transition-all text-sm"
+          className="h-10 px-10 rounded-[6px] border-grayScale-200 font-bold text-grayScale-600 bg-white shadow-sm hover:bg-grayScale-50 transition-all text-sm"
         >
           Back
         </Button>
         <div className="flex gap-4">
           <Button
             variant="outline"
-            className="h-12 px-8 rounded-xl border-grayScale-100 font-bold text-grayScale-600 bg-white shadow-sm hover:bg-grayScale-50 transition-all text-sm"
+            className="h-10 px-8 rounded-[6px] border-grayScale-100 font-bold text-grayScale-600 bg-white shadow-sm hover:bg-grayScale-50 transition-all text-sm"
           >
             Save as Draft
           </Button>
           <Button
             onClick={() => setIsPublished(true)}
-            className="h-12 px-10 rounded-xl bg-brand-500 font-bold hover:bg-brand-600 shadow-xl shadow-brand-500/20 gap-3 active:scale-95 transition-all text-white text-sm"
+            className="h-10 px-10 rounded-[6px] bg-brand-500 font-bold hover:bg-brand-600 shadow-xl shadow-brand-500/20 gap-3 active:scale-95 transition-all text-white text-sm"
           >
             <Rocket className="h-4 w-4" />
             Publish Now
@@ -235,53 +248,55 @@ export function ReviewStep({
 
 function ReviewItem({ q, index }: { q: any; index: number }) {
   return (
-    <Card className="overflow-hidden border border-grayScale-50 shadow-sm rounded-2xl bg-white relative p-8 group">
-      <div className="absolute left-0 top-0 bottom-0 w-[5px] bg-brand-500 opacity-0 group-hover:opacity-100 transition-opacity" />
-      <div className="space-y-8">
-        <div className="flex items-center justify-between border-b border-grayScale-50 pb-6">
-          <div className="flex items-center gap-4">
-            <GripVertical className="h-4 w-4 text-grayScale-200" />
-            <span className="font-bold text-grayScale-800 text-[18px]">
+    <Card className="overflow-hidden border-grayScale-50 shadow-soft rounded-2xl bg-white relative">
+      <div className="absolute left-0 top-0 bottom-0 w-[5px] bg-brand-500" />
+      <div className="px-5 pb-7 pt-2 space-y-6">
+        <div className="flex items-center justify-between border-b border-grayScale-50 pb-4 mb-4">
+          <div className="flex items-center gap-3">
+            <GripVertical className="h-5 w-5 text-brand-500 cursor-grab" />
+            <span className="font-bold text-grayScale-500 text-base">
               Question {index + 1}
             </span>
           </div>
-          <div className="flex items-center gap-3">
-            <button className="h-9 w-9 rounded-lg border border-grayScale-100 flex items-center justify-center text-grayScale-400 hover:text-brand-500 hover:border-brand-100 transition-all">
-              <Edit2 className="h-4 w-4" />
-            </button>
-            <button className="h-9 w-9 rounded-lg border border-grayScale-100 flex items-center justify-center text-grayScale-400 hover:text-red-500 hover:border-red-100 transition-all">
-              <Trash2 className="h-4 w-4" />
-            </button>
-          </div>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="text-brand-500 hover:bg-brand-50 rounded-lg"
+          >
+            <Trash2 className="h-4 w-4" />
+          </Button>
         </div>
-
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
-          <div className="space-y-4">
-            <span className="text-[11px] font-extrabold text-grayScale-300 uppercase tracking-widest block">
-              TEXT PROMPT
-            </span>
-            <p className="text-[16px] font-medium text-grayScale-600 leading-relaxed shadow-sm p-6 border border-grayScale-50 rounded-2xl bg-[#F8FAFC]/30">
-              {q.text}
-            </p>
+        <div className="grid grid-cols-1 md:grid-cols-12 gap-8">
+          <div className="md:col-span-8 space-y-3">
+            <label className="text-[10px] font-bold text-grayScale-700 uppercase tracking-widest">
+              QUESTION PROMPT
+            </label>
+            <Input
+              value={q.text}
+              readOnly
+              className="h-16 rounded-xl border-grayScale-200 font-medium px-6 text-base placeholder:text-grayScale-400 bg-white text-grayScale-700"
+              placeholder="e.g. How long have you been studying English?"
+            />
           </div>
-          <div className="space-y-4">
-            <span className="text-[11px] font-extrabold text-grayScale-300 uppercase tracking-widest block">
+          <div className="md:col-span-4 space-y-3">
+            <label className="text-[10px] font-bold text-grayScale-700 uppercase tracking-widest">
               VOICE PROMPT
-            </span>
+            </label>
             <VoicePrompt
+              src={q.voicePrompt}
               filename={q.voicePrompt}
-              className="bg-[#FAF5FF]/60 border-[#F3E8FF] h-[76px]"
+              onRemove={() => {}}
             />
           </div>
         </div>
-
-        <div className="space-y-4 max-w-sm">
-          <span className="text-[11px] font-extrabold text-grayScale-300 uppercase tracking-widest block">
-            SAMPLE ANSWER
-          </span>
+        <div className="md:w-1/3 space-y-3">
+          <label className="text-[10px] font-bold text-grayScale-700 uppercase tracking-widest">
+            SAMPLE ANSWER PROMPT
+          </label>
           <VoicePrompt
+            src={q.sampleAnswer}
             filename={q.sampleAnswer}
-            className="bg-grayScale-50/10 border-dashed h-[72px]"
+            onRemove={() => {}}
           />
         </div>
       </div>
diff --git a/src/pages/content-management/components/practice-steps/ScenarioStep.tsx b/src/pages/content-management/components/practice-steps/ScenarioStep.tsx
index c3ace37..f7f7d7c 100644
--- a/src/pages/content-management/components/practice-steps/ScenarioStep.tsx
+++ b/src/pages/content-management/components/practice-steps/ScenarioStep.tsx
@@ -27,44 +27,43 @@ export function ScenarioStep({
           Set the scene and context for this English practice session.
         </p>
       </div>
-      <Card className="p-8 space-y-6 border-grayScale-50 shadow-soft rounded-2xl bg-white">
-        <div className="space-y-2">
-          <label className="text-sm font-bold text-grayScale-700">
+      <Card className="p-8 space-y-6 border-grayScale-200 rounded-2xl bg-white">
+        <div className="space-y-1">
+          <label className="text-sm text-grayScale-700">
             Practice Banner Image
           </label>
-          <p className="text-xs text-grayScale-400">
+          <p className="text-xs pb-2 text-grayScale-400">
             This image will appear as the background for the scenario.
           </p>
-          <div className="mt-4 flex flex-col items-center justify-center rounded-2xl border-2 border-dashed border-grayScale-100 bg-[#F8F9FA] p-12 hover:bg-grayScale-50 transition-all">
+          <div className="mt-4 flex flex-col items-center justify-center rounded-2xl border-2 border-dashed border-grayScale-200 bg-[#F8F9FA] p-12 hover:bg-grayScale-50 transition-all">
             <div className="mb-4 rounded-xl border border-grayScale-100 bg-white p-3 text-brand-500 shadow-sm">
               <Upload className="h-6 w-6" />
             </div>
             <p className="text-sm">
-              <span className="font-bold text-grayScale-700">
-                Click to upload
-              </span>{" "}
-              <span className="text-grayScale-500">or drag and drop</span>
+              <span className="text-grayScale-700">
+                Click to upload or drag and drop
+              </span>
             </p>
-            <p className="mt-1 text-xs text-grayScale-400 uppercase tracking-wide font-bold">
+            <p className="mt-1 text-xs text-grayScale-400 uppercase tracking-wide ">
               SVG, PNG, JPG (MAX 5MB)
             </p>
             <Button
               variant="outline"
-              className="mt-6 h-10 rounded-xl border-grayScale-200 bg-white px-8 font-bold text-grayScale-600 shadow-sm hover:bg-grayScale-50"
+              className="mt-6 h-10 rounded-[6px] border-grayScale-200 bg-white px-8 font-bold text-brand-500 shadow-sm hover:bg-grayScale-50"
             >
               Browse Files
             </Button>
           </div>
         </div>
       </Card>
-      <Card className="p-8 space-y-6 border-grayScale-50 shadow-soft rounded-2xl bg-white">
+      <Card className="p-8 space-y-6 border-grayScale-200 rounded-2xl bg-white">
         <div className="space-y-2">
-          <label className="text-sm font-bold text-grayScale-700">
+          <label className="text-sm font-medium text-grayScale-700">
             Practice Title <span className="text-red-500">*</span>
           </label>
           <Input
             placeholder="e.g., Ordering Coffee at a Cafe"
-            className="h-14 rounded-xl border-grayScale-200 focus:border-brand-500 font-bold placeholder:text-grayScale-300 bg-white"
+            className="h-12 rounded-xl border-grayScale-200 focus:border-brand-500  placeholder:text-grayScale-500 bg-white"
             value={formData.title}
             onChange={(e) =>
               setFormData({ ...formData, title: e.target.value })
@@ -72,13 +71,13 @@ export function ScenarioStep({
           />
         </div>
         <div className="space-y-2">
-          <label className="text-sm font-bold text-grayScale-700">
+          <label className="text-sm font-medium text-grayScale-700">
             Scenario Description <span className="text-red-500">*</span>
           </label>
           <div className="relative">
             <Textarea
               placeholder="Describe the setting..."
-              className="min-h-[160px] rounded-xl resize-none p-4 border-grayScale-200 focus:border-brand-500 leading-relaxed font-bold placeholder:text-grayScale-300 bg-white"
+              className="min-h-[160px] rounded-xl resize-none p-4 border-grayScale-200 focus:border-brand-500 leading-relaxed placeholder:text-grayScale-500 bg-white"
               maxLength={1000}
               value={formData.description}
               onChange={(e) =>
@@ -88,24 +87,28 @@ export function ScenarioStep({
                 })
               }
             />
-            <div className="absolute bottom-4 right-4 text-xs font-bold text-grayScale-300">
+            <div className="absolute bottom-4 right-4 text-xs font-bold text-grayScale-500">
               {formData.description.length} / 1000
             </div>
           </div>
+          <span className="text-xs  text-grayScale-500">
+            Provide context for the AI and the student. Be specific about the
+            location and the goal.
+          </span>
         </div>
       </Card>
       <div className="flex items-center justify-between pt-4">
         <Button
           onClick={prevStep}
           variant="outline"
-          className="h-12 w-28 rounded-xl border-grayScale-200 font-bold text-grayScale-600 shadow-sm"
+          className="h-10 w-20 rounded-[6px] border-grayScale-200 text-grayScale-600 shadow-sm"
         >
           Back
         </Button>
         <Button
           onClick={nextStep}
           disabled={!formData.title || !formData.description}
-          className="h-12 rounded-xl bg-brand-500 px-8 font-bold hover:bg-brand-600 shadow-md shadow-brand-500/20"
+          className="h-10 rounded-[6px] bg-brand-500 px-8 "
         >
           Next: Persona <ArrowRight className="ml-2 h-4 w-4" />
         </Button>
diff --git a/src/pages/content-management/components/practice-steps/VoicePrompt.tsx b/src/pages/content-management/components/practice-steps/VoicePrompt.tsx
index 1be5b6c..b570776 100644
--- a/src/pages/content-management/components/practice-steps/VoicePrompt.tsx
+++ b/src/pages/content-management/components/practice-steps/VoicePrompt.tsx
@@ -1,44 +1,182 @@
-import { Play, X } from "lucide-react";
-import { Button } from "../../../../components/ui/button";
+import { useEffect, useRef, useState } from "react";
+import { Play, Pause, X } from "lucide-react";
 import { cn } from "../../../../lib/utils";
 
 interface VoicePromptProps {
+  /** Either a URL/path to the audio file, or a filename string (for display-only mode) */
+  src?: string;
   filename: string;
+  onRemove?: () => void;
   className?: string;
 }
 
-export function VoicePrompt({ filename, className }: VoicePromptProps) {
+const BAR_COUNT = 24;
+
+export function VoicePrompt({
+  src,
+  filename,
+  onRemove,
+  className,
+}: VoicePromptProps) {
+  const [bars, setBars] = useState<number[]>([]);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [progress, setProgress] = useState(0); // 0–1
+
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+  const rafRef = useRef<number | null>(null);
+
+  // ─── Decode audio and build waveform bars ───────────────────────────────────
+  useEffect(() => {
+    if (!src) {
+      // No real audio — generate plausible static bars
+      setBars(generateFakeBars());
+      return;
+    }
+
+    let cancelled = false;
+    const audioCtx = new AudioContext();
+
+    fetch(src)
+      .then((r) => r.arrayBuffer())
+      .then((buf) => audioCtx.decodeAudioData(buf))
+      .then((decoded) => {
+        if (cancelled) return;
+        const raw = decoded.getChannelData(0);
+        const blockSize = Math.floor(raw.length / BAR_COUNT);
+        const barsData = Array.from({ length: BAR_COUNT }, (_, i) => {
+          let sum = 0;
+          for (let j = 0; j < blockSize; j++) {
+            sum += Math.abs(raw[i * blockSize + j]);
+          }
+          return sum / blockSize;
+        });
+        // Normalize to 0–1
+        const max = Math.max(...barsData, 0.001);
+        setBars(barsData.map((v) => v / max));
+      })
+      .catch(() => {
+        if (!cancelled) setBars(generateFakeBars());
+      })
+      .finally(() => audioCtx.close());
+
+    return () => {
+      cancelled = true;
+    };
+  }, [src]);
+
+  // ─── Sync progress while playing ────────────────────────────────────────────
+  const startProgressLoop = () => {
+    const tick = () => {
+      const el = audioRef.current;
+      if (!el) return;
+      setProgress(el.currentTime / (el.duration || 1));
+      rafRef.current = requestAnimationFrame(tick);
+    };
+    rafRef.current = requestAnimationFrame(tick);
+  };
+
+  const stopProgressLoop = () => {
+    if (rafRef.current !== null) {
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = null;
+    }
+  };
+
+  // ─── Play / Pause ────────────────────────────────────────────────────────────
+  const handlePlayPause = () => {
+    if (!src) return;
+
+    if (!audioRef.current) {
+      audioRef.current = new Audio(src);
+      audioRef.current.onended = () => {
+        setIsPlaying(false);
+        setProgress(0);
+        stopProgressLoop();
+      };
+    }
+
+    if (isPlaying) {
+      audioRef.current.pause();
+      stopProgressLoop();
+      setIsPlaying(false);
+    } else {
+      audioRef.current.play().then(() => {
+        setIsPlaying(true);
+        startProgressLoop();
+      });
+    }
+  };
+
+  // ─── Cleanup on unmount ──────────────────────────────────────────────────────
+  useEffect(() => {
+    return () => {
+      stopProgressLoop();
+      audioRef.current?.pause();
+    };
+  }, []);
+
+  const playedBars = Math.round(progress * BAR_COUNT);
+
   return (
     <div
       className={cn(
-        "flex items-center gap-4 p-4 bg-brand-50/5 rounded-xl border border-grayScale-50 h-20 shadow-sm",
+        "flex items-center gap-4 px-4 py-3 bg-[#F9F0FB] rounded-6px border border-brand-100 min-h-[60px]",
         className,
       )}
     >
-      <div className="h-10 w-10 rounded-full bg-brand-500 flex items-center justify-center text-white shadow-md flex-shrink-0 cursor-pointer hover:bg-brand-600 transition-colors">
-        <Play className="h-5 w-5 fill-current ml-1" />
-      </div>
-      <div className="flex-1 min-w-0">
-        <div className="h-6 flex items-end gap-[2px] px-1 overflow-hidden opacity-40 mb-1">
-          {[...Array(20)].map((_, idx) => (
+      {/* Play / Pause button */}
+      <button
+        onClick={handlePlayPause}
+        className="h-8 w-8 flex-shrink-0 rounded-full bg-brand-500 flex items-center justify-center text-white shadow-md hover:bg-brand-600 transition-colors"
+      >
+        {isPlaying ? (
+          <Pause className="h-3 w-3 fill-current" />
+        ) : (
+          <Play className="h-3 w-3 fill-current ml-0.5" />
+        )}
+      </button>
+
+      {/* Waveform + filename */}
+      <div className="flex-1 min-w-0 flex flex-col gap-1">
+        {/* Bars — centered vertically, grow up and down */}
+        <div className="flex items-center gap-[3.5px] h-6 overflow-hidden">
+          {(bars.length ? bars : generateFakeBars()).map((v, i) => (
             <div
-              key={idx}
-              className="w-[3px] bg-brand-500 rounded-full"
-              style={{ height: `${Math.random() * 80 + 20}%` }}
+              key={i}
+              className="w-[4px] rounded-full flex-shrink-0"
+              style={{
+                height: `${Math.max(v * 100, 14)}%`,
+                backgroundColor: i < playedBars ? "#9E2891" : "#D5C5DC",
+              }}
             />
           ))}
         </div>
-        <p className="text-[10px] font-bold text-brand-500 truncate">
+        {/* Filename */}
+        <p className="text-[11px] font-semibold text-brand-500 truncate">
           {filename}
         </p>
       </div>
-      <Button
-        variant="ghost"
-        size="icon"
-        className="h-8 w-8 text-grayScale-300  rounded-lg"
-      >
-        <X className="h-5 w-5" color="#9E2891" />
-      </Button>
+
+      {/* Remove button */}
+      {onRemove && (
+        <button
+          onClick={onRemove}
+          className="flex-shrink-0 text-brand-500 hover:text-brand-700 transition-colors p-1"
+          aria-label="Remove"
+        >
+          <X className="h-5 w-5" />
+        </button>
+      )}
     </div>
   );
 }
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+function generateFakeBars(): number[] {
+  // Realistic-looking static waveform (peaks in middle, quieter at edges)
+  return Array.from({ length: BAR_COUNT }, (_, i) => {
+    const center = BAR_COUNT / 2;
+    const envelope = 1 - Math.abs(i - center) / center;
+    return Math.max(0.1, envelope * (0.4 + Math.random() * 0.6));
+  });
+}
diff --git a/src/pages/content-management/components/video-steps/ReviewPublishStep.tsx b/src/pages/content-management/components/video-steps/ReviewPublishStep.tsx
index e68be15..dba000f 100644
--- a/src/pages/content-management/components/video-steps/ReviewPublishStep.tsx
+++ b/src/pages/content-management/components/video-steps/ReviewPublishStep.tsx
@@ -1,4 +1,11 @@
-import { Rocket, Edit2, Layout } from "lucide-react";
+import {
+  Rocket,
+  Edit2,
+  Layout,
+  Volume2,
+  Settings,
+  Maximize2,
+} from "lucide-react";
 import { Button } from "../../../../components/ui/button";
 
 interface ReviewPublishStepProps {
@@ -33,17 +40,33 @@ export function ReviewPublishStep({
               </div>
             </div>
 
-            {/* Bottom Controls Placeholder */}
-            <div className="absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-black/80 to-transparent">
-              <div className="h-1.5 w-full bg-white/20 rounded-full mb-4 relative overflow-hidden">
-                <div className="absolute left-0 top-0 bottom-0 w-1/3 bg-brand-500" />
-                <div className="absolute left-1/3 top-1/2 -translate-y-1/2 h-3 w-3 rounded-full bg-white shadow-lg" />
+            {/* Bottom Controls — Matching Image 1884 */}
+            <div className="absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-black/95 via-black/40 to-transparent space-y-4">
+              {/* Row 1: Seeker and Timestamps */}
+              <div className="flex items-center gap-4 text-white">
+                <span className="text-[13px] font-medium opacity-90">0:00</span>
+                <div className="flex-1 h-1 bg-white/20 rounded-full relative cursor-pointer overflow-hidden group/seeker">
+                  <div
+                    className="absolute left-0 top-0 bottom-0 bg-brand-500 rounded-full"
+                    style={{ width: "40%" }}
+                  />
+                </div>
+                <span className="text-[13px] font-medium opacity-90">
+                  12:30
+                </span>
               </div>
-              <div className="flex items-center justify-between text-white/90 text-sm font-medium">
-                <span>0:00 / 12:30</span>
-                <div className="flex items-center gap-4">
-                  <div className="h-4 w-6 border-2 border-white/40 rounded-[2px]" />
-                  <div className="h-4 w-4 border-2 border-white/40 rounded-full" />
+
+              {/* Row 2: Icons */}
+              <div className="flex items-center justify-between text-white">
+                <div className="flex items-center gap-6">
+                  <Volume2 className="h-[22px] w-[22px] opacity-90 cursor-pointer hover:opacity-100 transition-opacity" />
+                  <div className="h-5 w-6 border-2 border-white rounded-[3px] flex items-center justify-center text-[9px] font-bold opacity-90 cursor-pointer hover:opacity-100 transition-opacity">
+                    CC
+                  </div>
+                </div>
+                <div className="flex items-center gap-6">
+                  <Settings className="h-5 w-5 opacity-90 cursor-pointer hover:opacity-100 transition-opacity" />
+                  <Maximize2 className="h-5 w-5 opacity-90 cursor-pointer hover:opacity-100 transition-opacity" />
                 </div>
               </div>
             </div>
@@ -54,14 +77,14 @@ export function ReviewPublishStep({
       {/* 2. Content Details Card */}
       <div className="bg-white rounded-[16px] border border-grayScale-50 shadow-sm overflow-hidden">
         <div className="px-8 py-5 border-b border-grayScale-50 flex items-center justify-between bg-white">
-          <h3 className="text-[17px] font-bold text-grayScale-900">
+          <h3 className="text-[16px] font-bold text-grayScale-900">
             Content Details
           </h3>
           <button
             onClick={prevStep}
             className="flex items-center gap-2 text-brand-500 font-bold text-sm hover:opacity-80 transition-opacity"
           >
-            <Edit2 className="h-4 w-4" />
+            <Edit2 className="h-3 w-3" />
             Edit
           </button>
         </div>
@@ -70,37 +93,37 @@ export function ReviewPublishStep({
           {/* Metadata Grid */}
           <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
             <div className="space-y-2">
-              <span className="text-[11px] font-bold text-grayScale-300 uppercase tracking-widest block">
+              <span className="text-[11px] font-bold text-grayScale-500 uppercase tracking-widest block">
                 TITLE
               </span>
-              <p className="text-[15px] font-bold text-grayScale-900">
+              <p className="text-[15px] font-medium text-grayScale-900">
                 {formData.title || "Introduction to Past Tense"}
               </p>
             </div>
 
             <div className="space-y-2">
-              <span className="text-[11px] font-bold text-grayScale-300 uppercase tracking-widest block">
+              <span className="text-[11px] font-bold text-grayScale-500 uppercase tracking-widest block">
                 ASSIGNED MODULE
               </span>
               <div className="flex items-center gap-2">
                 <Layout className="h-4 w-4 text-grayScale-400" />
-                <p className="text-[14px] font-bold text-grayScale-700">
+                <p className="text-[14px] font-medium text-grayScale-700">
                   Grammar Basics - Level 1
                 </p>
               </div>
             </div>
 
             <div className="space-y-2">
-              <span className="text-[11px] font-bold text-grayScale-300 uppercase tracking-widest block">
+              <span className="text-[11px] font-bold text-grayScale-500 uppercase tracking-widest block">
                 TEACHER NAME
               </span>
-              <p className="text-[15px] font-bold text-grayScale-600">
+              <p className="text-[15px] font-medium text-grayScale-600">
                 Abebe Kebede
               </p>
             </div>
 
             <div className="space-y-2">
-              <span className="text-[11px] font-bold text-grayScale-300 uppercase tracking-widest block">
+              <span className="text-[11px] font-bold text-grayScale-500 uppercase tracking-widest block">
                 FILE SIZE
               </span>
               <div className="flex items-baseline gap-1.5">
@@ -116,11 +139,11 @@ export function ReviewPublishStep({
 
           {/* Description Section */}
           <div className="space-y-3">
-            <span className="text-[11px] font-bold text-grayScale-300 uppercase tracking-widest block">
+            <span className="text-[11px] font-bold text-grayScale-500 uppercase tracking-widest block">
               DESCRIPTION
             </span>
             <div
-              className="text-[14px] text-grayScale-600 font-medium leading-relaxed max-w-4xl"
+              className="text-[14px] text-grayScale-600  leading-relaxed max-w-4xl"
               dangerouslySetInnerHTML={{
                 __html:
                   formData.description ||
@@ -130,12 +153,30 @@ export function ReviewPublishStep({
           </div>
         </div>
 
+        {/* Gradient Divider */}
+        <div className="relative">
+          <div
+            className="absolute inset-0 flex items-center"
+            aria-hidden="true"
+          >
+            <div className="w-full border-t border-grayScale-200" />
+          </div>
+          <div className="relative flex justify-center">
+            <div
+              className="h-[0.5px] w-full opacity-20 rounded-full"
+              style={{
+                background: "gray",
+              }}
+            />
+          </div>
+        </div>
+
         {/* 3. Normal Footer (Inside Card) */}
         <div className="px-8 py-6 border-t border-grayScale-50 flex items-center justify-between bg-white">
           <Button
             variant="outline"
             onClick={prevStep}
-            className="h-12 px-8 rounded-xl border-grayScale-200 font-bold text-grayScale-600 hover:bg-grayScale-50 transition-all shadow-sm"
+            className="h-10 px-8 rounded-xl border-grayScale-200 font-bold text-grayScale-600 hover:bg-grayScale-50 transition-all shadow-sm"
           >
             Back
           </Button>
@@ -143,13 +184,13 @@ export function ReviewPublishStep({
           <div className="flex items-center gap-4">
             <Button
               variant="outline"
-              className="h-12 px-8 rounded-xl border-grayScale-100 font-bold text-grayScale-600 hover:bg-grayScale-50 transition-all shadow-sm"
+              className="h-12 px-8 rounded-[6px] border-grayScale-100 font-bold text-grayScale-600 hover:bg-grayScale-50 transition-all shadow-sm"
             >
               Save as Draft
             </Button>
             <Button
               onClick={() => setIsPublished(true)}
-              className="h-12 px-10 rounded-xl bg-brand-500 font-bold text-white hover:bg-brand-600 shadow-lg shadow-brand-500/20 transition-all flex items-center gap-2.5"
+              className="h-10 px-10 rounded-[6px] bg-brand-500 font-bold text-white  shadow-brand-500/20 transition-all flex items-center gap-2.5"
             >
               <Rocket className="h-4 w-4" />
               Publish Now
diff --git a/src/pages/content-management/components/video-steps/VideoDetailStep.tsx b/src/pages/content-management/components/video-steps/VideoDetailStep.tsx
index c66b31d..0a89a2c 100644
--- a/src/pages/content-management/components/video-steps/VideoDetailStep.tsx
+++ b/src/pages/content-management/components/video-steps/VideoDetailStep.tsx
@@ -6,6 +6,7 @@ import {
   Lightbulb,
   ChevronRight,
   ImageIcon,
+  ArrowRight,
 } from "lucide-react";
 import { Button } from "../../../../components/ui/button";
 import { Input } from "../../../../components/ui/input";
@@ -55,7 +56,7 @@ export function VideoDetailStep({
   return (
     <div className="animate-in fade-in slide-in-from-bottom-4 duration-700 max-w-[1200px] mx-auto pb-20">
       {/* Single Unified Card for Everything */}
-      <div className="bg-white rounded-[24px] border border-grayScale-50 p-10 shadow-sm space-y-12">
+      <div className="bg-white rounded-[24px] border border-grayScale-50 p-10 shadow-sm space-y-8">
         {/* 1. Upload Video Section */}
         <div className="space-y-6">
           <h3 className="text-[20px] font-bold text-grayScale-900 ml-1">
@@ -71,7 +72,7 @@ export function VideoDetailStep({
                   </div>
                 </div>
               </div>
-              <h4 className="text-[17px] font-bold text-grayScale-900 mb-2">
+              <h4 className="text-[17px]  text-grayScale-900 mb-2">
                 Drag and drop video files here
               </h4>
               <p className="text-grayScale-400 font-medium text-[13px] mb-8">
@@ -79,11 +80,11 @@ export function VideoDetailStep({
               </p>
 
               <div className="flex items-center gap-4 w-full max-w-[200px] mb-8">
-                <div className="flex-1 h-[1px] bg-grayScale-100" />
-                <span className="text-[10px] font-bold text-grayScale-300 uppercase tracking-widest">
+                <div className="flex-1 h-[1px] bg-grayScale-200" />
+                <span className="text-[12px] font-bold text-grayScale-300 uppercase tracking-widest">
                   OR
                 </span>
-                <div className="flex-1 h-[1px] bg-grayScale-100" />
+                <div className="flex-1 h-[1px] bg-grayScale-200" />
               </div>
 
               <Button
@@ -95,18 +96,35 @@ export function VideoDetailStep({
             </div>
           </div>
         </div>
+        {/* Gradient Divider */}
+        <div className="relative">
+          <div
+            className="absolute inset-0 flex items-center"
+            aria-hidden="true"
+          >
+            <div className="w-full border-t border-grayScale-200" />
+          </div>
+          <div className="relative flex justify-center">
+            <div
+              className="h-[0.5px] w-full opacity-20 rounded-full"
+              style={{
+                background: "gray",
+              }}
+            />
+          </div>
+        </div>
 
         {/* 2. Form & Side Panel Grid */}
-        <div className="flex flex-col lg:flex-row gap-12 items-start pt-4 border-t border-grayScale-50">
+        <div className="flex flex-col lg:flex-row gap-12 items-start">
           {/* Left Column: Title, Order, Description */}
           <div className="flex-1 w-full space-y-10">
             <div className="space-y-3">
-              <label className="text-[14px] font-bold text-grayScale-900 ml-1">
+              <label className="text-[14px] font-medium text-grayScale-900 ml-1">
                 Video Title
               </label>
               <Input
                 placeholder="e.g., Introduction to Past Tense Verbs"
-                className="h-14 rounded-xl border-grayScale-100 bg-white px-6 text-[15px] text-grayScale-800 placeholder:text-grayScale-300 focus:border-brand-500 font-medium transition-all shadow-sm"
+                className="h-12 rounded-xl border-grayScale-200 bg-white px-6 text-[15px] text-grayScale-800 placeholder:text-grayScale-500 focus:border-brand-500 font-medium transition-all shadow-sm"
                 value={formData.title}
                 onChange={(e) =>
                   setFormData({ ...formData, title: e.target.value })
@@ -115,11 +133,11 @@ export function VideoDetailStep({
             </div>
 
             <div className="space-y-3">
-              <label className="text-[14px] font-bold text-grayScale-900 ml-1">
+              <label className="text-[14px] font-medium text-grayScale-900 ml-1">
                 Video Order
               </label>
               <Select
-                className="h-14 rounded-xl border-grayScale-100 bg-white px-6 text-[15px] text-grayScale-800 font-medium cursor-pointer focus:border-brand-500 shadow-sm"
+                className="h-12 rounded-xl border-grayScale-200 bg-white px-6 text-[15px] text-grayScale-800 font-medium cursor-pointer focus:border-brand-500 shadow-sm"
                 value={formData.order}
                 onChange={(e) =>
                   setFormData({ ...formData, order: (e.target as any).value })
@@ -132,12 +150,12 @@ export function VideoDetailStep({
             </div>
 
             <div className="space-y-3">
-              <label className="text-[14px] font-bold text-grayScale-900 ml-1">
+              <label className="text-[14px] font-medium text-grayScale-900 ml-1">
                 Description
               </label>
-              <div className="rounded-xl border border-grayScale-100 bg-white overflow-hidden flex flex-col min-h-[380px] shadow-sm focus-within:border-brand-200 transition-all">
+              <div className="rounded-xl border border-grayScale-200 bg-white overflow-hidden flex flex-col min-h-[200px] shadow-sm focus-within:border-brand-200 transition-all">
                 {/* Toolbar */}
-                <div className="flex items-center gap-1 p-2 bg-[#F8FAFC]">
+                <div className="flex items-center gap-1  bg-[#F8FAFC]">
                   <div className="flex items-center gap-1 w-fit bg-transparent px-2 py-1 rounded-lg">
                     <button
                       onClick={() => handleCommand("bold")}
@@ -182,8 +200,7 @@ export function VideoDetailStep({
                     ref={editorRef}
                     contentEditable
                     onInput={handleInput}
-                    className="w-full h-full min-h-[300px] focus:outline-none text-[15px] text-grayScale-700 font-medium leading-relaxed prose prose-sm max-w-none"
-                    // Removed dangerouslySetInnerHTML to prevent cursor jumping
+                    className="w-full min-h-[140px] focus:outline-none text-[15px] text-grayScale-700 font-medium leading-relaxed prose prose-sm max-w-none"
                   />
                 </div>
               </div>
@@ -191,11 +208,11 @@ export function VideoDetailStep({
           </div>
 
           {/* Right Column: Thumbnail, Pro Tip */}
-          <div className="w-full lg:w-[320px] space-y-10">
+          <div className="w-full lg:w-[320px] space-y-5">
             {/* Thumbnail Section */}
             <div className="space-y-4">
               <div className="space-y-1 ml-1">
-                <h3 className="text-[14px] font-bold text-grayScale-900">
+                <h3 className="text-[14px] font-medium text-grayScale-900">
                   Thumbnail
                 </h3>
                 <p className="text-[12px] text-grayScale-400 font-medium leading-relaxed">
@@ -203,11 +220,11 @@ export function VideoDetailStep({
                 </p>
               </div>
               <div className="relative group cursor-pointer aspect-video">
-                <div className="h-full w-full flex flex-col items-center justify-center rounded-xl border-2 border-dashed border-[#E2E8F0] bg-[#F8FAFC]/50 p-6 transition-all group-hover:border-brand-200">
-                  <div className="h-10 w-10 rounded bg-white shadow-sm flex items-center justify-center mb-3">
-                    <ImageIcon className="h-5 w-5 text-grayScale-400" />
+                <div className="h-full w-full flex flex-col items-center justify-center rounded-xl border-2 border-dashed border-grayScale-200 bg-[#F8FAFC]/50 p-6 transition-all group-hover:border-brand-200">
+                  <div className="h-10 w-10 flex items-center justify-center mb-3">
+                    <ImageIcon className="h-7 w-7 text-grayScale-400" />
                   </div>
-                  <p className="text-[13px] font-bold text-brand-500">
+                  <p className="text-[13px] font-bold text-brand-400">
                     Click to upload
                   </p>
                 </div>
@@ -215,40 +232,38 @@ export function VideoDetailStep({
             </div>
 
             {/* Pro Tip Section */}
-            <div className="bg-[#FAF5FF] rounded-xl border border-[#F3E8FF] p-6 space-y-3">
+            <div className="bg-brand-500/5 flex items-start gap-3 rounded-xl border border-[#F3E8FF] p-6 space-y-3">
               <div className="flex items-center gap-3">
-                <div className="h-8 w-8 flex-shrink-0 rounded-full bg-white flex items-center justify-center border border-[#F3E8FF] shadow-sm">
+                <div className="h-8 w-8 flex-shrink-0 flex items-center justify-center">
                   <Lightbulb className="h-4 w-4 text-brand-50" fill="#A855F7" />
-                  <div className="absolute inset-0 flex items-center justify-center">
-                    <Lightbulb className="h-4 w-4 text-brand-500" />
-                  </div>
                 </div>
+              </div>
+              <div className="relative top-[-10px]">
                 <h3 className="text-[14px] font-bold text-grayScale-900">
                   Pro Tip
                 </h3>
+                <p className="text-[12px] text-grayScale-700 font-medium leading-relaxed">
+                  Short, descriptive titles work best. Include keywords like
+                  "Grammar" or "Vocabulary" to help students find your content.
+                </p>
               </div>
-              <p className="text-[12px] text-grayScale-700 font-medium leading-relaxed">
-                Short, descriptive titles work best. Include keywords like
-                "Grammar" or "Vocabulary" to help students find your content.
-              </p>
             </div>
           </div>
         </div>
 
         {/* Footer (Inside Card Container) */}
-        <div className="pt-10 border-t border-grayScale-50 flex items-center justify-between">
+        <div className="pt-5 border-t border-grayScale-200 flex items-center justify-between">
           <div className="flex items-center gap-3">
-            <div className="h-2 w-2 rounded-full bg-brand-500 animate-pulse" />
-            <span className="text-[14px] font-bold text-grayScale-400">
+            <span className="text-[14px] font-medium text-grayScale-600">
               Last saved: Just now
             </span>
           </div>
           <Button
             onClick={nextStep}
-            className="h-12 px-10 rounded-xl bg-brand-500 font-bold text-white hover:bg-brand-600 shadow-lg shadow-brand-500/20 transition-all flex items-center gap-2 text-sm group active:scale-95"
+            className="h-10 px-10 rounded-[6px] bg-brand-500 font-bold text-white transition-all flex items-center gap-2 text-sm group active:scale-95"
           >
             Continue
-            <ChevronRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
+            <ArrowRight className="h-4 w-4" />
           </Button>
         </div>
       </div>