diff --git a/.env b/.env
index 0855a36..4359c69 100644
--- a/.env
+++ b/.env
@@ -1,3 +1,3 @@
-# VITE_API_BASE_URL=https://api.yimaru.yaltopia.com/api/v1
-VITE_API_BASE_URL=http://localhost:8432/api/v1
+VITE_API_BASE_URL=https://api.yimaruacademy.com/api/v1
+# VITE_API_BASE_URL=http://localhost:8432/api/v1
 VITE_GOOGLE_CLIENT_ID=
diff --git a/src/api/courses.api.ts b/src/api/courses.api.ts
index e81a848..3e14ec3 100644
--- a/src/api/courses.api.ts
+++ b/src/api/courses.api.ts
@@ -51,6 +51,7 @@ import type {
   GetRatingsResponse,
   GetRatingsParams,
   GetVimeoSampleResponse,
+  CreateCourseVideoRequest,
 } from "../types/course.types"
 
 export const getCourseCategories = () =>
@@ -65,6 +66,11 @@ export const getCoursesByCategory = (categoryId: number) =>
 export const createCourse = (data: CreateCourseRequest) =>
   http.post("/course-management/courses", data)
 
+export const updateCourseThumbnail = (courseId: number, thumbnailUrl: string) =>
+  http.post(`/course-management/courses/${courseId}/thumbnail`, {
+    thumbnail_url: thumbnailUrl,
+  })
+
 export const deleteCourse = (courseId: number) =>
   http.delete(`/course-management/courses/${courseId}`)
 
@@ -81,6 +87,11 @@ export const getSubCoursesByCourse = (courseId: number) =>
 export const createSubCourse = (data: CreateSubCourseRequest) =>
   http.post("/course-management/sub-courses", data)
 
+export const updateSubCourseThumbnail = (subCourseId: number, thumbnailUrl: string) =>
+  http.post(`/course-management/sub-courses/${subCourseId}/thumbnail`, {
+    thumbnail_url: thumbnailUrl,
+  })
+
 export const updateSubCourse = (subCourseId: number, data: UpdateSubCourseRequest) =>
   http.patch(`/course-management/sub-courses/${subCourseId}`, data)
 
@@ -97,6 +108,9 @@ export const getVideosBySubCourse = (subCourseId: number) =>
 export const createSubCourseVideo = (data: CreateSubCourseVideoRequest) =>
   http.post("/course-management/sub-course-videos", data)
 
+export const createCourseVideo = (data: CreateCourseVideoRequest) =>
+  http.post("/course-management/videos", data)
+
 export const updateSubCourseVideo = (videoId: number, data: UpdateSubCourseVideoRequest) =>
   http.put(`/course-management/sub-course-videos/${videoId}`, data)
 
@@ -227,6 +241,15 @@ export const deleteQuestion = (questionId: number) =>
 export const updateQuestion = (questionId: number, data: CreateQuestionRequest) =>
   http.put(`/questions/${questionId}`, data)
 
+export interface SubmitAudioAnswerRequest {
+  question_id: number
+  question_set_id: number
+  object_key: string
+}
+
+export const submitAudioAnswer = (data: SubmitAudioAnswerRequest) =>
+  http.post("/questions/audio-answer", data)
+
 export const deleteQuestionSet = (questionSetId: number) =>
   http.delete(`/question-sets/${questionSetId}`)
 
diff --git a/src/api/files.api.ts b/src/api/files.api.ts
new file mode 100644
index 0000000..5397182
--- /dev/null
+++ b/src/api/files.api.ts
@@ -0,0 +1,61 @@
+import http from "./http"
+
+export type UploadMediaType = "image" | "audio" | "video"
+export type UploadProvider = "MINIO" | "VIMEO"
+
+export interface UploadMediaResponse {
+  message: string
+  data?: {
+    object_key?: string
+    url?: string
+    content_type?: string
+    media_type?: UploadMediaType
+    provider?: UploadProvider
+    vimeo_id?: string
+    embed_url?: string
+  }
+  success?: boolean
+}
+
+export interface ResolveFileUrlResponse {
+  message: string
+  data?: {
+    url?: string
+  }
+  success?: boolean
+}
+
+export interface UploadMediaOptions {
+  title?: string
+  description?: string
+}
+
+export const uploadMediaFile = (
+  mediaType: UploadMediaType,
+  file: File,
+  options?: UploadMediaOptions,
+) => {
+  const formData = new FormData()
+  formData.append("media_type", mediaType)
+  formData.append("file", file)
+  if (mediaType === "video") {
+    if (options?.title) formData.append("title", options.title)
+    if (options?.description) formData.append("description", options.description)
+  }
+
+  // Let Axios set the correct multipart boundary.
+  return http.post<UploadMediaResponse>("/files/upload", formData)
+}
+
+export const uploadAudioFile = (file: File) => uploadMediaFile("audio", file)
+
+export const uploadImageFile = (file: File) => uploadMediaFile("image", file)
+
+export const uploadVideoFile = (file: File, options?: UploadMediaOptions) =>
+  uploadMediaFile("video", file, options)
+
+export const resolveFileUrl = (key: string) =>
+  http.get<ResolveFileUrlResponse>("/files/url", {
+    params: { key },
+  })
+
diff --git a/src/api/http.ts b/src/api/http.ts
index 6e9d62f..5ba1228 100644
--- a/src/api/http.ts
+++ b/src/api/http.ts
@@ -2,9 +2,9 @@ import axios, { type AxiosInstance, type AxiosError, type InternalAxiosRequestCo
 
 const http: AxiosInstance = axios.create({
   baseURL: import.meta.env.VITE_API_BASE_URL,
-  headers: {
-    "Content-Type": "application/json",
-  },
+  // Do not force a Content-Type globally.
+  // Axios will set the correct header based on the request body (JSON vs multipart FormData).
+  headers: {},
 });
 
 let isRefreshing = false;
diff --git a/src/api/team.api.ts b/src/api/team.api.ts
index 6780890..bfd5d4b 100644
--- a/src/api/team.api.ts
+++ b/src/api/team.api.ts
@@ -1,5 +1,10 @@
 import http from "./http"
-import type { GetTeamMembersResponse, GetTeamMemberResponse, CreateTeamMemberRequest } from "../types/team.types"
+import type {
+  GetTeamMembersResponse,
+  GetTeamMemberResponse,
+  CreateTeamMemberRequest,
+  UpdateTeamMemberRequest,
+} from "../types/team.types"
 
 export const getTeamMembers = (page?: number, pageSize?: number) =>
   http.get<GetTeamMembersResponse>("/team/members", {
@@ -17,3 +22,6 @@ export const createTeamMember = (data: CreateTeamMemberRequest) =>
 
 export const updateTeamMemberStatus = (id: number, status: string) =>
   http.patch(`/team/members/${id}/status`, { status })
+
+export const updateTeamMember = (id: number, data: UpdateTeamMemberRequest) =>
+  http.put(`/team/members/${id}`, data)
diff --git a/src/api/users.api.ts b/src/api/users.api.ts
index e270d57..9d191dd 100644
--- a/src/api/users.api.ts
+++ b/src/api/users.api.ts
@@ -1,5 +1,12 @@
 import http from "./http";
-import { type UserProfileResponse, type GetUsersResponse, type UpdateProfileRequest, type UserSummaryResponse } from "../types/user.types";
+import {
+  type UserProfileResponse,
+  type GetUsersResponse,
+  type UpdateProfileRequest,
+  type UserSummaryResponse,
+  type GetDeletionRequestsParams,
+  type GetDeletionRequestsResponse,
+} from "../types/user.types";
 
 export const getUsers = (
   page?: number,
@@ -53,3 +60,11 @@ export const updateProfile = (data: UpdateProfileRequest) =>
 
 export const getUserSummary = () =>
   http.get<UserSummaryResponse>("/users/summary");
+
+export const getDeletionRequests = (params: GetDeletionRequestsParams) =>
+  http.get<GetDeletionRequestsResponse>("/admin/users/deletion-requests", { params });
+
+export const updateUserProfilePicture = (id: number, profilePictureUrl: string) =>
+  http.post(`/user/${id}/profile-picture`, {
+    profile_picture_url: profilePictureUrl,
+  });
diff --git a/src/app/AppRoutes.tsx b/src/app/AppRoutes.tsx
index 09cf9a8..f4468e0 100644
--- a/src/app/AppRoutes.tsx
+++ b/src/app/AppRoutes.tsx
@@ -22,7 +22,7 @@ import { UserManagementLayout } from "../pages/user-management/UserManagementLay
 import { UsersListPage } from "../pages/user-management/UsersListPage"
 import { UserManagementDashboard } from "../pages/user-management/UserManagementDashboard"
 import { UserGroupsPage } from "../pages/user-management/UserGroupsPage"
-import { RegisterUserPage } from "../pages/user-management/RegisterUserPage"
+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"
@@ -40,6 +40,10 @@ 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 (
@@ -47,13 +51,17 @@ export function AppRoutes() {
       <Route path="/login" element={<LoginPage />} />
       <Route path="/forgot-password" element={<ForgotPasswordPage />} />
       <Route path="/verification" element={<VerificationPage />} />
+      <Route path="/about" element={<AboutPage />} />
+      <Route path="/terms" element={<TermsPage />} />
+      <Route path="/privacy" element={<PrivacyPage />} />
+      <Route path="/account-deletion" element={<AccountDeletionPage />} />
       <Route element={<AppLayout />}>
         <Route path="/" element={<Navigate to="/dashboard" replace />} />
         <Route path="/dashboard" element={<DashboardPage />} />
         <Route path="/users" element={<UserManagementLayout />}>
           <Route index element={<UserManagementDashboard />} />
           <Route path="list" element={<UsersListPage />} />
-          <Route path="register" element={<RegisterUserPage />} />
+          <Route path="deletion-requests" element={<DeletionRequestsPage />} />
           <Route path="groups" element={<UserGroupsPage />} />
           <Route path=":id" element={<UserDetailPage />} />
         </Route>
diff --git a/src/components/topbar/NotificationDropdown.tsx b/src/components/topbar/NotificationDropdown.tsx
index 59da1f8..2bb83ad 100644
--- a/src/components/topbar/NotificationDropdown.tsx
+++ b/src/components/topbar/NotificationDropdown.tsx
@@ -12,13 +12,13 @@ import {
   BookOpen,
   Video,
   ShieldAlert,
-  Loader2,
   MailOpen,
   Mail,
   CheckCheck,
 } from "lucide-react"
 import { Badge } from "../ui/badge"
 import { cn } from "../../lib/utils"
+import { SpinnerIcon } from "../ui/spinner-icon"
 import { useNotifications } from "../../hooks/useNotifications"
 import { getNotificationMessage, getNotificationTitle, type Notification } from "../../types/notification.types"
 
@@ -213,7 +213,7 @@ export function NotificationDropdown() {
           <div className="max-h-[480px] overflow-y-auto">
             {loading ? (
               <div className="flex items-center justify-center py-12">
-                <Loader2 className="h-6 w-6 animate-spin text-grayScale-400" />
+                <SpinnerIcon className="h-6 w-6" />
               </div>
             ) : notifications.length === 0 ? (
               <div className="flex flex-col items-center justify-center gap-2 py-12 text-grayScale-400">
diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
index c88dc14..426eab1 100644
--- a/src/components/ui/dropdown-menu.tsx
+++ b/src/components/ui/dropdown-menu.tsx
@@ -18,7 +18,7 @@ export const DropdownMenuSubTrigger = React.forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm outline-none focus:bg-grayScale-100 data-[state=open]:bg-grayScale-100",
+      "flex cursor-default select-none items-center rounded-lg px-2.5 py-2 text-sm text-grayScale-600 outline-none transition-colors focus:bg-brand-100/40 data-[state=open]:bg-brand-100/40",
       inset && "pl-8",
       className,
     )}
@@ -37,7 +37,7 @@ export const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-white p-1 text-grayScale-600 shadow-soft",
+      "z-50 min-w-[9rem] overflow-hidden rounded-xl border border-grayScale-200 bg-white p-1.5 text-grayScale-600 shadow-soft",
       className,
     )}
     {...props}
@@ -54,7 +54,7 @@ export const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[10rem] overflow-hidden rounded-md border bg-white p-1 text-grayScale-600 shadow-soft",
+        "z-50 min-w-[11rem] overflow-hidden rounded-xl border border-grayScale-200 bg-white p-1.5 text-grayScale-600 shadow-soft",
         className,
       )}
       {...props}
@@ -70,7 +70,7 @@ export const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm outline-none transition-colors focus:bg-grayScale-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-lg px-2.5 py-2 text-sm outline-none transition-colors focus:bg-brand-100/40 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       className,
     )}
@@ -86,7 +86,7 @@ export const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-md py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-grayScale-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-lg py-2 pl-8 pr-2.5 text-sm outline-none transition-colors focus:bg-brand-100/40 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
     checked={checked}
@@ -109,7 +109,7 @@ export const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-md py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-grayScale-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-lg py-2 pl-8 pr-2.5 text-sm outline-none transition-colors focus:bg-brand-100/40 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
     {...props}
@@ -130,7 +130,7 @@ export const DropdownMenuLabel = React.forwardRef<
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Label
     ref={ref}
-    className={cn("px-2 py-1.5 text-xs font-semibold text-grayScale-500", inset && "pl-8", className)}
+    className={cn("px-2.5 py-1.5 text-xs font-semibold text-grayScale-500", inset && "pl-8", className)}
     {...props}
   />
 ))
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
index feb83e8..278e514 100644
--- a/src/components/ui/select.tsx
+++ b/src/components/ui/select.tsx
@@ -10,7 +10,7 @@ export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
       <div className="relative">
         <select
           className={cn(
-            "flex h-10 w-full appearance-none rounded-lg border bg-white px-3 py-2 pr-8 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+            "flex h-11 w-full appearance-none rounded-xl border border-grayScale-200 bg-white px-3 py-2 pr-8 text-sm text-grayScale-600 shadow-sm ring-offset-background transition hover:bg-grayScale-50 focus-visible:border-brand-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-200 disabled:cursor-not-allowed disabled:opacity-50",
             className,
           )}
           ref={ref}
diff --git a/src/components/ui/spinner-icon.tsx b/src/components/ui/spinner-icon.tsx
new file mode 100644
index 0000000..8f7561d
--- /dev/null
+++ b/src/components/ui/spinner-icon.tsx
@@ -0,0 +1,12 @@
+import spinnerSrc from "../../assets/Circular-indeterminate progress indicator.svg"
+import { cn } from "../../lib/utils"
+
+interface SpinnerIconProps {
+  className?: string
+  alt?: string
+}
+
+export function SpinnerIcon({ className, alt = "Loading" }: SpinnerIconProps) {
+  return <img src={spinnerSrc} alt={alt} className={cn("animate-spin", className)} />
+}
+
diff --git a/src/components/ui/stepper.tsx b/src/components/ui/stepper.tsx
index f48a37c..a4627aa 100644
--- a/src/components/ui/stepper.tsx
+++ b/src/components/ui/stepper.tsx
@@ -10,7 +10,7 @@ export interface StepperProps {
 
 export function Stepper({ steps, currentStep, className }: StepperProps) {
   return (
-    <div className={cn("flex items-center justify-between", className)}>
+    <div className={cn("flex w-full items-center", className)}>
       {steps.map((step, index) => {
         const stepNumber = index + 1
         const isCompleted = stepNumber < currentStep
@@ -18,13 +18,14 @@ export function Stepper({ steps, currentStep, className }: StepperProps) {
 
         return (
           <React.Fragment key={step}>
-            <div className="flex flex-1 items-center">
+            <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",
-                    isCurrent && "border-brand-500 bg-brand-50 text-brand-600",
+                    // 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",
                   )}
                 >
@@ -44,8 +45,10 @@ export function Stepper({ steps, currentStep, className }: StepperProps) {
             {index < steps.length - 1 && (
               <div
                 className={cn(
-                  "mx-4 h-0.5 flex-1",
-                  isCompleted ? "bg-brand-500" : "bg-grayScale-200",
+                  // 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",
                 )}
               />
             )}
diff --git a/src/hooks/useNotifications.ts b/src/hooks/useNotifications.ts
index c6ab70d..d873470 100644
--- a/src/hooks/useNotifications.ts
+++ b/src/hooks/useNotifications.ts
@@ -78,6 +78,10 @@ export function useNotifications() {
       }
     }
 
+    ws.onerror = () => {
+      ws.close()
+    }
+
     ws.onclose = () => {
       if (!mountedRef.current) return
       reconnectTimer.current = setTimeout(() => {
diff --git a/src/pages/AboutPage.tsx b/src/pages/AboutPage.tsx
new file mode 100644
index 0000000..6fa0493
--- /dev/null
+++ b/src/pages/AboutPage.tsx
@@ -0,0 +1,28 @@
+import { InfoLayout } from "./legal/InfoLayout"
+
+export function AboutPage() {
+  return (
+    <InfoLayout
+      title="About"
+      subtitle="Yimaru Academy provides modern, structured learning experiences and the administration tools to manage courses, question sets, speaking practices, and learner progress at scale."
+    >
+      <section className="space-y-3 rounded-xl border border-[#ece4f7] bg-gradient-to-br from-white to-[#fcf8ff] p-5 shadow-sm">
+        <h2 className="text-lg font-semibold text-grayScale-700">What is Yimaru Academy?</h2>
+        <p className="text-sm leading-relaxed text-grayScale-600">
+          Yimaru Academy is a digital learning platform focused on high-quality content delivery,
+          measurable learner outcomes, and efficient administration for training teams.
+        </p>
+      </section>
+
+      <section className="space-y-3 rounded-xl border border-[#ece4f7] bg-gradient-to-br from-white to-[#fcf8ff] p-5 shadow-sm">
+        <h2 className="text-lg font-semibold text-grayScale-700">Core Platform Capabilities</h2>
+        <ul className="list-disc space-y-2 pl-5 text-sm leading-relaxed text-grayScale-600">
+          <li>Manage course categories, sub-categories, courses, videos, and assessments.</li>
+          <li>Create practice question sets including multiple choice, short answer, and audio types.</li>
+          <li>Track learner progress and completion metrics across course structures.</li>
+          <li>Operate teams, roles, notifications, and user lifecycle from one dashboard.</li>
+        </ul>
+      </section>
+    </InfoLayout>
+  )
+}
diff --git a/src/pages/AccountDeletionPage.tsx b/src/pages/AccountDeletionPage.tsx
new file mode 100644
index 0000000..a200b9b
--- /dev/null
+++ b/src/pages/AccountDeletionPage.tsx
@@ -0,0 +1,50 @@
+import { InfoLayout } from "./legal/InfoLayout"
+
+export function AccountDeletionPage() {
+  return (
+    <InfoLayout
+      title="Account Deletion"
+      subtitle="Guidance on requesting and processing account deletion within Yimaru Academy."
+    >
+      <section className="space-y-3 rounded-xl border border-[#ece4f7] bg-gradient-to-br from-white to-[#fcf8ff] p-5 shadow-sm">
+        <h2 className="text-lg font-semibold text-grayScale-700">Before Deletion</h2>
+        <p className="text-sm leading-relaxed text-grayScale-600">
+          Confirm account ownership and review the potential impact on course history, progress
+          reporting, team assignments, and related records.
+        </p>
+      </section>
+
+      <section className="space-y-3 rounded-xl border border-[#ece4f7] bg-gradient-to-br from-white to-[#fcf8ff] p-5 shadow-sm">
+        <h2 className="text-lg font-semibold text-grayScale-700">Deletion Steps</h2>
+        <ol className="list-decimal space-y-2 pl-5 text-sm leading-relaxed text-grayScale-600">
+          <li>
+            Launch the <strong>Yimaru mobile app</strong> and <strong>sign in</strong> to the account you want to remove.
+          </li>
+          <li>
+            Open your <strong>Profile</strong> area from the main menu or bottom navigation bar.
+          </li>
+          <li>
+            Go into <strong>Account Settings</strong> (or <strong>Account Management</strong>, depending on your app version).
+          </li>
+          <li>
+            Tap the option labeled <strong>Delete Account</strong> or <strong>Request Account Deletion</strong>.
+          </li>
+          <li>
+            Review the warning details and complete the <strong>confirmation prompts</strong> shown on screen.
+          </li>
+          <li>
+            Finish the process by verifying identity through your <strong>PIN</strong> or <strong>biometric authentication</strong> if requested.
+          </li>
+        </ol>
+      </section>
+
+      <section className="space-y-3 rounded-xl border border-[#ece4f7] bg-gradient-to-br from-white to-[#fcf8ff] p-5 shadow-sm">
+        <h2 className="text-lg font-semibold text-grayScale-700">Post-Deletion Notes</h2>
+        <p className="text-sm leading-relaxed text-grayScale-600">
+          Some records may be retained where required for compliance, security, or legal obligations.
+          Deleted accounts typically cannot be restored.
+        </p>
+      </section>
+    </InfoLayout>
+  )
+}
diff --git a/src/pages/PrivacyPage.tsx b/src/pages/PrivacyPage.tsx
new file mode 100644
index 0000000..c5fa183
--- /dev/null
+++ b/src/pages/PrivacyPage.tsx
@@ -0,0 +1,35 @@
+import { InfoLayout } from "./legal/InfoLayout"
+
+export function PrivacyPage() {
+  return (
+    <InfoLayout
+      title="Privacy Policy"
+      subtitle="This policy explains how Yimaru Academy handles personal, educational, and operational data across learning and administration workflows."
+    >
+      <section className="space-y-3 rounded-xl border border-[#ece4f7] bg-gradient-to-br from-white to-[#fcf8ff] p-5 shadow-sm">
+        <h2 className="text-lg font-semibold text-grayScale-700">Data We Process</h2>
+        <p className="text-sm leading-relaxed text-grayScale-600">
+          We process account information, course activity, assessment records, and administrative logs
+          to support platform functionality, progress reporting, and security monitoring.
+        </p>
+      </section>
+
+      <section className="space-y-3 rounded-xl border border-[#ece4f7] bg-gradient-to-br from-white to-[#fcf8ff] p-5 shadow-sm">
+        <h2 className="text-lg font-semibold text-grayScale-700">How Data Is Used</h2>
+        <ul className="list-disc space-y-2 pl-5 text-sm leading-relaxed text-grayScale-600">
+          <li>Deliver and personalize course experiences.</li>
+          <li>Track learner progress and learning outcomes.</li>
+          <li>Manage permissions, operational controls, and audit trails.</li>
+        </ul>
+      </section>
+
+      <section className="space-y-3 rounded-xl border border-[#ece4f7] bg-gradient-to-br from-white to-[#fcf8ff] p-5 shadow-sm">
+        <h2 className="text-lg font-semibold text-grayScale-700">Security and Retention</h2>
+        <p className="text-sm leading-relaxed text-grayScale-600">
+          Access controls, role-based restrictions, and logging are used to protect data integrity.
+          Data is retained according to organizational and legal requirements.
+        </p>
+      </section>
+    </InfoLayout>
+  )
+}
diff --git a/src/pages/ProfilePage.tsx b/src/pages/ProfilePage.tsx
index ae41fe9..e651a10 100644
--- a/src/pages/ProfilePage.tsx
+++ b/src/pages/ProfilePage.tsx
@@ -1,35 +1,23 @@
-import { useEffect, useState } from "react";
-import {
-  Calendar,
-  CheckCircle2,
-  Clock,
-  Globe,
-  Loader2,
-  Mail,
-  MapPin,
-  Pencil,
-  Phone,
-  Save,
-  Shield,
-  User,
-  X,
-  XCircle,
-  Briefcase,
-  BookOpen,
-  Target,
-  Languages,
-  Heart,
-  MessageCircle,
-} from "lucide-react";
+import { useEffect, useState, type ChangeEvent } from "react";
+import { BadgeCheck, Briefcase, CalendarDays, Mail, Phone, Shield, User } from "lucide-react";
 import { Badge } from "../components/ui/badge";
 import { Button } from "../components/ui/button";
 import { Card, CardContent } from "../components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "../components/ui/dialog";
 import { Input } from "../components/ui/input";
-import { Select } from "../components/ui/select";
-
-import { cn } from "../lib/utils";
-import { getMyProfile, updateProfile } from "../api/users.api";
-import type { UserProfileData, UpdateProfileRequest } from "../types/user.types";
+import { Textarea } from "../components/ui/textarea";
+import { FileUpload } from "../components/ui/file-upload";
+import { getMyProfile } from "../api/users.api";
+import { updateTeamMember } from "../api/team.api";
+import { uploadImageFile } from "../api/files.api";
+import { SpinnerIcon } from "../components/ui/spinner-icon";
+import type { UpdateTeamMemberRequest } from "../types/team.types";
 import { toast } from "sonner";
 
 function formatDate(dateStr: string | null | undefined): string {
@@ -52,6 +40,28 @@ function formatDateTime(dateStr: string | null | undefined): string {
   });
 }
 
+interface TeamMeProfile {
+  id: number
+  first_name: string
+  last_name: string
+  email: string
+  phone_number: string
+  team_role: string
+  department: string
+  job_title: string
+  employment_type: string
+  hire_date: string
+  bio: string
+  status: string
+  email_verified: boolean
+  permissions: string[]
+  last_login: string | null
+  created_at: string
+  emergency_contact?: string
+  work_phone?: string
+  profile_picture_url?: string
+}
+
 function LoadingSkeleton() {
   return (
     <div className="w-full space-y-8 py-10">
@@ -89,103 +99,26 @@ function LoadingSkeleton() {
   );
 }
 
-function VerifiedIcon({ verified }: { verified: boolean }) {
-  return verified ? (
-    <div className="flex h-5 w-5 items-center justify-center rounded-full bg-mint-100">
-      <CheckCircle2 className="h-3.5 w-3.5 text-mint-500" />
-    </div>
-  ) : (
-    <div className="flex h-5 w-5 items-center justify-center rounded-full bg-grayScale-100">
-      <XCircle className="h-3.5 w-3.5 text-grayScale-300" />
-    </div>
-  );
-}
-
-function ProgressRing({ percent }: { percent: number }) {
-  const radius = 18;
-  const circumference = 2 * Math.PI * radius;
-  const offset = circumference - (percent / 100) * circumference;
-
-  return (
-    <div className="relative inline-flex items-center justify-center">
-      <svg className="h-12 w-12 -rotate-90" viewBox="0 0 44 44">
-        <circle
-          cx="22"
-          cy="22"
-          r={radius}
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2.5"
-          className="text-grayScale-200"
-        />
-        <circle
-          cx="22"
-          cy="22"
-          r={radius}
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2.5"
-          strokeLinecap="round"
-          strokeDasharray={circumference}
-          strokeDashoffset={offset}
-          className="text-brand-500 transition-all duration-700"
-        />
-      </svg>
-      <span className="absolute text-[10px] font-bold text-brand-600">{percent}%</span>
-    </div>
-  );
-}
-
-function DetailItem({
-  icon: Icon,
-  label,
-  value,
-  extra,
-  editNode,
-  editing,
-}: {
-  icon: typeof User;
-  label: string;
-  value: string;
-  extra?: React.ReactNode;
-  editNode?: React.ReactNode;
-  editing?: boolean;
-}) {
-  return (
-    <div className="group flex items-start gap-3 rounded-xl px-3 py-3 transition-colors hover:bg-grayScale-50/80">
-      <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-grayScale-100/80 text-grayScale-400 transition-colors group-hover:bg-brand-50 group-hover:text-brand-500">
-        <Icon className="h-4 w-4" />
-      </div>
-      <div className="min-w-0 flex-1">
-        <p className="text-[11px] font-medium uppercase tracking-wider text-grayScale-400">
-          {label}
-        </p>
-        {editing && editNode ? (
-          <div className="mt-1">{editNode}</div>
-        ) : (
-          <div className="mt-0.5 flex items-center gap-2">
-            <p className="truncate text-sm font-medium text-grayScale-700">{value || "—"}</p>
-            {extra}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
 export function ProfilePage() {
-  const [profile, setProfile] = useState<UserProfileData | null>(null);
+  const [profile, setProfile] = useState<TeamMeProfile | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [editing, setEditing] = useState(false);
   const [saving, setSaving] = useState(false);
-  const [editForm, setEditForm] = useState<UpdateProfileRequest>({});
+  const [profilePictureFile, setProfilePictureFile] = useState<File | null>(null);
+  const [editForm, setEditForm] = useState<UpdateTeamMemberRequest>({
+    first_name: "",
+    last_name: "",
+    phone_number: "",
+    profile_picture_url: "",
+    bio: "",
+  });
 
   useEffect(() => {
     const fetchProfile = async () => {
       try {
         const res = await getMyProfile();
-        setProfile(res.data.data);
+        setProfile((res.data?.data ?? null) as unknown as TeamMeProfile | null);
       } catch (err) {
         console.error("Failed to fetch profile", err);
         setError("Failed to load profile. Please try again later.");
@@ -198,52 +131,68 @@ export function ProfilePage() {
 
   const startEditing = () => {
     if (!profile) return;
-    setEditForm({
+    const nextForm: UpdateTeamMemberRequest = {
       first_name: profile.first_name ?? "",
       last_name: profile.last_name ?? "",
-      nick_name: profile.nick_name ?? "",
-      gender: profile.gender ?? "",
-      birth_day: profile.birth_day ?? "",
-      age_group: profile.age_group ?? "",
-      education_level: profile.education_level ?? "",
-      country: profile.country ?? "",
-      region: profile.region ?? "",
-      occupation: profile.occupation ?? "",
-      learning_goal: profile.learning_goal ?? "",
-      language_goal: profile.language_goal ?? "",
-      language_challange: profile.language_challange ?? "",
-      favoutite_topic: profile.favoutite_topic ?? "",
-      preferred_language: profile.preferred_language ?? "",
-    });
+      phone_number: profile.phone_number ?? "",
+      profile_picture_url: profile.profile_picture_url ?? "",
+      bio: profile.bio ?? "",
+    };
+    setEditForm(nextForm);
+    setProfilePictureFile(null);
     setEditing(true);
   };
 
   const cancelEditing = () => {
+    setProfilePictureFile(null);
     setEditing(false);
-    setEditForm({});
+  };
+
+  const updateField = (field: keyof UpdateTeamMemberRequest, value: string) => {
+    setEditForm((prev) => ({ ...prev, [field]: value }));
   };
 
   const handleSave = async () => {
+    if (!profile) return;
+
+    let nextProfilePictureUrl = editForm.profile_picture_url ?? "";
+    if (profilePictureFile) {
+      try {
+        const uploadRes = await uploadImageFile(profilePictureFile);
+        const uploadedUrl = uploadRes.data?.data?.url?.trim();
+        if (!uploadedUrl) throw new Error("Missing uploaded image url");
+        nextProfilePictureUrl = uploadedUrl;
+      } catch (err) {
+        console.error("Failed to upload profile picture:", err);
+        toast.error("Failed to upload profile picture");
+        return;
+      }
+    }
+
+    const payload: UpdateTeamMemberRequest = {
+      bio: editForm.bio ?? "",
+      first_name: editForm.first_name ?? "",
+      last_name: editForm.last_name ?? "",
+      phone_number: editForm.phone_number ?? "",
+      profile_picture_url: nextProfilePictureUrl,
+    };
+
     setSaving(true);
     try {
-      await updateProfile(editForm);
-      const res = await getMyProfile();
-      setProfile(res.data.data);
+      await updateTeamMember(profile.id, payload);
+      const refreshed = await getMyProfile();
+      setProfile((refreshed.data?.data ?? null) as unknown as TeamMeProfile | null);
       setEditing(false);
-      setEditForm({});
+      setProfilePictureFile(null);
       toast.success("Profile updated successfully");
     } catch (err) {
-      console.error("Failed to update profile", err);
-      toast.error("Failed to update profile. Please try again.");
+      console.error("Failed to update team member profile", err);
+      toast.error("Failed to update profile");
     } finally {
       setSaving(false);
     }
   };
 
-  const updateField = (field: keyof UpdateProfileRequest, value: string) => {
-    setEditForm((prev) => ({ ...prev, [field]: value }));
-  };
-
   if (loading) return <LoadingSkeleton />;
 
   if (error || !profile) {
@@ -269,502 +218,216 @@ export function ProfilePage() {
   }
 
   const fullName = `${profile.first_name} ${profile.last_name}`;
-  const completionPct = profile.profile_completion_percentage ?? 0;
+  const initials = `${profile.first_name?.[0] ?? ""}${profile.last_name?.[0] ?? ""}`.toUpperCase();
 
   return (
-    <div className="mx-auto w-full max-w-7xl space-y-6 pb-8">
-      {/* ─── Hero Card ─── */}
-      <div className="relative overflow-hidden rounded-3xl border border-grayScale-100 bg-white shadow-sm ring-1 ring-black/5">
-        {/* Tall dark gradient banner with content inside */}
-        <div className="relative flex min-h-[220px] flex-col justify-between bg-gradient-to-br from-[#1a1f4e] via-[#2d2b6b] to-[#3b3480] px-6 py-8 sm:px-8">
-          <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,rgba(255,255,255,0.08),transparent_60%)]" />
+    <div className="mx-auto w-full max-w-7xl rounded-2xl bg-[#f7f1f8] p-4 pb-8 sm:p-6">
+      <div className="overflow-hidden rounded-2xl border border-[#d9bddb] bg-white">
+        <div className="h-40 w-full bg-gradient-to-r from-[#d6aed6] via-[#e4cce4] to-[#cba0cd]" />
 
-          <div className="relative z-10 space-y-2">
-            <h2 className="text-2xl font-bold tracking-tight text-white sm:text-3xl">
-              Hello {profile.first_name}
-            </h2>
-            <p className="max-w-2xl text-sm leading-relaxed text-white/70">
-              Track your account status, keep profile details up to date, and manage your learning preferences from one place.
-            </p>
-            <div className="mt-4 flex flex-wrap items-center gap-2">
-              <span className="inline-flex items-center gap-1.5 rounded-full border border-white/20 bg-white/10 px-2.5 py-1 text-xs font-medium text-white/90">
-                <Shield className="h-3.5 w-3.5" />
-                {profile.role}
-              </span>
-              <span className="inline-flex items-center gap-1.5 rounded-full border border-white/20 bg-white/10 px-2.5 py-1 text-xs font-medium text-white/90">
-                <Clock className="h-3.5 w-3.5" />
-                Last login {formatDate(profile.last_login)}
-              </span>
-              <span className="inline-flex items-center gap-1.5 rounded-full border border-white/20 bg-white/10 px-2.5 py-1 text-xs font-medium text-white/90">
-                <Target className="h-3.5 w-3.5" />
-                {completionPct}% complete
-              </span>
+        <div className="grid gap-0 lg:grid-cols-[280px_minmax(0,1fr)]">
+          <aside className="border-r border-[#eadbea] bg-white px-5 pb-6">
+            <div className="-mt-16">
+              <div className="flex h-28 w-28 items-center justify-center rounded-full border-4 border-white bg-[#d6aed6] text-2xl font-bold text-[#6f2aa8]">
+                {initials}
+              </div>
+              <h2 className="mt-3 text-2xl font-bold text-grayScale-700">{fullName}</h2>
+              <p className="text-sm text-grayScale-400">{profile.job_title || "Team Member"}</p>
             </div>
-          </div>
 
-          <div className="relative z-10 mt-6">
-            {!editing ? (
-              <Button
-                variant="outline"
-                size="sm"
-                className="h-8 gap-1.5 border-white/30 bg-white/10 px-3 text-xs font-medium text-white shadow-sm backdrop-blur-sm hover:bg-white/20 hover:text-white"
-                onClick={startEditing}
-              >
-                <Pencil className="h-3.5 w-3.5" />
-                Edit Profile
-              </Button>
-            ) : (
-              <div className="flex items-center gap-2">
-                <Button
-                  variant="outline"
-                  size="sm"
-                  className="h-8 gap-1.5 border-white/30 bg-white/10 px-3 text-xs text-white backdrop-blur-sm hover:bg-white/20 hover:text-white"
-                  onClick={cancelEditing}
-                  disabled={saving}
-                >
-                  <X className="h-3.5 w-3.5" />
-                  Cancel
-                </Button>
-                <Button
-                  size="sm"
-                  className="h-8 gap-1.5 bg-white text-xs text-[#1a1f4e] hover:bg-white/90"
-                  onClick={handleSave}
-                  disabled={saving}
-                >
-                  {saving ? (
-                    <Loader2 className="h-3.5 w-3.5 animate-spin" />
+            <div className="mt-4">
+              <div className="flex w-full items-center justify-between rounded-lg border border-[#d9bddb] bg-[#f4e8f4] px-3 py-2">
+                <span className="text-sm font-medium text-[#6f2aa8]">Account Status</span>
+                <span className="text-sm font-semibold uppercase text-[#5e2390]">{profile.status}</span>
+              </div>
+            </div>
+
+            <div className="mt-5 space-y-5 text-sm">
+              <section>
+                <p className="mb-2 text-xs font-semibold uppercase tracking-wide text-grayScale-400">About</p>
+                <div className="space-y-2 text-grayScale-600">
+                  <div className="flex items-center gap-2"><Briefcase className="h-4 w-4 text-[#6f2aa8]" />{profile.job_title || "Job title not set"}</div>
+                  <div className="flex items-center gap-2"><Shield className="h-4 w-4 text-[#6f2aa8]" />{profile.team_role || "Role not set"}</div>
+                  <div className="flex items-center gap-2"><CalendarDays className="h-4 w-4 text-[#6f2aa8]" />Hire date: {formatDate(profile.hire_date)}</div>
+                  <div className="flex items-center gap-2"><BadgeCheck className="h-4 w-4 text-[#6f2aa8]" />{profile.department || "Department not set"}</div>
+                </div>
+              </section>
+
+              <section>
+                <p className="mb-2 text-xs font-semibold uppercase tracking-wide text-grayScale-400">Contact</p>
+                <div className="space-y-2 text-grayScale-600">
+                  <div className="flex items-center gap-2"><Mail className="h-4 w-4 text-[#6f2aa8]" />{profile.email}</div>
+                  <div className="flex items-center gap-2"><Phone className="h-4 w-4 text-[#6f2aa8]" />{profile.phone_number || "—"}</div>
+                </div>
+              </section>
+
+              <section>
+                <p className="mb-2 text-xs font-semibold uppercase tracking-wide text-grayScale-400">Access</p>
+                <p className="text-xs text-grayScale-500">Permissions from `/team/me`</p>
+                <div className="mt-2 flex flex-wrap gap-1.5">
+                  {(profile.permissions ?? []).length === 0 ? (
+                    <Badge className="bg-[#ecd9ec] text-[#6f2aa8]">No permissions listed</Badge>
                   ) : (
-                    <Save className="h-3.5 w-3.5" />
+                    profile.permissions.map((permission) => (
+                      <Badge key={permission} className="bg-[#ecd9ec] text-[#6f2aa8]">
+                        {permission}
+                      </Badge>
+                    ))
                   )}
-                  {saving ? "Saving…" : "Save Changes"}
-                </Button>
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* Identity info below banner */}
-        <div className="bg-gradient-to-b from-white to-grayScale-50/40 px-6 py-5 sm:px-8">
-          {editing ? (
-            <div className="flex flex-wrap items-center gap-2">
-              <Input
-                className="h-9 w-40 text-sm font-semibold"
-                value={editForm.first_name ?? ""}
-                onChange={(e) => updateField("first_name", e.target.value)}
-                placeholder="First name"
-              />
-              <Input
-                className="h-9 w-40 text-sm font-semibold"
-                value={editForm.last_name ?? ""}
-                onChange={(e) => updateField("last_name", e.target.value)}
-                placeholder="Last name"
-              />
-              <span className="rounded-full bg-grayScale-50 px-2.5 py-0.5 text-xs font-medium text-grayScale-500">
-                #{profile.id}
-              </span>
+                </div>
+              </section>
             </div>
-          ) : (
-            <div className="flex flex-wrap items-center gap-2.5">
-              <h2 className="text-xl font-bold tracking-tight text-grayScale-800 sm:text-2xl">
-                {fullName}
-              </h2>
-              {profile.nick_name && (
-                <span className="text-sm font-medium text-grayScale-400">
-                  @{profile.nick_name}
-                </span>
-              )}
-              <span className="rounded-full bg-grayScale-50 px-2.5 py-0.5 text-xs font-medium text-grayScale-500">
-                #{profile.id}
-              </span>
-            </div>
-          )}
+          </aside>
 
-          {/* Badges row */}
-          <div className="mt-3 flex flex-wrap items-center gap-2">
-            <Badge
-              className={cn(
-                "px-2.5 py-0.5 text-xs font-semibold",
-                profile.role === "ADMIN"
-                  ? "bg-brand-500/10 text-brand-600 border border-brand-500/20"
-                  : "bg-grayScale-50 text-grayScale-600 border border-grayScale-200",
-              )}
-            >
-              <Shield className="mr-1 h-3 w-3" />
-              {profile.role}
-            </Badge>
-            <span
-              className={cn(
-                "inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-semibold",
-                profile.status === "ACTIVE"
-                  ? "bg-mint-50 text-mint-600"
-                  : "bg-destructive/10 text-destructive",
-              )}
-            >
-              <span
-                className={cn(
-                  "h-1.5 w-1.5 rounded-full",
-                  profile.status === "ACTIVE" ? "bg-mint-500" : "bg-destructive",
-                )}
-              />
-              {profile.status}
-            </span>
-            <span className="inline-flex items-center gap-1.5 rounded-full bg-grayScale-50 px-2.5 py-0.5 text-xs font-medium text-grayScale-500">
-              <Calendar className="h-3 w-3" />
-              Joined {formatDate(profile.created_at)}
-            </span>
-          </div>
+          <main className="bg-[#fdf8fd] px-5 py-6 sm:px-7">
+            <div className="space-y-5">
+              <Card className="border-[#d9bddb] bg-white shadow-none">
+                <CardContent className="p-5">
+                  <div className="mb-3 flex items-center justify-between">
+                    <h3 className="text-base font-semibold text-grayScale-700">Summary</h3>
+                    <button
+                      type="button"
+                      onClick={startEditing}
+                      className="inline-flex items-center rounded-md border border-[#d9bddb] bg-[#f4e8f4] px-3 py-1.5 text-sm font-medium text-[#6f2aa8] transition-colors hover:bg-[#ecd9ec] hover:text-[#5e2390] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#c39bd4]"
+                    >
+                      Edit profile
+                    </button>
+                  </div>
+                  <div className="space-y-2 text-sm text-grayScale-600">
+                    <div className="flex items-center gap-2"><Briefcase className="h-4 w-4 text-[#6f2aa8]" />{profile.job_title || "Role-focused work item"}</div>
+                    <div className="flex items-center gap-2"><Shield className="h-4 w-4 text-[#6f2aa8]" />{profile.team_role || "Team responsibility"}</div>
+                    <div className="flex items-center gap-2"><Mail className="h-4 w-4 text-[#6f2aa8]" />{profile.email}</div>
+                    <div className="flex items-center gap-2"><Phone className="h-4 w-4 text-[#6f2aa8]" />{profile.phone_number || "No phone number"}</div>
+                  </div>
+                </CardContent>
+              </Card>
+
+              <Card className="border-[#d9bddb] bg-white shadow-none">
+                <CardContent className="p-5">
+                  <h3 className="mb-3 text-base font-semibold text-grayScale-700">Employment</h3>
+                  <div className="rounded-lg border border-[#dcc3df] bg-[#f4e8f4] p-3">
+                    <p className="text-sm font-medium text-grayScale-700">{profile.department || "Department not set"}</p>
+                    <p className="text-xs text-grayScale-500">Employment type: {profile.employment_type || "—"}</p>
+                  </div>
+                </CardContent>
+              </Card>
+
+              <Card className="border-[#d9bddb] bg-white shadow-none">
+                <CardContent className="p-5">
+                  <h3 className="mb-3 text-base font-semibold text-grayScale-700">More about me</h3>
+                  <div className="flex flex-wrap gap-2">
+                    <Badge className="bg-[#ecd9ec] text-[#6f2aa8]">Status {profile.status}</Badge>
+                    <Badge className="bg-[#ecd9ec] text-[#6f2aa8]">Email {profile.email_verified ? "verified" : "not verified"}</Badge>
+                    <Badge className="bg-[#ecd9ec] text-[#6f2aa8]">Joined {formatDate(profile.created_at)}</Badge>
+                    <Badge className="bg-[#ecd9ec] text-[#6f2aa8]">Last login {formatDateTime(profile.last_login)}</Badge>
+                  </div>
+                </CardContent>
+              </Card>
+
+              <Card className="border-[#d9bddb] bg-white shadow-none">
+                <CardContent className="grid gap-3 p-5 sm:grid-cols-2">
+                  <div>
+                    <p className="mb-1 text-xs font-medium text-grayScale-500">First Name</p>
+                    <p className="text-sm font-medium text-grayScale-700">{profile.first_name}</p>
+                  </div>
+                  <div>
+                    <p className="mb-1 text-xs font-medium text-grayScale-500">Last Name</p>
+                    <p className="text-sm font-medium text-grayScale-700">{profile.last_name}</p>
+                  </div>
+                  <div>
+                    <p className="mb-1 text-xs font-medium text-grayScale-500">Department</p>
+                    <p className="text-sm font-medium text-grayScale-700">{profile.department || "—"}</p>
+                  </div>
+                  <div>
+                    <p className="mb-1 text-xs font-medium text-grayScale-500">Team Role</p>
+                    <p className="text-sm font-medium text-grayScale-700">{profile.team_role || "—"}</p>
+                  </div>
+                  <div>
+                    <p className="mb-1 text-xs font-medium text-grayScale-500">Job Title</p>
+                    <p className="text-sm font-medium text-grayScale-700">{profile.job_title || "—"}</p>
+                  </div>
+                  <div>
+                    <p className="mb-1 text-xs font-medium text-grayScale-500">Hire Date</p>
+                    <p className="text-sm font-medium text-grayScale-700">{formatDate(profile.hire_date) || "—"}</p>
+                  </div>
+                  <div>
+                    <p className="mb-1 text-xs font-medium text-grayScale-500">Phone Number</p>
+                    <p className="text-sm font-medium text-grayScale-700">{profile.phone_number || "—"}</p>
+                  </div>
+                </CardContent>
+              </Card>
+            </div>
+          </main>
         </div>
       </div>
+      <Dialog open={editing} onOpenChange={(open) => !saving && setEditing(open)}>
+        <DialogContent className="max-h-[88vh] overflow-y-auto border-[#d9bddb] bg-[#fdf8fd] sm:max-w-3xl">
+          <DialogHeader>
+            <DialogTitle className="text-[#6f2aa8]">Edit profile</DialogTitle>
+          </DialogHeader>
 
-      {/* ─── Detail Cards Grid ─── */}
-      <div className="grid gap-6 lg:grid-cols-3">
-        {/* ── Contact & Personal ── */}
-        <Card className="overflow-hidden rounded-2xl border-grayScale-100 shadow-sm transition-shadow hover:shadow-md lg:col-span-2">
-          <div className="h-1 bg-gradient-to-r from-brand-500 to-brand-400" />
-          <CardContent className="p-0">
-            <div className="grid divide-y divide-grayScale-100 sm:grid-cols-2 sm:divide-x sm:divide-y-0">
-              {/* Contact */}
-              <div className="p-5">
-                <p className="mb-3 text-[11px] font-bold uppercase tracking-widest text-grayScale-400">
-                  Contact
-                </p>
-                <div className="space-y-1">
-                  <DetailItem
-                    icon={Mail}
-                    label="Email"
-                    value={profile.email}
-                    extra={<VerifiedIcon verified={profile.email_verified} />}
-                  />
-                  <DetailItem
-                    icon={Phone}
-                    label="Phone"
-                    value={profile.phone_number}
-                    extra={<VerifiedIcon verified={profile.phone_verified} />}
-                  />
-                  <DetailItem
-                    icon={MapPin}
-                    label="Location"
-                    value={[profile.region, profile.country].filter(Boolean).join(", ") || "—"}
-                    editing={editing}
-                    editNode={
-                      <div className="flex gap-2">
-                        <Input
-                          className="h-8 text-sm"
-                          value={editForm.region ?? ""}
-                          onChange={(e) => updateField("region", e.target.value)}
-                          placeholder="Region"
-                        />
-                        <Input
-                          className="h-8 text-sm"
-                          value={editForm.country ?? ""}
-                          onChange={(e) => updateField("country", e.target.value)}
-                          placeholder="Country"
-                        />
-                      </div>
-                    }
-                  />
-                  <DetailItem
-                    icon={Globe}
-                    label="Preferred Language"
-                    value={
-                      { en: "English", am: "Amharic", or: "Oromiffa", ti: "Tigrinya" }[
-                        profile.preferred_language
-                      ] ?? profile.preferred_language ?? "—"
-                    }
-                    editing={editing}
-                    editNode={
-                      <Select
-                        className="h-8 text-sm"
-                        value={editForm.preferred_language ?? ""}
-                        onChange={(e) => updateField("preferred_language", e.target.value)}
-                      >
-                        <option value="">Select</option>
-                        <option value="en">English</option>
-                        <option value="am">Amharic</option>
-                        <option value="or">Oromiffa</option>
-                        <option value="ti">Tigrinya</option>
-                      </Select>
-                    }
-                  />
-                </div>
-              </div>
-
-              {/* Personal */}
-              <div className="p-5">
-                <p className="mb-3 text-[11px] font-bold uppercase tracking-widest text-grayScale-400">
-                  Personal
-                </p>
-                <div className="space-y-1">
-                  <DetailItem
-                    icon={Calendar}
-                    label="Date of Birth"
-                    value={formatDate(profile.birth_day)}
-                    editing={editing}
-                    editNode={
-                      <Input
-                        type="date"
-                        className="h-8 text-sm"
-                        value={editForm.birth_day ?? ""}
-                        onChange={(e) => updateField("birth_day", e.target.value)}
-                      />
-                    }
-                  />
-                  <DetailItem
-                    icon={User}
-                    label="Gender"
-                    value={profile.gender || "Not specified"}
-                    editing={editing}
-                    editNode={
-                      <Select
-                        className="h-8 text-sm"
-                        value={editForm.gender ?? ""}
-                        onChange={(e) => updateField("gender", e.target.value)}
-                      >
-                        <option value="">Select</option>
-                        <option value="Male">Male</option>
-                        <option value="Female">Female</option>
-                        <option value="Other">Other</option>
-                      </Select>
-                    }
-                  />
-                  <DetailItem
-                    icon={User}
-                    label="Age Group"
-                    value={profile.age_group?.replace("_", "–") || "—"}
-                    editing={editing}
-                    editNode={
-                      <Select
-                        className="h-8 text-sm"
-                        value={editForm.age_group ?? ""}
-                        onChange={(e) => updateField("age_group", e.target.value)}
-                      >
-                        <option value="">Select</option>
-                        <option value="18_24">18–24</option>
-                        <option value="25_34">25–34</option>
-                        <option value="35_44">35–44</option>
-                        <option value="45_54">45–54</option>
-                        <option value="55_64">55–64</option>
-                        <option value="65+">65+</option>
-                      </Select>
-                    }
-                  />
-                  <DetailItem
-                    icon={Briefcase}
-                    label="Occupation"
-                    value={profile.occupation || "—"}
-                    editing={editing}
-                    editNode={
-                      <Input
-                        className="h-8 text-sm"
-                        value={editForm.occupation ?? ""}
-                        onChange={(e) => updateField("occupation", e.target.value)}
-                        placeholder="Occupation"
-                      />
-                    }
-                  />
-                  <DetailItem
-                    icon={BookOpen}
-                    label="Education"
-                    value={profile.education_level || "—"}
-                    editing={editing}
-                    editNode={
-                      <Input
-                        className="h-8 text-sm"
-                        value={editForm.education_level ?? ""}
-                        onChange={(e) => updateField("education_level", e.target.value)}
-                        placeholder="Education level"
-                      />
-                    }
-                  />
-                </div>
+          <div className="grid gap-3 sm:grid-cols-2">
+            <div>
+              <p className="mb-1 text-xs font-medium text-grayScale-500">First Name</p>
+              <Input value={editForm.first_name ?? ""} onChange={(e) => updateField("first_name", e.target.value)} />
+            </div>
+            <div>
+              <p className="mb-1 text-xs font-medium text-grayScale-500">Last Name</p>
+              <Input value={editForm.last_name ?? ""} onChange={(e) => updateField("last_name", e.target.value)} />
+            </div>
+            <div>
+              <p className="mb-1 text-xs font-medium text-grayScale-500">Phone Number</p>
+              <Input value={editForm.phone_number ?? ""} onChange={(e) => updateField("phone_number", e.target.value)} />
+            </div>
+            <div>
+              <p className="mb-1 text-xs font-medium text-grayScale-500">Profile Picture</p>
+              <div className="space-y-2">
+                <FileUpload
+                  accept="image/*"
+                  onFileSelect={setProfilePictureFile}
+                  label="Upload profile picture"
+                  description="JPEG, PNG, WEBP"
+                  className="min-h-[90px] rounded-lg border-2 border-dashed border-grayScale-200 transition-colors hover:border-brand-400 hover:bg-brand-50/30"
+                />
+                <Input
+                  value={editForm.profile_picture_url ?? ""}
+                  onChange={(e) => updateField("profile_picture_url", e.target.value)}
+                  placeholder="Or paste image URL (https://...)"
+                />
               </div>
             </div>
-          </CardContent>
-        </Card>
-
-        {/* ── Right Sidebar ── */}
-        <div className="space-y-6 lg:sticky lg:top-24 lg:self-start">
-          {/* Profile Completion */}
-          <Card className="overflow-hidden rounded-2xl border-grayScale-100 shadow-sm transition-shadow hover:shadow-md">
-            <div className="h-1 bg-gradient-to-r from-brand-400 to-mint-400" />
-            <CardContent className="flex items-center gap-4 p-5">
-              <ProgressRing percent={completionPct} />
-              <div>
-                <p className="text-sm font-semibold text-grayScale-700">Profile Completion</p>
-                <p className="mt-0.5 text-xs text-grayScale-400">
-                  {completionPct === 100 ? "All set!" : "Complete your profile for the best experience."}
-                </p>
-              </div>
-            </CardContent>
-          </Card>
-
-          {/* Activity */}
-          <Card className="overflow-hidden rounded-2xl border-grayScale-100 shadow-sm transition-shadow hover:shadow-md">
-            <div className="h-1 bg-gradient-to-r from-grayScale-300 to-grayScale-200" />
-            <CardContent className="space-y-4 p-5">
-              <p className="text-[11px] font-bold uppercase tracking-widest text-grayScale-400">
-                Activity
-              </p>
-              <div className="flex items-center gap-3">
-                <div className="flex h-9 w-9 items-center justify-center rounded-full bg-brand-50 text-brand-500">
-                  <Clock className="h-4 w-4" />
-                </div>
-                <div>
-                  <p className="text-xs font-medium text-grayScale-600">Last Login</p>
-                  <p className="text-[11px] text-grayScale-400">{formatDateTime(profile.last_login)}</p>
-                </div>
-              </div>
-              <div className="flex items-center gap-3">
-                <div className="flex h-9 w-9 items-center justify-center rounded-full bg-grayScale-50 text-grayScale-400">
-                  <User className="h-4 w-4" />
-                </div>
-                <div>
-                  <p className="text-xs font-medium text-grayScale-600">Account Created</p>
-                  <p className="text-[11px] text-grayScale-400">{formatDateTime(profile.created_at)}</p>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-
-          {/* Quick Account Info */}
-          <Card className="overflow-hidden rounded-2xl border-grayScale-100 shadow-sm transition-shadow hover:shadow-md">
-            <div className="h-1 bg-gradient-to-r from-brand-500 to-brand-600" />
-            <CardContent className="space-y-3 p-5">
-              <p className="text-[11px] font-bold uppercase tracking-widest text-grayScale-400">
-                Account
-              </p>
-              <div className="space-y-2.5">
-                <div className="flex items-center justify-between text-sm">
-                  <span className="text-grayScale-400">Role</span>
-                  <Badge
-                    className={cn(
-                      "text-[10px] font-semibold",
-                      profile.role === "ADMIN"
-                        ? "bg-brand-500/10 text-brand-600 border border-brand-500/20"
-                        : "bg-grayScale-50 text-grayScale-600 border border-grayScale-200",
-                    )}
-                  >
-                    {profile.role}
-                  </Badge>
-                </div>
-                <div className="flex items-center justify-between text-sm">
-                  <span className="text-grayScale-400">Status</span>
-                  <span
-                    className={cn(
-                      "inline-flex items-center gap-1.5 text-xs font-semibold",
-                      profile.status === "ACTIVE" ? "text-mint-600" : "text-destructive",
-                    )}
-                  >
-                    <span
-                      className={cn(
-                        "h-1.5 w-1.5 rounded-full",
-                        profile.status === "ACTIVE" ? "bg-mint-500" : "bg-destructive",
-                      )}
-                    />
-                    {profile.status}
-                  </span>
-                </div>
-                <div className="flex items-center justify-between text-sm">
-                  <span className="text-grayScale-400">Email</span>
-                  <span className="flex items-center gap-1">
-                    <span className="max-w-[130px] truncate text-xs text-grayScale-600">
-                      {profile.email}
-                    </span>
-                    <VerifiedIcon verified={profile.email_verified} />
-                  </span>
-                </div>
-                <div className="flex items-center justify-between text-sm">
-                  <span className="text-grayScale-400">Phone</span>
-                  <span className="flex items-center gap-1">
-                    <span className="max-w-[110px] truncate text-xs text-grayScale-600">
-                      {profile.phone_number || "—"}
-                    </span>
-                    <VerifiedIcon verified={profile.phone_verified} />
-                  </span>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        </div>
-      </div>
-
-      {/* ─── Learning & Goals Card ─── */}
-      <Card className="overflow-hidden rounded-2xl border-grayScale-100 shadow-sm transition-shadow hover:shadow-md">
-        <div className="h-1 bg-gradient-to-r from-brand-600 via-brand-500 to-brand-400" />
-        <div className="border-b border-grayScale-100 px-5 py-3">
-          <p className="text-[11px] font-bold uppercase tracking-widest text-grayScale-400">
-            Learning & Preferences
-          </p>
-        </div>
-        <CardContent className="p-0">
-          <div className="grid divide-y divide-grayScale-100 sm:grid-cols-2 sm:divide-x sm:divide-y-0 lg:grid-cols-4 lg:divide-x lg:divide-y-0">
-            <div className="p-5">
-              <DetailItem
-                icon={Target}
-                label="Learning Goal"
-                value={profile.learning_goal || "—"}
-                editing={editing}
-                editNode={
-                  <Input
-                    className="h-8 text-sm"
-                    value={editForm.learning_goal ?? ""}
-                    onChange={(e) => updateField("learning_goal", e.target.value)}
-                    placeholder="Your learning goal"
-                  />
-                }
-              />
-            </div>
-            <div className="p-5">
-              <DetailItem
-                icon={Languages}
-                label="Language Goal"
-                value={profile.language_goal || "—"}
-                editing={editing}
-                editNode={
-                  <Input
-                    className="h-8 text-sm"
-                    value={editForm.language_goal ?? ""}
-                    onChange={(e) => updateField("language_goal", e.target.value)}
-                    placeholder="Language goal"
-                  />
-                }
-              />
-            </div>
-            <div className="p-5">
-              <DetailItem
-                icon={MessageCircle}
-                label="Language Challenge"
-                value={profile.language_challange || "—"}
-                editing={editing}
-                editNode={
-                  <Input
-                    className="h-8 text-sm"
-                    value={editForm.language_challange ?? ""}
-                    onChange={(e) => updateField("language_challange", e.target.value)}
-                    placeholder="Language challenge"
-                  />
-                }
-              />
-            </div>
-            <div className="p-5">
-              <DetailItem
-                icon={Heart}
-                label="Favourite Topic"
-                value={profile.favoutite_topic || "—"}
-                editing={editing}
-                editNode={
-                  <Input
-                    className="h-8 text-sm"
-                    value={editForm.favoutite_topic ?? ""}
-                    onChange={(e) => updateField("favoutite_topic", e.target.value)}
-                    placeholder="Favourite topic"
-                  />
-                }
+            <div className="sm:col-span-2">
+              <p className="mb-1 text-xs font-medium text-grayScale-500">Bio</p>
+              <Textarea
+                value={editForm.bio ?? ""}
+                onChange={(e: ChangeEvent<HTMLTextAreaElement>) => updateField("bio", e.target.value)}
+                rows={4}
               />
             </div>
           </div>
-        </CardContent>
-      </Card>
+
+          <DialogFooter className="mt-2">
+            <Button
+              type="button"
+              variant="outline"
+              className="border-[#d9bddb] text-[#6f2aa8]"
+              onClick={cancelEditing}
+              disabled={saving}
+            >
+              Cancel
+            </Button>
+            <Button
+              type="button"
+              className="bg-[#6f2aa8] text-white hover:bg-[#5e2390]"
+              onClick={handleSave}
+              disabled={saving}
+            >
+              {saving ? <SpinnerIcon className="mr-1 h-4 w-4" /> : null}
+              {saving ? "Saving..." : "Save changes"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }
diff --git a/src/pages/SettingsPage.tsx b/src/pages/SettingsPage.tsx
index 8de3147..f129d98 100644
--- a/src/pages/SettingsPage.tsx
+++ b/src/pages/SettingsPage.tsx
@@ -6,7 +6,6 @@ import {
   Globe,
   KeyRound,
   Languages,
-  Loader2,
   Lock,
   Moon,
   Palette,
@@ -21,6 +20,7 @@ import { Button } from "../components/ui/button";
 import { Select } from "../components/ui/select";
 import { Separator } from "../components/ui/separator";
 import { cn } from "../lib/utils";
+import { SpinnerIcon } from "../components/ui/spinner-icon";
 import { getMyProfile, updateProfile } from "../api/users.api";
 import type { UserProfileData } from "../types/user.types";
 import { toast } from "sonner";
@@ -212,7 +212,7 @@ function ProfileTab({ profile }: { profile: UserProfileData }) {
       <div className="flex justify-end">
         <Button onClick={handleSave} disabled={saving} className="min-w-[140px]">
           {saving ? (
-            <Loader2 className="h-4 w-4 animate-spin" />
+            <SpinnerIcon className="h-4 w-4" />
           ) : (
             <Save className="h-4 w-4" />
           )}
@@ -298,7 +298,7 @@ function SecurityTab() {
           <div className="flex justify-end">
             <Button onClick={handleChangePassword} disabled={saving} className="min-w-[160px]">
               {saving ? (
-                <Loader2 className="h-4 w-4 animate-spin" />
+                <SpinnerIcon className="h-4 w-4" />
               ) : (
                 <Lock className="h-4 w-4" />
               )}
diff --git a/src/pages/TermsPage.tsx b/src/pages/TermsPage.tsx
new file mode 100644
index 0000000..0c674f7
--- /dev/null
+++ b/src/pages/TermsPage.tsx
@@ -0,0 +1,34 @@
+import { InfoLayout } from "./legal/InfoLayout"
+
+export function TermsPage() {
+  return (
+    <InfoLayout
+      title="Terms and Conditions"
+      subtitle="These terms define acceptable use of Yimaru Academy services, administration interfaces, and related learning operations."
+    >
+      <section className="space-y-3 rounded-xl border border-[#ece4f7] bg-gradient-to-br from-white to-[#fcf8ff] p-5 shadow-sm">
+        <h2 className="text-lg font-semibold text-grayScale-700">1. Acceptable Use</h2>
+        <p className="text-sm leading-relaxed text-grayScale-600">
+          The platform may only be used for legitimate education and administration workflows. Users
+          must not misuse access, attempt unauthorized data access, or disrupt service availability.
+        </p>
+      </section>
+
+      <section className="space-y-3 rounded-xl border border-[#ece4f7] bg-gradient-to-br from-white to-[#fcf8ff] p-5 shadow-sm">
+        <h2 className="text-lg font-semibold text-grayScale-700">2. Account Responsibility</h2>
+        <p className="text-sm leading-relaxed text-grayScale-600">
+          Account owners are responsible for protecting credentials and all actions performed through
+          their account. Shared accounts are discouraged unless explicitly authorized by policy.
+        </p>
+      </section>
+
+      <section className="space-y-3 rounded-xl border border-[#ece4f7] bg-gradient-to-br from-white to-[#fcf8ff] p-5 shadow-sm">
+        <h2 className="text-lg font-semibold text-grayScale-700">3. Service and Policy Updates</h2>
+        <p className="text-sm leading-relaxed text-grayScale-600">
+          Yimaru Academy may update features, controls, and policies to improve reliability and
+          security. Continued platform use indicates acceptance of updated terms.
+        </p>
+      </section>
+    </InfoLayout>
+  )
+}
diff --git a/src/pages/auth/LoginPage.tsx b/src/pages/auth/LoginPage.tsx
index 5ce8438..d3425ab 100644
--- a/src/pages/auth/LoginPage.tsx
+++ b/src/pages/auth/LoginPage.tsx
@@ -5,6 +5,7 @@ import { Eye, EyeOff } from "lucide-react";
 import { BrandLogo } from "../../components/brand/BrandLogo";
 import { Button } from "../../components/ui/button";
 import { Input } from "../../components/ui/input";
+import { SpinnerIcon } from "../../components/ui/spinner-icon";
 
 
 import { login, loginWithGoogle } from "../../api/auth.api";
@@ -282,25 +283,7 @@ export function LoginPage() {
                 className="group mb-6 flex w-full items-center justify-center gap-3 rounded-xl border border-grayScale-200 bg-white px-4 py-3 text-sm font-medium text-grayScale-600 transition-all duration-200 hover:border-grayScale-300 hover:bg-grayScale-100 hover:shadow-soft focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/40 disabled:cursor-not-allowed disabled:opacity-60"
               >
                 {googleLoading ? (
-                  <svg
-                    className="h-5 w-5 animate-spin text-grayScale-400"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                  >
-                    <circle
-                      className="opacity-25"
-                      cx="12"
-                      cy="12"
-                      r="10"
-                      stroke="currentColor"
-                      strokeWidth="4"
-                    />
-                    <path
-                      className="opacity-75"
-                      fill="currentColor"
-                      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-                    />
-                  </svg>
+                  <SpinnerIcon className="h-5 w-5" />
                 ) : (
                   <GoogleIcon className="h-5 w-5 transition-transform duration-200 group-hover:scale-110" />
                 )}
diff --git a/src/pages/content-management/AllCoursesPage.tsx b/src/pages/content-management/AllCoursesPage.tsx
index 14d0f8c..ac0247d 100644
--- a/src/pages/content-management/AllCoursesPage.tsx
+++ b/src/pages/content-management/AllCoursesPage.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react"
 import { useNavigate } from "react-router-dom"
-import { Search, Plus, RefreshCw, Edit2, ToggleLeft, ToggleRight } from "lucide-react"
+import { Search, Plus, RefreshCw, Edit2, ToggleLeft, ToggleRight, BookOpen, ChevronDown, ChevronLeft, ChevronRight } from "lucide-react"
 import { Card, CardContent, CardHeader, CardTitle } from "../../components/ui/card"
 import { Button } from "../../components/ui/button"
 import { Input } from "../../components/ui/input"
@@ -15,7 +15,8 @@ import {
 } from "../../components/ui/table"
 import { Badge } from "../../components/ui/badge"
 import { FileUpload } from "../../components/ui/file-upload"
-import { getCourseCategories, getCoursesByCategory, createCourse, updateCourseStatus, updateCourse } from "../../api/courses.api"
+import { getCourseCategories, getCoursesByCategory, createCourse, updateCourseStatus, updateCourse, updateCourseThumbnail } from "../../api/courses.api"
+import { uploadImageFile } from "../../api/files.api"
 import type { Course, CourseCategory } from "../../types/course.types"
 import {
   Dialog,
@@ -26,6 +27,8 @@ import {
 } from "../../components/ui/dialog"
 import { Textarea } from "../../components/ui/textarea"
 import { toast } from "sonner"
+import { cn } from "../../lib/utils"
+import { SpinnerIcon } from "../../components/ui/spinner-icon"
 
 type CourseWithCategory = Course & { category_name: string }
 
@@ -53,6 +56,8 @@ export function AllCoursesPage() {
   const [editTitle, setEditTitle] = useState("")
   const [editDescription, setEditDescription] = useState("")
   const [updating, setUpdating] = useState(false)
+  const [page, setPage] = useState(1)
+  const [pageSize, setPageSize] = useState(10)
 
   const fetchAllCourses = async () => {
     setLoading(true)
@@ -97,6 +102,26 @@ export function AllCoursesPage() {
     }
     return true
   })
+  const totalCount = filteredCourses.length
+  const totalPages = Math.max(1, Math.ceil(totalCount / pageSize))
+  const safePage = Math.min(page, totalPages)
+  const paginatedCourses = filteredCourses.slice((safePage - 1) * pageSize, safePage * pageSize)
+  const startEntry = totalCount === 0 ? 0 : (safePage - 1) * pageSize + 1
+  const endEntry = Math.min(safePage * pageSize, totalCount)
+
+  const getPageNumbers = () => {
+    const pages: (number | string)[] = []
+    if (totalPages <= 7) {
+      for (let i = 1; i <= totalPages; i++) pages.push(i)
+    } else {
+      pages.push(1, 2, 3)
+      if (safePage > 4) pages.push("...")
+      if (safePage > 3 && safePage < totalPages - 2) pages.push(safePage)
+      if (safePage < totalPages - 3) pages.push("...")
+      pages.push(totalPages)
+    }
+    return pages
+  }
 
   const handleCreateCourse = async () => {
     const effectiveCategoryId = createSubCategoryId || createCategoryId
@@ -110,12 +135,27 @@ export function AllCoursesPage() {
 
     setCreating(true)
     try {
-      await createCourse({
+      const createdRes = await createCourse({
         category_id: Number(effectiveCategoryId),
         title: createTitle.trim(),
         description: createDescription.trim(),
       })
 
+      const createdIdRaw =
+        (createdRes.data?.data as any)?.id ??
+        (createdRes.data?.data as any)?.course?.id ??
+        (createdRes.data?.data as any)?.data?.id
+
+      const createdId = Number(createdIdRaw)
+
+      if (createThumbnail && Number.isFinite(createdId)) {
+        const uploadRes = await uploadImageFile(createThumbnail)
+        const thumbnailUrl = uploadRes.data?.data?.url?.trim()
+        if (thumbnailUrl) {
+          await updateCourseThumbnail(createdId, thumbnailUrl)
+        }
+      }
+
       toast.success("Sub-category created", {
         description: `"${createTitle.trim()}" has been created.`,
       })
@@ -191,7 +231,7 @@ export function AllCoursesPage() {
     return (
       <div className="flex flex-col items-center justify-center py-32">
         <div className="rounded-2xl bg-white shadow-sm p-6">
-          <RefreshCw className="h-10 w-10 animate-spin text-brand-600" />
+          <SpinnerIcon className="h-10 w-10" />
         </div>
         <p className="mt-4 text-sm font-medium text-grayScale-400">Loading all sub-categories…</p>
       </div>
@@ -244,14 +284,20 @@ export function AllCoursesPage() {
               <Input
                 placeholder="Search by title, description, or category…"
                 value={search}
-                onChange={(e) => setSearch(e.target.value)}
+                onChange={(e) => {
+                  setSearch(e.target.value)
+                  setPage(1)
+                }}
                 className="pl-10 transition-colors focus:border-brand-300 focus:ring-brand-200"
               />
             </div>
             <div className="flex flex-wrap items-center gap-2">
               <Select
                 value={categoryFilter}
-                onChange={(e) => setCategoryFilter(e.target.value as typeof categoryFilter)}
+                onChange={(e) => {
+                  setCategoryFilter(e.target.value as typeof categoryFilter)
+                  setPage(1)
+                }}
               >
                 <option value="all">All Categories</option>
                 {categories.map((cat) => (
@@ -269,31 +315,21 @@ export function AllCoursesPage() {
 
           {/* Courses Table */}
           {filteredCourses.length > 0 ? (
-            <div className="overflow-x-auto rounded-lg border border-grayScale-200">
+            <div className="rounded-xl border bg-white">
               <Table>
                 <TableHeader>
-                  <TableRow className="bg-grayScale-100 hover:bg-grayScale-100">
-                    <TableHead className="py-3 text-xs font-semibold uppercase tracking-wider text-grayScale-500">
-                      Course
-                    </TableHead>
-                    <TableHead className="py-3 text-xs font-semibold uppercase tracking-wider text-grayScale-500">
-                      Category
-                    </TableHead>
-                    <TableHead className="hidden py-3 text-xs font-semibold uppercase tracking-wider text-grayScale-500 md:table-cell">
-                      Status
-                    </TableHead>
-                    <TableHead className="py-3 text-right text-xs font-semibold uppercase tracking-wider text-grayScale-500">
-                      Actions
-                    </TableHead>
+                  <TableRow>
+                    <TableHead>Course</TableHead>
+                    <TableHead>Category</TableHead>
+                    <TableHead className="hidden md:table-cell">Status</TableHead>
+                    <TableHead className="text-right">Actions</TableHead>
                   </TableRow>
                 </TableHeader>
                 <TableBody>
-                  {filteredCourses.map((course, index) => (
+                  {paginatedCourses.map((course) => (
                     <TableRow
                       key={course.id}
-                      className={`cursor-pointer transition-colors hover:bg-brand-100/30 ${
-                        index % 2 === 0 ? "bg-white" : "bg-grayScale-100/40"
-                      }`}
+                      className="group cursor-pointer"
                       onClick={() =>
                         navigate(
                           `/content/category/${course.category_id}/courses/${course.id}/sub-courses`,
@@ -369,6 +405,79 @@ export function AllCoursesPage() {
                   ))}
                 </TableBody>
               </Table>
+
+              <div className="flex flex-wrap items-center justify-between gap-3 border-t px-4 py-3 text-sm text-grayScale-500">
+                <div className="flex items-center gap-2">
+                  <span>Showing</span>
+                  <span className="font-medium text-grayScale-600">
+                    {startEntry}-{endEntry}
+                  </span>
+                  <span>of</span>
+                  <span className="font-medium text-grayScale-600">{totalCount}</span>
+                  <span className="mr-4">entries</span>
+                  <span className="border-l pl-4">Rows per page</span>
+                  <div className="relative">
+                    <select
+                      value={pageSize}
+                      onChange={(e) => {
+                        setPageSize(Number(e.target.value))
+                        setPage(1)
+                      }}
+                      className="h-8 appearance-none rounded-md border bg-white pl-2 pr-7 text-sm font-medium text-grayScale-600 focus:outline-none"
+                    >
+                      {[10, 20, 50].map((size) => (
+                        <option key={size} value={size}>
+                          {size}
+                        </option>
+                      ))}
+                    </select>
+                    <ChevronDown className="pointer-events-none absolute right-2 top-1/2 h-3 w-3 -translate-y-1/2 text-grayScale-400" />
+                  </div>
+                </div>
+                <div className="flex items-center gap-1">
+                  <button
+                    onClick={() => safePage > 1 && setPage(safePage - 1)}
+                    disabled={safePage === 1}
+                    className={cn(
+                      "flex h-8 w-8 items-center justify-center rounded-md border bg-white text-grayScale-500",
+                      safePage === 1 && "cursor-not-allowed opacity-50",
+                    )}
+                  >
+                    <ChevronLeft className="h-4 w-4" />
+                  </button>
+                  {getPageNumbers().map((n, idx) =>
+                    typeof n === "string" ? (
+                      <span key={`ellipsis-${idx}`} className="px-2 text-grayScale-400">
+                        ...
+                      </span>
+                    ) : (
+                      <button
+                        key={n}
+                        type="button"
+                        onClick={() => setPage(n)}
+                        className={cn(
+                          "h-8 w-8 rounded-md border text-sm font-medium",
+                          n === safePage
+                            ? "border-brand-500 bg-brand-500 text-white"
+                            : "bg-white text-grayScale-600 hover:bg-grayScale-50",
+                        )}
+                      >
+                        {n}
+                      </button>
+                    ),
+                  )}
+                  <button
+                    onClick={() => safePage < totalPages && setPage(safePage + 1)}
+                    disabled={safePage === totalPages}
+                    className={cn(
+                      "flex h-8 w-8 items-center justify-center rounded-md border bg-white text-grayScale-500",
+                      safePage === totalPages && "cursor-not-allowed opacity-50",
+                    )}
+                  >
+                    <ChevronRight className="h-4 w-4" />
+                  </button>
+                </div>
+              </div>
             </div>
           ) : (
             <div className="flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-grayScale-200 py-20 text-center">
diff --git a/src/pages/content-management/ContentOverviewPage.tsx b/src/pages/content-management/ContentOverviewPage.tsx
index bcec99b..73eb8e6 100644
--- a/src/pages/content-management/ContentOverviewPage.tsx
+++ b/src/pages/content-management/ContentOverviewPage.tsx
@@ -1,8 +1,9 @@
 import { useEffect, useState } from "react"
 import { Link, useParams } from "react-router-dom"
-import { BookOpen, Mic, Briefcase, HelpCircle, ArrowLeft, ArrowRight, ChevronRight } from "lucide-react"
+import { BookOpen, Mic, Briefcase, HelpCircle, ArrowLeft, ArrowRight, ChevronRight, Search } from "lucide-react"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../../components/ui/card"
 import { Button } from "../../components/ui/button"
+import { Input } from "../../components/ui/input"
 import { getCourseCategories } from "../../api/courses.api"
 import type { CourseCategory } from "../../types/course.types"
 
@@ -63,6 +64,7 @@ export function ContentOverviewPage() {
   const { categoryId } = useParams<{ categoryId: string }>()
   const [category, setCategory] = useState<CourseCategory | null>(null)
   const [sections, setSections] = useState<ContentSection[]>(() => [...contentSections])
+  const [searchQuery, setSearchQuery] = useState("")
   const [dragKey, setDragKey] = useState<string | null>(null)
   const [flowSteps, setFlowSteps] = useState<
     {
@@ -158,6 +160,13 @@ export function ContentOverviewPage() {
     setDragKey(null)
   }
 
+  const filteredSections = sections.filter((section) => {
+    const q = searchQuery.trim().toLowerCase()
+    if (!q) return true
+    const haystack = `${section.title} ${section.description} ${section.action}`.toLowerCase()
+    return haystack.includes(q)
+  })
+
   return (
     <div className="space-y-8">
       {/* Header & Breadcrumb */}
@@ -185,6 +194,15 @@ export function ContentOverviewPage() {
           {category?.name ?? "Content Management"}
         </h1>
       </div>
+      <div className="relative w-full max-w-md">
+        <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-grayScale-300" />
+        <Input
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          placeholder="Search overview sections..."
+          className="pl-9"
+        />
+      </div>
 
       {/* Gradient Divider */}
       <div className="relative">
@@ -203,7 +221,7 @@ export function ContentOverviewPage() {
 
       {/* Cards Grid (course builder style – draggable sections) */}
       <div className="grid gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">
-        {sections.map((section) => {
+        {filteredSections.map((section) => {
           const Icon = section.icon
           return (
             <div
@@ -274,6 +292,12 @@ export function ContentOverviewPage() {
           )
         })}
       </div>
+      {sections.length > 0 && filteredSections.length === 0 && (
+        <div className="rounded-2xl border border-dashed border-grayScale-200 bg-grayScale-50/50 py-14 text-center">
+          <p className="text-sm font-semibold text-grayScale-500">No matching sections</p>
+          <p className="mt-1 text-xs text-grayScale-400">Try a different search term.</p>
+        </div>
+      )}
       {/* Category flow sequence (if defined) */}
       {flowSteps.length > 0 && (
         <Card className="shadow-soft">
diff --git a/src/pages/content-management/CourseCategoryPage.tsx b/src/pages/content-management/CourseCategoryPage.tsx
index 6e7b9ef..6cbb4f8 100644
--- a/src/pages/content-management/CourseCategoryPage.tsx
+++ b/src/pages/content-management/CourseCategoryPage.tsx
@@ -28,6 +28,7 @@ export function CourseCategoryPage() {
   const [parentCategoryId, setParentCategoryId] = useState<number | null>(null)
   const [newSubCategoryName, setNewSubCategoryName] = useState("")
   const [pendingSubCategories, setPendingSubCategories] = useState<string[]>([])
+  const [searchQuery, setSearchQuery] = useState("")
 
   const fetchCategories = async () => {
     setLoading(true)
@@ -47,6 +48,11 @@ export function CourseCategoryPage() {
     fetchCategories()
   }, [])
 
+  const normalizedQuery = searchQuery.trim().toLowerCase()
+  const filteredCategories = normalizedQuery
+    ? categories.filter((c) => c.name?.toLowerCase().includes(normalizedQuery))
+    : categories
+
   if (loading) {
     return (
       <div className="flex flex-col items-center justify-center gap-4 py-24">
@@ -89,6 +95,14 @@ export function CourseCategoryPage() {
             Browse and manage your course categories below
           </p>
         </div>
+        <div className="w-full max-w-sm">
+          <Input
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            placeholder="Search categories..."
+            aria-label="Search categories"
+          />
+        </div>
         <Button
           className="gap-2 bg-brand-500 text-white hover:bg-brand-600"
           size="sm"
@@ -116,9 +130,21 @@ export function CourseCategoryPage() {
             </p>
           </div>
         </div>
+      ) : filteredCategories.length === 0 ? (
+        <div className="flex flex-col items-center justify-center gap-5 rounded-2xl border border-dashed border-grayScale-200 bg-grayScale-50/50 py-24">
+          <div className="grid h-20 w-20 place-items-center rounded-2xl bg-grayScale-50 shadow-sm">
+            <FolderOpen className="h-9 w-9 text-grayScale-300" />
+          </div>
+          <div className="text-center">
+            <p className="text-sm font-semibold text-grayScale-500">No matching categories</p>
+            <p className="mt-1 max-w-xs text-xs leading-relaxed text-grayScale-400">
+              Try a different search term.
+            </p>
+          </div>
+        </div>
       ) : (
         <div className="grid gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-          {categories.map((category) => (
+          {filteredCategories.map((category) => (
             <Link
               key={category.id}
               to={`/content/category/${category.id}/courses`}
diff --git a/src/pages/content-management/CourseFlowBuilderPage.tsx b/src/pages/content-management/CourseFlowBuilderPage.tsx
index cb3e233..1ffe7b8 100644
--- a/src/pages/content-management/CourseFlowBuilderPage.tsx
+++ b/src/pages/content-management/CourseFlowBuilderPage.tsx
@@ -4,7 +4,6 @@ import {
   ChevronDown,
   ChevronRight,
   GripVertical,
-  Loader2,
   RefreshCw,
   Sparkles,
 } from "lucide-react"
@@ -53,6 +52,7 @@ import type {
 } from "../../types/course.types"
 import { cn } from "../../lib/utils"
 import { toast } from "sonner"
+import { SpinnerIcon } from "../../components/ui/spinner-icon"
 
 type PracticeListItem = LearningPathPractice & { display_order: number }
 
@@ -504,7 +504,7 @@ export function CourseFlowBuilderPage() {
   if (loading) {
     return (
       <div className="flex flex-col items-center justify-center py-24">
-        <RefreshCw className="h-8 w-8 animate-spin text-brand-500" />
+        <SpinnerIcon className="h-8 w-8" />
         <p className="mt-3 text-sm text-grayScale-400">Loading learning tree...</p>
       </div>
     )
@@ -582,7 +582,7 @@ export function CourseFlowBuilderPage() {
               </CardTitle>
               {savingKey && (
                 <span className="inline-flex items-center gap-1 text-xs text-brand-500">
-                  <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                  <SpinnerIcon className="h-3.5 w-3.5" />
                   Saving...
                 </span>
               )}
@@ -618,7 +618,7 @@ export function CourseFlowBuilderPage() {
               <p className="mb-2 text-xs font-semibold uppercase tracking-wide text-grayScale-400">Course sub-categories</p>
               {loadingCourses ? (
                 <div className="flex items-center justify-center py-8">
-                  <Loader2 className="h-5 w-5 animate-spin text-brand-500" />
+                  <SpinnerIcon className="h-5 w-5" />
                 </div>
               ) : activeCourses.length === 0 ? (
                 <p className="rounded-lg border border-dashed border-grayScale-200 px-3 py-6 text-center text-xs text-grayScale-400">
@@ -655,7 +655,7 @@ export function CourseFlowBuilderPage() {
               <CardTitle className="text-base font-semibold text-grayScale-600">Learning path detail</CardTitle>
               {savingKey && (
                 <span className="inline-flex items-center gap-1 text-xs text-brand-500">
-                  <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                  <SpinnerIcon className="h-3.5 w-3.5" />
                   Saving...
                 </span>
               )}
@@ -668,7 +668,7 @@ export function CourseFlowBuilderPage() {
               </p>
             ) : loadingPath ? (
               <div className="flex items-center justify-center py-10">
-                <Loader2 className="h-6 w-6 animate-spin text-brand-500" />
+                <SpinnerIcon className="h-6 w-6" />
               </div>
             ) : !learningPath || learningPath.sub_courses.length === 0 ? (
               <p className="rounded-lg border border-dashed border-grayScale-200 px-3 py-10 text-center text-xs text-grayScale-400">
@@ -774,7 +774,7 @@ export function CourseFlowBuilderPage() {
                                 </p>
                                 {loadingPracticesBySubCourse[subCourse.id] ? (
                                   <div className="flex items-center gap-2 py-6 text-xs text-grayScale-400">
-                                    <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                                    <SpinnerIcon className="h-3.5 w-3.5" />
                                     Loading sets...
                                   </div>
                                 ) : (
diff --git a/src/pages/content-management/CoursesPage.tsx b/src/pages/content-management/CoursesPage.tsx
index 2ed52a6..f1a5aca 100644
--- a/src/pages/content-management/CoursesPage.tsx
+++ b/src/pages/content-management/CoursesPage.tsx
@@ -1,6 +1,6 @@
-import { useEffect, useState } from "react"
+import { useEffect, useMemo, useState } from "react"
 import { Link, useParams, useNavigate } from "react-router-dom"
-import { Plus, ArrowLeft, ToggleLeft, ToggleRight, X, Trash2, Edit, AlertCircle, Star, MessageSquare } from "lucide-react"
+import { Plus, ArrowLeft, ToggleLeft, ToggleRight, X, Trash2, Edit, AlertCircle, Star, MessageSquare, ChevronDown, ChevronLeft, ChevronRight, Search } from "lucide-react"
 import practiceSrc from "../../assets/Practice.svg"
 import spinnerSrc from "../../assets/Circular-indeterminate progress indicator.svg"
 import { Card, CardContent, CardHeader, CardTitle } from "../../components/ui/card"
@@ -8,6 +8,7 @@ import alertSrc from "../../assets/Alert.svg"
 import { Button } from "../../components/ui/button"
 import { Badge } from "../../components/ui/badge"
 import { Input } from "../../components/ui/input"
+import { FileUpload } from "../../components/ui/file-upload"
 import {
   Table,
   TableBody,
@@ -16,13 +17,26 @@ import {
   TableHeader,
   TableRow,
 } from "../../components/ui/table"
-import { getCoursesByCategory, getCourseCategories, createCourse, deleteCourse, updateCourseStatus, updateCourse, getRatings } from "../../api/courses.api"
+import {
+  getCoursesByCategory,
+  getCourseCategories,
+  createCourse,
+  deleteCourse,
+  updateCourseStatus,
+  updateCourse,
+  updateCourseThumbnail,
+  getRatings,
+} from "../../api/courses.api"
+import { uploadImageFile } from "../../api/files.api"
 import type { Course, CourseCategory, Rating } from "../../types/course.types"
+import { cn } from "../../lib/utils"
+import { SpinnerIcon } from "../../components/ui/spinner-icon"
 
 export function CoursesPage() {
   const { categoryId } = useParams<{ categoryId: string }>()
   const navigate = useNavigate()
   const [courses, setCourses] = useState<Course[]>([])
+  const [searchQuery, setSearchQuery] = useState("")
   const [category, setCategory] = useState<CourseCategory | null>(null)
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
@@ -41,12 +55,15 @@ export function CoursesPage() {
   const [editTitle, setEditTitle] = useState("")
   const [editDescription, setEditDescription] = useState("")
   const [editThumbnail, setEditThumbnail] = useState("")
+  const [editThumbnailFile, setEditThumbnailFile] = useState<File | null>(null)
   const [updating, setUpdating] = useState(false)
   const [updateError, setUpdateError] = useState<string | null>(null)
   const [showRatingsModal, setShowRatingsModal] = useState(false)
   const [ratingsCourseId, setRatingsCourseId] = useState<number | null>(null)
   const [courseRatings, setCourseRatings] = useState<Rating[]>([])
   const [courseRatingsLoading, setCourseRatingsLoading] = useState(false)
+  const [page, setPage] = useState(1)
+  const [pageSize, setPageSize] = useState(10)
 
   const fetchCourses = async () => {
     if (!categoryId) return
@@ -86,6 +103,10 @@ export function CoursesPage() {
     fetchData()
   }, [categoryId])
 
+  useEffect(() => {
+    setPage(1)
+  }, [categoryId, searchQuery])
+
   const handleOpenModal = () => {
     setTitle("")
     setDescription("")
@@ -167,6 +188,7 @@ export function CoursesPage() {
     setEditTitle(course.title || "")
     setEditDescription(course.description || "")
     setEditThumbnail(course.thumbnail || "")
+    setEditThumbnailFile(null)
     setUpdateError(null)
     setShowEditModal(true)
   }
@@ -177,6 +199,7 @@ export function CoursesPage() {
     setEditTitle("")
     setEditDescription("")
     setEditThumbnail("")
+    setEditThumbnailFile(null)
     setUpdateError(null)
   }
 
@@ -199,9 +222,18 @@ export function CoursesPage() {
       await updateCourse(courseToEdit.id, {
         title: editTitle.trim(),
         description: editDescription.trim(),
-        thumbnail: editThumbnail.trim() || undefined,
         is_active: courseToEdit.is_active,
       })
+
+      const thumbnailUrl =
+        editThumbnailFile
+          ? (await uploadImageFile(editThumbnailFile)).data?.data?.url?.trim()
+          : editThumbnail.trim() || ""
+
+      if (thumbnailUrl) {
+        await updateCourseThumbnail(courseToEdit.id, thumbnailUrl)
+      }
+
       handleCloseEditModal()
       await fetchCourses()
     } catch (err: any) {
@@ -230,14 +262,19 @@ export function CoursesPage() {
     }
   }
 
+  const filteredCourses = useMemo(() => {
+    const q = searchQuery.trim().toLowerCase()
+    if (!q) return courses
+    return courses.filter((course) => {
+      const haystack = `${course.title} ${course.description ?? ""} ${course.id}`.toLowerCase()
+      return haystack.includes(q)
+    })
+  }, [courses, searchQuery])
+
   if (loading) {
     return (
       <div className="flex flex-col items-center justify-center py-32">
         <img src={spinnerSrc} alt="" className="h-10 w-10 animate-spin" />
-        {/* <div className="rounded-2xl bg-white shadow-sm p-6">
-          <RefreshCw className="h-10 w-10 animate-spin text-brand-600" />
-        </div>
-        <p className="mt-4 text-sm font-medium text-grayScale-400">Loading courses...</p> */}
       </div>
     )
   }
@@ -253,6 +290,27 @@ export function CoursesPage() {
     )
   }
 
+  const totalCount = filteredCourses.length
+  const totalPages = Math.max(1, Math.ceil(totalCount / pageSize))
+  const safePage = Math.min(page, totalPages)
+  const paginatedCourses = filteredCourses.slice((safePage - 1) * pageSize, safePage * pageSize)
+  const startEntry = totalCount === 0 ? 0 : (safePage - 1) * pageSize + 1
+  const endEntry = Math.min(safePage * pageSize, totalCount)
+
+  const getPageNumbers = () => {
+    const pages: (number | string)[] = []
+    if (totalPages <= 7) {
+      for (let i = 1; i <= totalPages; i++) pages.push(i)
+    } else {
+      pages.push(1, 2, 3)
+      if (safePage > 4) pages.push("...")
+      if (safePage > 3 && safePage < totalPages - 2) pages.push(safePage)
+      if (safePage < totalPages - 3) pages.push("...")
+      pages.push(totalPages)
+    }
+    return pages
+  }
+
   return (
     <div className="space-y-6">
       {/* Header */}
@@ -284,9 +342,20 @@ export function CoursesPage() {
       {/* Course table or empty state */}
       <Card className="shadow-soft">
         <CardHeader className="border-b border-grayScale-200 pb-3">
-          <CardTitle className="text-base font-semibold text-grayScale-600">
-            Sub-category Management
-          </CardTitle>
+          <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+            <CardTitle className="text-base font-semibold text-grayScale-600">
+              Sub-category Management
+            </CardTitle>
+            <div className="relative w-full sm:max-w-xs">
+              <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-grayScale-300" />
+              <Input
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                placeholder="Search sub-categories..."
+                className="pl-9"
+              />
+            </div>
+          </div>
         </CardHeader>
         <CardContent className="pt-4">
           {courses.length === 0 ? (
@@ -305,29 +374,28 @@ export function CoursesPage() {
                 Add your first sub-category
               </Button>
             </div>
+          ) : filteredCourses.length === 0 ? (
+            <div className="flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-grayScale-200 py-16 text-center">
+              <p className="text-base font-semibold text-grayScale-600">No matching sub-categories</p>
+              <p className="mt-1.5 text-sm text-grayScale-400">
+                Try a different search term.
+              </p>
+            </div>
           ) : (
-            <div className="overflow-x-auto rounded-lg border border-grayScale-200">
+            <div className="rounded-xl border bg-white">
               <Table>
                 <TableHeader>
-                  <TableRow className="bg-grayScale-100 hover:bg-grayScale-100">
-                    <TableHead className="py-3 text-xs font-semibold uppercase tracking-wider text-grayScale-500">
-                      Sub-category
-                    </TableHead>
-                    <TableHead className="hidden py-3 text-xs font-semibold uppercase tracking-wider text-grayScale-500 md:table-cell">
-                      Status
-                    </TableHead>
-                    <TableHead className="py-3 text-right text-xs font-semibold uppercase tracking-wider text-grayScale-500">
-                      Actions
-                    </TableHead>
+                  <TableRow>
+                    <TableHead>Sub-category</TableHead>
+                    <TableHead className="hidden md:table-cell">Status</TableHead>
+                    <TableHead className="text-right">Actions</TableHead>
                   </TableRow>
                 </TableHeader>
                 <TableBody>
-                  {courses.map((course, index) => (
+                  {paginatedCourses.map((course) => (
                     <TableRow
                       key={course.id}
-                      className={`cursor-pointer transition-colors hover:bg-brand-100/30 ${
-                        index % 2 === 0 ? "bg-white" : "bg-grayScale-100/40"
-                      }`}
+                      className="group cursor-pointer"
                       onClick={() => handleCourseClick(course.id)}
                     >
                       <TableCell className="max-w-md py-3.5">
@@ -405,6 +473,79 @@ export function CoursesPage() {
                   ))}
                 </TableBody>
               </Table>
+
+              <div className="flex flex-wrap items-center justify-between gap-3 border-t px-4 py-3 text-sm text-grayScale-500">
+                <div className="flex items-center gap-2">
+                  <span>Showing</span>
+                  <span className="font-medium text-grayScale-600">
+                    {startEntry}-{endEntry}
+                  </span>
+                  <span>of</span>
+                  <span className="font-medium text-grayScale-600">{totalCount}</span>
+                  <span className="mr-4">entries</span>
+                  <span className="border-l pl-4">Rows per page</span>
+                  <div className="relative">
+                    <select
+                      value={pageSize}
+                      onChange={(e) => {
+                        setPageSize(Number(e.target.value))
+                        setPage(1)
+                      }}
+                      className="h-8 appearance-none rounded-md border bg-white pl-2 pr-7 text-sm font-medium text-grayScale-600 focus:outline-none"
+                    >
+                      {[10, 20, 50].map((size) => (
+                        <option key={size} value={size}>
+                          {size}
+                        </option>
+                      ))}
+                    </select>
+                    <ChevronDown className="pointer-events-none absolute right-2 top-1/2 h-3 w-3 -translate-y-1/2 text-grayScale-400" />
+                  </div>
+                </div>
+                <div className="flex items-center gap-1">
+                  <button
+                    onClick={() => safePage > 1 && setPage(safePage - 1)}
+                    disabled={safePage === 1}
+                    className={cn(
+                      "flex h-8 w-8 items-center justify-center rounded-md border bg-white text-grayScale-500",
+                      safePage === 1 && "cursor-not-allowed opacity-50",
+                    )}
+                  >
+                    <ChevronLeft className="h-4 w-4" />
+                  </button>
+                  {getPageNumbers().map((n, idx) =>
+                    typeof n === "string" ? (
+                      <span key={`ellipsis-${idx}`} className="px-2 text-grayScale-400">
+                        ...
+                      </span>
+                    ) : (
+                      <button
+                        key={n}
+                        type="button"
+                        onClick={() => setPage(n)}
+                        className={cn(
+                          "h-8 w-8 rounded-md border text-sm font-medium",
+                          n === safePage
+                            ? "border-brand-500 bg-brand-500 text-white"
+                            : "bg-white text-grayScale-600 hover:bg-grayScale-50",
+                        )}
+                      >
+                        {n}
+                      </button>
+                    ),
+                  )}
+                  <button
+                    onClick={() => safePage < totalPages && setPage(safePage + 1)}
+                    disabled={safePage === totalPages}
+                    className={cn(
+                      "flex h-8 w-8 items-center justify-center rounded-md border bg-white text-grayScale-500",
+                      safePage === totalPages && "cursor-not-allowed opacity-50",
+                    )}
+                  >
+                    <ChevronRight className="h-4 w-4" />
+                  </button>
+                </div>
+              </div>
             </div>
           )}
         </CardContent>
@@ -544,14 +685,23 @@ export function CoursesPage() {
                   htmlFor="edit-course-thumbnail"
                   className="mb-2 block text-sm font-medium text-grayScale-600"
                 >
-                  Thumbnail URL
+                  Thumbnail
                 </label>
-                <Input
-                  id="edit-course-thumbnail"
-                  placeholder="Enter thumbnail URL (e.g., https://example.com/image.jpg)"
-                  value={editThumbnail}
-                  onChange={(e) => setEditThumbnail(e.target.value)}
-                />
+                <div className="space-y-2">
+                  <FileUpload
+                    accept="image/*"
+                    onFileSelect={(file) => setEditThumbnailFile(file)}
+                    label="Upload thumbnail"
+                    description="JPEG, PNG, WEBP"
+                    className="min-h-[90px] rounded-lg border-2 border-dashed border-grayScale-300 transition-colors hover:border-brand-400 hover:bg-brand-50/30"
+                  />
+                  <Input
+                    id="edit-course-thumbnail"
+                    placeholder="Or paste thumbnail URL (https://...)"
+                    value={editThumbnail}
+                    onChange={(e) => setEditThumbnail(e.target.value)}
+                  />
+                </div>
               </div>
             </div>
 
@@ -592,7 +742,7 @@ export function CoursesPage() {
             <div className="max-h-[70vh] overflow-y-auto px-6 py-6">
               {courseRatingsLoading ? (
                 <div className="flex flex-col items-center justify-center py-16">
-                  <div className="h-8 w-8 animate-spin rounded-full border-2 border-brand-500 border-t-transparent" />
+                  <SpinnerIcon className="h-8 w-8" />
                   <p className="mt-4 text-sm font-medium text-grayScale-500">Loading ratings…</p>
                 </div>
               ) : courseRatings.length === 0 ? (
diff --git a/src/pages/content-management/PracticeDetailsPage.tsx b/src/pages/content-management/PracticeDetailsPage.tsx
index 69d346c..2cc433a 100644
--- a/src/pages/content-management/PracticeDetailsPage.tsx
+++ b/src/pages/content-management/PracticeDetailsPage.tsx
@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from "react"
-import { RefreshCw } from "lucide-react"
+import { ChevronDown, ChevronLeft, ChevronRight, RefreshCw } from "lucide-react"
+import spinnerSrc from "../../assets/Circular-indeterminate progress indicator.svg"
 import { Card, CardContent, CardHeader, CardTitle } from "../../components/ui/card"
 import { Button } from "../../components/ui/button"
 import { Input } from "../../components/ui/input"
@@ -16,6 +17,8 @@ import { Badge } from "../../components/ui/badge"
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../../components/ui/dialog"
 import { getQuestionSetById, getQuestionSets } from "../../api/courses.api"
 import type { QuestionSet, QuestionSetDetail } from "../../types/course.types"
+import { cn } from "../../lib/utils"
+import { SpinnerIcon } from "../../components/ui/spinner-icon"
 
 const statusColor: Record<string, string> = {
   PUBLISHED: "bg-green-100 text-green-700",
@@ -33,6 +36,8 @@ export function PracticeDetailsPage() {
   const [searchQuery, setSearchQuery] = useState("")
   const [statusFilter, setStatusFilter] = useState("all")
   const [ownerTypeFilter, setOwnerTypeFilter] = useState("all")
+  const [page, setPage] = useState(1)
+  const [pageSize, setPageSize] = useState(10)
 
   const fetchPractices = useCallback(async () => {
     setLoadingList(true)
@@ -89,6 +94,10 @@ export function PracticeDetailsPage() {
     }
   }, [selectedPracticeId, fetchPracticeDetail])
 
+  useEffect(() => {
+    setPage(1)
+  }, [searchQuery, statusFilter, ownerTypeFilter])
+
   const filteredPractices = useMemo(() => {
     return practices.filter((practice) => {
       const matchesSearch =
@@ -104,6 +113,28 @@ export function PracticeDetailsPage() {
   }, [practices, searchQuery, statusFilter, ownerTypeFilter])
 
   const totalCount = useMemo(() => filteredPractices.length, [filteredPractices])
+  const totalPages = Math.max(1, Math.ceil(totalCount / pageSize))
+  const safePage = Math.min(page, totalPages)
+  const paginatedPractices = useMemo(() => {
+    const start = (safePage - 1) * pageSize
+    return filteredPractices.slice(start, start + pageSize)
+  }, [filteredPractices, safePage, pageSize])
+  const startEntry = totalCount === 0 ? 0 : (safePage - 1) * pageSize + 1
+  const endEntry = Math.min(safePage * pageSize, totalCount)
+
+  const getPageNumbers = () => {
+    const pages: (number | string)[] = []
+    if (totalPages <= 7) {
+      for (let i = 1; i <= totalPages; i++) pages.push(i)
+    } else {
+      pages.push(1, 2, 3)
+      if (safePage > 4) pages.push("...")
+      if (safePage > 3 && safePage < totalPages - 2) pages.push(safePage)
+      if (safePage < totalPages - 3) pages.push("...")
+      pages.push(totalPages)
+    }
+    return pages
+  }
 
   return (
     <div className="space-y-6">
@@ -115,7 +146,7 @@ export function PracticeDetailsPage() {
           </p>
         </div>
         <Button variant="outline" onClick={fetchPractices} disabled={loadingList}>
-          <RefreshCw className={`h-4 w-4 ${loadingList ? "animate-spin" : ""}`} />
+          {loadingList ? <SpinnerIcon className="h-4 w-4" /> : <RefreshCw className="h-4 w-4" />}
           Refresh
         </Button>
       </div>
@@ -153,6 +184,7 @@ export function PracticeDetailsPage() {
                   setSearchQuery("")
                   setStatusFilter("all")
                   setOwnerTypeFilter("all")
+                  setPage(1)
                 }}
               >
                 Clear
@@ -160,38 +192,44 @@ export function PracticeDetailsPage() {
             </div>
           </div>
 
-          {loadingList ? (
-            <div className="py-16 text-center text-sm text-grayScale-500">Loading practices...</div>
-          ) : filteredPractices.length === 0 ? (
-            <div className="rounded-lg border-2 border-dashed border-grayScale-200 py-16 text-center text-sm text-grayScale-500">
-              No practice sets found.
-            </div>
-          ) : (
-            <div className="overflow-x-auto rounded-lg border border-grayScale-200">
-              <Table>
-                <TableHeader>
-                  <TableRow className="bg-grayScale-100 hover:bg-grayScale-100">
-                    <TableHead className="py-3 text-xs font-semibold uppercase tracking-wider text-grayScale-500">Title</TableHead>
-                    <TableHead className="hidden py-3 text-xs font-semibold uppercase tracking-wider text-grayScale-500 md:table-cell">Owner</TableHead>
-                    <TableHead className="py-3 text-xs font-semibold uppercase tracking-wider text-grayScale-500">Status</TableHead>
-                    <TableHead className="hidden py-3 text-xs font-semibold uppercase tracking-wider text-grayScale-500 md:table-cell">Created</TableHead>
+          <div className="rounded-xl border bg-white">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Title</TableHead>
+                  <TableHead className="hidden md:table-cell">Owner</TableHead>
+                  <TableHead>Status</TableHead>
+                  <TableHead className="hidden md:table-cell">Created</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {loadingList ? (
+                  <TableRow>
+                    <TableCell colSpan={4} className="py-12 text-center">
+                      <div className="flex flex-col items-center gap-3">
+                        <img src={spinnerSrc} alt="" className="h-6 w-6 animate-spin" />
+                        <span className="text-sm text-grayScale-400">Loading practices...</span>
+                      </div>
+                    </TableCell>
                   </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {filteredPractices.map((practice, index) => (
+                ) : filteredPractices.length === 0 ? (
+                  <TableRow>
+                    <TableCell colSpan={4} className="py-12 text-center text-sm text-grayScale-500">
+                      No practice sets found.
+                    </TableCell>
+                  </TableRow>
+                ) : (
+                  paginatedPractices.map((practice) => (
                     <TableRow
                       key={practice.id}
                       onClick={() => {
                         setSelectedPracticeId(practice.id)
                         setDetailOpen(true)
                       }}
-                      className={`cursor-pointer transition-colors hover:bg-brand-100/30 ${
-                        selectedPracticeId === practice.id
-                          ? "bg-brand-100/40"
-                          : index % 2 === 0
-                            ? "bg-white"
-                            : "bg-grayScale-100/50"
-                      }`}
+                      className={cn(
+                        "group cursor-pointer",
+                        selectedPracticeId === practice.id && "bg-brand-100/30",
+                      )}
                     >
                       <TableCell className="max-w-md py-3.5">
                         <p className="truncate text-sm font-medium text-grayScale-700">{practice.title}</p>
@@ -209,11 +247,84 @@ export function PracticeDetailsPage() {
                         {practice.created_at}
                       </TableCell>
                     </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
+                  ))
+                )}
+              </TableBody>
+            </Table>
+
+            <div className="flex flex-wrap items-center justify-between gap-3 border-t px-4 py-3 text-sm text-grayScale-500">
+              <div className="flex items-center gap-2">
+                <span>Showing</span>
+                <span className="font-medium text-grayScale-600">
+                  {startEntry}-{endEntry}
+                </span>
+                <span>of</span>
+                <span className="font-medium text-grayScale-600">{totalCount}</span>
+                <span className="mr-4">entries</span>
+                <span className="border-l pl-4">Rows per page</span>
+                <div className="relative">
+                  <select
+                    value={pageSize}
+                    onChange={(e) => {
+                      setPageSize(Number(e.target.value))
+                      setPage(1)
+                    }}
+                    className="h-8 appearance-none rounded-md border bg-white pl-2 pr-7 text-sm font-medium text-grayScale-600 focus:outline-none"
+                  >
+                    {[10, 20, 50].map((size) => (
+                      <option key={size} value={size}>
+                        {size}
+                      </option>
+                    ))}
+                  </select>
+                  <ChevronDown className="pointer-events-none absolute right-2 top-1/2 h-3 w-3 -translate-y-1/2 text-grayScale-400" />
+                </div>
+              </div>
+              <div className="flex items-center gap-1">
+                <button
+                  onClick={() => safePage > 1 && setPage(safePage - 1)}
+                  disabled={safePage === 1}
+                  className={cn(
+                    "flex h-8 w-8 items-center justify-center rounded-md border bg-white text-grayScale-500",
+                    safePage === 1 && "cursor-not-allowed opacity-50",
+                  )}
+                >
+                  <ChevronLeft className="h-4 w-4" />
+                </button>
+                {getPageNumbers().map((n, idx) =>
+                  typeof n === "string" ? (
+                    <span key={`ellipsis-${idx}`} className="px-2 text-grayScale-400">
+                      ...
+                    </span>
+                  ) : (
+                    <button
+                      key={n}
+                      type="button"
+                      onClick={() => setPage(n)}
+                      className={cn(
+                        "h-8 w-8 rounded-md border text-sm font-medium",
+                        n === safePage
+                          ? "border-brand-500 bg-brand-500 text-white"
+                          : "bg-white text-grayScale-600 hover:bg-grayScale-50",
+                      )}
+                    >
+                      {n}
+                    </button>
+                  ),
+                )}
+                <button
+                  onClick={() => safePage < totalPages && setPage(safePage + 1)}
+                  disabled={safePage === totalPages}
+                  className={cn(
+                    "flex h-8 w-8 items-center justify-center rounded-md border bg-white text-grayScale-500",
+                    safePage === totalPages && "cursor-not-allowed opacity-50",
+                  )}
+                >
+                  <ChevronRight className="h-4 w-4" />
+                </button>
+              </div>
             </div>
-          )}
+          </div>
         </CardContent>
       </Card>
 
diff --git a/src/pages/content-management/QuestionsPage.tsx b/src/pages/content-management/QuestionsPage.tsx
index 96fefe0..2a94399 100644
--- a/src/pages/content-management/QuestionsPage.tsx
+++ b/src/pages/content-management/QuestionsPage.tsx
@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from "react"
 import { Link } from "react-router-dom"
-import { Plus, Search, Edit, Trash2, HelpCircle, X } from "lucide-react"
+import { Plus, Search, Edit, Trash2, HelpCircle, X, ChevronDown, ChevronLeft, ChevronRight } from "lucide-react"
+import spinnerSrc from "../../assets/Circular-indeterminate progress indicator.svg"
 import { Button } from "../../components/ui/button"
 import { Card, CardContent, CardHeader, CardTitle } from "../../components/ui/card"
 import { Input } from "../../components/ui/input"
@@ -17,6 +18,7 @@ import {
 import { Badge } from "../../components/ui/badge"
 import { deleteQuestion, getQuestionById, getQuestions, updateQuestion } from "../../api/courses.api"
 import type { QuestionDetail } from "../../types/course.types"
+import { cn } from "../../lib/utils"
 
 type QuestionTypeFilter = "all" | "MCQ" | "TRUE_FALSE" | "SHORT_ANSWER" | "AUDIO"
 type DifficultyFilter = "all" | "EASY" | "MEDIUM" | "HARD"
@@ -300,8 +302,23 @@ export function QuestionsPage() {
 
   const totalCount = filteredQuestions.length
   const totalPages = Math.max(1, Math.ceil(totalCount / pageSize))
-  const canGoPrev = page > 1
-  const canGoNext = page < totalPages
+  const safePage = Math.min(page, totalPages)
+  const startEntry = totalCount === 0 ? 0 : (safePage - 1) * pageSize + 1
+  const endEntry = Math.min(safePage * pageSize, totalCount)
+
+  const getPageNumbers = () => {
+    const pages: (number | string)[] = []
+    if (totalPages <= 7) {
+      for (let i = 1; i <= totalPages; i++) pages.push(i)
+    } else {
+      pages.push(1, 2, 3)
+      if (safePage > 4) pages.push("...")
+      if (safePage > 3 && safePage < totalPages - 2) pages.push(safePage)
+      if (safePage < totalPages - 3) pages.push("...")
+      pages.push(totalPages)
+    }
+    return pages
+  }
 
   return (
     <div className="space-y-8">
@@ -388,18 +405,6 @@ export function QuestionsPage() {
                 <option value="PUBLISHED">Published</option>
                 <option value="INACTIVE">Inactive</option>
               </Select>
-              <Select
-                value={String(pageSize)}
-                onChange={(e) => {
-                  const next = Number(e.target.value)
-                  setPageSize(next)
-                  setPage(1)
-                }}
-              >
-                <option value="10">10 / page</option>
-                <option value="20">20 / page</option>
-                <option value="50">50 / page</option>
-              </Select>
             </div>
           </div>
 
@@ -408,52 +413,54 @@ export function QuestionsPage() {
             Showing {paginatedQuestions.length} of {totalCount} questions
           </div>
 
-          {/* Questions Table */}
-          {loading ? (
-            <div className="flex items-center justify-center rounded-lg border border-grayScale-200 py-16">
-              <p className="text-sm text-grayScale-500">Loading questions...</p>
-            </div>
-          ) : filteredQuestions.length > 0 ? (
-            <div className="overflow-x-auto rounded-lg border border-grayScale-200">
-              <Table>
-                <TableHeader>
-                  <TableRow className="bg-grayScale-100 hover:bg-grayScale-100">
-                    <TableHead className="w-10 py-3 text-xs font-semibold uppercase tracking-wider text-grayScale-500">
-                      <input
-                        type="checkbox"
-                        checked={isAllCurrentPageSelected}
-                        onChange={toggleSelectAllCurrentPage}
-                        aria-label="Select all questions on current page"
-                      />
-                    </TableHead>
-                    <TableHead className="py-3 text-xs font-semibold uppercase tracking-wider text-grayScale-500">
-                      Question
-                    </TableHead>
-                    <TableHead className="py-3 text-xs font-semibold uppercase tracking-wider text-grayScale-500">
-                      Type
-                    </TableHead>
-                    <TableHead className="hidden py-3 text-xs font-semibold uppercase tracking-wider text-grayScale-500 md:table-cell">
-                      Difficulty
-                    </TableHead>
-                    <TableHead className="hidden py-3 text-xs font-semibold uppercase tracking-wider text-grayScale-500 md:table-cell">
-                      Status
-                    </TableHead>
-                    <TableHead className="py-3 text-xs font-semibold uppercase tracking-wider text-grayScale-500">
-                      Points
-                    </TableHead>
-                    <TableHead className="py-3 text-right text-xs font-semibold uppercase tracking-wider text-grayScale-500">
-                      Actions
-                    </TableHead>
+          <div className="rounded-xl border bg-white">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead className="w-10">
+                    <input
+                      type="checkbox"
+                      checked={isAllCurrentPageSelected}
+                      onChange={toggleSelectAllCurrentPage}
+                      aria-label="Select all questions on current page"
+                    />
+                  </TableHead>
+                  <TableHead>Question</TableHead>
+                  <TableHead>Type</TableHead>
+                  <TableHead className="hidden md:table-cell">Difficulty</TableHead>
+                  <TableHead className="hidden md:table-cell">Status</TableHead>
+                  <TableHead>Points</TableHead>
+                  <TableHead className="text-right">Actions</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {loading ? (
+                  <TableRow>
+                    <TableCell colSpan={7} className="py-12 text-center">
+                      <div className="flex flex-col items-center gap-3">
+                        <img src={spinnerSrc} alt="" className="h-6 w-6 animate-spin" />
+                        <span className="text-sm text-grayScale-400">Loading questions...</span>
+                      </div>
+                    </TableCell>
                   </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {paginatedQuestions.map((question, index) => (
+                ) : filteredQuestions.length === 0 ? (
+                  <TableRow>
+                    <TableCell colSpan={7} className="py-12 text-center">
+                      <div className="flex flex-col items-center gap-3">
+                        <HelpCircle className="h-8 w-8 text-grayScale-200" />
+                        <div>
+                          <p className="text-sm font-medium text-grayScale-500">No questions found</p>
+                          <p className="mt-1 text-xs text-grayScale-400">Try adjusting your filters</p>
+                        </div>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ) : (
+                  paginatedQuestions.map((question) => (
                     <TableRow
                       key={question.id}
                       onClick={() => openDetails(question.id)}
-                      className={`cursor-pointer transition-colors hover:bg-brand-100/30 ${
-                        index % 2 === 0 ? "bg-white" : "bg-grayScale-100/50"
-                      }`}
+                      className="group cursor-pointer"
                     >
                       <TableCell className="py-3.5">
                         <input
@@ -527,46 +534,83 @@ export function QuestionsPage() {
                         </div>
                       </TableCell>
                     </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
-            </div>
-          ) : (
-            <div className="flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-grayScale-200 py-20 text-center">
-              <div className="mb-4 grid h-16 w-16 place-items-center rounded-full bg-gradient-to-br from-grayScale-100 to-grayScale-200">
-                <HelpCircle className="h-8 w-8 text-grayScale-400" />
-              </div>
-              <p className="text-base font-semibold text-grayScale-600">
-                No questions found
-              </p>
-              <p className="mt-1.5 max-w-sm text-sm leading-relaxed text-grayScale-400">
-                Try adjusting your search or filter criteria to find what you're
-                looking for.
-              </p>
-            </div>
-          )}
+                  ))
+                )}
+              </TableBody>
+            </Table>
 
-          <div className="flex flex-col gap-3 border-t border-grayScale-200 pt-4 sm:flex-row sm:items-center sm:justify-between">
-            <p className="text-xs text-grayScale-500">
-              Page {page} of {totalPages}
-            </p>
-            <div className="flex items-center gap-2">
-              <Button
-                variant="outline"
-                size="sm"
-                disabled={!canGoPrev}
-                onClick={() => setPage((prev) => Math.max(1, prev - 1))}
-              >
-                Previous
-              </Button>
-              <Button
-                variant="outline"
-                size="sm"
-                disabled={!canGoNext}
-                onClick={() => setPage((prev) => Math.min(totalPages, prev + 1))}
-              >
-                Next
-              </Button>
+            <div className="flex flex-wrap items-center justify-between gap-3 border-t px-4 py-3 text-sm text-grayScale-500">
+              <div className="flex items-center gap-2">
+                <span>Showing</span>
+                <span className="font-medium text-grayScale-600">
+                  {startEntry}-{endEntry}
+                </span>
+                <span>of</span>
+                <span className="font-medium text-grayScale-600">{totalCount}</span>
+                <span className="mr-4">entries</span>
+                <span className="border-l pl-4">Rows per page</span>
+                <div className="relative">
+                  <select
+                    value={pageSize}
+                    onChange={(e) => {
+                      setPageSize(Number(e.target.value))
+                      setPage(1)
+                    }}
+                    className="h-8 appearance-none rounded-md border bg-white pl-2 pr-7 text-sm font-medium text-grayScale-600 focus:outline-none"
+                  >
+                    {[10, 20, 50].map((size) => (
+                      <option key={size} value={size}>
+                        {size}
+                      </option>
+                    ))}
+                  </select>
+                  <ChevronDown className="pointer-events-none absolute right-2 top-1/2 h-3 w-3 -translate-y-1/2 text-grayScale-400" />
+                </div>
+              </div>
+
+              <div className="flex items-center gap-1">
+                <button
+                  onClick={() => safePage > 1 && setPage(safePage - 1)}
+                  disabled={safePage === 1}
+                  className={cn(
+                    "flex h-8 w-8 items-center justify-center rounded-md border bg-white text-grayScale-500",
+                    safePage === 1 && "cursor-not-allowed opacity-50",
+                  )}
+                >
+                  <ChevronLeft className="h-4 w-4" />
+                </button>
+                {getPageNumbers().map((n, idx) =>
+                  typeof n === "string" ? (
+                    <span key={`ellipsis-${idx}`} className="px-2 text-grayScale-400">
+                      ...
+                    </span>
+                  ) : (
+                    <button
+                      key={n}
+                      type="button"
+                      onClick={() => setPage(n)}
+                      className={cn(
+                        "h-8 w-8 rounded-md border text-sm font-medium",
+                        n === safePage
+                          ? "border-brand-500 bg-brand-500 text-white"
+                          : "bg-white text-grayScale-600 hover:bg-grayScale-50",
+                      )}
+                    >
+                      {n}
+                    </button>
+                  ),
+                )}
+                <button
+                  onClick={() => safePage < totalPages && setPage(safePage + 1)}
+                  disabled={safePage === totalPages}
+                  className={cn(
+                    "flex h-8 w-8 items-center justify-center rounded-md border bg-white text-grayScale-500",
+                    safePage === totalPages && "cursor-not-allowed opacity-50",
+                  )}
+                >
+                  <ChevronRight className="h-4 w-4" />
+                </button>
+              </div>
             </div>
           </div>
         </CardContent>
@@ -629,11 +673,74 @@ export function QuestionsPage() {
                     <p className="mt-1 text-sm text-grayScale-700">{detailData.question_text}</p>
                   </div>
                   <div className="grid grid-cols-2 gap-3 text-sm">
+                    <p><span className="font-medium">ID:</span> {detailData.id}</p>
                     <p><span className="font-medium">Type:</span> {typeLabels[detailData.question_type] || detailData.question_type}</p>
                     <p><span className="font-medium">Difficulty:</span> {detailData.difficulty_level || "—"}</p>
                     <p><span className="font-medium">Points:</span> {detailData.points ?? 0}</p>
                     <p><span className="font-medium">Status:</span> {detailData.status || "—"}</p>
+                    <p><span className="font-medium">Created:</span> {detailData.created_at || "—"}</p>
                   </div>
+                  {detailData.explanation ? (
+                    <div>
+                      <p className="text-xs font-semibold uppercase tracking-wider text-grayScale-500">Explanation</p>
+                      <p className="mt-1 text-sm text-grayScale-700">{detailData.explanation}</p>
+                    </div>
+                  ) : null}
+                  {detailData.tips ? (
+                    <div>
+                      <p className="text-xs font-semibold uppercase tracking-wider text-grayScale-500">Tips</p>
+                      <p className="mt-1 text-sm text-grayScale-700">{detailData.tips}</p>
+                    </div>
+                  ) : null}
+                  {detailData.audio_correct_answer_text ? (
+                    <div>
+                      <p className="text-xs font-semibold uppercase tracking-wider text-grayScale-500">Audio Correct Answer Text</p>
+                      <p className="mt-1 text-sm text-grayScale-700">{detailData.audio_correct_answer_text}</p>
+                    </div>
+                  ) : null}
+                  {detailData.voice_prompt ? (
+                    <div>
+                      <p className="text-xs font-semibold uppercase tracking-wider text-grayScale-500">Voice Prompt</p>
+                      <p className="mt-1 break-all text-xs text-grayScale-500">{detailData.voice_prompt}</p>
+                      <audio controls src={detailData.voice_prompt} className="mt-2 h-10 w-full max-w-md" />
+                    </div>
+                  ) : null}
+                  {detailData.sample_answer_voice_prompt ? (
+                    <div>
+                      <p className="text-xs font-semibold uppercase tracking-wider text-grayScale-500">Sample Answer Voice Prompt</p>
+                      <p className="mt-1 break-all text-xs text-grayScale-500">{detailData.sample_answer_voice_prompt}</p>
+                      <audio controls src={detailData.sample_answer_voice_prompt} className="mt-2 h-10 w-full max-w-md" />
+                    </div>
+                  ) : null}
+                  {detailData.image_url ? (
+                    <div>
+                      <p className="text-xs font-semibold uppercase tracking-wider text-grayScale-500">Image</p>
+                      <p className="mt-1 break-all text-xs text-grayScale-500">{detailData.image_url}</p>
+                      <img
+                        src={detailData.image_url}
+                        alt="Question reference"
+                        className="mt-2 h-28 w-28 rounded-md border border-grayScale-200 object-cover"
+                      />
+                    </div>
+                  ) : null}
+                  {Array.isArray(detailData.short_answers) && detailData.short_answers.length > 0 ? (
+                    <div>
+                      <p className="text-xs font-semibold uppercase tracking-wider text-grayScale-500">Short Answers</p>
+                      <div className="mt-2 space-y-1 text-sm text-grayScale-700">
+                        {detailData.short_answers.map((answer, index) => {
+                          const value =
+                            typeof answer === "string"
+                              ? answer
+                              : (answer as { acceptable_answer?: string }).acceptable_answer || ""
+                          return (
+                            <p key={`${value}-${index}`} className="rounded-md border border-grayScale-200 bg-grayScale-50 px-2 py-1">
+                              {value || "—"}
+                            </p>
+                          )
+                        })}
+                      </div>
+                    </div>
+                  ) : null}
                   {(detailData.options ?? []).length > 0 && (
                     <div>
                       <p className="text-xs font-semibold uppercase tracking-wider text-grayScale-500">Options</p>
diff --git a/src/pages/content-management/SpeakingPage.tsx b/src/pages/content-management/SpeakingPage.tsx
index 6bfe68f..b760258 100644
--- a/src/pages/content-management/SpeakingPage.tsx
+++ b/src/pages/content-management/SpeakingPage.tsx
@@ -1,36 +1,176 @@
-import { useCallback, useEffect, useMemo, useState } from "react"
-import { Plus, Mic, X } from "lucide-react"
+import { type ChangeEvent, useCallback, useEffect, useMemo, useRef, useState } from "react"
+import { ArrowLeft, ChevronDown, Image as ImageIcon, Mic, Plus, Trash2, Upload } from "lucide-react"
 import { Card, CardContent, CardHeader, CardTitle } from "../../components/ui/card"
 import { Button } from "../../components/ui/button"
 import { Input } from "../../components/ui/input"
 import { Textarea } from "../../components/ui/textarea"
-import { Select } from "../../components/ui/select"
+import { Stepper } from "../../components/ui/stepper"
 import {
   addQuestionToSet,
+  deleteQuestion,
+  getCourseCategories,
+  getCoursesByCategory,
+  getQuestionById,
+  getSubCoursesByCourse,
   createQuestion,
   createQuestionSet,
   getQuestions,
+  updateQuestion,
 } from "../../api/courses.api"
-import type { QuestionDetail } from "../../types/course.types"
+import { resolveFileUrl, uploadAudioFile, uploadImageFile } from "../../api/files.api"
+import { SpinnerIcon } from "../../components/ui/spinner-icon"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "../../components/ui/dropdown-menu"
+import type { Course, CourseCategory, QuestionDetail, SubCourse } from "../../types/course.types"
+import { toast } from "sonner"
+
+const MAX_AUDIO_SIZE_BYTES = 50 * 1024 * 1024
+const ALLOWED_AUDIO_EXTENSIONS = new Set(["mp3", "wav", "ogg", "m4a", "aac", "webm", "flac"])
+const MAX_IMAGE_SIZE_BYTES = 10 * 1024 * 1024
+const ALLOWED_IMAGE_EXTENSIONS = new Set(["jpg", "jpeg", "png", "webp", "gif"])
+const SPEAKING_STEPS = ["Practice", "Questions", "Review"]
+
+type SubCourseOption = {
+  id: number
+  title: string
+  courseTitle: string
+  categoryName: string
+}
+
+type RecordingField = "voice_prompt" | "sample_answer_voice_prompt"
+
+type AudioQuestionDraft = {
+  questionText: string
+  difficulty: "EASY" | "MEDIUM" | "HARD"
+  points: number
+  voicePrompt: string
+  sampleAnswerVoicePrompt: string
+  audioCorrectAnswerText: string
+  imageUrl: string
+  tips: string
+  explanation: string
+  voicePromptPreviewUrl: string
+  samplePromptPreviewUrl: string
+  imagePreviewUrl: string
+  uploadingVoicePrompt: boolean
+  uploadingSamplePrompt: boolean
+  uploadingImage: boolean
+  recordingVoicePrompt: boolean
+  recordingSamplePrompt: boolean
+}
+
+const createEmptyDraft = (): AudioQuestionDraft => ({
+  questionText: "",
+  difficulty: "EASY",
+  points: 1,
+  voicePrompt: "",
+  sampleAnswerVoicePrompt: "",
+  audioCorrectAnswerText: "",
+  imageUrl: "",
+  tips: "",
+  explanation: "",
+  voicePromptPreviewUrl: "",
+  samplePromptPreviewUrl: "",
+  imagePreviewUrl: "",
+  uploadingVoicePrompt: false,
+  uploadingSamplePrompt: false,
+  uploadingImage: false,
+  recordingVoicePrompt: false,
+  recordingSamplePrompt: false,
+})
+
+function normalizeObjectKey(value: string) {
+  const trimmed = value.trim()
+  if (!trimmed) return ""
+  if (trimmed.startsWith("http://") || trimmed.startsWith("https://")) return trimmed
+  const protocolMatch = trimmed.match(/^[a-z]+:\/\//i)
+  if (protocolMatch) {
+    return trimmed.replace(/^[a-z]+:\/\//i, "")
+  }
+  return trimmed
+}
 
 export function SpeakingPage() {
   const [audioQuestions, setAudioQuestions] = useState<QuestionDetail[]>([])
+  const [audioPreviewByQuestionId, setAudioPreviewByQuestionId] = useState<Record<number, string>>({})
   const [loading, setLoading] = useState(false)
   const [saving, setSaving] = useState(false)
   const [openCreate, setOpenCreate] = useState(false)
 
   const [setTitle, setSetTitle] = useState("")
   const [setDescription, setSetDescription] = useState("")
-  const [ownerType, setOwnerType] = useState<"SUB_COURSE" | "COURSE">("SUB_COURSE")
-  const [ownerId, setOwnerId] = useState("")
-  const [setStatus, setSetStatus] = useState<"DRAFT" | "PUBLISHED">("PUBLISHED")
+  const [subCourseId, setSubCourseId] = useState("")
+  const [subCourseOptions, setSubCourseOptions] = useState<SubCourseOption[]>([])
+  const [subCourseLoading, setSubCourseLoading] = useState(false)
+  const [subCourseSearch, setSubCourseSearch] = useState("")
+  const [subCourseMenuOpen, setSubCourseMenuOpen] = useState(false)
+  const [setStatus, setSetStatus] = useState<"DRAFT" | "PUBLISHED">("DRAFT")
+  const [currentStep, setCurrentStep] = useState(1)
+  const [detailOpen, setDetailOpen] = useState(false)
+  const [detailLoading, setDetailLoading] = useState(false)
+  const [selectedQuestionDetail, setSelectedQuestionDetail] = useState<QuestionDetail | null>(null)
+  const [detailVoiceUrl, setDetailVoiceUrl] = useState("")
+  const [detailSampleVoiceUrl, setDetailSampleVoiceUrl] = useState("")
+  const [detailImageUrl, setDetailImageUrl] = useState("")
+  const [detailEditing, setDetailEditing] = useState(false)
+  const [detailSaving, setDetailSaving] = useState(false)
+  const [detailDeleting, setDetailDeleting] = useState(false)
+  const [confirmDeleteOpen, setConfirmDeleteOpen] = useState(false)
+  const [deleteTarget, setDeleteTarget] = useState<{ id: number; text: string } | null>(null)
+  const [detailForm, setDetailForm] = useState({
+    question_text: "",
+    question_type: "AUDIO" as "AUDIO",
+    difficulty_level: "EASY" as "EASY" | "MEDIUM" | "HARD",
+    points: 1,
+    explanation: "",
+    tips: "",
+    voice_prompt: "",
+    sample_answer_voice_prompt: "",
+    image_url: "",
+    status: "DRAFT" as "DRAFT" | "PUBLISHED" | "INACTIVE",
+    audio_correct_answer_text: "",
+  })
 
-  const [questionText, setQuestionText] = useState("")
-  const [difficulty, setDifficulty] = useState("EASY")
-  const [points, setPoints] = useState(1)
-  const [voicePrompt, setVoicePrompt] = useState("")
-  const [sampleAnswerVoicePrompt, setSampleAnswerVoicePrompt] = useState("")
-  const [audioCorrectAnswerText, setAudioCorrectAnswerText] = useState("")
+  const [questionDrafts, setQuestionDrafts] = useState<AudioQuestionDraft[]>([createEmptyDraft()])
+  const [recordingModal, setRecordingModal] = useState<{
+    draftIndex: number
+    field: RecordingField
+    levels: number[]
+    label: string
+    elapsedSeconds: number
+    isPaused: boolean
+  } | null>(null)
+  const activeRecordingRef = useRef<{
+    recorder: MediaRecorder
+    stream: MediaStream
+    chunks: BlobPart[]
+    audioContext: AudioContext
+    analyser: AnalyserNode
+    rafId: number | null
+    draftIndex: number
+    field: RecordingField
+    shouldUpload: boolean
+    isPaused: boolean
+    startedAtMs: number
+    pausedTotalMs: number
+    pauseStartedAtMs: number | null
+  } | null>(null)
+
+  const resolvePreviewUrl = useCallback(async (value: string) => {
+    if (!value.trim()) return ""
+    if (value.startsWith("http://") || value.startsWith("https://")) return value
+
+    const key = normalizeObjectKey(value)
+    if (!key) return ""
+
+    const res = await resolveFileUrl(key)
+    return res.data?.data?.url ?? ""
+  }, [])
 
   const fetchAudioQuestions = useCallback(async () => {
     setLoading(true)
@@ -86,79 +226,650 @@ export function SpeakingPage() {
     fetchAudioQuestions()
   }, [fetchAudioQuestions])
 
+  useEffect(() => {
+    let cancelled = false
+    const fetchSubCourseOptions = async () => {
+      setSubCourseLoading(true)
+      try {
+        const categoriesRes = await getCourseCategories()
+        const categories = categoriesRes.data?.data?.categories ?? []
+        if (categories.length === 0) {
+          if (!cancelled) setSubCourseOptions([])
+          return
+        }
+
+        const coursesByCategoryResponses = await Promise.all(
+          categories.map(async (category: CourseCategory) => {
+            const res = await getCoursesByCategory(category.id)
+            return {
+              category,
+              courses: res.data?.data?.courses ?? [],
+            }
+          }),
+        )
+
+        const courseRecords = coursesByCategoryResponses.flatMap(({ category, courses }) =>
+          courses.map((course: Course) => ({ category, course })),
+        )
+
+        const subCourseResponses = await Promise.all(
+          courseRecords.map(async ({ category, course }) => {
+            const res = await getSubCoursesByCourse(course.id)
+            const subCourses = res.data?.data?.sub_courses ?? []
+            return subCourses.map((subCourse: SubCourse) => ({
+              id: subCourse.id,
+              title: subCourse.title,
+              courseTitle: course.title,
+              categoryName: category.name,
+            }))
+          }),
+        )
+
+        const options = subCourseResponses
+          .flat()
+          .sort((a, b) => a.title.localeCompare(b.title))
+        if (!cancelled) setSubCourseOptions(options)
+      } catch (error) {
+        console.error("Failed to load course options:", error)
+        if (!cancelled) setSubCourseOptions([])
+      } finally {
+        if (!cancelled) setSubCourseLoading(false)
+      }
+    }
+    fetchSubCourseOptions()
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  useEffect(() => {
+    let cancelled = false
+    const withVoice = audioQuestions.filter((q) => Boolean(q.voice_prompt))
+    if (withVoice.length === 0) {
+      setAudioPreviewByQuestionId({})
+      return
+    }
+
+    const resolveAll = async () => {
+      const entries = await Promise.all(
+        withVoice.map(async (question) => {
+          try {
+            const url = await resolvePreviewUrl(question.voice_prompt ?? "")
+            return [question.id, url] as const
+          } catch {
+            return [question.id, ""] as const
+          }
+        }),
+      )
+      if (!cancelled) {
+        setAudioPreviewByQuestionId(Object.fromEntries(entries))
+      }
+    }
+
+    resolveAll()
+    return () => {
+      cancelled = true
+    }
+  }, [audioQuestions, resolvePreviewUrl])
+
   const resetCreateForm = () => {
     setSetTitle("")
     setSetDescription("")
-    setOwnerType("SUB_COURSE")
-    setOwnerId("")
-    setSetStatus("PUBLISHED")
-    setQuestionText("")
-    setDifficulty("EASY")
-    setPoints(1)
-    setVoicePrompt("")
-    setSampleAnswerVoicePrompt("")
-    setAudioCorrectAnswerText("")
+    setSubCourseId("")
+    setSetStatus("DRAFT")
+    setQuestionDrafts([createEmptyDraft()])
   }
 
   const canCreate = useMemo(() => {
-    return (
-      setTitle.trim().length > 0 &&
-      ownerId.trim().length > 0 &&
-      questionText.trim().length > 0 &&
-      voicePrompt.trim().length > 0 &&
-      sampleAnswerVoicePrompt.trim().length > 0 &&
-      audioCorrectAnswerText.trim().length > 0
-    )
-  }, [setTitle, ownerId, questionText, voicePrompt, sampleAnswerVoicePrompt, audioCorrectAnswerText])
+    const hasQuestionWithText = questionDrafts.some((draft) => draft.questionText.trim().length > 0)
+    return setTitle.trim().length > 0 && subCourseId.trim().length > 0 && hasQuestionWithText
+  }, [setTitle, subCourseId, questionDrafts])
+  const canProceedToQuestions = useMemo(
+    () => setTitle.trim().length > 0 && subCourseId.trim().length > 0,
+    [setTitle, subCourseId],
+  )
+  const questionsWithText = useMemo(
+    () => questionDrafts.filter((draft) => draft.questionText.trim().length > 0),
+    [questionDrafts],
+  )
+  const canProceedToReview = questionsWithText.length > 0
+  const selectedSubCourseOption = useMemo(
+    () => subCourseOptions.find((option) => option.id === Number(subCourseId)),
+    [subCourseId, subCourseOptions],
+  )
+  const filteredSubCourseOptions = useMemo(() => {
+    const q = subCourseSearch.trim().toLowerCase()
+    if (!q) return subCourseOptions
+    return subCourseOptions.filter((option) => {
+      const haystack = `${option.title} ${option.courseTitle} ${option.categoryName} ${option.id}`.toLowerCase()
+      return haystack.includes(q)
+    })
+  }, [subCourseOptions, subCourseSearch])
+
+  const updateDraft = (index: number, updater: (draft: AudioQuestionDraft) => AudioQuestionDraft) => {
+    setQuestionDrafts((prev) => prev.map((draft, idx) => (idx === index ? updater(draft) : draft)))
+  }
+
+  const uploadAudioForDraft = useCallback(
+    async (file: File, field: "voice_prompt" | "sample_answer_voice_prompt", draftIndex: number) => {
+      const extension = file.name.split(".").pop()?.toLowerCase() ?? ""
+      if (!ALLOWED_AUDIO_EXTENSIONS.has(extension)) {
+        toast.error("Unsupported audio format")
+        return
+      }
+      if (file.size > MAX_AUDIO_SIZE_BYTES) {
+        toast.error("Audio file must be 50MB or less")
+        return
+      }
+
+      updateDraft(draftIndex, (draft) =>
+        field === "voice_prompt"
+          ? { ...draft, uploadingVoicePrompt: true }
+          : { ...draft, uploadingSamplePrompt: true },
+      )
+
+      try {
+        const res = await uploadAudioFile(file)
+        const objectKey = res.data?.data?.object_key?.trim()
+        const immediateUrl = res.data?.data?.url?.trim() ?? ""
+        if (!objectKey) throw new Error("Missing uploaded audio object key")
+
+        if (field === "voice_prompt") {
+          updateDraft(draftIndex, (draft) => ({
+            ...draft,
+            voicePrompt: objectKey,
+            voicePromptPreviewUrl: immediateUrl || draft.voicePromptPreviewUrl,
+          }))
+          if (!immediateUrl) {
+            const resolvedUrl = await resolvePreviewUrl(objectKey)
+            updateDraft(draftIndex, (draft) => ({ ...draft, voicePromptPreviewUrl: resolvedUrl }))
+          }
+        } else {
+          updateDraft(draftIndex, (draft) => ({
+            ...draft,
+            sampleAnswerVoicePrompt: objectKey,
+            samplePromptPreviewUrl: immediateUrl || draft.samplePromptPreviewUrl,
+          }))
+          if (!immediateUrl) {
+            const resolvedUrl = await resolvePreviewUrl(objectKey)
+            updateDraft(draftIndex, (draft) => ({ ...draft, samplePromptPreviewUrl: resolvedUrl }))
+          }
+        }
+        toast.success("Audio uploaded successfully")
+      } catch (error) {
+        console.error("Failed to upload audio:", error)
+        toast.error("Failed to upload audio file")
+      } finally {
+        updateDraft(draftIndex, (draft) =>
+          field === "voice_prompt"
+            ? { ...draft, uploadingVoicePrompt: false }
+            : { ...draft, uploadingSamplePrompt: false },
+        )
+      }
+    },
+    [resolvePreviewUrl],
+  )
+
+  const handleAudioUpload = async (
+    event: ChangeEvent<HTMLInputElement>,
+    field: "voice_prompt" | "sample_answer_voice_prompt",
+    draftIndex: number,
+  ) => {
+    const file = event.target.files?.[0]
+    if (!file) return
+    await uploadAudioForDraft(file, field, draftIndex)
+    event.target.value = ""
+  }
+
+  const handleImageUpload = async (event: ChangeEvent<HTMLInputElement>, draftIndex: number) => {
+    const file = event.target.files?.[0]
+    if (!file) return
+
+    const extension = file.name.split(".").pop()?.toLowerCase() ?? ""
+    if (!ALLOWED_IMAGE_EXTENSIONS.has(extension)) {
+      toast.error("Unsupported image format")
+      event.target.value = ""
+      return
+    }
+    if (file.size > MAX_IMAGE_SIZE_BYTES) {
+      toast.error("Image file must be 10MB or less")
+      event.target.value = ""
+      return
+    }
+
+    updateDraft(draftIndex, (draft) => ({ ...draft, uploadingImage: true }))
+    try {
+      const res = await uploadImageFile(file)
+      const uploadedUrl = res.data?.data?.url?.trim()
+      if (!uploadedUrl) throw new Error("Missing uploaded image url")
+      const resolved = uploadedUrl
+      updateDraft(draftIndex, (draft) => ({
+        ...draft,
+        imageUrl: uploadedUrl,
+        imagePreviewUrl: resolved,
+      }))
+      toast.success("Image uploaded successfully")
+    } catch (error) {
+      console.error("Failed to upload image:", error)
+      toast.error("Failed to upload image")
+    } finally {
+      updateDraft(draftIndex, (draft) => ({ ...draft, uploadingImage: false }))
+      event.target.value = ""
+    }
+  }
+
+  const handleResolveManualAudioPreview = async (
+    field: "voice_prompt" | "sample_answer_voice_prompt",
+    draftIndex: number,
+  ) => {
+    const selectedDraft = questionDrafts[draftIndex]
+    if (!selectedDraft) return
+    const rawValue = field === "voice_prompt" ? selectedDraft.voicePrompt : selectedDraft.sampleAnswerVoicePrompt
+    if (!rawValue.trim()) {
+      updateDraft(draftIndex, (draft) =>
+        field === "voice_prompt"
+          ? { ...draft, voicePromptPreviewUrl: "" }
+          : { ...draft, samplePromptPreviewUrl: "" },
+      )
+      return
+    }
+    try {
+      const url = await resolvePreviewUrl(rawValue)
+      updateDraft(draftIndex, (draft) =>
+        field === "voice_prompt"
+          ? { ...draft, voicePromptPreviewUrl: url }
+          : { ...draft, samplePromptPreviewUrl: url },
+      )
+    } catch (error) {
+      console.error("Failed to resolve audio preview URL:", error)
+      toast.error("Could not resolve audio preview URL")
+    }
+  }
+
+  const handleResolveManualImagePreview = async (draftIndex: number) => {
+    const draft = questionDrafts[draftIndex]
+    if (!draft) return
+    if (!draft.imageUrl.trim()) {
+      updateDraft(draftIndex, (current) => ({ ...current, imagePreviewUrl: "" }))
+      return
+    }
+    try {
+      const resolved = await resolvePreviewUrl(draft.imageUrl)
+      updateDraft(draftIndex, (current) => ({ ...current, imagePreviewUrl: resolved }))
+    } catch (error) {
+      console.error("Failed to resolve image preview URL:", error)
+      toast.error("Could not resolve image preview URL")
+    }
+  }
+
+  const stopActiveRecording = async (saveRecording: boolean) => {
+    const active = activeRecordingRef.current
+    if (!active) return
+    active.shouldUpload = saveRecording
+    if (active.recorder.state !== "inactive") {
+      active.recorder.stop()
+      return
+    }
+    if (!saveRecording) {
+      active.stream.getTracks().forEach((track) => track.stop())
+      if (active.rafId) cancelAnimationFrame(active.rafId)
+      await active.audioContext.close().catch(() => undefined)
+      activeRecordingRef.current = null
+      setRecordingModal(null)
+    }
+  }
+
+  const togglePauseRecording = () => {
+    const active = activeRecordingRef.current
+    if (!active) return
+    if (active.recorder.state === "recording") {
+      active.recorder.pause()
+      active.isPaused = true
+      active.pauseStartedAtMs = Date.now()
+      setRecordingModal((prev) => (prev ? { ...prev, isPaused: true } : prev))
+      return
+    }
+    if (active.recorder.state === "paused") {
+      active.recorder.resume()
+      if (active.pauseStartedAtMs) {
+        active.pausedTotalMs += Date.now() - active.pauseStartedAtMs
+      }
+      active.pauseStartedAtMs = null
+      active.isPaused = false
+      setRecordingModal((prev) => (prev ? { ...prev, isPaused: false } : prev))
+    }
+  }
+
+  const startRecording = async (field: RecordingField, draftIndex: number) => {
+    if (activeRecordingRef.current) {
+      toast.error("Finish current recording first")
+      return
+    }
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
+      const recorder = new MediaRecorder(stream)
+      const chunks: BlobPart[] = []
+      const audioContext = new AudioContext()
+      const analyser = audioContext.createAnalyser()
+      analyser.fftSize = 256
+      const source = audioContext.createMediaStreamSource(stream)
+      source.connect(analyser)
+      const dataArray = new Uint8Array(analyser.frequencyBinCount)
+      const label = field === "voice_prompt" ? "Voice Prompt" : "Sample Answer"
+      const animateLevels = () => {
+        const active = activeRecordingRef.current
+        if (!active) return
+        const now = Date.now()
+        const effectiveElapsedMs =
+          now -
+          active.startedAtMs -
+          active.pausedTotalMs -
+          (active.isPaused && active.pauseStartedAtMs ? now - active.pauseStartedAtMs : 0)
+        const elapsedSeconds = Math.max(0, Math.floor(effectiveElapsedMs / 1000))
+
+        if (!active.isPaused) {
+          analyser.getByteFrequencyData(dataArray)
+          const barCount = 32
+          const binsPerBar = Math.max(1, Math.floor(dataArray.length / barCount))
+          const nextLevels = Array.from({ length: barCount }, (_, barIdx) => {
+            const start = barIdx * binsPerBar
+            const end = Math.min(dataArray.length, start + binsPerBar)
+            if (start >= end) return 0.05
+            let sum = 0
+            for (let i = start; i < end; i += 1) sum += dataArray[i]
+            const avg = sum / (end - start)
+            // Slight boost curve for clearer realtime movement.
+            const normalized = Math.min(1, Math.pow(avg / 180, 0.85))
+            return Math.max(0.04, normalized)
+          })
+          setRecordingModal((prev) => {
+            if (!prev || prev.draftIndex !== draftIndex || prev.field !== field) return prev
+            return { ...prev, levels: nextLevels, elapsedSeconds }
+          })
+        } else {
+          setRecordingModal((prev) => {
+            if (!prev || prev.draftIndex !== draftIndex || prev.field !== field) return prev
+            return { ...prev, elapsedSeconds }
+          })
+        }
+
+        if (activeRecordingRef.current) {
+          activeRecordingRef.current.rafId = requestAnimationFrame(animateLevels)
+        }
+      }
+
+      recorder.ondataavailable = (event) => {
+        if (event.data.size > 0) chunks.push(event.data)
+      }
+
+      recorder.onstop = async () => {
+        const active = activeRecordingRef.current
+        if (!active) return
+        const shouldUpload = active.shouldUpload
+        active.stream.getTracks().forEach((track) => track.stop())
+        if (active.rafId) cancelAnimationFrame(active.rafId)
+        await active.audioContext.close().catch(() => undefined)
+        activeRecordingRef.current = null
+        setRecordingModal(null)
+
+        if (shouldUpload) {
+          const blob = new Blob(chunks, { type: "audio/webm" })
+          const fileName =
+            field === "voice_prompt"
+              ? `voice-prompt-${Date.now()}.webm`
+              : `sample-answer-${Date.now()}.webm`
+          const recordedFile = new File([blob], fileName, { type: "audio/webm" })
+          await uploadAudioForDraft(recordedFile, field, draftIndex)
+        }
+
+        updateDraft(draftIndex, (draft) =>
+          field === "voice_prompt"
+            ? { ...draft, recordingVoicePrompt: false }
+            : { ...draft, recordingSamplePrompt: false },
+        )
+      }
+
+      setRecordingModal({
+        draftIndex,
+        field,
+        levels: Array.from({ length: 32 }, () => 0.05),
+        label,
+        elapsedSeconds: 0,
+        isPaused: false,
+      })
+      recorder.start()
+      activeRecordingRef.current = {
+        recorder,
+        stream,
+        chunks,
+        audioContext,
+        analyser,
+        rafId: null,
+        draftIndex,
+        field,
+        shouldUpload: true,
+        isPaused: false,
+        startedAtMs: Date.now(),
+        pausedTotalMs: 0,
+        pauseStartedAtMs: null,
+      }
+      animateLevels()
+      updateDraft(draftIndex, (draft) =>
+        field === "voice_prompt"
+          ? { ...draft, recordingVoicePrompt: true }
+          : { ...draft, recordingSamplePrompt: true },
+      )
+    } catch (error) {
+      console.error("Microphone access failed:", error)
+      toast.error("Unable to access microphone")
+    }
+  }
+
+  useEffect(() => {
+    return () => {
+      const active = activeRecordingRef.current
+      if (!active) return
+      active.shouldUpload = false
+      if (active.recorder.state !== "inactive") active.recorder.stop()
+      active.stream.getTracks().forEach((track) => track.stop())
+      if (active.rafId) cancelAnimationFrame(active.rafId)
+      active.audioContext.close().catch(() => undefined)
+    }
+  }, [])
 
   const handleCreateSpeakingPractice = async () => {
     if (!canCreate) return
-    const parsedOwnerId = Number(ownerId)
-    if (!Number.isFinite(parsedOwnerId) || parsedOwnerId <= 0) return
+    const parsedSubCourseId = Number(subCourseId)
+    if (!Number.isFinite(parsedSubCourseId) || parsedSubCourseId <= 0) {
+      toast.error("Please enter a valid Course ID")
+      return
+    }
+    const draftsToCreate = questionDrafts.filter((draft) => draft.questionText.trim().length > 0)
+    if (draftsToCreate.length === 0) {
+      toast.error("Add at least one AUDIO question")
+      return
+    }
 
     setSaving(true)
     try {
+      // 1) Create speaking practice set.
       const setRes = await createQuestionSet({
         title: setTitle.trim(),
         description: setDescription.trim(),
         set_type: "PRACTICE",
-        owner_type: ownerType,
-        owner_id: parsedOwnerId,
+        owner_type: "SUB_COURSE",
+        owner_id: parsedSubCourseId,
         status: setStatus,
       })
 
       const setId = setRes.data?.data?.id
       if (!setId) throw new Error("Question set creation failed: missing set ID")
 
-      const questionRes = await createQuestion({
-        question_text: questionText.trim(),
-        question_type: "AUDIO",
-        status: "PUBLISHED",
-        difficulty_level: difficulty,
-        points,
-        voice_prompt: voicePrompt.trim(),
-        sample_answer_voice_prompt: sampleAnswerVoicePrompt.trim(),
-        audio_correct_answer_text: audioCorrectAnswerText.trim(),
-      })
+      // 2) Create all AUDIO questions then attach in sequence.
+      for (const [idx, draft] of draftsToCreate.entries()) {
+        const questionRes = await createQuestion({
+          question_text: draft.questionText.trim(),
+          question_type: "AUDIO",
+          status: setStatus,
+          difficulty_level: draft.difficulty || undefined,
+          points: Number.isFinite(draft.points) && draft.points > 0 ? draft.points : 1,
+          voice_prompt: draft.voicePrompt.trim() || undefined,
+          sample_answer_voice_prompt: draft.sampleAnswerVoicePrompt.trim() || undefined,
+          audio_correct_answer_text: draft.audioCorrectAnswerText.trim() || undefined,
+          image_url: draft.imageUrl.trim() || undefined,
+          explanation: draft.explanation.trim() || undefined,
+          tips: draft.tips.trim() || undefined,
+        })
 
-      const questionId = questionRes.data?.data?.id
-      if (!questionId) throw new Error("Question creation failed: missing question ID")
+        const questionId = questionRes.data?.data?.id
+        if (!questionId) throw new Error("Question creation failed: missing question ID")
 
-      await addQuestionToSet(setId, {
-        question_id: questionId,
-        display_order: 1,
-      })
+        // 3) Attach each question to created set with display order.
+        await addQuestionToSet(setId, {
+          question_id: questionId,
+          display_order: idx + 1,
+        })
+      }
 
       setOpenCreate(false)
+      setCurrentStep(1)
       resetCreateForm()
+      toast.success(`Speaking practice created with ${draftsToCreate.length} AUDIO question(s)`)
       await fetchAudioQuestions()
     } catch (error) {
       console.error("Failed to create speaking practice:", error)
+      toast.error("Failed to create speaking practice")
     } finally {
       setSaving(false)
     }
   }
 
+  const handleOpenQuestionDetail = async (questionId: number) => {
+    setDetailOpen(true)
+    setDetailLoading(true)
+    setSelectedQuestionDetail(null)
+    setDetailVoiceUrl("")
+    setDetailSampleVoiceUrl("")
+    setDetailImageUrl("")
+    try {
+      const res = await getQuestionById(questionId)
+      const detail = res.data?.data ?? null
+      setSelectedQuestionDetail(detail)
+      if (detail) {
+        setDetailForm({
+          question_text: detail.question_text ?? "",
+          question_type: "AUDIO",
+          difficulty_level:
+            (detail.difficulty_level as "EASY" | "MEDIUM" | "HARD") || "EASY",
+          points: Number(detail.points) > 0 ? Number(detail.points) : 1,
+          explanation: detail.explanation ?? "",
+          tips: detail.tips ?? "",
+          voice_prompt: detail.voice_prompt ?? "",
+          sample_answer_voice_prompt: detail.sample_answer_voice_prompt ?? "",
+          image_url: detail.image_url ?? "",
+          status:
+            (detail.status as "DRAFT" | "PUBLISHED" | "INACTIVE") || "DRAFT",
+          audio_correct_answer_text: detail.audio_correct_answer_text ?? "",
+        })
+        setDetailEditing(false)
+        const [voice, sample, image] = await Promise.all([
+          resolvePreviewUrl(detail.voice_prompt ?? ""),
+          resolvePreviewUrl(detail.sample_answer_voice_prompt ?? ""),
+          resolvePreviewUrl(detail.image_url ?? ""),
+        ])
+        setDetailVoiceUrl(voice)
+        setDetailSampleVoiceUrl(sample)
+        setDetailImageUrl(image)
+      }
+    } catch (error) {
+      console.error("Failed to fetch question detail:", error)
+      toast.error("Failed to load question detail")
+      setDetailOpen(false)
+    } finally {
+      setDetailLoading(false)
+    }
+  }
+
+  const refreshSelectedQuestionDetail = async (questionId: number) => {
+    const res = await getQuestionById(questionId)
+    const detail = res.data?.data ?? null
+    setSelectedQuestionDetail(detail)
+    if (detail) {
+      const [voice, sample, image] = await Promise.all([
+        resolvePreviewUrl(detail.voice_prompt ?? ""),
+        resolvePreviewUrl(detail.sample_answer_voice_prompt ?? ""),
+        resolvePreviewUrl(detail.image_url ?? ""),
+      ])
+      setDetailVoiceUrl(voice)
+      setDetailSampleVoiceUrl(sample)
+      setDetailImageUrl(image)
+      setDetailForm({
+        question_text: detail.question_text ?? "",
+        question_type: "AUDIO",
+        difficulty_level:
+          (detail.difficulty_level as "EASY" | "MEDIUM" | "HARD") || "EASY",
+        points: Number(detail.points) > 0 ? Number(detail.points) : 1,
+        explanation: detail.explanation ?? "",
+        tips: detail.tips ?? "",
+        voice_prompt: detail.voice_prompt ?? "",
+        sample_answer_voice_prompt: detail.sample_answer_voice_prompt ?? "",
+        image_url: detail.image_url ?? "",
+        status:
+          (detail.status as "DRAFT" | "PUBLISHED" | "INACTIVE") || "DRAFT",
+        audio_correct_answer_text: detail.audio_correct_answer_text ?? "",
+      })
+    }
+  }
+
+  const handleUpdateQuestionDetail = async () => {
+    if (!selectedQuestionDetail) return
+    setDetailSaving(true)
+    try {
+      await updateQuestion(selectedQuestionDetail.id, {
+        question_text: detailForm.question_text.trim(),
+        question_type: "AUDIO",
+        difficulty_level: detailForm.difficulty_level,
+        points: Number.isFinite(detailForm.points) && detailForm.points > 0 ? detailForm.points : 1,
+        explanation: detailForm.explanation.trim() || undefined,
+        tips: detailForm.tips.trim() || undefined,
+        voice_prompt: detailForm.voice_prompt.trim() || undefined,
+        sample_answer_voice_prompt: detailForm.sample_answer_voice_prompt.trim() || undefined,
+        image_url: detailForm.image_url.trim() || undefined,
+        status: detailForm.status,
+        audio_correct_answer_text: detailForm.audio_correct_answer_text.trim() || undefined,
+      })
+      await refreshSelectedQuestionDetail(selectedQuestionDetail.id)
+      await fetchAudioQuestions()
+      setDetailEditing(false)
+      toast.success("AUDIO question updated")
+    } catch (error) {
+      console.error("Failed to update AUDIO question:", error)
+      toast.error("Failed to update AUDIO question")
+    } finally {
+      setDetailSaving(false)
+    }
+  }
+
+  const handleDeleteQuestionDetail = async () => {
+    const targetId = deleteTarget?.id ?? selectedQuestionDetail?.id
+    if (!targetId) return
+    setDetailDeleting(true)
+    try {
+      await deleteQuestion(targetId)
+      setConfirmDeleteOpen(false)
+      setDeleteTarget(null)
+      setDetailOpen(false)
+      setSelectedQuestionDetail(null)
+      await fetchAudioQuestions()
+      toast.success("AUDIO question deleted")
+    } catch (error) {
+      console.error("Failed to delete AUDIO question:", error)
+      toast.error("Failed to delete AUDIO question")
+    } finally {
+      setDetailDeleting(false)
+    }
+  }
+
   return (
     <div className="space-y-8">
       <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
@@ -170,157 +881,967 @@ export function SpeakingPage() {
             Create and manage speaking practice sessions for your learners.
           </p>
         </div>
-        <Button className="w-full bg-brand-500 hover:bg-brand-600 sm:w-auto" onClick={() => setOpenCreate(true)}>
+        <Button
+          className="w-full bg-brand-500 hover:bg-brand-600 sm:w-auto"
+          onClick={() => {
+            setOpenCreate(true)
+            setCurrentStep(1)
+          }}
+        >
           <Plus className="h-4 w-4" />
           Add New Speaking Practice
         </Button>
       </div>
 
-      <Card className="shadow-soft">
-        <CardHeader className="border-b border-grayScale-200 pb-4">
-          <CardTitle className="text-base font-semibold text-grayScale-600">
-            AUDIO Questions
-          </CardTitle>
-        </CardHeader>
-        <CardContent className="pt-5">
-          {loading ? (
-            <div className="py-14 text-center text-sm text-grayScale-500">Loading audio questions...</div>
-          ) : audioQuestions.length === 0 ? (
-            <div className="flex flex-col items-center justify-center py-14 text-center">
-              <div className="mb-6 grid h-16 w-16 place-items-center rounded-full bg-gradient-to-br from-brand-100 to-brand-200">
-                <Mic className="h-8 w-8 text-brand-500" />
+      {!openCreate && (
+        <Card className="shadow-soft">
+          <CardHeader className="border-b border-grayScale-200 pb-4">
+            <CardTitle className="text-base font-semibold text-grayScale-600">
+              AUDIO Questions
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="pt-5">
+            {loading ? (
+              <div className="flex flex-col items-center gap-2 py-14 text-center text-sm text-grayScale-500">
+                <SpinnerIcon className="h-5 w-5" />
+                Loading audio questions...
               </div>
-              <h3 className="text-base font-semibold text-grayScale-600">No audio questions yet</h3>
-              <p className="mt-2 max-w-md text-sm leading-relaxed text-grayScale-400">
-                Create a speaking practice to automatically create and attach an AUDIO question.
+            ) : audioQuestions.length === 0 ? (
+              <div className="flex flex-col items-center justify-center py-14 text-center">
+                <div className="mb-6 grid h-16 w-16 place-items-center rounded-full bg-gradient-to-br from-brand-100 to-brand-200">
+                  <Mic className="h-8 w-8 text-brand-500" />
+                </div>
+                <h3 className="text-base font-semibold text-grayScale-600">No audio questions yet</h3>
+                <p className="mt-2 max-w-md text-sm leading-relaxed text-grayScale-400">
+                  Create a speaking practice to automatically create and attach an AUDIO question.
+                </p>
+              </div>
+            ) : (
+              <div className="space-y-3">
+                {audioQuestions.map((question, idx) => (
+                  <div
+                    key={question.id}
+                    className={`rounded-lg border px-4 py-3 ${
+                      idx % 2 === 0 ? "border-grayScale-200 bg-white" : "border-grayScale-100 bg-grayScale-50"
+                    } cursor-pointer transition-colors hover:border-brand-300 hover:bg-brand-50/30`}
+                    onClick={() => handleOpenQuestionDetail(question.id)}
+                  >
+                    <div className="flex items-start justify-between gap-3">
+                      <p className="text-sm font-medium text-grayScale-700">{question.question_text}</p>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-8 w-8 shrink-0 text-red-500 hover:bg-red-50 hover:text-red-600"
+                        onClick={(event) => {
+                          event.stopPropagation()
+                          setDeleteTarget({ id: question.id, text: question.question_text })
+                          setConfirmDeleteOpen(true)
+                        }}
+                      >
+                        <Trash2 className="h-4 w-4" />
+                      </Button>
+                    </div>
+                    <div className="mt-2 flex flex-wrap items-center gap-2 text-xs">
+                      <span className="rounded-md bg-purple-100 px-2 py-1 text-purple-700">AUDIO</span>
+                      <span className="rounded-md bg-grayScale-100 px-2 py-1 text-grayScale-600">
+                        Difficulty: {question.difficulty_level || "—"}
+                      </span>
+                      <span className="rounded-md bg-grayScale-100 px-2 py-1 text-grayScale-600">
+                        Points: {question.points ?? 0}
+                      </span>
+                      <span className="rounded-md bg-grayScale-100 px-2 py-1 text-grayScale-600">
+                        Status: {question.status || "—"}
+                      </span>
+                    </div>
+                    {question.voice_prompt ? (
+                      <div className="mt-3 space-y-2">
+                        <p className="text-xs font-medium text-grayScale-500">Voice prompt preview</p>
+                        {audioPreviewByQuestionId[question.id] ? (
+                          <audio controls src={audioPreviewByQuestionId[question.id]} className="h-10 w-full max-w-sm" />
+                        ) : (
+                          <p className="text-xs text-grayScale-400">Unable to resolve audio URL.</p>
+                        )}
+                      </div>
+                    ) : null}
+                    {question.audio_correct_answer_text ? (
+                      <p className="mt-2 text-xs text-grayScale-500">
+                        <span className="font-medium text-grayScale-600">Correct answer text:</span>{" "}
+                        {question.audio_correct_answer_text}
+                      </p>
+                    ) : null}
+                  </div>
+                ))}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      )}
+
+      {detailOpen && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black/45 p-4 backdrop-blur-sm"
+          onClick={() => setDetailOpen(false)}
+        >
+          <div className="w-full max-w-2xl rounded-2xl bg-white shadow-2xl" onClick={(e) => e.stopPropagation()}>
+            <div className="flex items-center justify-between border-b border-grayScale-100 px-5 py-4">
+              <h3 className="text-base font-semibold text-grayScale-700">AUDIO Question Detail</h3>
+              <div className="flex items-center gap-2">
+                {!detailLoading && selectedQuestionDetail && !detailEditing ? (
+                  <Button variant="outline" size="sm" onClick={() => setDetailEditing(true)}>
+                    Edit
+                  </Button>
+                ) : null}
+                {!detailLoading && selectedQuestionDetail ? (
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="border-red-200 text-red-600 hover:bg-red-50 hover:text-red-700"
+                    onClick={() => {
+                      setDeleteTarget({
+                        id: selectedQuestionDetail.id,
+                        text: selectedQuestionDetail.question_text,
+                      })
+                      setConfirmDeleteOpen(true)
+                    }}
+                  >
+                    Delete
+                  </Button>
+                ) : null}
+                <Button variant="outline" size="sm" onClick={() => setDetailOpen(false)}>
+                  Close
+                </Button>
+              </div>
+            </div>
+            <div className="max-h-[72vh] space-y-4 overflow-y-auto px-5 py-4">
+              {detailLoading ? (
+                <div className="flex items-center justify-center py-10">
+                  <SpinnerIcon className="h-5 w-5" />
+                </div>
+              ) : selectedQuestionDetail && detailEditing ? (
+                <>
+                  <div className="space-y-1.5">
+                    <label className="text-xs font-medium text-grayScale-500">Question Text</label>
+                    <Textarea
+                      value={detailForm.question_text}
+                      onChange={(e) =>
+                        setDetailForm((prev) => ({ ...prev, question_text: e.target.value }))
+                      }
+                      rows={2}
+                    />
+                  </div>
+                  <div className="grid grid-cols-2 gap-3">
+                    <div className="space-y-1.5">
+                      <label className="text-xs font-medium text-grayScale-500">Difficulty</label>
+                      <select
+                        value={detailForm.difficulty_level}
+                        onChange={(e) =>
+                          setDetailForm((prev) => ({
+                            ...prev,
+                            difficulty_level: e.target.value as "EASY" | "MEDIUM" | "HARD",
+                          }))
+                        }
+                        className="h-10 w-full rounded-md border border-grayScale-200 px-3 text-sm"
+                      >
+                        <option value="EASY">EASY</option>
+                        <option value="MEDIUM">MEDIUM</option>
+                        <option value="HARD">HARD</option>
+                      </select>
+                    </div>
+                    <div className="space-y-1.5">
+                      <label className="text-xs font-medium text-grayScale-500">Points</label>
+                      <Input
+                        type="number"
+                        min={1}
+                        value={detailForm.points}
+                        onChange={(e) =>
+                          setDetailForm((prev) => ({ ...prev, points: Number(e.target.value) || 1 }))
+                        }
+                      />
+                    </div>
+                  </div>
+                  <div className="space-y-1.5">
+                    <label className="text-xs font-medium text-grayScale-500">Voice Prompt URL</label>
+                    <Input
+                      value={detailForm.voice_prompt}
+                      onChange={(e) =>
+                        setDetailForm((prev) => ({ ...prev, voice_prompt: e.target.value }))
+                      }
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <label className="text-xs font-medium text-grayScale-500">Sample Answer Voice Prompt URL</label>
+                    <Input
+                      value={detailForm.sample_answer_voice_prompt}
+                      onChange={(e) =>
+                        setDetailForm((prev) => ({
+                          ...prev,
+                          sample_answer_voice_prompt: e.target.value,
+                        }))
+                      }
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <label className="text-xs font-medium text-grayScale-500">Image URL</label>
+                    <Input
+                      value={detailForm.image_url}
+                      onChange={(e) =>
+                        setDetailForm((prev) => ({ ...prev, image_url: e.target.value }))
+                      }
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <label className="text-xs font-medium text-grayScale-500">Audio Correct Answer Text</label>
+                    <Textarea
+                      value={detailForm.audio_correct_answer_text}
+                      onChange={(e) =>
+                        setDetailForm((prev) => ({
+                          ...prev,
+                          audio_correct_answer_text: e.target.value,
+                        }))
+                      }
+                      rows={2}
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <label className="text-xs font-medium text-grayScale-500">Explanation</label>
+                    <Textarea
+                      value={detailForm.explanation}
+                      onChange={(e) =>
+                        setDetailForm((prev) => ({ ...prev, explanation: e.target.value }))
+                      }
+                      rows={2}
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <label className="text-xs font-medium text-grayScale-500">Tips</label>
+                    <Textarea
+                      value={detailForm.tips}
+                      onChange={(e) =>
+                        setDetailForm((prev) => ({ ...prev, tips: e.target.value }))
+                      }
+                      rows={2}
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <label className="text-xs font-medium text-grayScale-500">Status</label>
+                    <select
+                      value={detailForm.status}
+                      onChange={(e) =>
+                        setDetailForm((prev) => ({
+                          ...prev,
+                          status: e.target.value as "DRAFT" | "PUBLISHED" | "INACTIVE",
+                        }))
+                      }
+                      className="h-10 w-full rounded-md border border-grayScale-200 px-3 text-sm"
+                    >
+                      <option value="DRAFT">DRAFT</option>
+                      <option value="PUBLISHED">PUBLISHED</option>
+                      <option value="INACTIVE">INACTIVE</option>
+                    </select>
+                  </div>
+                  <div className="flex justify-end gap-2 border-t border-grayScale-100 pt-3">
+                    <Button
+                      variant="outline"
+                      onClick={() => setDetailEditing(false)}
+                      disabled={detailSaving}
+                    >
+                      Cancel
+                    </Button>
+                    <Button
+                      className="bg-brand-500 hover:bg-brand-600"
+                      onClick={handleUpdateQuestionDetail}
+                      disabled={detailSaving || !detailForm.question_text.trim()}
+                    >
+                      {detailSaving ? "Saving..." : "Save Changes"}
+                    </Button>
+                  </div>
+                </>
+              ) : selectedQuestionDetail ? (
+                <>
+                  <div>
+                    <p className="text-xs font-medium text-grayScale-500">Question Text</p>
+                    <p className="mt-1 text-sm text-grayScale-700">{selectedQuestionDetail.question_text}</p>
+                  </div>
+                  <div className="grid grid-cols-2 gap-3 text-sm">
+                    <div>
+                      <p className="text-xs font-medium text-grayScale-500">Status</p>
+                      <p className="mt-1 text-grayScale-700">{selectedQuestionDetail.status || "—"}</p>
+                    </div>
+                    <div>
+                      <p className="text-xs font-medium text-grayScale-500">Points</p>
+                      <p className="mt-1 text-grayScale-700">{selectedQuestionDetail.points ?? "—"}</p>
+                    </div>
+                    <div>
+                      <p className="text-xs font-medium text-grayScale-500">Difficulty</p>
+                      <p className="mt-1 text-grayScale-700">{selectedQuestionDetail.difficulty_level || "—"}</p>
+                    </div>
+                    <div>
+                      <p className="text-xs font-medium text-grayScale-500">Type</p>
+                      <p className="mt-1 text-grayScale-700">{selectedQuestionDetail.question_type || "—"}</p>
+                    </div>
+                  </div>
+                  {selectedQuestionDetail.audio_correct_answer_text ? (
+                    <div>
+                      <p className="text-xs font-medium text-grayScale-500">Audio Correct Answer Text</p>
+                      <p className="mt-1 text-sm text-grayScale-700">
+                        {selectedQuestionDetail.audio_correct_answer_text}
+                      </p>
+                    </div>
+                  ) : null}
+                  {selectedQuestionDetail.explanation ? (
+                    <div>
+                      <p className="text-xs font-medium text-grayScale-500">Explanation</p>
+                      <p className="mt-1 text-sm text-grayScale-700">{selectedQuestionDetail.explanation}</p>
+                    </div>
+                  ) : null}
+                  {selectedQuestionDetail.tips ? (
+                    <div>
+                      <p className="text-xs font-medium text-grayScale-500">Tips</p>
+                      <p className="mt-1 text-sm text-grayScale-700">{selectedQuestionDetail.tips}</p>
+                    </div>
+                  ) : null}
+                  {detailVoiceUrl ? (
+                    <div>
+                      <p className="text-xs font-medium text-grayScale-500">Voice Prompt</p>
+                      <audio controls src={detailVoiceUrl} className="mt-1 h-10 w-full" />
+                    </div>
+                  ) : null}
+                  {detailSampleVoiceUrl ? (
+                    <div>
+                      <p className="text-xs font-medium text-grayScale-500">Sample Answer Voice Prompt</p>
+                      <audio controls src={detailSampleVoiceUrl} className="mt-1 h-10 w-full" />
+                    </div>
+                  ) : null}
+                  {detailImageUrl ? (
+                    <div>
+                      <p className="text-xs font-medium text-grayScale-500">Image</p>
+                      <img
+                        src={detailImageUrl}
+                        alt="Question reference"
+                        className="mt-1 h-32 w-32 rounded-md border border-grayScale-200 object-cover"
+                      />
+                    </div>
+                  ) : null}
+                </>
+              ) : (
+                <p className="py-6 text-sm text-grayScale-500">Question details unavailable.</p>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {confirmDeleteOpen && (deleteTarget || selectedQuestionDetail) && (
+        <div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/45 p-4 backdrop-blur-sm">
+          <div className="w-full max-w-sm rounded-2xl bg-white shadow-2xl">
+            <div className="border-b border-grayScale-100 px-5 py-4">
+              <h3 className="text-base font-semibold text-grayScale-700">Delete AUDIO Question</h3>
+            </div>
+            <div className="space-y-2 px-5 py-4">
+              <p className="text-sm text-grayScale-600">
+                Are you sure you want to delete this question?
+              </p>
+              <p className="line-clamp-2 text-xs text-grayScale-400">
+                {deleteTarget?.text ?? selectedQuestionDetail?.question_text}
               </p>
             </div>
-          ) : (
-            <div className="space-y-3">
-              {audioQuestions.map((question, idx) => (
-                <div
-                  key={question.id}
-                  className={`rounded-lg border px-4 py-3 ${
-                    idx % 2 === 0 ? "border-grayScale-200 bg-white" : "border-grayScale-100 bg-grayScale-50"
-                  }`}
-                >
-                  <p className="text-sm font-medium text-grayScale-700">{question.question_text}</p>
-                  <div className="mt-2 flex flex-wrap items-center gap-2 text-xs">
-                    <span className="rounded-md bg-purple-100 px-2 py-1 text-purple-700">AUDIO</span>
-                    <span className="rounded-md bg-grayScale-100 px-2 py-1 text-grayScale-600">
-                      Difficulty: {question.difficulty_level || "—"}
-                    </span>
-                    <span className="rounded-md bg-grayScale-100 px-2 py-1 text-grayScale-600">
-                      Points: {question.points ?? 0}
-                    </span>
-                    <span className="rounded-md bg-grayScale-100 px-2 py-1 text-grayScale-600">
-                      Status: {question.status || "—"}
-                    </span>
-                  </div>
-                </div>
-              ))}
-            </div>
-          )}
-        </CardContent>
-      </Card>
-
-      {openCreate && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm">
-          <div className="mx-4 max-h-[90vh] w-full max-w-2xl overflow-y-auto rounded-xl bg-white shadow-2xl">
-            <div className="flex items-center justify-between border-b border-grayScale-100 px-6 py-4">
-              <h2 className="text-lg font-semibold text-grayScale-900">Create Speaking Practice</h2>
-              <button
-                onClick={() => setOpenCreate(false)}
-                className="grid h-8 w-8 place-items-center rounded-lg text-grayScale-400 transition-colors hover:bg-grayScale-100 hover:text-grayScale-600"
+            <div className="flex justify-end gap-2 border-t border-grayScale-100 px-5 py-4">
+              <Button
+                variant="outline"
+                onClick={() => {
+                  setConfirmDeleteOpen(false)
+                  setDeleteTarget(null)
+                }}
+                disabled={detailDeleting}
               >
-                <X className="h-5 w-5" />
-              </button>
-            </div>
-            <div className="space-y-5 px-6 py-6">
-              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-                <div className="space-y-1.5 sm:col-span-2">
-                  <label className="text-sm font-medium text-grayScale-600">Practice Title</label>
-                  <Input value={setTitle} onChange={(e) => setSetTitle(e.target.value)} placeholder="Speaking practice title" />
-                </div>
-                <div className="space-y-1.5 sm:col-span-2">
-                  <label className="text-sm font-medium text-grayScale-600">Practice Description (Optional)</label>
-                  <Textarea value={setDescription} onChange={(e) => setSetDescription(e.target.value)} rows={2} placeholder="Brief description" />
-                </div>
-                <div className="space-y-1.5">
-                  <label className="text-sm font-medium text-grayScale-600">Owner Type</label>
-                  <Select value={ownerType} onChange={(e) => setOwnerType(e.target.value as "SUB_COURSE" | "COURSE")}>
-                    <option value="SUB_COURSE">SUB_COURSE</option>
-                    <option value="COURSE">COURSE</option>
-                  </Select>
-                </div>
-                <div className="space-y-1.5">
-                  <label className="text-sm font-medium text-grayScale-600">Owner ID</label>
-                  <Input
-                    type="number"
-                    min={1}
-                    value={ownerId}
-                    onChange={(e) => setOwnerId(e.target.value)}
-                    placeholder="e.g. 12"
-                  />
-                </div>
-                <div className="space-y-1.5">
-                  <label className="text-sm font-medium text-grayScale-600">Set Status</label>
-                  <Select value={setStatus} onChange={(e) => setSetStatus(e.target.value as "DRAFT" | "PUBLISHED")}>
-                    <option value="PUBLISHED">PUBLISHED</option>
-                    <option value="DRAFT">DRAFT</option>
-                  </Select>
-                </div>
-              </div>
-
-              <div className="rounded-lg border border-grayScale-200 bg-grayScale-50/50 p-4">
-                <p className="mb-3 text-sm font-semibold text-grayScale-700">AUDIO Question</p>
-                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-                  <div className="space-y-1.5 sm:col-span-2">
-                    <label className="text-sm font-medium text-grayScale-600">Question Text</label>
-                    <Textarea value={questionText} onChange={(e) => setQuestionText(e.target.value)} rows={2} />
-                  </div>
-                  <div className="space-y-1.5">
-                    <label className="text-sm font-medium text-grayScale-600">Difficulty</label>
-                    <Select value={difficulty} onChange={(e) => setDifficulty(e.target.value)}>
-                      <option value="EASY">EASY</option>
-                      <option value="MEDIUM">MEDIUM</option>
-                      <option value="HARD">HARD</option>
-                    </Select>
-                  </div>
-                  <div className="space-y-1.5">
-                    <label className="text-sm font-medium text-grayScale-600">Points</label>
-                    <Input type="number" min={1} value={points} onChange={(e) => setPoints(Number(e.target.value) || 1)} />
-                  </div>
-                  <div className="space-y-1.5 sm:col-span-2">
-                    <label className="text-sm font-medium text-grayScale-600">Voice Prompt</label>
-                    <Textarea value={voicePrompt} onChange={(e) => setVoicePrompt(e.target.value)} rows={2} />
-                  </div>
-                  <div className="space-y-1.5 sm:col-span-2">
-                    <label className="text-sm font-medium text-grayScale-600">Sample Answer Voice Prompt</label>
-                    <Textarea value={sampleAnswerVoicePrompt} onChange={(e) => setSampleAnswerVoicePrompt(e.target.value)} rows={2} />
-                  </div>
-                  <div className="space-y-1.5 sm:col-span-2">
-                    <label className="text-sm font-medium text-grayScale-600">Audio Correct Answer Text</label>
-                    <Textarea value={audioCorrectAnswerText} onChange={(e) => setAudioCorrectAnswerText(e.target.value)} rows={2} />
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div className="flex flex-col-reverse gap-3 border-t border-grayScale-100 px-6 py-4 sm:flex-row sm:justify-end">
-              <Button variant="outline" onClick={() => setOpenCreate(false)} disabled={saving}>
                 Cancel
               </Button>
               <Button
-                className="bg-brand-500 hover:bg-brand-600"
-                disabled={!canCreate || saving}
-                onClick={handleCreateSpeakingPractice}
+                className="bg-red-500 hover:bg-red-600"
+                onClick={handleDeleteQuestionDetail}
+                disabled={detailDeleting}
               >
-                {saving ? "Creating..." : "Create Practice + Audio Question"}
+                {detailDeleting ? "Deleting..." : "Delete"}
               </Button>
             </div>
           </div>
         </div>
       )}
+
+      {openCreate && (
+        <div className="space-y-6">
+          <Card className="border-grayScale-200 bg-white/80 p-5 shadow-sm sm:p-6">
+            <div className="mb-4">
+              <Button
+                type="button"
+                variant="outline"
+                className="h-9 border-grayScale-200 text-grayScale-600"
+                onClick={() => setOpenCreate(false)}
+                disabled={saving}
+              >
+                <ArrowLeft className="h-4 w-4" />
+                Back to AUDIO Questions
+              </Button>
+            </div>
+            <Stepper steps={SPEAKING_STEPS} currentStep={currentStep} />
+          </Card>
+
+          {currentStep === 1 && (
+            <Card className="mx-auto max-w-3xl border-grayScale-200 p-6 shadow-sm sm:p-8">
+              <h2 className="mb-6 text-lg font-semibold text-grayScale-700">Step 1: Practice Context</h2>
+              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                <div className="space-y-1.5 sm:col-span-2">
+                  <label className="text-sm font-medium text-grayScale-600">Practice Title</label>
+                  <Input
+                    value={setTitle}
+                    onChange={(e) => setSetTitle(e.target.value)}
+                    placeholder="Speaking practice title"
+                  />
+                </div>
+                <div className="space-y-1.5 sm:col-span-2">
+                  <label className="text-sm font-medium text-grayScale-600">Practice Description (Optional)</label>
+                  <Textarea
+                    value={setDescription}
+                    onChange={(e) => setSetDescription(e.target.value)}
+                    rows={2}
+                    placeholder="Brief description"
+                  />
+                </div>
+                <div className="space-y-1.5">
+                  <label className="text-sm font-medium text-grayScale-600">Course</label>
+                  <DropdownMenu open={subCourseMenuOpen} onOpenChange={setSubCourseMenuOpen}>
+                    <DropdownMenuTrigger asChild>
+                      <Button
+                        type="button"
+                        variant="outline"
+                        className="h-11 w-full justify-between rounded-xl border-grayScale-200 bg-white px-3 text-sm font-normal text-grayScale-600 hover:bg-grayScale-50"
+                      >
+                        <span className="truncate">
+                          {selectedSubCourseOption
+                            ? `${selectedSubCourseOption.title} (#${selectedSubCourseOption.id})`
+                            : subCourseLoading
+                              ? "Loading courses..."
+                              : "Select course"}
+                        </span>
+                        <ChevronDown className="h-4 w-4 text-grayScale-400" />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="start" className="w-[420px] max-w-[90vw] p-2">
+                      <Input
+                        value={subCourseSearch}
+                        onChange={(e) => setSubCourseSearch(e.target.value)}
+                        placeholder="Search course, course, category..."
+                        className="mb-2 h-9"
+                      />
+                      <div className="max-h-64 overflow-auto">
+                        {filteredSubCourseOptions.length === 0 ? (
+                          <p className="px-2 py-2 text-sm text-grayScale-400">No courses found</p>
+                        ) : (
+                          <DropdownMenuRadioGroup
+                            value={subCourseId}
+                            onValueChange={(value) => {
+                              setSubCourseId(value)
+                              setSubCourseMenuOpen(false)
+                            }}
+                          >
+                            {filteredSubCourseOptions.map((option) => (
+                              <DropdownMenuRadioItem key={option.id} value={String(option.id)}>
+                                <div className="flex min-w-0 flex-col">
+                                  <span className="truncate">{option.title}</span>
+                                  <span className="text-xs text-grayScale-400">
+                                    {option.categoryName} / {option.courseTitle} / ID: {option.id}
+                                  </span>
+                                </div>
+                              </DropdownMenuRadioItem>
+                            ))}
+                          </DropdownMenuRadioGroup>
+                        )}
+                      </div>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </div>
+                <div className="space-y-1.5">
+                  <label className="text-sm font-medium text-grayScale-600">Set Status</label>
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button
+                        type="button"
+                        variant="outline"
+                        className="h-11 w-full justify-between rounded-xl border-grayScale-200 bg-white px-3 text-sm font-normal text-grayScale-600 hover:bg-grayScale-50"
+                      >
+                        <span>{setStatus}</span>
+                        <ChevronDown className="h-4 w-4 text-grayScale-400" />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="start" className="w-[220px]">
+                      <DropdownMenuRadioGroup
+                        value={setStatus}
+                        onValueChange={(value) => setSetStatus(value as "DRAFT" | "PUBLISHED")}
+                      >
+                        <DropdownMenuRadioItem value="PUBLISHED">PUBLISHED</DropdownMenuRadioItem>
+                        <DropdownMenuRadioItem value="DRAFT">DRAFT</DropdownMenuRadioItem>
+                      </DropdownMenuRadioGroup>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </div>
+              </div>
+              <div className="mt-8 flex flex-col-reverse gap-3 border-t border-grayScale-100 pt-6 sm:flex-row sm:justify-end">
+                <Button variant="outline" onClick={() => setOpenCreate(false)} disabled={saving}>
+                  Cancel
+                </Button>
+                <Button
+                  className="bg-brand-500 hover:bg-brand-600"
+                  onClick={() => setCurrentStep(2)}
+                  disabled={!canProceedToQuestions}
+                >
+                  Next: Questions
+                </Button>
+              </div>
+            </Card>
+          )}
+
+          {currentStep === 2 && (
+            <Card className="mx-auto max-w-4xl border-grayScale-200 p-6 shadow-sm sm:p-8">
+              <h2 className="mb-4 text-lg font-semibold text-grayScale-700">Step 2: AUDIO Questions</h2>
+              <div className="rounded-lg border border-grayScale-200 bg-grayScale-50/50 p-4">
+                <div className="mb-3 flex items-center justify-between">
+                  <p className="text-sm font-semibold text-grayScale-700">AUDIO Questions</p>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    onClick={() => setQuestionDrafts((prev) => [...prev, createEmptyDraft()])}
+                    disabled={saving}
+                  >
+                    <Plus className="h-4 w-4" />
+                    Add Question
+                  </Button>
+                </div>
+
+                <div className="space-y-4">
+                  {questionDrafts.map((draft, draftIndex) => (
+                    <div key={draftIndex} className="rounded-lg border border-grayScale-200 bg-white p-4">
+                      <div className="mb-3 flex items-center justify-between">
+                        <p className="text-sm font-semibold text-grayScale-700">Question {draftIndex + 1}</p>
+                        {questionDrafts.length > 1 ? (
+                          <Button
+                            type="button"
+                            variant="outline"
+                            size="sm"
+                            className="text-red-600 hover:text-red-700"
+                            onClick={() =>
+                              setQuestionDrafts((prev) => prev.filter((_, idx) => idx !== draftIndex))
+                            }
+                            disabled={saving}
+                          >
+                            Remove
+                          </Button>
+                        ) : null}
+                      </div>
+
+                      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                        <div className="space-y-1.5 sm:col-span-2">
+                          <label className="text-sm font-medium text-grayScale-600">Question Text</label>
+                          <Textarea
+                            value={draft.questionText}
+                            onChange={(e) =>
+                              updateDraft(draftIndex, (prev) => ({ ...prev, questionText: e.target.value }))
+                            }
+                            rows={2}
+                          />
+                        </div>
+                        <div className="space-y-1.5">
+                          <label className="text-sm font-medium text-grayScale-600">Difficulty</label>
+                          <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                              <Button
+                                type="button"
+                                variant="outline"
+                                className="h-11 w-full justify-between rounded-xl border-grayScale-200 bg-white px-3 text-sm font-normal text-grayScale-600 hover:bg-grayScale-50"
+                              >
+                                <span>{draft.difficulty}</span>
+                                <ChevronDown className="h-4 w-4 text-grayScale-400" />
+                              </Button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent align="start" className="w-[220px]">
+                              <DropdownMenuRadioGroup
+                                value={draft.difficulty}
+                                onValueChange={(value) =>
+                                  updateDraft(draftIndex, (prev) => ({
+                                    ...prev,
+                                    difficulty: value as "EASY" | "MEDIUM" | "HARD",
+                                  }))
+                                }
+                              >
+                                <DropdownMenuRadioItem value="EASY">EASY</DropdownMenuRadioItem>
+                                <DropdownMenuRadioItem value="MEDIUM">MEDIUM</DropdownMenuRadioItem>
+                                <DropdownMenuRadioItem value="HARD">HARD</DropdownMenuRadioItem>
+                              </DropdownMenuRadioGroup>
+                            </DropdownMenuContent>
+                          </DropdownMenu>
+                        </div>
+                        <div className="space-y-1.5">
+                          <label className="text-sm font-medium text-grayScale-600">Points</label>
+                          <Input
+                            type="number"
+                            min={1}
+                            value={draft.points}
+                            onChange={(e) =>
+                              updateDraft(draftIndex, (prev) => ({
+                                ...prev,
+                                points: Number(e.target.value) || 1,
+                              }))
+                            }
+                          />
+                        </div>
+                        <div className="space-y-1.5 sm:col-span-2">
+                          <label className="text-sm font-medium text-grayScale-600">Voice Prompt (optional)</label>
+                          <div className="flex flex-col gap-2">
+                            <div className="flex flex-wrap items-center gap-2">
+                              <label className="inline-flex cursor-pointer items-center gap-2 rounded-md border border-grayScale-200 px-3 py-2 text-sm text-grayScale-600 hover:bg-grayScale-50">
+                                {draft.uploadingVoicePrompt ? (
+                                  <SpinnerIcon className="h-4 w-4" />
+                                ) : (
+                                  <Upload className="h-4 w-4" />
+                                )}
+                                Upload Voice Prompt
+                                <input
+                                  type="file"
+                                  accept=".mp3,.wav,.ogg,.m4a,.aac,.webm,.flac,audio/*"
+                                  className="hidden"
+                                  onChange={(event) => handleAudioUpload(event, "voice_prompt", draftIndex)}
+                                  disabled={draft.uploadingVoicePrompt || saving}
+                                />
+                              </label>
+                              <Button
+                                type="button"
+                                variant="outline"
+                                className="h-9 px-3 text-xs"
+                                onClick={() => startRecording("voice_prompt", draftIndex)}
+                                disabled={draft.uploadingVoicePrompt || saving || Boolean(recordingModal)}
+                              >
+                                {draft.recordingVoicePrompt ? "Recording..." : "Record Voice Prompt"}
+                              </Button>
+                              <span className="text-xs text-grayScale-400">Max 50MB</span>
+                            </div>
+                            <Input
+                              value={draft.voicePrompt}
+                              onChange={(e) =>
+                                updateDraft(draftIndex, (prev) => ({ ...prev, voicePrompt: e.target.value }))
+                              }
+                              onBlur={() => handleResolveManualAudioPreview("voice_prompt", draftIndex)}
+                              placeholder="Audio object_key (or URL)"
+                            />
+                            {draft.voicePromptPreviewUrl ? (
+                              <audio controls src={draft.voicePromptPreviewUrl} className="h-10 w-full max-w-md" />
+                            ) : null}
+                          </div>
+                        </div>
+                        <div className="space-y-1.5 sm:col-span-2">
+                          <label className="text-sm font-medium text-grayScale-600">Sample Answer Voice (optional)</label>
+                          <div className="flex flex-col gap-2">
+                            <div className="flex flex-wrap items-center gap-2">
+                              <label className="inline-flex cursor-pointer items-center gap-2 rounded-md border border-grayScale-200 px-3 py-2 text-sm text-grayScale-600 hover:bg-grayScale-50">
+                                {draft.uploadingSamplePrompt ? (
+                                  <SpinnerIcon className="h-4 w-4" />
+                                ) : (
+                                  <Upload className="h-4 w-4" />
+                                )}
+                                Upload Sample Answer
+                                <input
+                                  type="file"
+                                  accept=".mp3,.wav,.ogg,.m4a,.aac,.webm,.flac,audio/*"
+                                  className="hidden"
+                                  onChange={(event) =>
+                                    handleAudioUpload(event, "sample_answer_voice_prompt", draftIndex)
+                                  }
+                                  disabled={draft.uploadingSamplePrompt || saving}
+                                />
+                              </label>
+                              <Button
+                                type="button"
+                                variant="outline"
+                                className="h-9 px-3 text-xs"
+                                onClick={() => startRecording("sample_answer_voice_prompt", draftIndex)}
+                                disabled={draft.uploadingSamplePrompt || saving || Boolean(recordingModal)}
+                              >
+                                {draft.recordingSamplePrompt ? "Recording..." : "Record Sample Answer"}
+                              </Button>
+                              <span className="text-xs text-grayScale-400">Max 50MB</span>
+                            </div>
+                            <Input
+                              value={draft.sampleAnswerVoicePrompt}
+                              onChange={(e) =>
+                                updateDraft(draftIndex, (prev) => ({
+                                  ...prev,
+                                  sampleAnswerVoicePrompt: e.target.value,
+                                }))
+                              }
+                              onBlur={() =>
+                                handleResolveManualAudioPreview("sample_answer_voice_prompt", draftIndex)
+                              }
+                              placeholder="Audio object_key (or URL)"
+                            />
+                            {draft.samplePromptPreviewUrl ? (
+                              <audio controls src={draft.samplePromptPreviewUrl} className="h-10 w-full max-w-md" />
+                            ) : null}
+                          </div>
+                        </div>
+                        <div className="space-y-1.5 sm:col-span-2">
+                          <label className="text-sm font-medium text-grayScale-600">Correct Answer Text (optional)</label>
+                          <Textarea
+                            value={draft.audioCorrectAnswerText}
+                            onChange={(e) =>
+                              updateDraft(draftIndex, (prev) => ({
+                                ...prev,
+                                audioCorrectAnswerText: e.target.value,
+                              }))
+                            }
+                            rows={2}
+                          />
+                        </div>
+                        <div className="space-y-1.5 sm:col-span-2">
+                          <label className="text-sm font-medium text-grayScale-600">Image URL (optional)</label>
+                          <div className="flex flex-col gap-2">
+                            <div className="flex flex-wrap items-center gap-2">
+                              <label className="inline-flex cursor-pointer items-center gap-2 rounded-md border border-grayScale-200 px-3 py-2 text-sm text-grayScale-600 hover:bg-grayScale-50">
+                                {draft.uploadingImage ? (
+                                  <SpinnerIcon className="h-4 w-4" />
+                                ) : (
+                                  <ImageIcon className="h-4 w-4" />
+                                )}
+                                Upload Image
+                                <input
+                                  type="file"
+                                  accept=".jpg,.jpeg,.png,.webp,.gif,image/*"
+                                  className="hidden"
+                                  onChange={(event) => handleImageUpload(event, draftIndex)}
+                                  disabled={draft.uploadingImage || saving}
+                                />
+                              </label>
+                              <span className="text-xs text-grayScale-400">Max 10MB</span>
+                            </div>
+                            <Input
+                              value={draft.imageUrl}
+                              onChange={(e) =>
+                                updateDraft(draftIndex, (prev) => ({ ...prev, imageUrl: e.target.value }))
+                              }
+                              onBlur={() => handleResolveManualImagePreview(draftIndex)}
+                              placeholder="Image URL (https://...)"
+                            />
+                            {draft.imagePreviewUrl ? (
+                              <img
+                                src={draft.imagePreviewUrl}
+                                alt="Uploaded preview"
+                                className="h-28 w-28 rounded-md border border-grayScale-200 object-cover"
+                              />
+                            ) : null}
+                          </div>
+                        </div>
+                        <div className="space-y-1.5 sm:col-span-2">
+                          <label className="text-sm font-medium text-grayScale-600">Tips (optional)</label>
+                          <Textarea
+                            value={draft.tips}
+                            onChange={(e) =>
+                              updateDraft(draftIndex, (prev) => ({ ...prev, tips: e.target.value }))
+                            }
+                            rows={2}
+                          />
+                        </div>
+                        <div className="space-y-1.5 sm:col-span-2">
+                          <label className="text-sm font-medium text-grayScale-600">Explanation (optional)</label>
+                          <Textarea
+                            value={draft.explanation}
+                            onChange={(e) =>
+                              updateDraft(draftIndex, (prev) => ({ ...prev, explanation: e.target.value }))
+                            }
+                            rows={2}
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+              <div className="mt-8 flex flex-col-reverse gap-3 border-t border-grayScale-100 pt-6 sm:flex-row sm:justify-end">
+                <Button variant="outline" onClick={() => setCurrentStep(1)} disabled={saving}>
+                  Back
+                </Button>
+                <Button
+                  className="bg-brand-500 hover:bg-brand-600"
+                  onClick={() => setCurrentStep(3)}
+                  disabled={!canProceedToReview}
+                >
+                  Next: Review
+                </Button>
+              </div>
+            </Card>
+          )}
+
+          {currentStep === 3 && (
+            <Card className="mx-auto max-w-4xl border-grayScale-200 p-6 shadow-sm sm:p-8">
+              <h2 className="mb-4 text-lg font-semibold text-grayScale-700">Step 3: Review & Publish</h2>
+              <div className="space-y-6">
+                <div className="rounded-lg border border-grayScale-200 bg-white p-4">
+                  <h3 className="mb-2 text-sm font-semibold text-grayScale-700">Practice</h3>
+                  <div className="grid grid-cols-1 gap-3 text-sm text-grayScale-600 sm:grid-cols-2">
+                    <p><span className="font-medium">Title:</span> {setTitle || "—"}</p>
+                    <p><span className="font-medium">Course ID:</span> {subCourseId || "—"}</p>
+                    <p className="sm:col-span-2"><span className="font-medium">Description:</span> {setDescription || "—"}</p>
+                    <p><span className="font-medium">Status:</span> {setStatus}</p>
+                  </div>
+                </div>
+
+                <div className="rounded-lg border border-grayScale-200 bg-white p-4">
+                  <h3 className="mb-3 text-sm font-semibold text-grayScale-700">
+                    Questions to Publish ({questionsWithText.length})
+                  </h3>
+                  <div className="space-y-3">
+                    {questionsWithText.map((draft, idx) => (
+                      <div key={idx} className="rounded-md border border-grayScale-200 bg-grayScale-50 p-3 text-sm">
+                        <p className="font-medium text-grayScale-700">
+                          {idx + 1}. {draft.questionText}
+                        </p>
+                        <div className="mt-2 grid grid-cols-1 gap-2 text-xs text-grayScale-600 sm:grid-cols-2">
+                          <p><span className="font-medium text-grayScale-700">Question Type:</span> AUDIO</p>
+                          <p><span className="font-medium text-grayScale-700">Difficulty:</span> {draft.difficulty}</p>
+                          <p><span className="font-medium text-grayScale-700">Points:</span> {draft.points}</p>
+                          <p><span className="font-medium text-grayScale-700">Status:</span> {setStatus}</p>
+                          <p className="sm:col-span-2">
+                            <span className="font-medium text-grayScale-700">Voice Prompt:</span>{" "}
+                            {draft.voicePrompt.trim() || "—"}
+                          </p>
+                          <p className="sm:col-span-2">
+                            <span className="font-medium text-grayScale-700">Sample Answer Voice Prompt:</span>{" "}
+                            {draft.sampleAnswerVoicePrompt.trim() || "—"}
+                          </p>
+                          <p className="sm:col-span-2">
+                            <span className="font-medium text-grayScale-700">Image URL:</span>{" "}
+                            {draft.imageUrl.trim() || "—"}
+                          </p>
+                          <p className="sm:col-span-2">
+                            <span className="font-medium text-grayScale-700">Audio Correct Answer Text:</span>{" "}
+                            {draft.audioCorrectAnswerText.trim() || "—"}
+                          </p>
+                          <p className="sm:col-span-2">
+                            <span className="font-medium text-grayScale-700">Tips:</span>{" "}
+                            {draft.tips.trim() || "—"}
+                          </p>
+                          <p className="sm:col-span-2">
+                            <span className="font-medium text-grayScale-700">Explanation:</span>{" "}
+                            {draft.explanation.trim() || "—"}
+                          </p>
+                        </div>
+                        <div className="mt-2 flex flex-wrap gap-3">
+                          {draft.voicePromptPreviewUrl ? (
+                            <audio controls src={draft.voicePromptPreviewUrl} className="h-9 w-full max-w-sm" />
+                          ) : null}
+                          {draft.samplePromptPreviewUrl ? (
+                            <audio controls src={draft.samplePromptPreviewUrl} className="h-9 w-full max-w-sm" />
+                          ) : null}
+                          {draft.imagePreviewUrl ? (
+                            <img
+                              src={draft.imagePreviewUrl}
+                              alt="Question preview"
+                              className="h-20 w-20 rounded-md border border-grayScale-200 object-cover"
+                            />
+                          ) : null}
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            <div className="mt-8 flex flex-col-reverse gap-3 border-t border-grayScale-100 pt-6 sm:flex-row sm:justify-end">
+              <Button variant="outline" onClick={() => setCurrentStep(2)} disabled={saving}>
+                Back
+              </Button>
+              <Button className="bg-brand-500 hover:bg-brand-600" disabled={!canCreate || saving} onClick={handleCreateSpeakingPractice}>
+                {saving ? "Publishing..." : "Publish Speaking Practice"}
+              </Button>
+            </div>
+            </Card>
+          )}
+        </div>
+      )}
+
+      {recordingModal ? (
+        <div className="fixed inset-0 z-[70] flex items-center justify-center bg-black/35 backdrop-blur-[2px]">
+          <div className="mx-4 w-full max-w-md rounded-2xl border border-[#eee2f7] bg-[#fcf9ff] p-6 shadow-2xl">
+            <p className="text-center text-base font-semibold text-grayScale-700">
+              Recording {recordingModal.label}
+            </p>
+            <p className="mt-1 text-center text-xs text-grayScale-400">
+              Speak now. The visualizer reacts to your voice volume in real time.
+            </p>
+            <div className="mt-3 flex justify-center">
+              <div className="inline-flex items-center gap-2 rounded-full border border-[#ddc8ee] bg-[#f6ecff] px-3 py-1 text-xs font-medium text-[#7b3ca6]">
+                <span className="h-2 w-2 animate-pulse rounded-full bg-[#a742d5]" />
+                REC{" "}
+                {`${Math.floor(recordingModal.elapsedSeconds / 60)
+                  .toString()
+                  .padStart(2, "0")}:${(recordingModal.elapsedSeconds % 60)
+                  .toString()
+                  .padStart(2, "0")}`}
+              </div>
+            </div>
+
+            <div className="mt-5 flex items-center gap-4 rounded-xl border border-[#e3cff3] bg-[#f2e8f8] px-4 py-4">
+              <div className="grid h-12 w-12 shrink-0 place-items-center rounded-xl bg-[#e4d0f3] text-[#8a37b8] shadow-sm">
+                <Mic className="h-5 w-5" />
+              </div>
+              <div className="grid h-16 w-full grid-cols-32 items-end gap-[3px] overflow-hidden">
+                {recordingModal.levels.map((level, idx) => {
+                  const segmentCount = 9
+                  const activeSegments = Math.max(1, Math.min(segmentCount, Math.round(level * segmentCount)))
+                  return (
+                    <div key={idx} className="flex h-full w-full flex-col-reverse gap-[2px]">
+                      {Array.from({ length: segmentCount }, (_, segmentIdx) => (
+                        <div
+                          key={segmentIdx}
+                          className="h-[5px] rounded-[2px]"
+                          style={{
+                            background:
+                              segmentIdx < activeSegments
+                                ? "linear-gradient(180deg, rgba(142,55,184,0.95) 0%, rgba(206,92,235,0.92) 100%)"
+                                : "rgba(207,177,230,0.38)",
+                          }}
+                        />
+                      ))}
+                    </div>
+                  )
+                })}
+              </div>
+            </div>
+
+            <div className="mt-6 flex justify-end gap-2">
+              <Button
+                type="button"
+                variant="outline"
+                className="border-[#ddc8ee] text-[#7a6792] hover:bg-[#f4ecfb]"
+                onClick={() => void stopActiveRecording(false)}
+              >
+                Cancel
+              </Button>
+              <Button
+                type="button"
+                variant="outline"
+                className="border-[#ddc8ee] text-[#7a6792] hover:bg-[#f4ecfb]"
+                onClick={togglePauseRecording}
+              >
+                {recordingModal.isPaused ? "Continue" : "Pause"}
+              </Button>
+              <Button
+                type="button"
+                className="bg-[#8f2bc6] text-white hover:bg-[#7f22b2]"
+                onClick={() => void stopActiveRecording(true)}
+              >
+                Stop & Save
+              </Button>
+            </div>
+          </div>
+        </div>
+      ) : null}
     </div>
   )
 }
diff --git a/src/pages/content-management/SubCourseContentPage.tsx b/src/pages/content-management/SubCourseContentPage.tsx
index 826ec54..b9c9224 100644
--- a/src/pages/content-management/SubCourseContentPage.tsx
+++ b/src/pages/content-management/SubCourseContentPage.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react"
 import { Link, useParams, useNavigate } from "react-router-dom"
-import { ArrowLeft, Plus, FileText, Layers, Edit, Trash2, X, Video, MoreVertical, Star, ChevronLeft, ChevronRight, MessageSquare, Play, Loader2 } from "lucide-react"
+import { ArrowLeft, Plus, FileText, Layers, Edit, Trash2, X, Video, MoreVertical, Star, ChevronLeft, ChevronRight, MessageSquare, Play } from "lucide-react"
 import spinnerSrc from "../../assets/Circular-indeterminate progress indicator.svg"
 import { Card } from "../../components/ui/card"
 import alertSrc from "../../assets/Alert.svg"
@@ -13,14 +13,23 @@ import {
   getVideosBySubCourse,
   updatePractice,
   deleteQuestionSet,
-  createVimeoVideo,
+  createCourseVideo,
   updateSubCourseVideo,
   deleteSubCourseVideo,
   getRatings,
   getVimeoSample,
 } from "../../api/courses.api"
-import type { SubCourse, QuestionSet, SubCourseVideo, Rating, VimeoSampleVideo } from "../../types/course.types"
-import { Select } from "../../components/ui/select"
+import { uploadVideoFile } from "../../api/files.api"
+import type {
+  SubCourse,
+  QuestionSet,
+  SubCourseVideo,
+  Rating,
+  VimeoSampleVideo,
+  VideoStatus,
+  VideoVisibility,
+} from "../../types/course.types"
+import { SpinnerIcon } from "../../components/ui/spinner-icon"
 
 type TabType = "video" | "practice" | "ratings"
 type StatusFilter = "all" | "published" | "draft" | "archived"
@@ -74,17 +83,19 @@ export function SubCourseContentPage() {
   const [videoTitle, setVideoTitle] = useState("")
   const [videoDescription, setVideoDescription] = useState("")
   const [videoUrl, setVideoUrl] = useState("")
+  const [videoFile, setVideoFile] = useState<File | null>(null)
   const [videoFileSize, setVideoFileSize] = useState<number>(0)
   const [videoDuration, setVideoDuration] = useState<number>(0)
+  const [videoResolution, setVideoResolution] = useState("1080p")
+  const [videoVisibility, setVideoVisibility] = useState<VideoVisibility>("PUBLISHED")
+  const [videoStatus, setVideoStatus] = useState<VideoStatus>("PUBLISHED")
+  const [videoDisplayOrder, setVideoDisplayOrder] = useState<number>(1)
 
   // Vimeo preview state
   const [showPreviewModal, setShowPreviewModal] = useState(false)
   const [previewIframe, setPreviewIframe] = useState("")
   const [previewVideo, setPreviewVideo] = useState<VimeoSampleVideo | null>(null)
   const [previewLoading, setPreviewLoading] = useState(false)
-  const [sampleVideoId, setSampleVideoId] = useState("")
-  const [modalPreviewIframe, setModalPreviewIframe] = useState("")
-  const [modalPreviewLoading, setModalPreviewLoading] = useState(false)
 
   useEffect(() => {
     const fetchData = async () => {
@@ -234,31 +245,83 @@ export function SubCourseContentPage() {
     setVideoTitle("")
     setVideoDescription("")
     setVideoUrl("")
+    setVideoFile(null)
     setVideoFileSize(0)
     setVideoDuration(0)
+    setVideoResolution("1080p")
+    setVideoVisibility("PUBLISHED")
+    setVideoStatus("PUBLISHED")
+    setVideoDisplayOrder(1)
     setSaveError(null)
     setShowAddVideoModal(true)
   }
 
+  const handleVideoFileSelect = (file: File | null) => {
+    setVideoFile(file)
+    if (!file) {
+      setVideoFileSize(0)
+      setVideoDuration(0)
+      return
+    }
+
+    setVideoFileSize(file.size)
+    const video = document.createElement("video")
+    const objectUrl = URL.createObjectURL(file)
+    video.preload = "metadata"
+    video.src = objectUrl
+    video.onloadedmetadata = () => {
+      setVideoDuration(Math.max(0, Math.round(video.duration || 0)))
+      URL.revokeObjectURL(objectUrl)
+    }
+    video.onerror = () => {
+      URL.revokeObjectURL(objectUrl)
+    }
+  }
+
   const handleSaveNewVideo = async () => {
-    if (!subCourseId) return
+    if (!subCourseId || !videoFile) return
     setSaving(true)
     setSaveError(null)
     try {
-      await createVimeoVideo({
+      const uploadRes = await uploadVideoFile(videoFile, {
+        title: videoTitle.trim(),
+        description: videoDescription.trim(),
+      })
+
+      // Per backend guide, use embed_url as the video_url reference.
+      const embedUrl = uploadRes.data?.data?.embed_url?.trim()
+      const vimeoUrl = uploadRes.data?.data?.url?.trim()
+      if (!embedUrl) throw new Error("Missing uploaded video embed_url")
+
+      // Backend requires: https://player.vimeo.com/video/<id>?h=<hash>
+      // where <hash> is the last path segment from `url` (e.g. https://vimeo.com/<id>/<hash>)
+      const hashFromUrl = vimeoUrl ? vimeoUrl.split("/").filter(Boolean).at(-1) : undefined
+      const finalVideoUrl = hashFromUrl ? `${embedUrl}?h=${hashFromUrl}` : embedUrl
+
+      const finalTitle = videoTitle.trim() || videoFile.name
+
+      await createCourseVideo({
         sub_course_id: Number(subCourseId),
-        title: videoTitle,
-        description: videoDescription,
-        source_url: videoUrl,
-        file_size: videoFileSize,
+        title: finalTitle,
+        description: videoDescription.trim(),
+        video_url: finalVideoUrl,
         duration: videoDuration,
+        resolution: videoResolution.trim() || undefined,
+        visibility: videoVisibility,
+        display_order: Number.isFinite(videoDisplayOrder) ? videoDisplayOrder : undefined,
+        status: videoStatus,
       })
       setShowAddVideoModal(false)
       setVideoTitle("")
       setVideoDescription("")
       setVideoUrl("")
+      setVideoFile(null)
       setVideoFileSize(0)
       setVideoDuration(0)
+      setVideoResolution("1080p")
+      setVideoVisibility("PUBLISHED")
+      setVideoStatus("PUBLISHED")
+      setVideoDisplayOrder(1)
       await fetchVideos()
     } catch (err) {
       console.error("Failed to create video:", err)
@@ -321,15 +384,26 @@ export function SubCourseContentPage() {
     }
   }
 
-  // Preview a video card via Vimeo sample API
+  // Preview a video card.
+  // We prefer embedding directly from `video_url` because Vimeo embeds may require the `h=` hash.
   const handlePreviewVideo = async (video: SubCourseVideo) => {
-    const idMatch = video.video_url?.match(/(\d{5,})/)
-    const vimeoId = idMatch?.[1] ?? "76979871" // fallback to Big Buck Bunny
     setShowPreviewModal(true)
     setPreviewLoading(true)
     setPreviewIframe("")
     setPreviewVideo(null)
     try {
+      const directUrl = video.video_url?.trim()
+      if (directUrl) {
+        setPreviewIframe(
+          `<iframe src="${directUrl}" style="width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>`,
+        )
+        setPreviewVideo(null)
+        return
+      }
+
+      // Fallback to sample API when a direct URL is unavailable.
+      const idMatch = video.video_url?.match(/(\d{5,})/)
+      const vimeoId = idMatch?.[1] ?? "76979871" // fallback to Big Buck Bunny
       const res = await getVimeoSample(vimeoId)
       setPreviewIframe(res.data.data.iframe)
       setPreviewVideo(res.data.data.video)
@@ -340,28 +414,6 @@ export function SubCourseContentPage() {
     }
   }
 
-  // Preview inside add/edit modal from a sample vimeo ID picker
-  const handleModalPreview = async (vimeoId: string) => {
-    if (!vimeoId) {
-      setModalPreviewIframe("")
-      return
-    }
-    setModalPreviewLoading(true)
-    try {
-      const res = await getVimeoSample(vimeoId)
-      setModalPreviewIframe(res.data.data.iframe)
-      // Auto-fill fields from vimeo metadata
-      const v = res.data.data.video
-      if (!videoTitle) setVideoTitle(v.name)
-      if (!videoDescription) setVideoDescription(v.description?.slice(0, 200) ?? "")
-      if (!videoDuration) setVideoDuration(v.duration)
-    } catch {
-      setModalPreviewIframe("")
-    } finally {
-      setModalPreviewLoading(false)
-    }
-  }
-
   const filteredPractices = practices.filter((practice) => {
     if (statusFilter === "all") return true
     if (statusFilter === "published") return practice.status === "PUBLISHED"
@@ -482,7 +534,7 @@ export function SubCourseContentPage() {
         <>
           {practicesLoading ? (
             <div className="flex flex-col items-center justify-center py-20">
-              <div className="h-8 w-8 animate-spin rounded-full border-2 border-brand-500 border-t-transparent" />
+              <SpinnerIcon className="h-8 w-8" />
               <p className="mt-4 text-sm font-medium text-grayScale-500">Loading practices…</p>
             </div>
           ) : filteredPractices.length === 0 ? (
@@ -525,7 +577,7 @@ export function SubCourseContentPage() {
                       <p className="text-sm leading-relaxed text-grayScale-500 line-clamp-2">{practice.description}</p>
 
                       <div className="flex items-center gap-2 flex-wrap">
-                        <Badge className="rounded-full bg-brand-50 text-brand-600 text-[11px] font-medium px-2.5 py-0.5 ring-1 ring-inset ring-brand-200">
+                        <Badge className="rounded-full bg-[#f3e8ff] text-[#6b21a8] text-[11px] font-medium px-2.5 py-0.5 ring-1 ring-inset ring-[#d8b4fe]">
                           {practice.set_type}
                         </Badge>
                         {practice.persona && (
@@ -581,7 +633,7 @@ export function SubCourseContentPage() {
         <>
           {videosLoading ? (
             <div className="flex flex-col items-center justify-center py-20">
-              <div className="h-8 w-8 animate-spin rounded-full border-2 border-brand-500 border-t-transparent" />
+              <SpinnerIcon className="h-8 w-8" />
               <p className="mt-4 text-sm font-medium text-grayScale-500">Loading videos…</p>
             </div>
           ) : videos.length === 0 ? (
@@ -711,7 +763,7 @@ export function SubCourseContentPage() {
         <>
           {ratingsLoading ? (
             <div className="flex flex-col items-center justify-center py-20">
-              <div className="h-8 w-8 animate-spin rounded-full border-2 border-brand-500 border-t-transparent" />
+              <SpinnerIcon className="h-8 w-8" />
               <p className="mt-4 text-sm font-medium text-grayScale-500">Loading ratings…</p>
             </div>
           ) : ratings.length === 0 ? (
@@ -931,44 +983,13 @@ export function SubCourseContentPage() {
             <div className="flex items-center justify-between border-b border-grayScale-100 px-6 py-4">
               <h2 className="text-lg font-semibold text-grayScale-900">Add Video</h2>
               <button
-                onClick={() => { setShowAddVideoModal(false); setSampleVideoId(""); setModalPreviewIframe("") }}
+                onClick={() => { setShowAddVideoModal(false); setVideoFile(null) }}
                 className="grid h-8 w-8 place-items-center rounded-lg text-grayScale-400 transition-colors hover:bg-grayScale-100 hover:text-grayScale-600"
               >
                 <X className="h-5 w-5" />
               </button>
             </div>
             <div className="max-h-[70vh] space-y-5 overflow-y-auto px-6 py-6">
-              {/* Sample Vimeo picker */}
-              <div className="rounded-xl border border-brand-100 bg-brand-50/40 p-4 space-y-3">
-                <p className="text-xs font-semibold uppercase tracking-wider text-brand-600">
-                  Try a sample Vimeo video
-                </p>
-                <div className="flex items-center gap-2">
-                  <Select
-                    className="flex-1 text-sm"
-                    value={sampleVideoId}
-                    onChange={(e) => {
-                      setSampleVideoId(e.target.value)
-                      handleModalPreview(e.target.value)
-                    }}
-                  >
-                    <option value="">Select a sample video…</option>
-                    <option value="76979871">Big Buck Bunny</option>
-                    <option value="1084537">Big Buck Bunny (alt)</option>
-                    <option value="253989945">Vimeo Staff Pick</option>
-                    <option value="305727901">Big Buck Bunny (4K)</option>
-                    <option value="148751763">GoPro Footage</option>
-                  </Select>
-                  {modalPreviewLoading && <Loader2 className="h-4 w-4 shrink-0 animate-spin text-brand-500" />}
-                </div>
-                {modalPreviewIframe && (
-                  <div
-                    className="aspect-video w-full overflow-hidden rounded-lg"
-                    dangerouslySetInnerHTML={{ __html: modalPreviewIframe }}
-                  />
-                )}
-              </div>
-
               <div className="space-y-1.5">
                 <label className="text-sm font-medium text-grayScale-700">Title</label>
                 <Input
@@ -988,12 +1009,17 @@ export function SubCourseContentPage() {
                 />
               </div>
               <div className="space-y-1.5">
-                <label className="text-sm font-medium text-grayScale-700">Source URL</label>
+                <label className="text-sm font-medium text-grayScale-700">Video File</label>
                 <Input
-                  value={videoUrl}
-                  onChange={(e) => setVideoUrl(e.target.value)}
-                  placeholder="https://example-storage.com/video.mp4"
+                  type="file"
+                  accept="video/*"
+                  onChange={(e) => handleVideoFileSelect(e.target.files?.[0] ?? null)}
                 />
+                {videoFile && (
+                  <p className="text-xs text-grayScale-500">
+                    Selected: {videoFile.name}
+                  </p>
+                )}
               </div>
               <div className="grid grid-cols-2 gap-4">
                 <div className="space-y-1.5">
@@ -1017,6 +1043,52 @@ export function SubCourseContentPage() {
                   />
                 </div>
               </div>
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-1.5">
+                  <label className="text-sm font-medium text-grayScale-700">Resolution</label>
+                  <Input
+                    value={videoResolution}
+                    onChange={(e) => setVideoResolution(e.target.value)}
+                    placeholder="1080p"
+                  />
+                </div>
+                <div className="space-y-1.5">
+                  <label className="text-sm font-medium text-grayScale-700">Display Order</label>
+                  <Input
+                    type="number"
+                    value={videoDisplayOrder}
+                    onChange={(e) => setVideoDisplayOrder(Number(e.target.value))}
+                    min={1}
+                  />
+                </div>
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-1.5">
+                  <label className="text-sm font-medium text-grayScale-700">Visibility</label>
+                  <select
+                    value={videoVisibility}
+                    onChange={(e) => setVideoVisibility(e.target.value)}
+                    className="h-11 w-full rounded-lg border border-grayScale-200 bg-white px-3 text-sm text-grayScale-700 focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500/20"
+                  >
+                    <option value="PUBLISHED">PUBLISHED</option>
+                    <option value="DRAFT">DRAFT</option>
+                    <option value="PRIVATE">PRIVATE</option>
+                    <option value="UNLISTED">UNLISTED</option>
+                  </select>
+                </div>
+                <div className="space-y-1.5">
+                  <label className="text-sm font-medium text-grayScale-700">Status</label>
+                  <select
+                    value={videoStatus}
+                    onChange={(e) => setVideoStatus(e.target.value)}
+                    className="h-11 w-full rounded-lg border border-grayScale-200 bg-white px-3 text-sm text-grayScale-700 focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500/20"
+                  >
+                    <option value="PUBLISHED">PUBLISHED</option>
+                    <option value="DRAFT">DRAFT</option>
+                    <option value="ARCHIVED">ARCHIVED</option>
+                  </select>
+                </div>
+              </div>
               {saveError && <p className="rounded-lg bg-red-50 px-3 py-2 text-sm text-red-600">{saveError}</p>}
             </div>
             <div className="flex flex-col-reverse gap-2.5 border-t border-grayScale-100 px-6 py-4 sm:flex-row sm:justify-end sm:gap-3">
@@ -1026,9 +1098,9 @@ export function SubCourseContentPage() {
               <Button
                 className="bg-brand-500 shadow-sm hover:bg-brand-600"
                 onClick={handleSaveNewVideo}
-                disabled={saving || !videoTitle.trim() || !videoUrl.trim()}
+                disabled={saving || !videoTitle.trim() || !videoFile}
               >
-                {saving ? "Uploading..." : "Upload to Vimeo"}
+                {saving ? "Uploading..." : "Upload Video"}
               </Button>
             </div>
           </div>
@@ -1149,7 +1221,7 @@ export function SubCourseContentPage() {
             <div className="p-6">
               {previewLoading ? (
                 <div className="flex aspect-video items-center justify-center rounded-xl bg-grayScale-50">
-                  <Loader2 className="h-8 w-8 animate-spin text-brand-500" />
+                  <SpinnerIcon className="h-8 w-8" />
                 </div>
               ) : previewIframe ? (
                 <div
diff --git a/src/pages/content-management/SubCoursesPage.tsx b/src/pages/content-management/SubCoursesPage.tsx
index ce9c71c..ba4d2f2 100644
--- a/src/pages/content-management/SubCoursesPage.tsx
+++ b/src/pages/content-management/SubCoursesPage.tsx
@@ -11,7 +11,6 @@ import {
   Edit,
   Link2,
   Plus,
-  Loader2,
   LayoutGrid,
   GitBranch,
   ChevronDown,
@@ -43,6 +42,7 @@ import type {
   CourseCategory,
   SubCoursePrerequisite,
 } from "../../types/course.types";
+import { SpinnerIcon } from "../../components/ui/spinner-icon";
 
 export function SubCoursesPage() {
   const { categoryId, courseId } = useParams<{
@@ -403,10 +403,6 @@ export function SubCoursesPage() {
     return (
       <div className="flex flex-col items-center justify-center py-24">
         <img src={spinnerSrc} alt="" className="h-10 w-10 animate-spin" />
-        {/* <div className="rounded-full bg-white shadow-sm p-4">
-          <RefreshCw className="h-8 w-8 animate-spin text-brand-600" />
-        </div>
-        <p className="mt-4 text-sm font-medium text-grayScale-400">Loading sub-courses...</p> */}
       </div>
     );
   }
@@ -831,7 +827,7 @@ export function SubCoursesPage() {
                       disabled={prereqAdding || !selectedPrereqId}
                     >
                       {prereqAdding ? (
-                        <Loader2 className="h-4 w-4 animate-spin" />
+                        <SpinnerIcon className="h-4 w-4" />
                       ) : (
                         <Plus className="h-4 w-4" />
                       )}
@@ -890,7 +886,7 @@ export function SubCoursesPage() {
                         className="ml-3 grid h-8 w-8 shrink-0 place-items-center rounded-lg text-grayScale-400 transition-colors hover:bg-red-50 hover:text-red-500 disabled:opacity-50"
                       >
                         {prereqRemoving === prereq.id ? (
-                          <Loader2 className="h-4 w-4 animate-spin" />
+                          <SpinnerIcon className="h-4 w-4" />
                         ) : (
                           <Trash2 className="h-4 w-4" />
                         )}
diff --git a/src/pages/issues/IssuesPage.tsx b/src/pages/issues/IssuesPage.tsx
index 76c74f7..445582f 100644
--- a/src/pages/issues/IssuesPage.tsx
+++ b/src/pages/issues/IssuesPage.tsx
@@ -41,6 +41,7 @@ import {
   DialogDescription,
 } from "../../components/ui/dialog";
 import { cn } from "../../lib/utils";
+import { SpinnerIcon } from "../../components/ui/spinner-icon";
 import {
   getIssues,
   getIssueById,
@@ -365,7 +366,7 @@ export function IssuesPage() {
               fetchIssues();
             }}
           >
-            <RefreshCw className={cn("h-4 w-4", loading && "animate-spin")} />
+            {loading ? <SpinnerIcon className="h-4 w-4" /> : <RefreshCw className="h-4 w-4" />}
             Refresh
           </Button>
           <Button
@@ -500,7 +501,7 @@ export function IssuesPage() {
               <TableRow>
                 <TableCell colSpan={6} className="text-center py-12">
                   <div className="flex flex-col items-center gap-3">
-                    <RefreshCw className="h-6 w-6 animate-spin text-grayScale-300" />
+                    <SpinnerIcon className="h-6 w-6" />
                     <span className="text-sm text-grayScale-400">Loading issues...</span>
                   </div>
                 </TableCell>
@@ -720,7 +721,7 @@ export function IssuesPage() {
 
           {detailLoading ? (
             <div className="flex items-center justify-center py-8">
-              <RefreshCw className="h-6 w-6 animate-spin text-grayScale-300" />
+              <SpinnerIcon className="h-6 w-6" />
             </div>
           ) : selectedIssue ? (
             <div className="space-y-4">
@@ -1030,7 +1031,7 @@ export function IssuesPage() {
               onClick={handleDeleteConfirm}
             >
               {deleteLoading ? (
-                <RefreshCw className="h-3.5 w-3.5 animate-spin" />
+                <SpinnerIcon className="h-3.5 w-3.5" />
               ) : (
                 <Trash2 className="h-3.5 w-3.5" />
               )}
diff --git a/src/pages/legal/InfoLayout.tsx b/src/pages/legal/InfoLayout.tsx
new file mode 100644
index 0000000..d450d76
--- /dev/null
+++ b/src/pages/legal/InfoLayout.tsx
@@ -0,0 +1,79 @@
+import type { ReactNode } from "react"
+import { Link, useLocation } from "react-router-dom"
+import logoSrc from "../../assets/logo.svg"
+
+interface InfoLayoutProps {
+  title: string
+  subtitle: string
+  children: ReactNode
+  lastUpdated?: string
+}
+
+const footerLinks = [
+  { to: "/about", label: "About" },
+  { to: "/terms", label: "Terms and Conditions" },
+  { to: "/privacy", label: "Privacy Policy" },
+  { to: "/account-deletion", label: "Account Deletion" },
+]
+
+export function InfoLayout({
+  title,
+  subtitle,
+  children,
+  lastUpdated = "March 11, 2026",
+}: InfoLayoutProps) {
+  const location = useLocation()
+
+  return (
+    <div className="relative min-h-screen overflow-hidden bg-[#fefcff] px-4 py-10 sm:px-6">
+      <div className="pointer-events-none absolute -left-24 -top-24 h-72 w-72 rounded-full bg-[#f3e8ff]" />
+      <div className="pointer-events-none absolute -right-20 top-24 h-64 w-64 rounded-full bg-[#f5ecff]" />
+      <div className="mx-auto w-full max-w-5xl rounded-2xl border border-[#eadff7] bg-white px-6 py-6 shadow-[0_20px_60px_rgba(83,33,120,0.08)] sm:px-10 sm:py-8">
+        <header>
+          <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+            <Link to="/about" className="inline-flex items-center gap-3">
+              <span className="inline-flex rounded-xl bg-brand-500 p-2 shadow-sm ring-1 ring-brand-400/40">
+                <img src={logoSrc} alt="Yimaru Academy" className="h-8 w-auto" />
+              </span>
+              <p className="text-xl font-semibold text-grayScale-700">Yimaru Academy</p>
+            </Link>
+            <nav className="flex flex-wrap items-center text-sm font-medium">
+              {footerLinks.map((item, index) => (
+                <div key={item.to} className="flex items-center">
+                  <Link
+                    to={item.to}
+                    className={`px-3 transition-colors ${
+                      location.pathname === item.to
+                        ? "text-[#8f56b5]"
+                        : "text-grayScale-600 hover:text-[#8f56b5]"
+                    }`}
+                  >
+                    {item.label}
+                  </Link>
+                  {index < footerLinks.length - 1 && (
+                    <span className="h-5 w-px bg-[#e0d8eb]" aria-hidden="true" />
+                  )}
+                </div>
+              ))}
+            </nav>
+          </div>
+
+          <div className="mt-8">
+            <h1 className="text-4xl font-bold tracking-tight text-grayScale-700">{title}</h1>
+            <p className="mt-4 text-sm text-grayScale-500">
+              <span className="font-semibold text-grayScale-600">Last Updated:</span> {lastUpdated}
+            </p>
+            <p className="mt-3 max-w-3xl text-sm leading-relaxed text-grayScale-500">{subtitle}</p>
+          </div>
+          <div className="mt-6 h-px bg-[#e8e1f2]" />
+        </header>
+
+        <main className="space-y-6 pt-6">{children}</main>
+
+        <footer className="mt-8 flex justify-center text-xs text-grayScale-400">
+          © Yimaru Academy. All rights reserved.
+        </footer>
+      </div>
+    </div>
+  )
+}
diff --git a/src/pages/notifications/NotificationsPage.tsx b/src/pages/notifications/NotificationsPage.tsx
index 2f31ec2..38909ca 100644
--- a/src/pages/notifications/NotificationsPage.tsx
+++ b/src/pages/notifications/NotificationsPage.tsx
@@ -14,7 +14,6 @@ import {
   BookOpen,
   Video,
   ShieldAlert,
-  Loader2,
   MailOpen,
   Mail,
   CheckCheck,
@@ -51,6 +50,7 @@ import {
 } from "../../components/ui/dropdown-menu"
 import { FileUpload } from "../../components/ui/file-upload"
 import { cn } from "../../lib/utils"
+import { SpinnerIcon } from "../../components/ui/spinner-icon"
 import {
   getNotifications,
   getUnreadCount,
@@ -222,7 +222,7 @@ function NotificationItem({
               title={notification.is_read ? "Mark as unread" : "Mark as read"}
             >
               {toggling ? (
-                <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                <SpinnerIcon className="h-3.5 w-3.5" />
               ) : notification.is_read ? (
                 <Mail className="h-3.5 w-3.5" />
               ) : (
@@ -506,6 +506,22 @@ export function NotificationsPage() {
 
   const totalPages = Math.max(1, Math.ceil(totalCount / PAGE_SIZE))
   const currentPage = Math.floor(offset / PAGE_SIZE) + 1
+  const startEntry = totalCount === 0 ? 0 : offset + 1
+  const endEntry = Math.min(offset + PAGE_SIZE, totalCount)
+
+  const getPageNumbers = () => {
+    const pages: (number | string)[] = []
+    if (totalPages <= 7) {
+      for (let i = 1; i <= totalPages; i++) pages.push(i)
+    } else {
+      pages.push(1, 2, 3)
+      if (currentPage > 4) pages.push("...")
+      if (currentPage > 3 && currentPage < totalPages - 2) pages.push(currentPage)
+      if (currentPage < totalPages - 3) pages.push("...")
+      pages.push(totalPages)
+    }
+    return pages
+  }
 
   const filteredNotifications = notifications.filter((n) => {
     if (channelFilter !== "all" && n.delivery_channel !== channelFilter) return false
@@ -605,7 +621,7 @@ export function NotificationsPage() {
                       onClick={handleMarkAllRead}
                     >
                       {bulkLoading ? (
-                        <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" />
+                        <SpinnerIcon className="mr-2 h-3.5 w-3.5" />
                       ) : (
                         <CheckCheck className="mr-2 h-3.5 w-3.5" />
                       )}
@@ -619,7 +635,7 @@ export function NotificationsPage() {
                       onClick={handleMarkAllUnread}
                     >
                       {bulkLoading ? (
-                        <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" />
+                        <SpinnerIcon className="mr-2 h-3.5 w-3.5" />
                       ) : (
                         <MailX className="mr-2 h-3.5 w-3.5" />
                       )}
@@ -636,52 +652,44 @@ export function NotificationsPage() {
       {/* Summary cards */}
       {!loading && !error && (
         <div className="mb-5 grid gap-4 sm:grid-cols-3">
-          <Card className="shadow-none border border-grayScale-100">
-            <CardContent className="flex items-center justify-between gap-3 p-4">
-              <div>
-                <p className="text-xs font-medium text-grayScale-500">Total notifications</p>
-                <p className="mt-1 text-xl font-semibold text-grayScale-700">
-                  {totalCount.toLocaleString()}
-                </p>
-              </div>
-              <div className="grid h-10 w-10 place-items-center rounded-xl bg-brand-500 text-white">
-                <Bell className="h-5 w-5" />
-              </div>
-            </CardContent>
-          </Card>
-          <Card className="shadow-none border border-grayScale-100">
-            <CardContent className="flex items-center justify-between gap-3 p-4">
-              <div>
-                <p className="text-xs font-medium text-grayScale-500">Unread</p>
-                <p className="mt-1 text-xl font-semibold text-grayScale-700">
-                  {globalUnread.toLocaleString()}
-                </p>
-              </div>
-              <div className="grid h-10 w-10 place-items-center rounded-xl bg-amber-50 text-amber-600">
-                <BellOff className="h-5 w-5" />
-              </div>
-            </CardContent>
-          </Card>
-          <Card className="shadow-none border border-grayScale-100">
-            <CardContent className="flex items-center justify-between gap-3 p-4">
-              <div>
-                <p className="text-xs font-medium text-grayScale-500">Channels used</p>
-                <p className="mt-1 text-xl font-semibold text-grayScale-700">
-                  {Array.from(new Set(notifications.map((n) => n.delivery_channel))).length || "—"}
-                </p>
-              </div>
-              <div className="grid h-10 w-10 place-items-center rounded-xl bg-grayScale-50 text-grayScale-500">
-                <MailOpen className="h-5 w-5" />
-              </div>
-            </CardContent>
-          </Card>
+          <div className="flex items-center gap-4 rounded-xl border bg-white p-4">
+            <div className="grid h-10 w-10 place-items-center rounded-lg bg-brand-100 text-brand-600">
+              <Bell className="h-5 w-5" />
+            </div>
+            <div>
+              <p className="text-2xl font-bold text-grayScale-600">{totalCount.toLocaleString()}</p>
+              <p className="text-xs text-grayScale-400">Total notifications</p>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-4 rounded-xl border bg-white p-4">
+            <div className="grid h-10 w-10 place-items-center rounded-lg bg-amber-50 text-amber-600">
+              <BellOff className="h-5 w-5" />
+            </div>
+            <div>
+              <p className="text-2xl font-bold text-grayScale-600">{globalUnread.toLocaleString()}</p>
+              <p className="text-xs text-grayScale-400">Unread</p>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-4 rounded-xl border bg-white p-4">
+            <div className="grid h-10 w-10 place-items-center rounded-lg bg-grayScale-50 text-grayScale-500">
+              <MailOpen className="h-5 w-5" />
+            </div>
+            <div>
+              <p className="text-2xl font-bold text-grayScale-600">
+                {Array.from(new Set(notifications.map((n) => n.delivery_channel))).length || "—"}
+              </p>
+              <p className="text-xs text-grayScale-400">Channels used</p>
+            </div>
+          </div>
         </div>
       )}
 
       {/* Loading */}
       {loading && (
         <div className="flex items-center justify-center py-20">
-          <Loader2 className="h-6 w-6 animate-spin text-brand-500" />
+          <SpinnerIcon className="h-6 w-6" />
         </div>
       )}
 
@@ -755,51 +763,83 @@ export function NotificationsPage() {
               <div className="flex items-center gap-3">
                 <div className="flex items-center gap-2">
                   <span className="text-xs font-medium text-grayScale-500">Channel</span>
-                  <Select
-                    value={channelFilter}
-                    onChange={(e) => setChannelFilter(e.target.value as typeof channelFilter)}
-                    className="h-8 w-[130px] text-xs"
-                  >
-                    <option value="all">All</option>
-                    <option value="push">Push</option>
-                    <option value="sms">SMS</option>
-                  </Select>
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button
+                        variant="outline"
+                        className="h-8 w-[130px] justify-between rounded-lg border-grayScale-200 px-2.5 text-xs font-normal text-grayScale-600"
+                      >
+                        <span className="truncate">{channelFilter === "all" ? "All" : channelFilter.toUpperCase()}</span>
+                        <ChevronDown className="ml-2 h-3.5 w-3.5 text-grayScale-400" />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="start" className="w-[130px]">
+                      <DropdownMenuRadioGroup
+                        value={channelFilter}
+                        onValueChange={(value) => setChannelFilter(value as typeof channelFilter)}
+                      >
+                        <DropdownMenuRadioItem value="all">All</DropdownMenuRadioItem>
+                        <DropdownMenuRadioItem value="push">Push</DropdownMenuRadioItem>
+                        <DropdownMenuRadioItem value="sms">SMS</DropdownMenuRadioItem>
+                      </DropdownMenuRadioGroup>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
                 </div>
                 <div className="flex items-center gap-2">
                   <span className="text-xs font-medium text-grayScale-500">Type</span>
-                  <Select
-                    value={typeFilter}
-                    onChange={(e) => setTypeFilter(e.target.value)}
-                    className="h-8 w-[150px] text-xs"
-                  >
-                    <option value="all">All types</option>
-                    {Array.from(new Set(notifications.map((n) => n.type))).map((t) => (
-                      <option key={t} value={t}>
-                        {formatTypeLabel(t)}
-                      </option>
-                    ))}
-                  </Select>
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button
+                        variant="outline"
+                        className="h-8 w-[150px] justify-between rounded-lg border-grayScale-200 px-2.5 text-xs font-normal text-grayScale-600"
+                      >
+                        <span className="truncate">
+                          {typeFilter === "all" ? "All types" : formatTypeLabel(typeFilter)}
+                        </span>
+                        <ChevronDown className="ml-2 h-3.5 w-3.5 text-grayScale-400" />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="start" className="w-[220px]">
+                      <DropdownMenuRadioGroup value={typeFilter} onValueChange={setTypeFilter}>
+                        <DropdownMenuRadioItem value="all">All types</DropdownMenuRadioItem>
+                        {Array.from(new Set(notifications.map((n) => n.type))).map((t) => (
+                          <DropdownMenuRadioItem key={t} value={t}>
+                            {formatTypeLabel(t)}
+                          </DropdownMenuRadioItem>
+                        ))}
+                      </DropdownMenuRadioGroup>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
                 </div>
                 <div className="flex items-center gap-2">
                   <span className="text-xs font-medium text-grayScale-500">Level</span>
-                  <Select
-                    value={levelFilter}
-                    onChange={(e) => setLevelFilter(e.target.value)}
-                    className="h-8 w-[130px] text-xs"
-                  >
-                    <option value="all">All levels</option>
-                    {Array.from(new Set(notifications.map((n) => n.level))).map((lvl) => (
-                      <option key={lvl} value={lvl}>
-                        {lvl}
-                      </option>
-                    ))}
-                  </Select>
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button
+                        variant="outline"
+                        className="h-8 w-[130px] justify-between rounded-lg border-grayScale-200 px-2.5 text-xs font-normal text-grayScale-600"
+                      >
+                        <span className="truncate">{levelFilter === "all" ? "All levels" : levelFilter}</span>
+                        <ChevronDown className="ml-2 h-3.5 w-3.5 text-grayScale-400" />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="start" className="w-[150px]">
+                      <DropdownMenuRadioGroup value={levelFilter} onValueChange={setLevelFilter}>
+                        <DropdownMenuRadioItem value="all">All levels</DropdownMenuRadioItem>
+                        {Array.from(new Set(notifications.map((n) => n.level))).map((lvl) => (
+                          <DropdownMenuRadioItem key={lvl} value={lvl}>
+                            {lvl}
+                          </DropdownMenuRadioItem>
+                        ))}
+                      </DropdownMenuRadioGroup>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
                 </div>
               </div>
             </CardContent>
           </Card>
 
-          <Card className="shadow-none">
+          <Card className="overflow-hidden rounded-xl border bg-white shadow-none">
             <CardContent className="p-0">
               <Table>
                 <TableHeader>
@@ -816,8 +856,14 @@ export function NotificationsPage() {
                 <TableBody>
                   {filteredNotifications.length === 0 ? (
                     <TableRow>
-                      <TableCell colSpan={7} className="py-10 text-center text-sm text-grayScale-400">
-                        No notifications match your filters.
+                      <TableCell colSpan={7} className="py-12 text-center">
+                        <div className="flex flex-col items-center gap-3">
+                          <BellOff className="h-8 w-8 text-grayScale-200" />
+                          <div>
+                            <p className="text-sm font-medium text-grayScale-500">No notifications match your filters</p>
+                            <p className="mt-1 text-xs text-grayScale-400">Try adjusting your filters</p>
+                          </div>
+                        </div>
                       </TableCell>
                     </TableRow>
                   ) : (
@@ -897,7 +943,7 @@ export function NotificationsPage() {
                                 title={n.is_read ? "Mark as unread" : "Mark as read"}
                               >
                                 {isToggling ? (
-                                  <Loader2 className="h-3.5 w-3.5 animate-spin text-grayScale-400" />
+                                  <SpinnerIcon className="h-3.5 w-3.5" />
                                 ) : n.is_read ? (
                                   <Mail className="h-3.5 w-3.5 text-grayScale-400" />
                                 ) : (
@@ -921,37 +967,72 @@ export function NotificationsPage() {
                 </TableBody>
               </Table>
             </CardContent>
-          </Card>
-
-          {/* Pagination */}
-          {totalPages > 1 && (
-            <div className="mt-4 flex items-center justify-between">
-              <span className="text-xs text-grayScale-400">
-                Showing {offset + 1}–{Math.min(offset + PAGE_SIZE, totalCount)} of {totalCount}
-              </span>
+            <div className="flex flex-wrap items-center justify-between gap-3 border-t px-4 py-3 text-sm text-grayScale-500">
+              <div className="flex items-center gap-2">
+                <span>Showing</span>
+                <span className="font-medium text-grayScale-600">
+                  {startEntry}-{endEntry}
+                </span>
+                <span>of</span>
+                <span className="font-medium text-grayScale-600">{totalCount}</span>
+                <span className="mr-4">entries</span>
+                <span className="border-l pl-4">Rows per page</span>
+                <div className="relative">
+                  <select
+                    value={PAGE_SIZE}
+                    disabled
+                    className="h-8 appearance-none rounded-md border bg-white pl-2 pr-7 text-sm font-medium text-grayScale-600 focus:outline-none"
+                  >
+                    <option value={PAGE_SIZE}>{PAGE_SIZE}</option>
+                  </select>
+                  <ChevronDown className="pointer-events-none absolute right-2 top-1/2 h-3 w-3 -translate-y-1/2 text-grayScale-400" />
+                </div>
+              </div>
               <div className="flex items-center gap-1">
-                <Button
-                  variant="outline"
-                  size="sm"
+                <button
+                  onClick={() => currentPage > 1 && setOffset(Math.max(0, offset - PAGE_SIZE))}
                   disabled={currentPage <= 1}
-                  onClick={() => setOffset(Math.max(0, offset - PAGE_SIZE))}
+                  className={cn(
+                    "flex h-8 w-8 items-center justify-center rounded-md border bg-white text-grayScale-500",
+                    currentPage <= 1 && "cursor-not-allowed opacity-50",
+                  )}
                 >
                   <ChevronLeft className="h-4 w-4" />
-                </Button>
-                <span className="px-3 text-xs font-medium text-grayScale-600">
-                  {currentPage} / {totalPages}
-                </span>
-                <Button
-                  variant="outline"
-                  size="sm"
+                </button>
+                {getPageNumbers().map((n, idx) =>
+                  typeof n === "string" ? (
+                    <span key={`ellipsis-${idx}`} className="px-2 text-grayScale-400">
+                      ...
+                    </span>
+                  ) : (
+                    <button
+                      key={n}
+                      type="button"
+                      onClick={() => setOffset((n - 1) * PAGE_SIZE)}
+                      className={cn(
+                        "h-8 w-8 rounded-md border text-sm font-medium",
+                        n === currentPage
+                          ? "border-brand-500 bg-brand-500 text-white"
+                          : "bg-white text-grayScale-600 hover:bg-grayScale-50",
+                      )}
+                    >
+                      {n}
+                    </button>
+                  ),
+                )}
+                <button
+                  onClick={() => currentPage < totalPages && setOffset(offset + PAGE_SIZE)}
                   disabled={currentPage >= totalPages}
-                  onClick={() => setOffset(offset + PAGE_SIZE)}
+                  className={cn(
+                    "flex h-8 w-8 items-center justify-center rounded-md border bg-white text-grayScale-500",
+                    currentPage >= totalPages && "cursor-not-allowed opacity-50",
+                  )}
                 >
                   <ChevronRight className="h-4 w-4" />
-                </Button>
+                </button>
               </div>
             </div>
-          )}
+          </Card>
         </>
       )}
 
@@ -1161,7 +1242,7 @@ export function NotificationsPage() {
                 <div className="max-h-48 space-y-1.5 overflow-y-auto rounded-lg border border-grayScale-100 bg-grayScale-50/60 p-2">
                   {recipientsLoading && (
                     <div className="flex items-center justify-center py-6 text-xs text-grayScale-400">
-                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                      <SpinnerIcon className="mr-2 h-4 w-4" />
                       Loading users…
                     </div>
                   )}
@@ -1230,7 +1311,7 @@ export function NotificationsPage() {
                 >
                   {sending ? (
                     <>
-                      <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" />
+                      <SpinnerIcon className="mr-2 h-3.5 w-3.5" />
                       Sending…
                     </>
                   ) : (
@@ -1712,7 +1793,7 @@ export function NotificationsPage() {
               <Button type="submit" size="sm" disabled={bulkSending || !bulkMessage.trim()}>
                 {bulkSending ? (
                   <>
-                    <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" />
+                    <SpinnerIcon className="mr-2 h-3.5 w-3.5" />
                     Sending…
                   </>
                 ) : (
diff --git a/src/pages/role-management/AddRolePage.tsx b/src/pages/role-management/AddRolePage.tsx
index 99ac29a..d75ad78 100644
--- a/src/pages/role-management/AddRolePage.tsx
+++ b/src/pages/role-management/AddRolePage.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from "react"
-import { ArrowLeft, Loader2, Search, X, Check } from "lucide-react"
+import { ArrowLeft, Search, X, Check } from "lucide-react"
 import { useNavigate } from "react-router-dom"
 import { Button } from "../../components/ui/button"
 import { Card, CardContent, CardHeader, CardTitle } from "../../components/ui/card"
@@ -10,6 +10,7 @@ import { createRole, setRolePermissions, getAllPermissions } from "../../api/rba
 import type { RolePermission } from "../../types/rbac.types"
 import { cn } from "../../lib/utils"
 import { toast } from "sonner"
+import { SpinnerIcon } from "../../components/ui/spinner-icon"
 
 export function AddRolePage() {
   const navigate = useNavigate()
@@ -186,7 +187,7 @@ export function AddRolePage() {
               disabled={saving || !roleName.trim()}
               className="w-full bg-brand-500 hover:bg-brand-600"
             >
-              {saving && <Loader2 className="h-4 w-4 animate-spin" />}
+              {saving && <SpinnerIcon className="h-4 w-4" />}
               {saving ? "Creating…" : "Create Role"}
             </Button>
           </CardContent>
@@ -246,7 +247,7 @@ export function AddRolePage() {
             {/* Loading */}
             {permLoading && (
               <div className="flex items-center justify-center py-12">
-                <Loader2 className="h-6 w-6 animate-spin text-brand-500" />
+                <SpinnerIcon className="h-6 w-6" />
               </div>
             )}
 
diff --git a/src/pages/role-management/RolesListPage.tsx b/src/pages/role-management/RolesListPage.tsx
index 44e0bbc..be965c2 100644
--- a/src/pages/role-management/RolesListPage.tsx
+++ b/src/pages/role-management/RolesListPage.tsx
@@ -2,7 +2,7 @@ import { useEffect, useMemo, useState } from "react"
 import { useNavigate } from "react-router-dom"
 import {
   Plus, Search, Shield, ShieldCheck, ChevronLeft, ChevronRight,
-  Loader2, AlertCircle, Eye, X, Pencil, Check,
+  AlertCircle, Eye, X, Pencil, Check,
 } from "lucide-react"
 import { Button } from "../../components/ui/button"
 import { Card, CardContent } from "../../components/ui/card"
@@ -16,6 +16,7 @@ import { getRoles, getRoleDetail, getAllPermissions, setRolePermissions, updateR
 import type { Role, RoleDetail, RolePermission } from "../../types/rbac.types"
 import { cn } from "../../lib/utils"
 import { toast } from "sonner"
+import { SpinnerIcon } from "../../components/ui/spinner-icon"
 
 export function RolesListPage() {
   const navigate = useNavigate()
@@ -277,7 +278,7 @@ export function RolesListPage() {
       {/* Loading */}
       {loading && (
         <div className="flex items-center justify-center py-20">
-          <Loader2 className="h-8 w-8 animate-spin text-brand-500" />
+          <SpinnerIcon className="h-8 w-8" />
         </div>
       )}
 
@@ -473,7 +474,7 @@ export function RolesListPage() {
                       onClick={handleSaveRole}
                       disabled={savingRole || !editName.trim()}
                     >
-                      {savingRole && <Loader2 className="h-3.5 w-3.5 animate-spin" />}
+                      {savingRole && <SpinnerIcon className="h-3.5 w-3.5" />}
                       {savingRole ? "Saving…" : "Save"}
                     </Button>
                   </div>
@@ -484,7 +485,7 @@ export function RolesListPage() {
 
           {detailLoading && (
             <div className="flex items-center justify-center py-12">
-              <Loader2 className="h-6 w-6 animate-spin text-brand-500" />
+              <SpinnerIcon className="h-6 w-6" />
             </div>
           )}
 
@@ -580,7 +581,7 @@ export function RolesListPage() {
 
                     {permLoading && (
                       <div className="flex items-center justify-center py-10">
-                        <Loader2 className="h-6 w-6 animate-spin text-brand-500" />
+                        <SpinnerIcon className="h-6 w-6" />
                       </div>
                     )}
 
@@ -677,7 +678,7 @@ export function RolesListPage() {
                         onClick={handleSavePermissions}
                         disabled={savingPermissions}
                       >
-                        {savingPermissions && <Loader2 className="h-3.5 w-3.5 animate-spin" />}
+                        {savingPermissions && <SpinnerIcon className="h-3.5 w-3.5" />}
                         {savingPermissions ? "Saving…" : "Save Permissions"}
                       </Button>
                     </div>
diff --git a/src/pages/team/TeamManagementPage.tsx b/src/pages/team/TeamManagementPage.tsx
index 8839c5b..4682118 100644
--- a/src/pages/team/TeamManagementPage.tsx
+++ b/src/pages/team/TeamManagementPage.tsx
@@ -1,10 +1,9 @@
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import {
   Search,
   Plus,
   ChevronDown,
-  SlidersHorizontal,
   ChevronLeft,
   ChevronRight,
   X,
@@ -80,44 +79,85 @@ function formatRoleLabel(role: string): string {
     .join(" ");
 }
 
+function normalizeFilterValue(value: string): string {
+  return value.trim().toLowerCase().replace(/\s+/g, "_");
+}
+
 export function TeamManagementPage() {
   const navigate = useNavigate();
   const [members, setMembers] = useState<TeamMember[]>([]);
   const [page, setPage] = useState(1);
   const [pageSize, setPageSize] = useState(5);
-  const [total, setTotal] = useState(0);
   const [search, setSearch] = useState("");
   const [roleFilter, setRoleFilter] = useState("");
   const [statusFilter, setStatusFilter] = useState("");
   const [toggledStatuses, setToggledStatuses] = useState<Record<number, boolean>>({});
   const [confirmDialog, setConfirmDialog] = useState<{ id: number; name: string; newStatus: string } | null>(null);
   const [updating, setUpdating] = useState(false);
+  const [loading, setLoading] = useState(false);
 
   useEffect(() => {
     const fetchMembers = async () => {
+      setLoading(true);
       try {
-        const res = await getTeamMembers(page, pageSize);
-        const data = res.data.data;
-        setMembers(data);
-        setTotal(res.data.metadata.total);
+        const batchSize = 100;
+        const firstRes = await getTeamMembers(1, batchSize);
+        const firstBatch = firstRes.data.data ?? [];
+        const totalPages = firstRes.data.metadata?.total_pages ?? 1;
+        let allMembers = firstBatch;
+        if (totalPages > 1) {
+          const restResponses = await Promise.all(
+            Array.from({ length: totalPages - 1 }, (_, idx) => getTeamMembers(idx + 2, batchSize)),
+          );
+          const restBatches = restResponses.flatMap((res) => res.data.data ?? []);
+          allMembers = [...firstBatch, ...restBatches];
+        }
+        setMembers(allMembers);
 
         const initialStatuses: Record<number, boolean> = {};
-        data.forEach((m) => {
+        allMembers.forEach((m) => {
           initialStatuses[m.id] = m.status === "active";
         });
         setToggledStatuses((prev) => ({ ...prev, ...initialStatuses }));
       } catch (error) {
         console.error("Failed to fetch team members:", error);
         setMembers([]);
-        setTotal(0);
+      } finally {
+        setLoading(false);
       }
     };
 
     fetchMembers();
-  }, [page, pageSize]);
+  }, []);
 
+  const filteredMembers = useMemo(() => {
+    return members.filter((member) => {
+      const q = search.trim().toLowerCase();
+      const matchesSearch =
+        !q ||
+        `${member.first_name} ${member.last_name}`.toLowerCase().includes(q) ||
+        member.email.toLowerCase().includes(q);
+      const roleValue = normalizeFilterValue(member.team_role || "");
+      const statusValue = normalizeFilterValue(member.status || "");
+      const matchesRole = !roleFilter || roleValue === normalizeFilterValue(roleFilter);
+      const matchesStatus = !statusFilter || statusValue === normalizeFilterValue(statusFilter);
+      return matchesSearch && matchesRole && matchesStatus;
+    });
+  }, [members, search, roleFilter, statusFilter]);
+
+  useEffect(() => {
+    setPage(1);
+  }, [search, roleFilter, statusFilter, pageSize]);
+
+  const total = filteredMembers.length;
   const pageCount = Math.max(1, Math.ceil(total / pageSize));
   const safePage = Math.min(page, pageCount);
+  const startEntry = total === 0 ? 0 : (safePage - 1) * pageSize + 1;
+  const endEntry = Math.min(safePage * pageSize, total);
+  const paginatedMembers = useMemo(() => {
+    const start = (safePage - 1) * pageSize;
+    return filteredMembers.slice(start, start + pageSize);
+  }, [filteredMembers, safePage, pageSize]);
 
   const handlePrev = () => safePage > 1 && setPage(safePage - 1);
   const handleNext = () => safePage < pageCount && setPage(safePage + 1);
@@ -152,6 +192,9 @@ export function TeamManagementPage() {
     setToggledStatuses((prev) => ({ ...prev, [id]: newStatus === "active" }));
     try {
       await updateTeamMemberStatus(id, newStatus);
+      setMembers((prev) =>
+        prev.map((member) => (member.id === id ? { ...member, status: newStatus } : member)),
+      );
       toast.success(
         `${name || "Team member"} ${newStatus === "active" ? "activated" : "deactivated"} successfully`,
       );
@@ -230,13 +273,9 @@ export function TeamManagementPage() {
           <ChevronDown className="absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 text-grayScale-400 pointer-events-none" />
         </div>
 
-        <Button variant="outline" className="shrink-0">
-          <SlidersHorizontal className="h-4 w-4" />
-          More Filters
-        </Button>
       </div>
 
-      <div className="rounded-lg border bg-white">
+      <div className="rounded-xl border bg-white">
         <Table>
           <TableHeader>
             <TableRow>
@@ -250,21 +289,30 @@ export function TeamManagementPage() {
           </TableHeader>
 
           <TableBody>
-            {members.length === 0 ? (
+            {loading ? (
               <TableRow>
-                <TableCell colSpan={6} className="text-center text-grayScale-400">
-                  No team members found
+                <TableCell colSpan={6} className="py-12 text-center text-sm text-grayScale-400">
+                  Loading team members...
+                </TableCell>
+              </TableRow>
+            ) : filteredMembers.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={6} className="py-12 text-center">
+                  <div className="flex flex-col items-center gap-2">
+                    <p className="text-sm font-medium text-grayScale-500">No team members found</p>
+                    <p className="text-xs text-grayScale-400">Try adjusting your filters</p>
+                  </div>
                 </TableCell>
               </TableRow>
             ) : (
-              members.map((member) => {
+              paginatedMembers.map((member) => {
                 const initials = `${member.first_name?.[0] ?? ""}${member.last_name?.[0] ?? ""}`.toUpperCase();
                 const isActive = toggledStatuses[member.id] ?? false;
 
                 return (
                   <TableRow
                     key={member.id}
-                    className="cursor-pointer hover:bg-grayScale-50"
+                    className="group cursor-pointer"
                     onClick={() => navigate(`/team/${member.id}`)}
                   >
                     <TableCell>
@@ -348,7 +396,14 @@ export function TeamManagementPage() {
 
         <div className="flex flex-wrap items-center justify-between gap-3 border-t px-4 py-3 text-sm text-grayScale-500">
           <div className="flex items-center gap-2">
-            <span>Row Per Page</span>
+            <span>Showing</span>
+            <span className="font-medium text-grayScale-600">
+              {startEntry}-{endEntry}
+            </span>
+            <span>of</span>
+            <span className="font-medium text-grayScale-600">{total}</span>
+            <span className="mr-4">entries</span>
+            <span className="border-l pl-4">Rows per page</span>
             <div className="relative">
               <select
                 value={pageSize}
@@ -366,7 +421,6 @@ export function TeamManagementPage() {
               </select>
               <ChevronDown className="absolute right-2 top-1/2 h-3 w-3 -translate-y-1/2 text-grayScale-400 pointer-events-none" />
             </div>
-            <span>Entries</span>
           </div>
 
           <div className="flex items-center gap-1">
diff --git a/src/pages/user-log/UserLogPage.tsx b/src/pages/user-log/UserLogPage.tsx
index 96f110f..639a4f5 100644
--- a/src/pages/user-log/UserLogPage.tsx
+++ b/src/pages/user-log/UserLogPage.tsx
@@ -38,6 +38,7 @@ import {
 import { cn } from "../../lib/utils";
 import { getActivityLogs, getActivityLogById } from "../../api/activity-logs.api";
 import type { ActivityLog, ActivityLogFilters } from "../../types/activity-log.types";
+import { SpinnerIcon } from "../../components/ui/spinner-icon";
 
 // ── Action type configuration ──────────────────────────────────────
 const ACTION_TYPES = [
@@ -250,7 +251,7 @@ export function UserLogPage() {
             fetchLogs();
           }}
         >
-          <RefreshCw className={cn("h-4 w-4", loading && "animate-spin")} />
+          {loading ? <SpinnerIcon className="h-4 w-4" /> : <RefreshCw className="h-4 w-4" />}
           Refresh
         </Button>
       </div>
@@ -566,7 +567,7 @@ export function UserLogPage() {
 
           {detailLoading ? (
             <div className="flex items-center justify-center py-8">
-              <RefreshCw className="h-6 w-6 animate-spin text-grayScale-300" />
+              <SpinnerIcon className="h-6 w-6" />
             </div>
           ) : selectedLog ? (
             <div className="space-y-4">
diff --git a/src/pages/user-management/DeletionRequestsPage.tsx b/src/pages/user-management/DeletionRequestsPage.tsx
new file mode 100644
index 0000000..2e08b1c
--- /dev/null
+++ b/src/pages/user-management/DeletionRequestsPage.tsx
@@ -0,0 +1,642 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react"
+import { CalendarDays, ChevronDown, ChevronLeft, ChevronRight, Search, SlidersHorizontal } from "lucide-react"
+import spinnerSrc from "../../assets/Circular-indeterminate progress indicator.svg"
+import { Card, CardContent, CardHeader, CardTitle } from "../../components/ui/card"
+import { Input } from "../../components/ui/input"
+import { Badge } from "../../components/ui/badge"
+import { Button } from "../../components/ui/button"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../../components/ui/table"
+import { getDeletionRequests } from "../../api/users.api"
+import { getRoles } from "../../api/rbac.api"
+import { cn } from "../../lib/utils"
+import type {
+  DeletionRequest,
+  DeletionState,
+  DeletionUserStatus,
+  GetDeletionRequestsParams,
+} from "../../types/user.types"
+import type { Role } from "../../types/rbac.types"
+import { mapDeletionRequestApiItem } from "../../types/user.types"
+
+const stateBadge: Record<string, string> = {
+  PENDING: "bg-amber-100 text-amber-700",
+  DUE: "bg-brand-100 text-brand-600",
+  CANCELLED: "bg-grayScale-200 text-grayScale-600",
+}
+
+const DATE_PLACEHOLDER = "DD-MM-YYYY HH:mm"
+const STATUS_OPTIONS: DeletionUserStatus[] = ["ACTIVE", "PENDING", "SUSPENDED", "DEACTIVATED"]
+const STATE_OPTIONS: DeletionState[] = ["PENDING", "DUE", "CANCELLED"]
+
+type DateTimeFilterInputProps = {
+  value: string
+  onChange: (value: string) => void
+  placeholder: string
+}
+
+function DateTimeFilterInput({ value, onChange, placeholder }: DateTimeFilterInputProps) {
+  return (
+    <div className="relative">
+      <CalendarDays className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-grayScale-300" />
+      <Input
+        type="datetime-local"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        onClick={(e) => {
+          // Opens native date-time picker immediately on supported browsers.
+          (e.currentTarget as HTMLInputElement).showPicker?.()
+        }}
+        aria-label={placeholder}
+        className="h-11 rounded-xl border-grayScale-200 bg-white pl-10 pr-3 text-sm shadow-sm transition focus-visible:border-brand-400 focus-visible:ring-brand-200 [&::-webkit-calendar-picker-indicator]:cursor-pointer [&::-webkit-calendar-picker-indicator]:opacity-70 hover:[&::-webkit-calendar-picker-indicator]:opacity-100"
+      />
+    </div>
+  )
+}
+
+export function DeletionRequestsPage() {
+  const [items, setItems] = useState<DeletionRequest[]>([])
+  const [total, setTotal] = useState(0)
+  const [page, setPage] = useState(1)
+  const [pageSize, setPageSize] = useState(10)
+  const [loading, setLoading] = useState(false)
+
+  const [query, setQuery] = useState("")
+  const [role, setRole] = useState("")
+  const [roleOptions, setRoleOptions] = useState<string[]>([])
+  const [rolesLoading, setRolesLoading] = useState(false)
+  const [roleMenuOpen, setRoleMenuOpen] = useState(false)
+  const [roleSearch, setRoleSearch] = useState("")
+  const [statusMenuOpen, setStatusMenuOpen] = useState(false)
+  const [stateMenuOpen, setStateMenuOpen] = useState(false)
+  const [status, setStatus] = useState<DeletionUserStatus | "">("")
+  const [state, setState] = useState<DeletionState | "">("")
+  const [requestedAfter, setRequestedAfter] = useState("")
+  const [requestedBefore, setRequestedBefore] = useState("")
+  const [scheduledAfter, setScheduledAfter] = useState("")
+  const [scheduledBefore, setScheduledBefore] = useState("")
+  const roleMenuRef = useRef<HTMLDivElement | null>(null)
+  const statusMenuRef = useRef<HTMLDivElement | null>(null)
+  const stateMenuRef = useRef<HTMLDivElement | null>(null)
+
+  const toRfc3339 = (value: string) => {
+    if (!value) return undefined
+    const normalized = value.includes("T") ? value : value.replace(" ", "T")
+    const date = new Date(normalized)
+    return Number.isNaN(date.getTime()) ? undefined : date.toISOString()
+  }
+
+  const fetchData = useCallback(async () => {
+    setLoading(true)
+    try {
+      const params: GetDeletionRequestsParams = {
+        query: query || undefined,
+        role: role || undefined,
+        status: status || undefined,
+        state: state || undefined,
+        requested_after: toRfc3339(requestedAfter),
+        requested_before: toRfc3339(requestedBefore),
+        scheduled_after: toRfc3339(scheduledAfter),
+        scheduled_before: toRfc3339(scheduledBefore),
+        page,
+        page_size: pageSize,
+      }
+      const res = await getDeletionRequests(params)
+      const rows = res.data?.data?.items ?? []
+      setItems(rows.map(mapDeletionRequestApiItem))
+      setTotal(res.data?.data?.total ?? 0)
+    } catch (error) {
+      console.error("Failed to fetch deletion requests:", error)
+      setItems([])
+      setTotal(0)
+    } finally {
+      setLoading(false)
+    }
+  }, [
+    query,
+    role,
+    status,
+    state,
+    requestedAfter,
+    requestedBefore,
+    scheduledAfter,
+    scheduledBefore,
+    page,
+    pageSize,
+  ])
+
+  useEffect(() => {
+    fetchData()
+  }, [fetchData])
+
+  useEffect(() => {
+    const fetchRoles = async () => {
+      setRolesLoading(true)
+      try {
+        const pageSize = 50
+        const firstRes = await getRoles({ page: 1, page_size: pageSize })
+        const firstBatch = firstRes.data?.data?.roles ?? []
+        const total = firstRes.data?.data?.total ?? firstBatch.length
+        const totalPages = Math.max(1, Math.ceil(total / pageSize))
+
+        let allRoles: Role[] = firstBatch
+        if (totalPages > 1) {
+          const requests: Array<ReturnType<typeof getRoles>> = []
+          for (let currentPage = 2; currentPage <= totalPages; currentPage += 1) {
+            requests.push(getRoles({ page: currentPage, page_size: pageSize }))
+          }
+          const remaining = await Promise.all(requests)
+          allRoles = [...firstBatch, ...remaining.flatMap((r) => r.data?.data?.roles ?? [])]
+        }
+
+        const uniqueNames = Array.from(
+          new Set(
+            allRoles
+              .map((r) => r.name?.trim())
+              .filter((name): name is string => Boolean(name)),
+          ),
+        ).sort((a, b) => a.localeCompare(b))
+        setRoleOptions(uniqueNames)
+      } catch (error) {
+        console.error("Failed to fetch role options:", error)
+        setRoleOptions([])
+      } finally {
+        setRolesLoading(false)
+      }
+    }
+
+    fetchRoles()
+  }, [])
+
+  useEffect(() => {
+    if (!roleMenuOpen && !statusMenuOpen && !stateMenuOpen) return
+    const handleOutsideClick = (event: MouseEvent) => {
+      const target = event.target as Node
+      if (roleMenuRef.current && !roleMenuRef.current.contains(target)) {
+        setRoleMenuOpen(false)
+      }
+      if (statusMenuRef.current && !statusMenuRef.current.contains(target)) {
+        setStatusMenuOpen(false)
+      }
+      if (stateMenuRef.current && !stateMenuRef.current.contains(target)) {
+        setStateMenuOpen(false)
+      }
+    }
+    document.addEventListener("mousedown", handleOutsideClick)
+    return () => {
+      document.removeEventListener("mousedown", handleOutsideClick)
+    }
+  }, [roleMenuOpen, statusMenuOpen, stateMenuOpen])
+
+  const filteredRoleOptions = useMemo(() => {
+    const q = roleSearch.trim().toLowerCase()
+    if (!q) return roleOptions
+    return roleOptions.filter((option) => option.toLowerCase().includes(q))
+  }, [roleOptions, roleSearch])
+
+  const totalPages = useMemo(() => Math.max(1, Math.ceil(total / pageSize)), [total, pageSize])
+  const safePage = Math.min(page, totalPages)
+  const startEntry = total === 0 ? 0 : (safePage - 1) * pageSize + 1
+  const endEntry = Math.min(safePage * pageSize, total)
+
+  const getPageNumbers = () => {
+    const pages: (number | string)[] = []
+    if (totalPages <= 7) {
+      for (let i = 1; i <= totalPages; i++) pages.push(i)
+    } else {
+      pages.push(1, 2, 3)
+      if (safePage > 4) pages.push("...")
+      if (safePage > 3 && safePage < totalPages - 2) pages.push(safePage)
+      if (safePage < totalPages - 3) pages.push("...")
+      pages.push(totalPages)
+    }
+    return pages
+  }
+
+  const resetFilters = () => {
+    setQuery("")
+    setRole("")
+    setStatus("")
+    setState("")
+    setRequestedAfter("")
+    setRequestedBefore("")
+    setScheduledAfter("")
+    setScheduledBefore("")
+    setRoleSearch("")
+    setRoleMenuOpen(false)
+    setStatusMenuOpen(false)
+    setStateMenuOpen(false)
+    setPage(1)
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold text-grayScale-600">Deletion Requests</h1>
+        <p className="mt-1 text-sm text-grayScale-400">
+          Review and monitor account deletion requests from users.
+        </p>
+      </div>
+
+      <Card className="overflow-visible rounded-2xl border border-brand-100/70 bg-white shadow-soft">
+        <CardHeader className="border-b border-brand-100/70 bg-gradient-to-r from-brand-100/50 via-white to-brand-100/25 pb-4">
+          <CardTitle className="flex items-center gap-2 text-base font-semibold text-grayScale-700">
+            <SlidersHorizontal className="h-4 w-4 text-brand-600" />
+            Filters
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-5 bg-gradient-to-b from-white to-brand-100/10 pt-5">
+          <div className="grid grid-cols-1 gap-3 lg:grid-cols-4">
+            <div className="relative lg:col-span-2">
+              <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-grayScale-300" />
+              <Input
+                value={query}
+                onChange={(e) => {
+                  setQuery(e.target.value)
+                  setPage(1)
+                }}
+                placeholder="Search name, email, phone..."
+                className="h-11 rounded-xl border-grayScale-200 bg-white pl-10 shadow-sm transition focus-visible:border-brand-400 focus-visible:ring-brand-200"
+              />
+            </div>
+            <div className="relative" ref={roleMenuRef}>
+              <button
+                type="button"
+                className="flex h-11 w-full items-center justify-between rounded-xl border border-grayScale-200 bg-white px-3 text-left text-sm text-grayScale-600 shadow-sm transition hover:bg-grayScale-50 focus:outline-none focus-visible:border-brand-400 focus-visible:ring-2 focus-visible:ring-brand-200"
+                onClick={() => {
+                  setRoleMenuOpen((prev) => !prev)
+                  setStatusMenuOpen(false)
+                  setStateMenuOpen(false)
+                  if (!roleMenuOpen) setRoleSearch("")
+                }}
+              >
+                <span>{rolesLoading ? "Loading roles..." : role || "Role"}</span>
+                <ChevronDown className="h-4 w-4 text-grayScale-400" />
+              </button>
+              {roleMenuOpen ? (
+                <div className="absolute z-30 mt-1 w-full rounded-xl border border-grayScale-200 bg-white p-2 shadow-lg">
+                  <div className="relative mb-2">
+                    <Search className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-grayScale-300" />
+                    <Input
+                      value={roleSearch}
+                      onChange={(e) => setRoleSearch(e.target.value)}
+                      placeholder="Search role..."
+                      className="h-9 rounded-lg border-grayScale-200 pl-8 text-sm"
+                    />
+                  </div>
+                  <div className="max-h-56 space-y-1 overflow-auto">
+                    <button
+                      type="button"
+                      className={cn(
+                        "w-full rounded-md px-2 py-2 text-left text-sm transition",
+                        role === ""
+                          ? "bg-brand-100/50 text-brand-700"
+                          : "text-grayScale-600 hover:bg-grayScale-100",
+                      )}
+                      onClick={() => {
+                        setRole("")
+                        setPage(1)
+                        setRoleMenuOpen(false)
+                      }}
+                    >
+                      All Roles
+                    </button>
+                    {filteredRoleOptions.map((roleName) => (
+                      <button
+                        key={roleName}
+                        type="button"
+                        className={cn(
+                          "w-full rounded-md px-2 py-2 text-left text-sm transition",
+                          role === roleName
+                            ? "bg-brand-100/50 text-brand-700"
+                            : "text-grayScale-600 hover:bg-grayScale-100",
+                        )}
+                        onClick={() => {
+                          setRole(roleName)
+                          setPage(1)
+                          setRoleMenuOpen(false)
+                        }}
+                      >
+                        {roleName}
+                      </button>
+                    ))}
+                    {!rolesLoading && filteredRoleOptions.length === 0 ? (
+                      <p className="px-2 py-1.5 text-sm text-grayScale-400">No roles found</p>
+                    ) : null}
+                  </div>
+                </div>
+              ) : null}
+            </div>
+            <div className="relative" ref={statusMenuRef}>
+              <button
+                type="button"
+                className="flex h-11 w-full items-center justify-between rounded-xl border border-grayScale-200 bg-white px-3 text-left text-sm text-grayScale-600 shadow-sm transition hover:bg-grayScale-50 focus:outline-none focus-visible:border-brand-400 focus-visible:ring-2 focus-visible:ring-brand-200"
+                onClick={() => {
+                  setStatusMenuOpen((prev) => !prev)
+                  setStateMenuOpen(false)
+                  setRoleMenuOpen(false)
+                }}
+              >
+                <span>{status || "All Statuses"}</span>
+                <ChevronDown className="h-4 w-4 text-grayScale-400" />
+              </button>
+              {statusMenuOpen ? (
+                <div className="absolute z-30 mt-1 w-full rounded-xl border border-grayScale-200 bg-white p-1.5 shadow-lg">
+                  <button
+                    type="button"
+                    className={cn(
+                      "w-full rounded-lg px-2.5 py-2 text-left text-sm transition",
+                      status === ""
+                        ? "bg-brand-100/50 text-brand-700"
+                        : "text-grayScale-600 hover:bg-grayScale-100",
+                    )}
+                    onClick={() => {
+                      setStatus("")
+                      setPage(1)
+                      setStatusMenuOpen(false)
+                    }}
+                  >
+                    All Statuses
+                  </button>
+                  {STATUS_OPTIONS.map((statusOption) => (
+                    <button
+                      key={statusOption}
+                      type="button"
+                      className={cn(
+                        "w-full rounded-lg px-2.5 py-2 text-left text-sm transition",
+                        status === statusOption
+                          ? "bg-brand-100/50 text-brand-700"
+                          : "text-grayScale-600 hover:bg-grayScale-100",
+                      )}
+                      onClick={() => {
+                        setStatus(statusOption)
+                        setPage(1)
+                        setStatusMenuOpen(false)
+                      }}
+                    >
+                      {statusOption}
+                    </button>
+                  ))}
+                </div>
+              ) : null}
+            </div>
+          </div>
+
+          <div className="grid grid-cols-1 gap-3 lg:grid-cols-4">
+            <div className="relative" ref={stateMenuRef}>
+              <button
+                type="button"
+                className="flex h-11 w-full items-center justify-between rounded-xl border border-grayScale-200 bg-white px-3 text-left text-sm text-grayScale-600 shadow-sm transition hover:bg-grayScale-50 focus:outline-none focus-visible:border-brand-400 focus-visible:ring-2 focus-visible:ring-brand-200"
+                onClick={() => {
+                  setStateMenuOpen((prev) => !prev)
+                  setStatusMenuOpen(false)
+                  setRoleMenuOpen(false)
+                }}
+              >
+                <span>{state || "All States"}</span>
+                <ChevronDown className="h-4 w-4 text-grayScale-400" />
+              </button>
+              {stateMenuOpen ? (
+                <div className="absolute z-30 mt-1 w-full rounded-xl border border-grayScale-200 bg-white p-1.5 shadow-lg">
+                  <button
+                    type="button"
+                    className={cn(
+                      "w-full rounded-lg px-2.5 py-2 text-left text-sm transition",
+                      state === ""
+                        ? "bg-brand-100/50 text-brand-700"
+                        : "text-grayScale-600 hover:bg-grayScale-100",
+                    )}
+                    onClick={() => {
+                      setState("")
+                      setPage(1)
+                      setStateMenuOpen(false)
+                    }}
+                  >
+                    All States
+                  </button>
+                  {STATE_OPTIONS.map((stateOption) => (
+                    <button
+                      key={stateOption}
+                      type="button"
+                      className={cn(
+                        "w-full rounded-lg px-2.5 py-2 text-left text-sm transition",
+                        state === stateOption
+                          ? "bg-brand-100/50 text-brand-700"
+                          : "text-grayScale-600 hover:bg-grayScale-100",
+                      )}
+                      onClick={() => {
+                        setState(stateOption)
+                        setPage(1)
+                        setStateMenuOpen(false)
+                      }}
+                    >
+                      {stateOption}
+                    </button>
+                  ))}
+                </div>
+              ) : null}
+            </div>
+            <DateTimeFilterInput
+              value={requestedAfter}
+              onChange={(value) => {
+                setRequestedAfter(value)
+                setPage(1)
+              }}
+              placeholder={`Requested after (${DATE_PLACEHOLDER})`}
+            />
+            <DateTimeFilterInput
+              value={requestedBefore}
+              onChange={(value) => {
+                setRequestedBefore(value)
+                setPage(1)
+              }}
+              placeholder={`Requested before (${DATE_PLACEHOLDER})`}
+            />
+            <DateTimeFilterInput
+              value={scheduledAfter}
+              onChange={(value) => {
+                setScheduledAfter(value)
+                setPage(1)
+              }}
+              placeholder={`Scheduled after (${DATE_PLACEHOLDER})`}
+            />
+          </div>
+
+          <div className="grid grid-cols-1 gap-3 lg:grid-cols-4">
+            <DateTimeFilterInput
+              value={scheduledBefore}
+              onChange={(value) => {
+                setScheduledBefore(value)
+                setPage(1)
+              }}
+              placeholder={`Scheduled before (${DATE_PLACEHOLDER})`}
+            />
+            <div className="flex justify-end lg:col-start-4 lg:col-span-1">
+              <Button
+                variant="outline"
+                className="h-11 rounded-xl border-brand-200 px-5 text-brand-700 hover:bg-brand-100/40"
+                onClick={resetFilters}
+              >
+                Clear Filters
+              </Button>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card className="shadow-soft">
+        <CardHeader className="border-b border-grayScale-200 pb-4">
+          <CardTitle className="text-base font-semibold text-grayScale-600">
+            Requests ({total})
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="pt-5">
+          <div className="rounded-xl border bg-white">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>User</TableHead>
+                  <TableHead>Role / Status</TableHead>
+                  <TableHead className="hidden md:table-cell">Requested At</TableHead>
+                  <TableHead className="hidden md:table-cell">Scheduled At</TableHead>
+                  <TableHead>Deletion State</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {loading ? (
+                  <TableRow>
+                    <TableCell colSpan={5} className="py-12 text-center">
+                      <div className="flex flex-col items-center gap-3">
+                        <img src={spinnerSrc} alt="" className="h-6 w-6 animate-spin" />
+                        <span className="text-sm text-grayScale-400">Loading requests...</span>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ) : items.length === 0 ? (
+                  <TableRow>
+                    <TableCell colSpan={5} className="py-12 text-center">
+                      <div className="flex flex-col items-center gap-3">
+                        <Search className="h-8 w-8 text-grayScale-200" />
+                        <div>
+                          <p className="text-sm font-medium text-grayScale-500">No deletion requests found</p>
+                          <p className="mt-1 text-xs text-grayScale-400">Try adjusting your filters</p>
+                        </div>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ) : (
+                  items.map((item, index) => (
+                    <TableRow key={`${item.user_id}-${index}`} className="group">
+                      <TableCell className="py-3.5">
+                        <p className="text-sm font-medium text-grayScale-700">
+                          {item.first_name} {item.last_name}
+                        </p>
+                        <p className="text-xs text-grayScale-500">{item.email}</p>
+                        <p className="text-xs text-grayScale-500">{item.phone_number || "—"}</p>
+                      </TableCell>
+                      <TableCell className="py-3.5">
+                        <p className="text-sm text-grayScale-700">{item.role || "—"}</p>
+                        <p className="text-xs text-grayScale-500">{item.status || "—"}</p>
+                      </TableCell>
+                      <TableCell className="hidden py-3.5 text-sm text-grayScale-600 md:table-cell">
+                        {item.deletion_requested_at || "—"}
+                      </TableCell>
+                      <TableCell className="hidden py-3.5 text-sm text-grayScale-600 md:table-cell">
+                        {item.deletion_scheduled_at || "—"}
+                      </TableCell>
+                      <TableCell className="py-3.5">
+                        <Badge className={stateBadge[item.deletion_state] || "bg-grayScale-200 text-grayScale-600"}>
+                          {item.deletion_state || "—"}
+                        </Badge>
+                      </TableCell>
+                    </TableRow>
+                  ))
+                )}
+              </TableBody>
+            </Table>
+
+            <div className="flex flex-wrap items-center justify-between gap-3 border-t px-4 py-3 text-sm text-grayScale-500">
+              <div className="flex items-center gap-2">
+                <span>Showing</span>
+                <span className="font-medium text-grayScale-600">
+                  {startEntry}-{endEntry}
+                </span>
+                <span>of</span>
+                <span className="font-medium text-grayScale-600">{total}</span>
+                <span className="mr-4">entries</span>
+                <span className="border-l pl-4">Rows per page</span>
+                <div className="relative">
+                  <select
+                    value={pageSize}
+                    onChange={(e) => {
+                      setPageSize(Number(e.target.value))
+                      setPage(1)
+                    }}
+                    className="h-8 appearance-none rounded-md border bg-white pl-2 pr-7 text-sm font-medium text-grayScale-600 focus:outline-none"
+                  >
+                    {[10, 20, 50, 100].map((size) => (
+                      <option key={size} value={size}>
+                        {size}
+                      </option>
+                    ))}
+                  </select>
+                  <ChevronDown className="pointer-events-none absolute right-2 top-1/2 h-3 w-3 -translate-y-1/2 text-grayScale-400" />
+                </div>
+              </div>
+
+              <div className="flex items-center gap-1">
+                <button
+                  onClick={() => safePage > 1 && setPage(safePage - 1)}
+                  disabled={safePage === 1}
+                  className={cn(
+                    "flex h-8 w-8 items-center justify-center rounded-md border bg-white text-grayScale-500",
+                    safePage === 1 && "cursor-not-allowed opacity-50",
+                  )}
+                >
+                  <ChevronLeft className="h-4 w-4" />
+                </button>
+                {getPageNumbers().map((n, idx) =>
+                  typeof n === "string" ? (
+                    <span key={`ellipsis-${idx}`} className="px-2 text-grayScale-400">
+                      ...
+                    </span>
+                  ) : (
+                    <button
+                      key={n}
+                      type="button"
+                      onClick={() => setPage(n)}
+                      className={cn(
+                        "h-8 w-8 rounded-md border text-sm font-medium",
+                        n === safePage
+                          ? "border-brand-500 bg-brand-500 text-white"
+                          : "bg-white text-grayScale-600 hover:bg-grayScale-50",
+                      )}
+                    >
+                      {n}
+                    </button>
+                  ),
+                )}
+                <button
+                  onClick={() => safePage < totalPages && setPage(safePage + 1)}
+                  disabled={safePage === totalPages}
+                  className={cn(
+                    "flex h-8 w-8 items-center justify-center rounded-md border bg-white text-grayScale-500",
+                    safePage === totalPages && "cursor-not-allowed opacity-50",
+                  )}
+                >
+                  <ChevronRight className="h-4 w-4" />
+                </button>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
diff --git a/src/pages/user-management/RegisterUserPage.tsx b/src/pages/user-management/RegisterUserPage.tsx
deleted file mode 100644
index feffc86..0000000
--- a/src/pages/user-management/RegisterUserPage.tsx
+++ /dev/null
@@ -1,180 +0,0 @@
-import { useState } from "react"
-import { ArrowLeft, FileText, Mail, Phone, Shield, User } from "lucide-react"
-import { useNavigate } from "react-router-dom"
-import { toast } from "sonner"
-import { Button } from "../../components/ui/button"
-import { Card } from "../../components/ui/card"
-import { Input } from "../../components/ui/input"
-import { Textarea } from "../../components/ui/textarea"
-import { Select } from "../../components/ui/select"
-import { createUser } from "../../api/users.api"
-
-export function RegisterUserPage() {
-  const navigate = useNavigate()
-
-  const [firstName, setFirstName] = useState("")
-  const [lastName, setLastName] = useState("")
-  const [email, setEmail] = useState("")
-  const [phone, setPhone] = useState("")
-  const [role, setRole] = useState("")
-  const [notes, setNotes] = useState("")
-  const [submitting, setSubmitting] = useState(false)
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
-    if (!firstName.trim() || !lastName.trim() || !email.trim() || !phone.trim() || !role) {
-      toast.error("Missing required fields", {
-        description: "Please fill in first name, last name, email, phone, and role.",
-      })
-      return
-    }
-
-    setSubmitting(true)
-    try {
-      await createUser({
-        first_name: firstName.trim(),
-        last_name: lastName.trim(),
-        email: email.trim(),
-        phone_number: phone.trim(),
-        role: role.toUpperCase(),
-        notes: notes.trim() || undefined,
-      })
-
-      toast.success("User registered", {
-        description: `${firstName} ${lastName} has been created successfully.`,
-      })
-
-      navigate("/users")
-    } catch (error: any) {
-      const message =
-        error?.response?.data?.message ||
-        "Failed to register user. Please check the details and try again."
-      toast.error("Registration failed", {
-        description: message,
-      })
-    } finally {
-      setSubmitting(false)
-    }
-  }
-
-  return (
-    <div className="space-y-6">
-      <div className="flex items-center gap-4">
-        <Button variant="ghost" size="icon" onClick={() => navigate("/users")} className="h-8 w-8">
-          <ArrowLeft className="h-4 w-4" />
-        </Button>
-        <div>
-          <h1 className="text-2xl font-bold text-grayScale-600">Register New User</h1>
-          <p className="text-sm text-grayScale-400">Add a new user to the system</p>
-        </div>
-      </div>
-
-      <Card className="mx-auto max-w-2xl p-6">
-        <form className="space-y-5" onSubmit={handleSubmit}>
-          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-            <div>
-              <label className="mb-2 flex items-center gap-1.5 text-sm font-medium text-grayScale-600">
-                <User className="h-4 w-4" />
-                First Name
-              </label>
-              <Input
-                placeholder="Enter first name"
-                required
-                value={firstName}
-                onChange={(e) => setFirstName(e.target.value)}
-              />
-            </div>
-            <div>
-              <label className="mb-2 flex items-center gap-1.5 text-sm font-medium text-grayScale-600">
-                <User className="h-4 w-4" />
-                Last Name
-              </label>
-              <Input
-                placeholder="Enter last name"
-                required
-                value={lastName}
-                onChange={(e) => setLastName(e.target.value)}
-              />
-            </div>
-          </div>
-
-          <div>
-            <label className="mb-2 flex items-center gap-1.5 text-sm font-medium text-grayScale-600">
-              <Mail className="h-4 w-4" />
-              Email
-            </label>
-            <Input
-              type="email"
-              placeholder="Enter email address"
-              required
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-            />
-          </div>
-
-          <div>
-            <label className="mb-2 flex items-center gap-1.5 text-sm font-medium text-grayScale-600">
-              <Phone className="h-4 w-4" />
-              Phone
-            </label>
-            <Input
-              type="tel"
-              placeholder="Enter phone number"
-              required
-              value={phone}
-              onChange={(e) => setPhone(e.target.value)}
-            />
-          </div>
-
-          <div>
-            <label className="mb-2 flex items-center gap-1.5 text-sm font-medium text-grayScale-600">
-              <Shield className="h-4 w-4" />
-              Role
-            </label>
-            <Select
-              required
-              value={role}
-              onChange={(e) => setRole(e.target.value)}
-            >
-              <option value="">Select role</option>
-              <option value="ADMIN">Admin</option>
-              <option value="USER">User</option>
-            </Select>
-          </div>
-
-          <div>
-            <label className="mb-2 flex items-center gap-1.5 text-sm font-medium text-grayScale-600">
-              <FileText className="h-4 w-4" />
-              Notes
-            </label>
-            <Textarea
-              placeholder="Enter any additional notes"
-              rows={3}
-              value={notes}
-              onChange={(e) => setNotes(e.target.value)}
-            />
-          </div>
-
-          <div className="flex flex-col-reverse gap-2 pt-2 sm:flex-row sm:justify-end">
-            <Button
-              type="button"
-              variant="outline"
-              className="w-full sm:w-auto"
-              onClick={() => navigate("/users")}
-              disabled={submitting}
-            >
-              Cancel
-            </Button>
-            <Button
-              type="submit"
-              className="w-full bg-brand-500 hover:bg-brand-600 sm:w-auto"
-              disabled={submitting}
-            >
-              {submitting ? "Registering..." : "Register User"}
-            </Button>
-          </div>
-        </form>
-      </Card>
-    </div>
-  )
-}
diff --git a/src/pages/user-management/UserDetailPage.tsx b/src/pages/user-management/UserDetailPage.tsx
index 5905c32..27c6465 100644
--- a/src/pages/user-management/UserDetailPage.tsx
+++ b/src/pages/user-management/UserDetailPage.tsx
@@ -39,6 +39,7 @@ import {
   TableRow,
 } from "../../components/ui/table";
 import { Select } from "../../components/ui/select";
+import { SpinnerIcon } from "../../components/ui/spinner-icon";
 import type { LearnerCourseProgressItem, LearnerCourseProgressSummary } from "../../types/progress.types";
 import type { Course } from "../../types/course.types";
 
@@ -475,7 +476,7 @@ export function UserDetailPage() {
 
               {!progressError && loadingProgress && (
                 <div className="flex items-center gap-2 rounded-lg border border-grayScale-200 bg-grayScale-100 px-3 py-2 text-xs text-grayScale-500">
-                  <RefreshCw className="h-3.5 w-3.5 animate-spin" />
+                  <SpinnerIcon className="h-3.5 w-3.5" />
                   Loading learner progress...
                 </div>
               )}
@@ -487,10 +488,10 @@ export function UserDetailPage() {
               )}
 
               {!progressError && !loadingProgress && progressItems.length > 0 && (
-                <div className="overflow-x-auto rounded-lg border border-grayScale-200">
+                <div className="overflow-x-auto rounded-xl border bg-white">
                   <Table>
                     <TableHeader>
-                      <TableRow className="bg-grayScale-100/70">
+                      <TableRow>
                         <TableHead>Course</TableHead>
                         <TableHead>Level</TableHead>
                         <TableHead>Status</TableHead>
diff --git a/src/pages/user-management/UserManagementDashboard.tsx b/src/pages/user-management/UserManagementDashboard.tsx
index 1023c28..12eb20e 100644
--- a/src/pages/user-management/UserManagementDashboard.tsx
+++ b/src/pages/user-management/UserManagementDashboard.tsx
@@ -2,15 +2,15 @@ import { useEffect, useState } from "react"
 import { Link } from "react-router-dom"
 import {
   Users,
-  UserPlus,
+  UserX,
   UserCheck,
   TrendingUp,
   ArrowRight,
   List,
   UsersRound,
-  Loader2,
 } from "lucide-react"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../../components/ui/card"
+import { SpinnerIcon } from "../../components/ui/spinner-icon"
 import { getDashboard } from "../../api/analytics.api"
 import type { DashboardUsers } from "../../types/analytics.types"
 
@@ -57,7 +57,7 @@ export function UserManagementDashboard() {
             <div className="min-w-0">
               <p className="text-sm font-medium text-white/80">Total Users</p>
               <p className="text-2xl font-bold text-white">
-                {statsLoading ? <Loader2 className="h-5 w-5 animate-spin text-white" /> : stats ? formatNum(stats.total_users) : "—"}
+                {statsLoading ? <SpinnerIcon className="h-5 w-5" /> : stats ? formatNum(stats.total_users) : "—"}
               </p>
             </div>
           </CardContent>
@@ -72,7 +72,7 @@ export function UserManagementDashboard() {
               <p className="text-sm font-medium text-white/80">Active Users</p>
               <p className="text-2xl font-bold text-white">
                 {statsLoading ? (
-                  <Loader2 className="h-5 w-5 animate-spin text-white" />
+                  <SpinnerIcon className="h-5 w-5" />
                 ) : activeUsers !== null ? (
                   formatNum(activeUsers)
                 ) : (
@@ -92,7 +92,7 @@ export function UserManagementDashboard() {
               <p className="text-sm font-medium text-white/80">New This Month</p>
               <p className="text-2xl font-bold text-white">
                 {statsLoading ? (
-                  <Loader2 className="h-5 w-5 animate-spin text-white" />
+                  <SpinnerIcon className="h-5 w-5" />
                 ) : stats ? (
                   formatNum(stats.new_month)
                 ) : (
@@ -108,22 +108,22 @@ export function UserManagementDashboard() {
       <div>
         <h2 className="mb-4 text-lg font-semibold text-grayScale-600">Quick Actions</h2>
         <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-          <Link to="/users/register" className="group">
+          <Link to="/users/deletion-requests" className="group">
             <Card className="h-full border border-grayScale-100 shadow-sm transition-all duration-200 group-hover:border-brand-200 group-hover:shadow-md">
               <CardHeader className="pb-3">
                 <div className="mb-3 grid h-11 w-11 place-items-center rounded-lg bg-brand-100 text-brand-600 transition-colors group-hover:bg-brand-500 group-hover:text-white">
-                  <UserPlus className="h-5 w-5" />
+                  <UserX className="h-5 w-5" />
                 </div>
                 <CardTitle className="text-base font-semibold text-grayScale-600">
-                  Register User
+                  Deletion Requests
                 </CardTitle>
                 <CardDescription className="text-sm text-grayScale-400">
-                  Add new users to the system with role assignment.
+                  Review account deletion requests and user deletion states.
                 </CardDescription>
               </CardHeader>
               <CardContent>
                 <span className="inline-flex items-center gap-1.5 text-sm font-medium text-brand-500 transition-colors group-hover:text-brand-600">
-                  Get started
+                  View requests
                   <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
                 </span>
               </CardContent>
diff --git a/src/pages/user-management/UsersListPage.tsx b/src/pages/user-management/UsersListPage.tsx
index 50697d5..4e7131d 100644
--- a/src/pages/user-management/UsersListPage.tsx
+++ b/src/pages/user-management/UsersListPage.tsx
@@ -1,4 +1,4 @@
-import { ChevronDown, ChevronLeft, ChevronRight, Search, Users, X } from "lucide-react"
+import { ChevronDown, ChevronLeft, ChevronRight, Search, UserCheck, Users, X } from "lucide-react"
 import { useEffect, useState } from "react"
 import { useNavigate } from "react-router-dom"
 import { Input } from "../../components/ui/input"
@@ -36,9 +36,11 @@ export function UsersListPage() {
   } | null>(null)
   const [roleFilter, setRoleFilter] = useState("")
   const [statusFilter, setStatusFilter] = useState("")
+  const [loading, setLoading] = useState(false)
 
   useEffect(() => {
     const fetchUsers = async () => {
+      setLoading(true)
       try {
         const res = await getUsers(
           page,
@@ -62,6 +64,8 @@ export function UsersListPage() {
         console.error("Failed to fetch users:", error)
         setUsers([])
         setTotal(0)
+      } finally {
+        setLoading(false)
       }
     }
 
@@ -93,6 +97,9 @@ export function UsersListPage() {
   }
 
   const allSelected = users.length > 0 && selectedIds.size === users.length
+  const startEntry = total === 0 ? 0 : (safePage - 1) * pageSize + 1
+  const endEntry = Math.min(safePage * pageSize, total)
+  const activeUsersOnPage = users.filter((u) => (u.status || "").toUpperCase() === "ACTIVE").length
 
   const getPageNumbers = () => {
     const pages: (number | string)[] = []
@@ -169,6 +176,37 @@ export function UsersListPage() {
         <p className="text-sm text-grayScale-400">View and manage all registered users.</p>
       </div>
 
+      {/* Stats cards (match UserLogPage approach) */}
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+        <div className="flex items-center gap-4 rounded-xl border bg-white p-4">
+          <div className="grid h-10 w-10 place-items-center rounded-lg bg-brand-100 text-brand-600">
+            <Users className="h-5 w-5" />
+          </div>
+          <div>
+            <p className="text-2xl font-bold text-grayScale-600">{total}</p>
+            <p className="text-xs text-grayScale-400">Total Users</p>
+          </div>
+        </div>
+        <div className="flex items-center gap-4 rounded-xl border bg-white p-4">
+          <div className="grid h-10 w-10 place-items-center rounded-lg bg-emerald-100 text-emerald-600">
+            <UserCheck className="h-5 w-5" />
+          </div>
+          <div>
+            <p className="text-2xl font-bold text-grayScale-600">{activeUsersOnPage}</p>
+            <p className="text-xs text-grayScale-400">Active In Current Page</p>
+          </div>
+        </div>
+        <div className="flex items-center gap-4 rounded-xl border bg-white p-4">
+          <div className="grid h-10 w-10 place-items-center rounded-lg bg-amber-100 text-amber-600">
+            <Search className="h-5 w-5" />
+          </div>
+          <div>
+            <p className="text-2xl font-bold text-grayScale-600">{users.length}</p>
+            <p className="text-xs text-grayScale-400">Showing Results</p>
+          </div>
+        </div>
+      </div>
+
       <div className="bg-white rounded-xl border">
         {/* Search & Filters */}
         <div className="p-4 border-b">
@@ -238,7 +276,13 @@ export function UsersListPage() {
           </TableHeader>
 
           <TableBody>
-            {users.length === 0 ? (
+            {loading ? (
+              <TableRow>
+                <TableCell colSpan={7} className="py-12 text-center">
+                  <p className="text-sm text-grayScale-400">Loading users...</p>
+                </TableCell>
+              </TableRow>
+            ) : users.length === 0 ? (
               <TableRow>
                 <TableCell colSpan={7} className="py-16 text-center">
                   <div className="flex flex-col items-center gap-3">
@@ -259,7 +303,7 @@ export function UsersListPage() {
                 return (
                   <TableRow
                     key={u.id}
-                    className="cursor-pointer hover:bg-grayScale-50"
+                    className="group cursor-pointer"
                     onClick={() => handleRowClick(u.id)}
                   >
                     <TableCell onClick={(e) => e.stopPropagation()}>
@@ -318,9 +362,16 @@ export function UsersListPage() {
         </Table>
 
         {/* Pagination */}
-        <div className="flex flex-col items-center gap-3 border-t px-4 py-3 text-sm text-grayScale-500 sm:flex-row sm:justify-between">
+        <div className="flex flex-wrap items-center justify-between gap-3 border-t px-4 py-3 text-sm text-grayScale-500">
           <div className="flex items-center gap-2">
-            <span>Row Per Page</span>
+            <span>Showing</span>
+            <span className="font-medium text-grayScale-600">
+              {startEntry}-{endEntry}
+            </span>
+            <span>of</span>
+            <span className="font-medium text-grayScale-600">{total}</span>
+            <span className="mr-4">entries</span>
+            <span className="border-l pl-4">Rows per page</span>
             <div className="relative">
               <select
                 value={pageSize}
@@ -338,7 +389,6 @@ export function UsersListPage() {
               </select>
               <ChevronDown className="absolute right-2 top-1/2 h-3 w-3 -translate-y-1/2 text-grayScale-400 pointer-events-none" />
             </div>
-            <span>Entries</span>
           </div>
 
           <div className="flex items-center gap-1">
diff --git a/src/types/course.types.ts b/src/types/course.types.ts
index 16b630b..3536177 100644
--- a/src/types/course.types.ts
+++ b/src/types/course.types.ts
@@ -260,6 +260,21 @@ export interface CreateSubCourseVideoRequest {
   video_url: string
 }
 
+export type VideoVisibility = "PUBLISHED" | "DRAFT" | "PRIVATE" | "UNLISTED" | string
+export type VideoStatus = "PUBLISHED" | "DRAFT" | "ARCHIVED" | string
+
+export interface CreateCourseVideoRequest {
+  sub_course_id: number
+  title: string
+  description: string
+  video_url: string
+  duration: number
+  resolution?: string
+  visibility?: VideoVisibility
+  display_order?: number
+  status?: VideoStatus
+}
+
 export interface CreateVimeoVideoRequest {
   sub_course_id: number
   title: string
@@ -484,6 +499,7 @@ export interface CreateQuestionRequest {
   tips?: string
   explanation?: string
   status?: string
+  image_url?: string
   options?: QuestionOption[]
   voice_prompt?: string
   sample_answer_voice_prompt?: string
@@ -518,6 +534,7 @@ export interface QuestionDetail {
   short_answers?: string[] | QuestionShortAnswer[]
   tips?: string | null
   explanation?: string | null
+  image_url?: string | null
   voice_prompt?: string | null
   sample_answer_voice_prompt?: string | null
   audio_correct_answer_text?: string | null
diff --git a/src/types/team.types.ts b/src/types/team.types.ts
index dbd2820..0d62e35 100644
--- a/src/types/team.types.ts
+++ b/src/types/team.types.ts
@@ -30,6 +30,22 @@ export interface CreateTeamMemberRequest {
   bio?: string
 }
 
+export interface UpdateTeamMemberRequest {
+  bio?: string
+  department?: string
+  emergency_contact?: string
+  employment_type?: string
+  first_name?: string
+  hire_date?: string
+  job_title?: string
+  last_name?: string
+  permissions?: string[]
+  phone_number?: string
+  profile_picture_url?: string
+  team_role?: string
+  work_phone?: string
+}
+
 export interface TeamMembersMetadata {
   total: number
   total_pages: number
diff --git a/src/types/user.types.ts b/src/types/user.types.ts
index 51463e2..3f56f1f 100644
--- a/src/types/user.types.ts
+++ b/src/types/user.types.ts
@@ -146,3 +146,85 @@ export interface UpdateProfileRequest {
   profile_picture_url?: string
   preferred_language?: string
 }
+
+export type DeletionUserStatus = "ACTIVE" | "PENDING" | "SUSPENDED" | "DEACTIVATED"
+export type DeletionState = "PENDING" | "DUE" | "CANCELLED"
+
+export interface DeletionRequestApiItem {
+  UserID?: number
+  FirstName?: string
+  LastName?: string
+  Email?: string
+  PhoneNumber?: string
+  Role?: string
+  Status?: DeletionUserStatus | string
+  DeletionRequestedAt?: string | null
+  DeletionScheduledAt?: string | null
+  DeletionCancelledAt?: string | null
+  DeletionState?: DeletionState | string
+
+  user_id?: number
+  first_name?: string
+  last_name?: string
+  email?: string
+  phone_number?: string
+  role?: string
+  status?: DeletionUserStatus | string
+  deletion_requested_at?: string | null
+  deletion_scheduled_at?: string | null
+  deletion_cancelled_at?: string | null
+  deletion_state?: DeletionState | string
+}
+
+export interface DeletionRequest {
+  user_id: number
+  first_name: string
+  last_name: string
+  email: string
+  phone_number: string
+  role: string
+  status: string
+  deletion_requested_at: string | null
+  deletion_scheduled_at: string | null
+  deletion_cancelled_at: string | null
+  deletion_state: string
+}
+
+export interface GetDeletionRequestsParams {
+  query?: string
+  role?: string
+  status?: DeletionUserStatus
+  state?: DeletionState
+  requested_before?: string
+  requested_after?: string
+  scheduled_before?: string
+  scheduled_after?: string
+  page?: number
+  page_size?: number
+}
+
+export interface GetDeletionRequestsResponse {
+  status: string
+  message: string
+  data: {
+    items: DeletionRequestApiItem[]
+    total: number
+    page: number
+    page_size: number
+  }
+  timestamp: string
+}
+
+export const mapDeletionRequestApiItem = (item: DeletionRequestApiItem): DeletionRequest => ({
+  user_id: item.user_id ?? item.UserID ?? 0,
+  first_name: item.first_name ?? item.FirstName ?? "",
+  last_name: item.last_name ?? item.LastName ?? "",
+  email: item.email ?? item.Email ?? "",
+  phone_number: item.phone_number ?? item.PhoneNumber ?? "",
+  role: item.role ?? item.Role ?? "",
+  status: item.status ?? item.Status ?? "",
+  deletion_requested_at: item.deletion_requested_at ?? item.DeletionRequestedAt ?? null,
+  deletion_scheduled_at: item.deletion_scheduled_at ?? item.DeletionScheduledAt ?? null,
+  deletion_cancelled_at: item.deletion_cancelled_at ?? item.DeletionCancelledAt ?? null,
+  deletion_state: item.deletion_state ?? item.DeletionState ?? "",
+})