From 848e3b8f026c1c8ebe3036039a94b7574de26c9c Mon Sep 17 00:00:00 2001
From: Vy Ngo Chi <ncv.ngovy@gmail.com>
Date: Wed, 26 Aug 2026 16:06:04 +0700
Subject: [PATCH] feat: implement tutor profile editor system and add messages
 screen UI

---
 apps/sale/app/tutor/profile/edit/loading.tsx  |   5 +
 .../messages/components/ChatSidebar.tsx       |   2 +-
 .../messages/components/MessagesScreen.tsx    |   7 +-
 .../components/TutorApprovedPreview.tsx       |   6 +-
 .../components/tutor-approved.ui.tsx          | 139 ++----------
 .../components/AvailabilityListField.tsx      |  68 ++++++
 .../components/EditableProfileBlock.tsx       |  39 ++++
 .../components/ProfileBlockDialog.tsx         |  80 +++++++
 .../components/ProfileEditModalRouter.tsx     |  52 +++++
 .../components/ProfileEditorSkeleton.tsx      |  31 +++
 .../components/ProfileEditorToolbar.tsx       |  37 ++++
 .../components/ProfileField.tsx               | 113 ++++++++++
 .../components/RepeaterPrimitives.tsx         |  86 ++++++++
 .../components/SimpleListField.tsx            |  75 +++++++
 .../components/TeachingMethodListField.tsx    |  59 +++++
 .../components/TutorEvidenceEditorPreview.tsx |  45 ++++
 .../components/TutorProfileEditorScreen.tsx   |  77 +++++++
 .../components/TutorProfileSidebarPreview.tsx |  21 ++
 .../components/TutorVideoEditorPreview.tsx    |  19 ++
 .../modals/AcademicProfileEditDialog.tsx      |  84 ++++++++
 .../components/modals/BasicInfoEditDialog.tsx | 135 ++++++++++++
 .../components/modals/EvidenceEditDialog.tsx  | 203 ++++++++++++++++++
 .../modals/ExperienceEditDialog.tsx           |  95 ++++++++
 .../modals/IntroductionEditDialog.tsx         |  17 ++
 .../modals/TeachingMethodsEditDialog.tsx      |  17 ++
 .../components/modals/VideoEditDialog.tsx     | 108 ++++++++++
 .../constants/profile-editor.fixture.ts       |  44 ++++
 .../constants/profile-editor.options.ts       |  21 ++
 .../hooks/useTutorProfileInlineEditor.ts      |  68 ++++++
 .../features/tutor-profile-editor/index.ts    |   2 +
 .../schemas/profile-editor.schema.ts          |  84 ++++++++
 .../services/profile-editor.service.ts        |  25 +++
 .../types/profile-editor.types.ts             |  12 ++
 .../utils/file-preview.ts                     |  21 ++
 .../utils/profile-editor.mapper.ts            |  47 ++++
 .../tutor-profile/components/TutorHero.tsx    |   8 +-
 .../components/TutorOwnProfileScreen.tsx      |  91 ++++++++
 .../tutor-profile/types/mockTutorProfile.ts   |  15 +-
 .../features/auth/components/AuthLayout.tsx   |  16 --
 packages/core/configs/navigation.ts           |   8 +-
 packages/ui/components/layout/Header.tsx      |  17 +-
 41 files changed, 1941 insertions(+), 158 deletions(-)
 create mode 100644 apps/sale/app/tutor/profile/edit/loading.tsx
 create mode 100644 apps/sale/features/tutor-profile-editor/components/AvailabilityListField.tsx
 create mode 100644 apps/sale/features/tutor-profile-editor/components/EditableProfileBlock.tsx
 create mode 100644 apps/sale/features/tutor-profile-editor/components/ProfileBlockDialog.tsx
 create mode 100644 apps/sale/features/tutor-profile-editor/components/ProfileEditModalRouter.tsx
 create mode 100644 apps/sale/features/tutor-profile-editor/components/ProfileEditorSkeleton.tsx
 create mode 100644 apps/sale/features/tutor-profile-editor/components/ProfileEditorToolbar.tsx
 create mode 100644 apps/sale/features/tutor-profile-editor/components/ProfileField.tsx
 create mode 100644 apps/sale/features/tutor-profile-editor/components/RepeaterPrimitives.tsx
 create mode 100644 apps/sale/features/tutor-profile-editor/components/SimpleListField.tsx
 create mode 100644 apps/sale/features/tutor-profile-editor/components/TeachingMethodListField.tsx
 create mode 100644 apps/sale/features/tutor-profile-editor/components/TutorEvidenceEditorPreview.tsx
 create mode 100644 apps/sale/features/tutor-profile-editor/components/TutorProfileEditorScreen.tsx
 create mode 100644 apps/sale/features/tutor-profile-editor/components/TutorProfileSidebarPreview.tsx
 create mode 100644 apps/sale/features/tutor-profile-editor/components/TutorVideoEditorPreview.tsx
 create mode 100644 apps/sale/features/tutor-profile-editor/components/modals/AcademicProfileEditDialog.tsx
 create mode 100644 apps/sale/features/tutor-profile-editor/components/modals/BasicInfoEditDialog.tsx
 create mode 100644 apps/sale/features/tutor-profile-editor/components/modals/EvidenceEditDialog.tsx
 create mode 100644 apps/sale/features/tutor-profile-editor/components/modals/ExperienceEditDialog.tsx
 create mode 100644 apps/sale/features/tutor-profile-editor/components/modals/IntroductionEditDialog.tsx
 create mode 100644 apps/sale/features/tutor-profile-editor/components/modals/TeachingMethodsEditDialog.tsx
 create mode 100644 apps/sale/features/tutor-profile-editor/components/modals/VideoEditDialog.tsx
 create mode 100644 apps/sale/features/tutor-profile-editor/constants/profile-editor.fixture.ts
 create mode 100644 apps/sale/features/tutor-profile-editor/constants/profile-editor.options.ts
 create mode 100644 apps/sale/features/tutor-profile-editor/hooks/useTutorProfileInlineEditor.ts
 create mode 100644 apps/sale/features/tutor-profile-editor/index.ts
 create mode 100644 apps/sale/features/tutor-profile-editor/schemas/profile-editor.schema.ts
 create mode 100644 apps/sale/features/tutor-profile-editor/services/profile-editor.service.ts
 create mode 100644 apps/sale/features/tutor-profile-editor/types/profile-editor.types.ts
 create mode 100644 apps/sale/features/tutor-profile-editor/utils/file-preview.ts
 create mode 100644 apps/sale/features/tutor-profile-editor/utils/profile-editor.mapper.ts
 create mode 100644 apps/sale/features/tutor-profile/components/TutorOwnProfileScreen.tsx

diff --git a/apps/sale/app/tutor/profile/edit/loading.tsx b/apps/sale/app/tutor/profile/edit/loading.tsx
new file mode 100644
index 0000000..b475b4b
--- /dev/null
+++ b/apps/sale/app/tutor/profile/edit/loading.tsx
@@ -0,0 +1,5 @@
+import { ProfileEditorSkeleton } from "@/features/tutor-profile-editor";
+
+export default function Loading() {
+  return <ProfileEditorSkeleton />;
+}
diff --git a/apps/sale/features/messages/components/ChatSidebar.tsx b/apps/sale/features/messages/components/ChatSidebar.tsx
index 640796e..1c3593d 100644
--- a/apps/sale/features/messages/components/ChatSidebar.tsx
+++ b/apps/sale/features/messages/components/ChatSidebar.tsx
@@ -126,7 +126,7 @@ export function ChatSidebar() {
             className="text-sm tracking-tight text-[#280f91]"
             style={{ fontFamily: "var(--font-nunito-family)", fontWeight: 800 }}
           >
-            CỘNG ĐỒNG GIA SƯ
+            CỘNG ĐỒNG GIA SƯ BEEWISE
           </span>
         </div>
 
diff --git a/apps/sale/features/messages/components/MessagesScreen.tsx b/apps/sale/features/messages/components/MessagesScreen.tsx
index 8db88fb..a494977 100644
--- a/apps/sale/features/messages/components/MessagesScreen.tsx
+++ b/apps/sale/features/messages/components/MessagesScreen.tsx
@@ -22,9 +22,12 @@ export function MessagesScreen() {
             </div>
             <span
               className="text-xl tracking-tight text-[#280f91]"
-              style={{ fontFamily: "var(--font-nunito-family)", fontWeight: 800 }}
+              style={{
+                fontFamily: "var(--font-nunito-family)",
+                fontWeight: 800,
+              }}
             >
-              CỘNG ĐỒNG GIA SƯ
+              CỘNG ĐỒNG GIA SƯ BEEWISE
             </span>
           </div>
           <h2 className="mb-2 text-lg font-extrabold text-[#0c0c0b]">
diff --git a/apps/sale/features/tutor-approved/components/TutorApprovedPreview.tsx b/apps/sale/features/tutor-approved/components/TutorApprovedPreview.tsx
index c977977..13b34c3 100644
--- a/apps/sale/features/tutor-approved/components/TutorApprovedPreview.tsx
+++ b/apps/sale/features/tutor-approved/components/TutorApprovedPreview.tsx
@@ -3,7 +3,7 @@
 import { useRouter } from "next/navigation";
 import { TutorApprovedProvider } from "./TutorApprovedProvider";
 import { TutorApprovedScreenView, TutorApprovedShell } from "./tutor-approved.ui";
-import { resolveTutorApprovedScenario, parseTutorApprovedScenario } from "../schemas/tutor-approved.resolver";
+import { parseTutorApprovedScenario } from "../schemas/tutor-approved.resolver";
 import { tutorApprovedScenarios, type TutorApprovedScenario, type TutorApprovedScreen } from "../types";
 
 const previewUser = {
@@ -31,6 +31,7 @@ function scenarioScreen(scenario: TutorApprovedScenario): TutorApprovedScreen {
 
 export function TutorApprovedPreview({ scenario, capture }: { scenario?: string | null; capture: boolean }) {
   const parsed = parseTutorApprovedScenario(scenario);
+  const screen = scenarioScreen(parsed);
   const router = useRouter();
   const navigate = (next: TutorApprovedScenario, nextCapture = capture) => {
     const params = new URLSearchParams({ scenario: next });
@@ -40,11 +41,12 @@ export function TutorApprovedPreview({ scenario, capture }: { scenario?: string
   return (
     <TutorApprovedProvider scenario={parsed}>
       <TutorApprovedShell
+        screen={screen}
         previewUser={previewUser}
         capture={capture}
         toolbar={!capture ? <div className="fixed left-1/2 top-18 z-90 flex -translate-x-1/2 flex-wrap items-center justify-center gap-2 rounded-full border bg-white/95 px-3 py-2 shadow-lg backdrop-blur"><span className="text-xs font-bold text-[#905b0f]">PREVIEW</span><label className="sr-only" htmlFor="approved-scenario">Scenario</label><select id="approved-scenario" value={parsed} onChange={(e)=>navigate(e.target.value as TutorApprovedScenario,false)} className="rounded-full border px-3 py-1 text-xs">{tutorApprovedScenarios.map((item: string)=><option key={item}>{item}</option>)}</select><button onClick={()=>navigate(parsed,true)} className="text-xs font-bold text-[#280f91]">Capture mode</button></div> : null}
       >
-        <TutorApprovedScreenView screen={scenarioScreen(parsed)} />
+        <TutorApprovedScreenView screen={screen} />
       </TutorApprovedShell>
     </TutorApprovedProvider>
   );
diff --git a/apps/sale/features/tutor-approved/components/tutor-approved.ui.tsx b/apps/sale/features/tutor-approved/components/tutor-approved.ui.tsx
index 1cd578a..c34d618 100644
--- a/apps/sale/features/tutor-approved/components/tutor-approved.ui.tsx
+++ b/apps/sale/features/tutor-approved/components/tutor-approved.ui.tsx
@@ -26,6 +26,8 @@ import { TUTOR_LMS_URL } from "@workspace/core/constants/tutor-links";
 import { useTutorApproved } from "./TutorApprovedProvider";
 import type { TutorApprovedScreen } from "../types";
 import { ChatSummary, MessagesScreen, ChatRoomScreen } from "../../messages";
+import { TutorProfileEditorScreen } from "../../tutor-profile-editor";
+import { TutorOwnProfileScreen } from "../../tutor-profile/components/TutorOwnProfileScreen";
 
 const card =
   "rounded-2xl border border-[#dce7f7] bg-white p-5 shadow-[0_12px_32px_rgba(40,15,145,0.07)]";
@@ -46,6 +48,15 @@ export function TutorApprovedShell({
   screen?: TutorApprovedScreen;
 }) {
   const isChat = screen === "messages" || screen === "chat-room";
+  const isProfileEdit = screen === "profile-edit";
+
+  if (isProfileEdit) {
+    return (
+      <div className="min-h-[100dvh] bg-[#f7f9fd] text-[#17142f]">
+        {children}
+      </div>
+    );
+  }
 
   if (isChat) {
     return (
@@ -84,8 +95,8 @@ export function TutorApprovedScreenView({
   screen?: TutorApprovedScreen;
   chatRoomId?: string;
 }) {
-  if (screen === "profile" || screen === "profile-edit")
-    return <ProfileScreen edit={screen === "profile-edit"} />;
+  if (screen === "profile-edit") return <TutorProfileEditorScreen />;
+  if (screen === "profile") return <TutorOwnProfileScreen />;
   if (screen === "messages") return <MessagesScreen />;
   if (screen === "chat-room") return <ChatRoomScreen chatRoomId={chatRoomId} />;
   if (screen === "notifications") return <NotificationsScreen />;
@@ -476,130 +487,6 @@ function RecentActivity() {
   );
 }
 
-function ProfileScreen({ edit }: { edit: boolean }) {
-  const { state, dispatch } = useTutorApproved();
-  const p = edit ? state.draftProfile : state.profile;
-  const fields:
-    | [[keyof typeof p, string, boolean]]
-    | Array<[keyof typeof p, string, boolean]> = [
-    ["title", "Tiêu đề hồ sơ", true],
-    ["introduction", "Giới thiệu ngắn", true],
-    ["description", "Mô tả", true],
-    ["teachingMethod", "Phương pháp giảng dạy", false],
-    ["experience", "Kinh nghiệm", false],
-    ["rate", "Học phí dự kiến", true],
-  ];
-  return (
-    <div className="mx-auto max-w-4xl space-y-6">
-      <div>
-        <p className="text-sm font-bold text-[#280f91]">Hồ sơ gia sư</p>
-        <h1 className="font-nunito text-3xl font-black">
-          {edit ? "Chỉnh sửa hồ sơ" : "Hồ sơ của tôi"}
-        </h1>
-        <p className="mt-2 text-sm text-[#716c83]">
-          Thông tin ngân hàng và giấy tờ xác thực không xuất hiện trong hồ sơ
-          công khai.
-        </p>
-      </div>
-      {state.profileSubmitted && (
-        <div
-          role="status"
-          className="rounded-xl border border-[#ffc510] bg-[#fff8df] p-4 text-sm"
-        >
-          Thay đổi đã được gửi. Hồ sơ công khai hiện tại vẫn được giữ cho đến
-          khi Consultant phê duyệt nội dung mới.
-        </div>
-      )}
-      <section className={card}>
-        <div className="mb-5 flex items-center gap-4">
-          <div className="flex h-20 w-20 items-center justify-center rounded-full bg-[#cfe1fa] text-xl font-black text-[#280f91]">
-            MA
-          </div>
-          <div>
-            <h2 className="text-xl font-black">{p.fullName}</h2>
-            <span className={`${badge} bg-[#e7f5ec] text-[#297044]`}>
-              <ShieldCheck size={13} /> Đã xác thực
-            </span>
-          </div>
-        </div>
-        {edit ? (
-          <form
-            onSubmit={(e) => {
-              e.preventDefault();
-              dispatch({ type: "submit-profile" });
-            }}
-            className="space-y-4"
-          >
-            {fields.map(([field, label, review]) => (
-              <label key={field} className="block text-sm font-bold">
-                {label}
-                {review && (
-                  <span className="ml-2 text-xs font-normal text-[#905b0f]">
-                    Cần xét duyệt lại
-                  </span>
-                )}
-                <textarea
-                  value={String(p[field])}
-                  onChange={(e) =>
-                    dispatch({
-                      type: "update-draft",
-                      field,
-                      value: e.target.value,
-                    })
-                  }
-                  className="mt-1 min-h-20 w-full rounded-xl border border-[#dce7f7] p-3 font-normal outline-none focus:ring-2 focus:ring-[#280f91]"
-                />
-              </label>
-            ))}
-            <div className="flex flex-wrap gap-3">
-              <Button type="button" variant="outline">
-                Lưu bản nháp
-              </Button>
-              <Button type="button" variant="outline">
-                Xem trước
-              </Button>
-              <Button type="submit">Gửi thay đổi</Button>
-              <Button
-                type="button"
-                variant="ghost"
-                onClick={() => dispatch({ type: "reset-draft" })}
-              >
-                Hủy chỉnh sửa
-              </Button>
-            </div>
-          </form>
-        ) : (
-          <div className="space-y-5">
-            <Info label="Giới thiệu" value={p.description} />
-            <Info
-              label="Trường / Chuyên ngành"
-              value={`${p.university} · ${p.major}`}
-            />
-            <Info
-              label="Môn và cấp lớp"
-              value={`${p.subjects.join(", ")} · ${p.gradeLevels.join(", ")}`}
-            />
-            <Info
-              label="Hình thức / Khu vực"
-              value={`${p.teachingMode} · ${p.offlineAreas.join(", ")}`}
-            />
-            <Info label="Phương pháp" value={p.teachingMethod} />
-            <Info label="Kinh nghiệm" value={p.experience} />
-            <Button asChild>
-              <Link href="/tutor/profile/edit">
-                <Pencil />
-                Chỉnh sửa hồ sơ
-              </Link>
-            </Button>
-          </div>
-        )}
-      </section>
-    </div>
-  );
-}
-
-
-
 function NotificationsScreen() {
   const { state, dispatch } = useTutorApproved();
   return (
diff --git a/apps/sale/features/tutor-profile-editor/components/AvailabilityListField.tsx b/apps/sale/features/tutor-profile-editor/components/AvailabilityListField.tsx
new file mode 100644
index 0000000..9356541
--- /dev/null
+++ b/apps/sale/features/tutor-profile-editor/components/AvailabilityListField.tsx
@@ -0,0 +1,68 @@
+"use client";
+
+import { useFieldArray, useFormContext } from "react-hook-form";
+import type { TutorProfileEditorValues } from "../schemas/profile-editor.schema";
+import { ProfileField } from "./ProfileField";
+import { RepeaterError, RepeaterHeader, RepeaterItem } from "./RepeaterPrimitives";
+
+const DAY_OPTIONS = [
+  { value: "Thứ 2", label: "Thứ 2" },
+  { value: "Thứ 3", label: "Thứ 3" },
+  { value: "Thứ 4", label: "Thứ 4" },
+  { value: "Thứ 5", label: "Thứ 5" },
+  { value: "Thứ 6", label: "Thứ 6" },
+  { value: "Thứ 7", label: "Thứ 7" },
+  { value: "Chủ nhật", label: "Chủ nhật" },
+];
+
+export function AvailabilityListField() {
+  const {
+    control,
+    register,
+    formState: { errors },
+  } = useFormContext<TutorProfileEditorValues>();
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: "availability",
+  });
+
+  return (
+    <div className="grid gap-3">
+      <RepeaterHeader
+        label="Lịch rảnh dự kiến"
+        description="Tách riêng ngày dạy và khung giờ để học viên dễ theo dõi."
+        addLabel="Thêm lịch rảnh"
+        onAdd={() => append({ day: "", time: "" })}
+        canAdd={fields.length < 10}
+      />
+      <div className="grid gap-3">
+        {fields.map((field, index) => (
+          <RepeaterItem
+            key={field.id}
+            title={`Lịch rảnh ${index + 1}`}
+            canRemove={fields.length > 1}
+            onRemove={() => remove(index)}
+          >
+            <div className="grid gap-4 md:grid-cols-2">
+              <ProfileField
+                id={`availability-${field.id}-day`}
+                label="Ngày dạy"
+                error={errors.availability?.[index]?.day}
+                registration={register(`availability.${index}.day`)}
+                options={DAY_OPTIONS}
+              />
+              <ProfileField
+                id={`availability-${field.id}-time`}
+                label="Khung giờ"
+                error={errors.availability?.[index]?.time}
+                registration={register(`availability.${index}.time`)}
+                placeholder="Ví dụ: 19:00 - 21:00"
+              />
+            </div>
+          </RepeaterItem>
+        ))}
+      </div>
+      <RepeaterError message={errors.availability?.root?.message} />
+    </div>
+  );
+}
diff --git a/apps/sale/features/tutor-profile-editor/components/EditableProfileBlock.tsx b/apps/sale/features/tutor-profile-editor/components/EditableProfileBlock.tsx
new file mode 100644
index 0000000..b2b4d4e
--- /dev/null
+++ b/apps/sale/features/tutor-profile-editor/components/EditableProfileBlock.tsx
@@ -0,0 +1,39 @@
+import type { ReactNode } from "react";
+import { LockSimpleIcon, PencilSimpleIcon } from "@phosphor-icons/react";
+
+interface EditableProfileBlockProps {
+  label: string;
+  children: ReactNode;
+  onEdit?: () => void;
+  systemManaged?: boolean;
+}
+
+export function EditableProfileBlock({
+  label,
+  children,
+  onEdit,
+  systemManaged = false,
+}: EditableProfileBlockProps) {
+  return (
+    <div className="group relative">
+      <div className="absolute right-3 top-3 z-10 sm:right-4 sm:top-4">
+        {systemManaged ? (
+          <span className="inline-flex h-9 items-center gap-1.5 rounded-full border border-[#cfe1fa] bg-white px-3 text-xs font-bold text-[#56516a] shadow-sm">
+            <LockSimpleIcon size={14} weight="bold" aria-hidden="true" />
+            Dữ liệu hệ thống
+          </span>
+        ) : (
+          <button
+            type="button"
+            onClick={onEdit}
+            aria-label={`Chỉnh sửa ${label.toLowerCase()}`}
+            className="inline-flex h-10 w-10 items-center justify-center rounded-full border border-[#280f91]/20 bg-white text-[#280f91] shadow-md transition hover:-translate-y-0.5 hover:bg-[#280f91] hover:text-white active:translate-y-0 active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#280f91]/30"
+          >
+            <PencilSimpleIcon size={18} weight="bold" aria-hidden="true" />
+          </button>
+        )}
+      </div>
+      {children}
+    </div>
+  );
+}
diff --git a/apps/sale/features/tutor-profile-editor/components/ProfileBlockDialog.tsx b/apps/sale/features/tutor-profile-editor/components/ProfileBlockDialog.tsx
new file mode 100644
index 0000000..3719381
--- /dev/null
+++ b/apps/sale/features/tutor-profile-editor/components/ProfileBlockDialog.tsx
@@ -0,0 +1,80 @@
+"use client";
+
+import { useEffect, type ReactNode } from "react";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { FormProvider, useForm } from "react-hook-form";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+} from "@workspace/ui/components/ui/dialog";
+import { Button } from "@workspace/ui/components/ui/button";
+import {
+  tutorProfileEditorSchema,
+  type TutorProfileEditorValues,
+} from "../schemas/profile-editor.schema";
+
+interface ProfileBlockDialogProps {
+  open: boolean;
+  title: string;
+  description: string;
+  profile: TutorProfileEditorValues;
+  children: ReactNode;
+  onClose: () => void;
+  onSave: (values: TutorProfileEditorValues) => void;
+}
+
+export function ProfileBlockDialog({
+  open,
+  title,
+  description,
+  profile,
+  children,
+  onClose,
+  onSave,
+}: ProfileBlockDialogProps) {
+  const form = useForm<TutorProfileEditorValues>({
+    resolver: zodResolver(tutorProfileEditorSchema),
+    defaultValues: profile,
+    mode: "onBlur",
+  });
+
+  useEffect(() => {
+    if (open) form.reset(profile);
+  }, [form, open, profile]);
+
+  return (
+    <Dialog open={open} onOpenChange={(nextOpen) => !nextOpen && onClose()}>
+      <DialogContent className="flex max-h-[92dvh] w-[calc(100vw-1rem)] max-w-2xl flex-col gap-0 overflow-hidden rounded-2xl border-[#cfe1fa] bg-white p-0 sm:w-[calc(100vw-2rem)]">
+        <div className="border-b border-[#dce7f7] px-5 py-5 pr-14 sm:px-6">
+          <DialogTitle className="font-nunito text-xl font-extrabold text-[#17142f] sm:text-2xl">
+            {title}
+          </DialogTitle>
+          <DialogDescription className="mt-1.5 max-w-xl leading-6 text-[#56516a]">
+            {description}
+          </DialogDescription>
+        </div>
+        <FormProvider {...form}>
+          <form
+            onSubmit={form.handleSubmit(onSave)}
+            noValidate
+            className="flex min-h-0 flex-1 flex-col"
+          >
+            <div className="min-h-0 flex-1 overflow-y-auto px-5 py-5 sm:px-6">
+              <div className="grid gap-5">{children}</div>
+            </div>
+            <div className="flex shrink-0 flex-col-reverse gap-2 border-t border-[#dce7f7] bg-white px-5 py-4 sm:flex-row sm:justify-end sm:px-6">
+              <Button type="button" variant="outline" onClick={onClose} className="h-10 rounded-full px-5">
+                Hủy
+              </Button>
+              <Button type="submit" className="h-10 rounded-full bg-[#280f91] px-5 text-white hover:bg-[#200c76]">
+                Lưu thay đổi
+              </Button>
+            </div>
+          </form>
+        </FormProvider>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/sale/features/tutor-profile-editor/components/ProfileEditModalRouter.tsx b/apps/sale/features/tutor-profile-editor/components/ProfileEditModalRouter.tsx
new file mode 100644
index 0000000..aadcf1c
--- /dev/null
+++ b/apps/sale/features/tutor-profile-editor/components/ProfileEditModalRouter.tsx
@@ -0,0 +1,52 @@
+"use client";
+
+import type { TutorProfileEditorValues } from "../schemas/profile-editor.schema";
+import type { ProfileBlockId } from "../types/profile-editor.types";
+import { AcademicProfileEditDialog } from "./modals/AcademicProfileEditDialog";
+import { BasicInfoEditDialog } from "./modals/BasicInfoEditDialog";
+import { EvidenceEditDialog } from "./modals/EvidenceEditDialog";
+import { ExperienceEditDialog } from "./modals/ExperienceEditDialog";
+import { IntroductionEditDialog } from "./modals/IntroductionEditDialog";
+import { TeachingMethodsEditDialog } from "./modals/TeachingMethodsEditDialog";
+import { VideoEditDialog } from "./modals/VideoEditDialog";
+
+interface ProfileEditModalRouterProps {
+  activeBlock: ProfileBlockId | null;
+  profile: TutorProfileEditorValues;
+  videoUrl: string;
+  onClose: () => void;
+  onSaveProfile: (values: TutorProfileEditorValues) => void;
+  onSaveVideo: (videoUrl: string) => void;
+}
+
+export function ProfileEditModalRouter({
+  activeBlock,
+  profile,
+  videoUrl,
+  onClose,
+  onSaveProfile,
+  onSaveVideo,
+}: ProfileEditModalRouterProps) {
+  if (activeBlock === "basic") {
+    return <BasicInfoEditDialog profile={profile} onClose={onClose} onSave={onSaveProfile} />;
+  }
+  if (activeBlock === "introduction") {
+    return <IntroductionEditDialog profile={profile} onClose={onClose} onSave={onSaveProfile} />;
+  }
+  if (activeBlock === "methods") {
+    return <TeachingMethodsEditDialog profile={profile} onClose={onClose} onSave={onSaveProfile} />;
+  }
+  if (activeBlock === "academic") {
+    return <AcademicProfileEditDialog profile={profile} onClose={onClose} onSave={onSaveProfile} />;
+  }
+  if (activeBlock === "experience") {
+    return <ExperienceEditDialog profile={profile} onClose={onClose} onSave={onSaveProfile} />;
+  }
+  if (activeBlock === "evidence") {
+    return <EvidenceEditDialog profile={profile} onClose={onClose} onSave={onSaveProfile} />;
+  }
+  if (activeBlock === "video") {
+    return <VideoEditDialog videoUrl={videoUrl} onClose={onClose} onSave={onSaveVideo} />;
+  }
+  return null;
+}
diff --git a/apps/sale/features/tutor-profile-editor/components/ProfileEditorSkeleton.tsx b/apps/sale/features/tutor-profile-editor/components/ProfileEditorSkeleton.tsx
new file mode 100644
index 0000000..89eae42
--- /dev/null
+++ b/apps/sale/features/tutor-profile-editor/components/ProfileEditorSkeleton.tsx
@@ -0,0 +1,31 @@
+import { Skeleton } from "@workspace/ui/components/ui/skeleton";
+
+export function ProfileEditorSkeleton() {
+  return (
+    <div className="min-h-[100dvh] bg-[#fffaf0]" aria-label="Đang tải trang chỉnh sửa hồ sơ">
+      <div className="sticky top-0 z-40 border-b border-[#dce7f7] bg-white px-4 py-3">
+        <div className="mx-auto flex max-w-7xl items-center justify-between gap-4">
+          <div className="flex items-center gap-3">
+            <Skeleton className="h-10 w-10 rounded-full" />
+            <div className="grid gap-2">
+              <Skeleton className="h-4 w-36 rounded-md" />
+              <Skeleton className="hidden h-3 w-64 rounded-md sm:block" />
+            </div>
+          </div>
+          <Skeleton className="h-10 w-36 rounded-full" />
+        </div>
+      </div>
+      <div className="mx-auto grid max-w-7xl gap-6 px-4 py-6 sm:px-6 lg:px-8">
+        <Skeleton className="h-[430px] rounded-[2rem] sm:h-[350px]" />
+        <div className="grid gap-6 lg:grid-cols-[minmax(0,1.65fr)_minmax(300px,0.75fr)]">
+          <div className="grid gap-6">
+            <Skeleton className="h-64 rounded-3xl" />
+            <Skeleton className="h-72 rounded-3xl" />
+            <Skeleton className="h-80 rounded-3xl" />
+          </div>
+          <Skeleton className="h-72 rounded-3xl" />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/sale/features/tutor-profile-editor/components/ProfileEditorToolbar.tsx b/apps/sale/features/tutor-profile-editor/components/ProfileEditorToolbar.tsx
new file mode 100644
index 0000000..cd5bcf6
--- /dev/null
+++ b/apps/sale/features/tutor-profile-editor/components/ProfileEditorToolbar.tsx
@@ -0,0 +1,37 @@
+import Link from "next/link";
+import { ArrowLeftIcon } from "@phosphor-icons/react";
+import { Button } from "@workspace/ui/components/ui/button";
+
+export function ProfileEditorToolbar({
+  isSubmitting,
+  onSubmit,
+}: {
+  isSubmitting: boolean;
+  onSubmit: () => void;
+}) {
+  return (
+    <header className="sticky top-0 z-40 border-b border-[#dce7f7] bg-white/95 backdrop-blur-xl">
+      <div className="mx-auto flex min-h-16 max-w-7xl items-center justify-between gap-3 px-4 py-2 sm:px-6 lg:px-8">
+        <div className="flex min-w-0 items-center gap-3">
+          <Button asChild variant="ghost" size="icon" className="shrink-0 rounded-full" aria-label="Trở về hồ sơ">
+            <Link href="/tutor/profile">
+              <ArrowLeftIcon size={19} weight="bold" />
+            </Link>
+          </Button>
+          <div className="min-w-0">
+            <h1 className="truncate text-sm font-extrabold text-[#17142f] sm:text-base">Chỉnh sửa hồ sơ</h1>
+            <p className="hidden text-xs text-[#716c83] sm:block">Chọn biểu tượng bút chì tại phần cần cập nhật.</p>
+          </div>
+        </div>
+        <Button
+          type="button"
+          onClick={onSubmit}
+          disabled={isSubmitting}
+          className="h-10 shrink-0 rounded-full bg-[#280f91] px-4 text-xs font-bold text-white hover:bg-[#200c76] sm:px-5 sm:text-sm"
+        >
+          {isSubmitting ? "Đang gửi" : "Gửi xét duyệt lại"}
+        </Button>
+      </div>
+    </header>
+  );
+}
diff --git a/apps/sale/features/tutor-profile-editor/components/ProfileField.tsx b/apps/sale/features/tutor-profile-editor/components/ProfileField.tsx
new file mode 100644
index 0000000..8a5b30b
--- /dev/null
+++ b/apps/sale/features/tutor-profile-editor/components/ProfileField.tsx
@@ -0,0 +1,113 @@
+import type { FieldError, UseFormRegisterReturn } from "react-hook-form";
+
+interface ProfileFieldProps {
+  id: string;
+  label: string;
+  description?: string;
+  reviewRequired?: boolean;
+  error?: FieldError;
+  registration: UseFormRegisterReturn;
+  multiline?: boolean;
+  rows?: number;
+  placeholder?: string;
+  inputMode?: "text" | "url";
+  type?: "text" | "file";
+  accept?: string;
+  options?: { value: string; label: string }[];
+}
+
+const fieldClassName =
+  "w-full rounded-xl border border-[#c7d6eb] bg-white px-3 py-2.5 text-sm leading-6 text-[#0c0c0b] outline-none transition placeholder:text-[#667085] focus:border-[#280f91] focus:ring-2 focus:ring-[#280f91]/18 aria-[invalid=true]:border-[#b42318] aria-[invalid=true]:ring-[#e1aba7]/35";
+
+export function ProfileField({
+  id,
+  label,
+  description,
+  reviewRequired = false,
+  error,
+  registration,
+  multiline = false,
+  rows = 4,
+  placeholder,
+  inputMode = "text",
+  type = "text",
+  accept,
+  options,
+}: ProfileFieldProps) {
+  const errorId = `${id}-error`;
+  const descriptionId = `${id}-description`;
+  const describedBy = error
+    ? `${description ? descriptionId : ""} ${errorId}`.trim()
+    : description
+      ? descriptionId
+      : undefined;
+
+  return (
+    <div className="grid gap-2">
+      <div className="flex flex-wrap items-center gap-2">
+        <label htmlFor={id} className="text-sm font-bold text-[#17142f]">
+          {label}
+        </label>
+        {reviewRequired ? (
+          <span className="rounded-full bg-[#fff3cb] px-2 py-0.5 text-[11px] font-bold text-[#765000]">
+            Cần duyệt lại
+          </span>
+        ) : null}
+      </div>
+      {description ? (
+        <p id={descriptionId} className="text-xs leading-5 text-[#56516a]">
+          {description}
+        </p>
+      ) : null}
+      {options ? (
+        <select
+          id={id}
+          aria-invalid={Boolean(error)}
+          aria-describedby={describedBy}
+          className={`${fieldClassName} appearance-none bg-[url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22currentColor%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M5.293%207.293a1%201%200%20011.414%200L10%2010.586l3.293-3.293a1%201%200%20111.414%201.414l-4%204a1%201%200%2001-1.414%200l-4-4a1%201%200%20010-1.414z%22%20clip-rule%3D%22evenodd%22%20%2F%3E%3C%2Fsvg%3E')] bg-[position:right_0.75rem_center] bg-[length:1.25em_1.25em] bg-no-repeat pr-10`}
+          {...registration}
+        >
+          <option value="" disabled hidden>
+            {placeholder || "Vui lòng chọn..."}
+          </option>
+          {options.map((opt) => (
+            <option key={opt.value} value={opt.value}>
+              {opt.label}
+            </option>
+          ))}
+        </select>
+      ) : multiline ? (
+        <textarea
+          id={id}
+          rows={rows}
+          placeholder={placeholder}
+          aria-invalid={Boolean(error)}
+          aria-describedby={describedBy}
+          className={`${fieldClassName} resize-y`}
+          {...registration}
+        />
+      ) : (
+        <input
+          id={id}
+          type={type === "file" ? "file" : inputMode === "url" ? "url" : "text"}
+          inputMode={type === "file" ? undefined : inputMode}
+          accept={accept}
+          placeholder={type === "file" ? undefined : placeholder}
+          aria-invalid={Boolean(error)}
+          aria-describedby={describedBy}
+          className={
+            type === "file"
+              ? "block w-full text-sm text-[#56516a] file:mr-4 file:rounded-full file:border-0 file:bg-[#280f91]/10 file:px-4 file:py-2.5 file:text-sm file:font-bold file:text-[#280f91] hover:file:bg-[#280f91]/20 cursor-pointer focus:outline-none"
+              : fieldClassName
+          }
+          {...registration}
+        />
+      )}
+      {error ? (
+        <p id={errorId} role="alert" className="text-xs font-semibold text-[#9f2017]">
+          {error.message}
+        </p>
+      ) : null}
+    </div>
+  );
+}
diff --git a/apps/sale/features/tutor-profile-editor/components/RepeaterPrimitives.tsx b/apps/sale/features/tutor-profile-editor/components/RepeaterPrimitives.tsx
new file mode 100644
index 0000000..4ef1066
--- /dev/null
+++ b/apps/sale/features/tutor-profile-editor/components/RepeaterPrimitives.tsx
@@ -0,0 +1,86 @@
+import type { ReactNode } from "react";
+import { PlusIcon, TrashIcon } from "@phosphor-icons/react";
+
+interface RepeaterHeaderProps {
+  label: string;
+  description?: string;
+  addLabel: string;
+  onAdd: () => void;
+  reviewRequired?: boolean;
+  canAdd?: boolean;
+}
+
+export function RepeaterHeader({
+  label,
+  description,
+  addLabel,
+  onAdd,
+  reviewRequired = false,
+  canAdd = true,
+}: RepeaterHeaderProps) {
+  return (
+    <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+      <div>
+        <div className="flex flex-wrap items-center gap-2">
+          <p className="text-sm font-bold text-[#17142f]">{label}</p>
+          {reviewRequired ? (
+            <span className="rounded-full bg-[#fff3cb] px-2 py-0.5 text-[11px] font-bold text-[#765000]">
+              Cần duyệt lại
+            </span>
+          ) : null}
+        </div>
+        {description ? (
+          <p className="mt-1 text-xs leading-5 text-[#56516a]">{description}</p>
+        ) : null}
+      </div>
+      {canAdd && (
+        <button
+          type="button"
+          onClick={onAdd}
+          className="inline-flex h-9 shrink-0 items-center justify-center gap-1.5 self-start rounded-full border border-[#280f91]/25 bg-white px-3 text-xs font-bold text-[#280f91] transition hover:bg-[#280f91]/5 active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#280f91]/25"
+        >
+          <PlusIcon size={15} weight="bold" aria-hidden="true" />
+          {addLabel}
+        </button>
+      )}
+    </div>
+  );
+}
+
+export function RepeaterItem({
+  title,
+  canRemove,
+  onRemove,
+  children,
+}: {
+  title: string;
+  canRemove: boolean;
+  onRemove: () => void;
+  children: ReactNode;
+}) {
+  return (
+    <div className="rounded-xl border border-[#dce7f7] bg-[#fbfcff] p-3">
+      <div className="mb-3 flex items-center justify-between gap-3">
+        <p className="text-xs font-extrabold text-[#56516a]">{title}</p>
+        <button
+          type="button"
+          onClick={onRemove}
+          disabled={!canRemove}
+          aria-label={`Xóa ${title.toLowerCase()}`}
+          className="inline-flex h-8 w-8 items-center justify-center rounded-full text-[#716c83] transition hover:bg-[#e1aba7]/22 hover:text-[#9f2017] disabled:cursor-not-allowed disabled:opacity-30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#280f91]/25"
+        >
+          <TrashIcon size={16} aria-hidden="true" />
+        </button>
+      </div>
+      {children}
+    </div>
+  );
+}
+
+export function RepeaterError({ message }: { message?: string }) {
+  return message ? (
+    <p role="alert" className="text-xs font-semibold text-[#9f2017]">
+      {message}
+    </p>
+  ) : null;
+}
diff --git a/apps/sale/features/tutor-profile-editor/components/SimpleListField.tsx b/apps/sale/features/tutor-profile-editor/components/SimpleListField.tsx
new file mode 100644
index 0000000..1f47ca0
--- /dev/null
+++ b/apps/sale/features/tutor-profile-editor/components/SimpleListField.tsx
@@ -0,0 +1,75 @@
+"use client";
+
+import { useFieldArray, useFormContext } from "react-hook-form";
+import type { TutorProfileEditorValues } from "../schemas/profile-editor.schema";
+import { ProfileField } from "./ProfileField";
+import { RepeaterError, RepeaterHeader, RepeaterItem } from "./RepeaterPrimitives";
+
+type SimpleListName =
+  | "subjects"
+  | "specializations"
+  | "teachingModes"
+  | "introduction"
+  | "education"
+  | "achievements";
+
+interface SimpleListFieldProps {
+  name: SimpleListName;
+  label: string;
+  itemLabel: string;
+  addLabel: string;
+  description?: string;
+  reviewRequired?: boolean;
+  multiline?: boolean;
+}
+
+export function SimpleListField({
+  name,
+  label,
+  itemLabel,
+  addLabel,
+  description,
+  reviewRequired = false,
+  multiline = false,
+}: SimpleListFieldProps) {
+  const {
+    control,
+    register,
+    formState: { errors },
+  } = useFormContext<TutorProfileEditorValues>();
+  const { fields, append, remove } = useFieldArray({ control, name });
+  const fieldErrors = errors[name];
+
+  return (
+    <div className="grid gap-3">
+      <RepeaterHeader
+        label={label}
+        description={description}
+        addLabel={addLabel}
+        reviewRequired={reviewRequired}
+        onAdd={() => append({ value: "" })}
+        canAdd={fields.length < 10}
+      />
+      <div className="grid gap-3">
+        {fields.map((field, index) => (
+          <RepeaterItem
+            key={field.id}
+            title={`${itemLabel} ${index + 1}`}
+            canRemove={fields.length > 1}
+            onRemove={() => remove(index)}
+          >
+            <ProfileField
+              id={`${name}-${field.id}`}
+              label={itemLabel}
+              error={fieldErrors?.[index]?.value}
+              registration={register(`${name}.${index}.value`)}
+              multiline={multiline}
+              rows={multiline ? 3 : undefined}
+            />
+          </RepeaterItem>
+        ))}
+      </div>
+      <RepeaterError message={fieldErrors?.root?.message} />
+    </div>
+  );
+}
diff --git a/apps/sale/features/tutor-profile-editor/components/TeachingMethodListField.tsx b/apps/sale/features/tutor-profile-editor/components/TeachingMethodListField.tsx
new file mode 100644
index 0000000..c7a7f8b
--- /dev/null
+++ b/apps/sale/features/tutor-profile-editor/components/TeachingMethodListField.tsx
@@ -0,0 +1,59 @@
+"use client";
+
+import { useFieldArray, useFormContext } from "react-hook-form";
+import type { TutorProfileEditorValues } from "../schemas/profile-editor.schema";
+import { ProfileField } from "./ProfileField";
+import { RepeaterError, RepeaterHeader, RepeaterItem } from "./RepeaterPrimitives";
+
+export function TeachingMethodListField() {
+  const {
+    control,
+    register,
+    formState: { errors },
+  } = useFormContext<TutorProfileEditorValues>();
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: "teachingMethods",
+  });
+
+  return (
+    <div className="grid gap-3">
+      <RepeaterHeader
+        label="Phương pháp giảng dạy"
+        description="Mỗi phương pháp gồm tên ngắn gọn và phần mô tả riêng."
+        addLabel="Thêm phương pháp"
+        reviewRequired
+        onAdd={() => append({ title: "", description: "" })}
+        canAdd={fields.length < 5}
+      />
+      <div className="grid gap-3">
+        {fields.map((field, index) => (
+          <RepeaterItem
+            key={field.id}
+            title={`Phương pháp ${index + 1}`}
+            canRemove={fields.length > 1}
+            onRemove={() => remove(index)}
+          >
+            <div className="grid gap-4">
+              <ProfileField
+                id={`teaching-method-${field.id}-title`}
+                label="Tên phương pháp"
+                error={errors.teachingMethods?.[index]?.title}
+                registration={register(`teachingMethods.${index}.title`)}
+              />
+              <ProfileField
+                id={`teaching-method-${field.id}-description`}
+                label="Mô tả"
+                error={errors.teachingMethods?.[index]?.description}
+                registration={register(`teachingMethods.${index}.description`)}
+                multiline
+                rows={3}
+              />
+            </div>
+          </RepeaterItem>
+        ))}
+      </div>
+      <RepeaterError message={errors.teachingMethods?.root?.message} />
+    </div>
+  );
+}
diff --git a/apps/sale/features/tutor-profile-editor/components/TutorEvidenceEditorPreview.tsx b/apps/sale/features/tutor-profile-editor/components/TutorEvidenceEditorPreview.tsx
new file mode 100644
index 0000000..04cd0af
--- /dev/null
+++ b/apps/sale/features/tutor-profile-editor/components/TutorEvidenceEditorPreview.tsx
@@ -0,0 +1,45 @@
+import Image from "next/image";
+import { BadgeCheck } from "lucide-react";
+import type { CertificateItem } from "../../tutor-profile/types/mockTutorProfile";
+import { SectionShell } from "../../tutor-profile/components/TutorProfilePrimitives";
+import { isLocalPreviewUrl } from "../utils/file-preview";
+
+export function TutorEvidenceEditorPreview({ certificates }: { certificates: CertificateItem[] }) {
+  return (
+    <SectionShell eyebrow="Minh chứng" title="Bằng cấp và thành tích" icon={BadgeCheck}>
+      <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
+        {certificates.map((item, index) => (
+          <article key={`${item.title}-${index}`} className="overflow-hidden rounded-2xl border border-[#cfe1fa] bg-white">
+            <div className="relative aspect-[4/3] border-b border-[#cfe1fa] bg-[#fff3cb]/35">
+              <Image
+                src={item.imageUrl ?? "/images/TutorEvidence/certi-1.png"}
+                alt={item.title}
+                fill
+                unoptimized={isLocalPreviewUrl(item.imageUrl ?? "")}
+                sizes="(min-width: 1280px) 260px, (min-width: 640px) 50vw, 100vw"
+                className="object-contain p-3"
+              />
+            </div>
+            <div className="grid gap-2 p-4">
+              <h3 className="font-extrabold leading-6 text-[#17142f]">{item.title}</h3>
+              <dl className="grid gap-2 text-sm">
+                <div>
+                  <dt className="text-xs font-bold text-[#716c83]">Loại</dt>
+                  <dd className="mt-0.5 text-[#17142f]">{item.type}</dd>
+                </div>
+                <div>
+                  <dt className="text-xs font-bold text-[#716c83]">Trạng thái</dt>
+                  <dd className="mt-0.5 font-bold text-[#447353]">{item.status ?? "Đã xác minh"}</dd>
+                </div>
+                <div>
+                  <dt className="text-xs font-bold text-[#716c83]">Mô tả công khai</dt>
+                  <dd className="mt-0.5 leading-6 text-[#56516a]">{item.description}</dd>
+                </div>
+              </dl>
+            </div>
+          </article>
+        ))}
+      </div>
+    </SectionShell>
+  );
+}
diff --git a/apps/sale/features/tutor-profile-editor/components/TutorProfileEditorScreen.tsx b/apps/sale/features/tutor-profile-editor/components/TutorProfileEditorScreen.tsx
new file mode 100644
index 0000000..6887cc2
--- /dev/null
+++ b/apps/sale/features/tutor-profile-editor/components/TutorProfileEditorScreen.tsx
@@ -0,0 +1,77 @@
+"use client";
+
+import { CheckCircleIcon } from "@phosphor-icons/react";
+import { TutorBioSection } from "../../tutor-profile/components/TutorBioSection";
+import { TutorEducationAchievements } from "../../tutor-profile/components/TutorEducationAchievements";
+import { TutorHero } from "../../tutor-profile/components/TutorHero";
+import { TutorTeachingHistory } from "../../tutor-profile/components/TutorTeachingHistory";
+import { TutorTeachingMethods } from "../../tutor-profile/components/TutorTeachingMethods";
+import { useTutorProfileInlineEditor } from "../hooks/useTutorProfileInlineEditor";
+import { EditableProfileBlock } from "./EditableProfileBlock";
+import { ProfileEditModalRouter } from "./ProfileEditModalRouter";
+import { ProfileEditorToolbar } from "./ProfileEditorToolbar";
+import { TutorEvidenceEditorPreview } from "./TutorEvidenceEditorPreview";
+import { TutorProfileSidebarPreview } from "./TutorProfileSidebarPreview";
+import { TutorVideoEditorPreview } from "./TutorVideoEditorPreview";
+
+export function TutorProfileEditorScreen() {
+  const editor = useTutorProfileInlineEditor();
+
+  return (
+    <div className="min-h-[100dvh] bg-[radial-gradient(circle_at_top_left,rgba(250,220,120,0.55),transparent_34%),linear-gradient(180deg,#fff3cb_0%,#fffaf0_38%,#ffffff_100%)] text-[#17142f]">
+      <ProfileEditorToolbar isSubmitting={editor.isSubmitting} onSubmit={editor.submitForReview} />
+
+      <main className="mx-auto flex max-w-7xl flex-col gap-5 px-4 py-5 sm:gap-6 sm:px-6 sm:py-7 lg:px-8">
+        {editor.submittedAt ? (
+          <div role="status" className="flex gap-3 rounded-2xl border border-[#447353]/30 bg-white/90 p-4 text-sm text-[#234b31] shadow-sm">
+            <CheckCircleIcon className="mt-0.5 shrink-0" size={20} weight="fill" />
+            <p className="leading-6">
+              Hồ sơ đã được gửi xét duyệt lại. Phiên bản công khai hiện tại vẫn được giữ cho đến khi nội dung mới được duyệt.
+            </p>
+          </div>
+        ) : null}
+
+        <EditableProfileBlock label="Thông tin cơ bản" onEdit={() => editor.openBlock("basic")}>
+          <TutorHero tutor={editor.tutor} />
+        </EditableProfileBlock>
+
+        <div className="grid gap-6 lg:grid-cols-[minmax(0,1.65fr)_minmax(300px,0.75fr)] lg:items-start">
+          <div className="space-y-6">
+            <EditableProfileBlock label="Giới thiệu" onEdit={() => editor.openBlock("introduction")}>
+              <TutorBioSection tutor={editor.tutor} />
+            </EditableProfileBlock>
+            <EditableProfileBlock label="Phương pháp" onEdit={() => editor.openBlock("methods")}>
+              <TutorTeachingMethods tutor={editor.tutor} />
+            </EditableProfileBlock>
+            <EditableProfileBlock label="Hồ sơ học thuật" onEdit={() => editor.openBlock("academic")}>
+              <TutorEducationAchievements tutor={editor.tutor} />
+            </EditableProfileBlock>
+            <EditableProfileBlock label="Video" onEdit={() => editor.openBlock("video")}>
+              <TutorVideoEditorPreview src={editor.media.videoUrl} />
+            </EditableProfileBlock>
+            <EditableProfileBlock label="Kinh nghiệm" onEdit={() => editor.openBlock("experience")}>
+              <TutorTeachingHistory tutor={editor.tutor} />
+            </EditableProfileBlock>
+            <EditableProfileBlock label="Minh chứng" onEdit={() => editor.openBlock("evidence")}>
+              <TutorEvidenceEditorPreview certificates={editor.tutor.certificates} />
+            </EditableProfileBlock>
+          </div>
+
+          <TutorProfileSidebarPreview tutor={editor.tutor} />
+        </div>
+      </main>
+
+      <ProfileEditModalRouter
+        activeBlock={editor.activeBlock}
+        profile={editor.profile}
+        videoUrl={editor.media.videoUrl}
+        onClose={editor.closeBlock}
+        onSaveProfile={editor.saveBlock}
+        onSaveVideo={(videoUrl) => {
+          editor.setVideoUrl(videoUrl);
+          editor.closeBlock();
+        }}
+      />
+    </div>
+  );
+}
diff --git a/apps/sale/features/tutor-profile-editor/components/TutorProfileSidebarPreview.tsx b/apps/sale/features/tutor-profile-editor/components/TutorProfileSidebarPreview.tsx
new file mode 100644
index 0000000..e89f3c7
--- /dev/null
+++ b/apps/sale/features/tutor-profile-editor/components/TutorProfileSidebarPreview.tsx
@@ -0,0 +1,21 @@
+import type { TutorProfileData } from "../../tutor-profile/types/mockTutorProfile";
+
+export function TutorProfileSidebarPreview({ tutor }: { tutor: TutorProfileData }) {
+  return (
+    <aside className="rounded-3xl border border-[#cfe1fa] bg-white p-5 shadow-[0_18px_48px_-30px_rgba(40,15,145,0.25)] lg:sticky lg:top-24 sm:p-6">
+      <p className="text-xs font-bold uppercase tracking-[0.16em] text-[#447353]">Thông tin nhận lớp</p>
+      <p className="mt-2 text-2xl font-black text-[#280f91]">{tutor.hourlyRate}</p>
+      <p className="mt-1 text-xs leading-5 text-[#716c83]">Mức học phí hiển thị công khai và cần được xét duyệt lại khi thay đổi.</p>
+      <div className="my-5 h-px bg-[#dce7f7]" />
+      <h2 className="text-sm font-extrabold text-[#17142f]">Lịch có thể nhận lớp</h2>
+      <div className="mt-3 grid gap-3">
+        {tutor.availability.map((slot, index) => (
+          <div key={`${slot.day}-${index}`} className="rounded-xl bg-[#f7f9fd] px-3 py-3">
+            <p className="text-sm font-bold text-[#17142f]">{slot.day}</p>
+            <p className="mt-0.5 text-xs text-[#56516a]">{slot.time}</p>
+          </div>
+        ))}
+      </div>
+    </aside>
+  );
+}
diff --git a/apps/sale/features/tutor-profile-editor/components/TutorVideoEditorPreview.tsx b/apps/sale/features/tutor-profile-editor/components/TutorVideoEditorPreview.tsx
new file mode 100644
index 0000000..e7892a2
--- /dev/null
+++ b/apps/sale/features/tutor-profile-editor/components/TutorVideoEditorPreview.tsx
@@ -0,0 +1,19 @@
+import { Video } from "lucide-react";
+import { SectionShell } from "../../tutor-profile/components/TutorProfilePrimitives";
+
+export function TutorVideoEditorPreview({ src }: { src: string }) {
+  return (
+    <SectionShell
+      eyebrow="Video"
+      title="Video giới thiệu"
+      description="Giúp học viên hiểu cách bạn giao tiếp và tổ chức buổi học."
+      icon={Video}
+    >
+      <div className="overflow-hidden rounded-2xl border border-[#cfe1fa] bg-black shadow-sm">
+        <video src={src} controls preload="metadata" className="aspect-video w-full object-contain">
+          Trình duyệt không hỗ trợ phát video.
+        </video>
+      </div>
+    </SectionShell>
+  );
+}
diff --git a/apps/sale/features/tutor-profile-editor/components/modals/AcademicProfileEditDialog.tsx b/apps/sale/features/tutor-profile-editor/components/modals/AcademicProfileEditDialog.tsx
new file mode 100644
index 0000000..53f2d19
--- /dev/null
+++ b/apps/sale/features/tutor-profile-editor/components/modals/AcademicProfileEditDialog.tsx
@@ -0,0 +1,84 @@
+"use client";
+
+import { useFormContext } from "react-hook-form";
+import type { TutorProfileEditorValues } from "../../schemas/profile-editor.schema";
+import { ProfileBlockDialog } from "../ProfileBlockDialog";
+import { ProfileField } from "../ProfileField";
+import { SimpleListField } from "../SimpleListField";
+
+function AcademicProfileFields() {
+  const {
+    register,
+    formState: { errors },
+  } = useFormContext<TutorProfileEditorValues>();
+
+  return (
+    <>
+      <div className="grid gap-4 sm:grid-cols-2">
+        <ProfileField
+          id="university"
+          label="Trường học"
+          reviewRequired
+          error={errors.university}
+          registration={register("university")}
+        />
+        <ProfileField
+          id="major"
+          label="Chuyên ngành"
+          reviewRequired
+          error={errors.major}
+          registration={register("major")}
+        />
+      </div>
+      <ProfileField
+        id="student-year"
+        label="Tình trạng học tập"
+        description="Ví dụ: Sinh viên năm 3, Đã tốt nghiệp."
+        reviewRequired
+        error={errors.studentYear}
+        registration={register("studentYear")}
+      />
+      <SimpleListField
+        name="education"
+        label="Học vấn"
+        itemLabel="Thông tin học vấn"
+        addLabel="Thêm học vấn"
+        description="Mỗi thông tin được hiển thị thành một mục riêng trên hồ sơ."
+        reviewRequired
+        multiline
+      />
+      <SimpleListField
+        name="achievements"
+        label="Thành tích"
+        itemLabel="Thành tích"
+        addLabel="Thêm thành tích"
+        description="Chỉ nhập nội dung có thể công khai và cung cấp minh chứng khi cần."
+        reviewRequired
+        multiline
+      />
+    </>
+  );
+}
+
+export function AcademicProfileEditDialog({
+  profile,
+  onClose,
+  onSave,
+}: {
+  profile: TutorProfileEditorValues;
+  onClose: () => void;
+  onSave: (values: TutorProfileEditorValues) => void;
+}) {
+  return (
+    <ProfileBlockDialog
+      open
+      title="Chỉnh sửa hồ sơ học thuật"
+      description="Cập nhật trường học, chuyên ngành, tình trạng học tập và các thành tích công khai."
+      profile={profile}
+      onClose={onClose}
+      onSave={onSave}
+    >
+      <AcademicProfileFields />
+    </ProfileBlockDialog>
+  );
+}
diff --git a/apps/sale/features/tutor-profile-editor/components/modals/BasicInfoEditDialog.tsx b/apps/sale/features/tutor-profile-editor/components/modals/BasicInfoEditDialog.tsx
new file mode 100644
index 0000000..9cb7b73
--- /dev/null
+++ b/apps/sale/features/tutor-profile-editor/components/modals/BasicInfoEditDialog.tsx
@@ -0,0 +1,135 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import Image from "next/image";
+import { useFormContext } from "react-hook-form";
+import type { TutorProfileEditorValues } from "../../schemas/profile-editor.schema";
+import { TEACHING_MODE_OPTIONS } from "../../constants/profile-editor.options";
+import { isLocalPreviewUrl, validatePreviewFile } from "../../utils/file-preview";
+import { AvailabilityListField } from "../AvailabilityListField";
+import { ProfileBlockDialog } from "../ProfileBlockDialog";
+import { ProfileField } from "../ProfileField";
+import { SimpleListField } from "../SimpleListField";
+
+const imageRule = {
+  acceptedTypes: ["image/jpeg", "image/png", "image/webp"],
+  maxBytes: 5 * 1024 * 1024,
+};
+
+function BasicInfoFields({
+  profile,
+  avatarUrl,
+  fileError,
+  onFileChange,
+}: {
+  profile: TutorProfileEditorValues;
+  avatarUrl: string;
+  fileError: string | null;
+  onFileChange: (file?: File) => void;
+}) {
+  const {
+    register,
+    formState: { errors },
+  } = useFormContext<TutorProfileEditorValues>();
+
+  return (
+    <>
+      <div className="grid gap-4 rounded-xl border border-[#dce7f7] bg-[#f7f9fd] p-4 sm:grid-cols-[112px_minmax(0,1fr)] sm:items-center">
+        <div className="relative aspect-square w-28 overflow-hidden rounded-2xl border border-[#cfe1fa] bg-white">
+          <Image
+            src={avatarUrl}
+            alt={`Xem trước ảnh đại diện của ${profile.displayName}`}
+            fill
+            unoptimized={isLocalPreviewUrl(avatarUrl)}
+            sizes="112px"
+            className="object-cover"
+          />
+        </div>
+        <div>
+          <label htmlFor="avatar-file" className="text-sm font-bold text-[#17142f]">
+            Ảnh đại diện
+          </label>
+          <p className="mt-1 text-xs leading-5 text-[#56516a]">
+            JPG, PNG hoặc WEBP. Dung lượng tối đa 5 MB.
+          </p>
+          <input
+            id="avatar-file"
+            type="file"
+            accept="image/jpeg,image/png,image/webp"
+            onChange={(event) => onFileChange(event.target.files?.[0])}
+            className="mt-3 block w-full text-xs text-[#56516a] file:mr-3 file:rounded-full file:border-0 file:bg-[#280f91] file:px-4 file:py-2 file:font-bold file:text-white hover:file:bg-[#200c76]"
+          />
+          {fileError ? <p role="alert" className="mt-2 text-xs font-semibold text-[#9f2017]">{fileError}</p> : null}
+        </div>
+      </div>
+
+      <div className="rounded-xl border border-[#cfe1fa] bg-[#f7f9fd] p-4">
+        <p className="text-xs font-bold text-[#56516a]">Tên hiển thị</p>
+        <p className="mt-1 text-sm font-extrabold text-[#17142f]">{profile.displayName}</p>
+        <p className="mt-1 text-xs leading-5 text-[#716c83]">Thông tin tài khoản được đồng bộ từ hệ thống và không chỉnh sửa tại đây.</p>
+      </div>
+
+      <ProfileField id="headline" label="Tiêu đề hồ sơ" reviewRequired error={errors.headline} registration={register("headline")} />
+      <ProfileField id="shortIntro" label="Giới thiệu ngắn" reviewRequired error={errors.shortIntro} registration={register("shortIntro")} multiline rows={3} />
+      <SimpleListField name="subjects" label="Môn giảng dạy" itemLabel="Môn học" addLabel="Thêm môn" reviewRequired />
+      <SimpleListField name="specializations" label="Chuyên môn nổi bật" itemLabel="Chuyên môn" addLabel="Thêm chuyên môn" reviewRequired />
+      <ProfileField
+        id="teaching-mode"
+        label="Hình thức dạy"
+        error={errors.teachingModes?.[0]?.value}
+        registration={register("teachingModes.0.value")}
+        options={TEACHING_MODE_OPTIONS}
+      />
+      <div className="grid gap-4 sm:grid-cols-2">
+        <ProfileField id="area" label="Khu vực dạy" error={errors.area} registration={register("area")} />
+        <ProfileField id="hourlyRate" label="Học phí" reviewRequired error={errors.hourlyRate} registration={register("hourlyRate")} />
+      </div>
+      <AvailabilityListField />
+    </>
+  );
+}
+
+export function BasicInfoEditDialog({
+  profile,
+  onClose,
+  onSave,
+}: {
+  profile: TutorProfileEditorValues;
+  onClose: () => void;
+  onSave: (values: TutorProfileEditorValues) => void;
+}) {
+  const [avatarUrl, setAvatarUrl] = useState(profile.avatarUrl);
+  const [fileError, setFileError] = useState<string | null>(null);
+  const generatedUrl = useRef<string | null>(null);
+  const committed = useRef(false);
+
+  useEffect(() => () => {
+    if (!committed.current && generatedUrl.current) URL.revokeObjectURL(generatedUrl.current);
+  }, []);
+
+  const handleFileChange = (file?: File) => {
+    if (!file) return;
+    const error = validatePreviewFile(file, imageRule);
+    setFileError(error);
+    if (error) return;
+    if (generatedUrl.current) URL.revokeObjectURL(generatedUrl.current);
+    generatedUrl.current = URL.createObjectURL(file);
+    setAvatarUrl(generatedUrl.current);
+  };
+
+  return (
+    <ProfileBlockDialog
+      open
+      title="Chỉnh sửa thông tin cơ bản"
+      description="Cập nhật phần tổng quan mà học viên nhìn thấy đầu tiên."
+      profile={profile}
+      onClose={onClose}
+      onSave={(values) => {
+        committed.current = true;
+        onSave({ ...values, avatarUrl });
+      }}
+    >
+      <BasicInfoFields profile={profile} avatarUrl={avatarUrl} fileError={fileError} onFileChange={handleFileChange} />
+    </ProfileBlockDialog>
+  );
+}
diff --git a/apps/sale/features/tutor-profile-editor/components/modals/EvidenceEditDialog.tsx b/apps/sale/features/tutor-profile-editor/components/modals/EvidenceEditDialog.tsx
new file mode 100644
index 0000000..3378119
--- /dev/null
+++ b/apps/sale/features/tutor-profile-editor/components/modals/EvidenceEditDialog.tsx
@@ -0,0 +1,203 @@
+"use client";
+
+import { useEffect, useRef, useState, type MutableRefObject } from "react";
+import Image from "next/image";
+import { useFieldArray, useFormContext } from "react-hook-form";
+import type { TutorProfileEditorValues } from "../../schemas/profile-editor.schema";
+import { isLocalPreviewUrl, validatePreviewFile } from "../../utils/file-preview";
+import { ProfileBlockDialog } from "../ProfileBlockDialog";
+import { ProfileField } from "../ProfileField";
+import {
+  RepeaterError,
+  RepeaterHeader,
+  RepeaterItem,
+} from "../RepeaterPrimitives";
+
+const imageRule = {
+  acceptedTypes: ["image/jpeg", "image/png", "image/webp"],
+  maxBytes: 10 * 1024 * 1024,
+};
+
+function EvidenceFields({
+  fileErrors,
+  onFileChange,
+  onRemove,
+}: {
+  fileErrors: Record<number, string>;
+  onFileChange: (index: number, file?: File) => void;
+  onRemove: (index: number, imageUrl: string, removeField: (index: number) => void) => void;
+}) {
+  const {
+    control,
+    register,
+    watch,
+    formState: { errors },
+  } = useFormContext<TutorProfileEditorValues>();
+  const { fields, append, remove } = useFieldArray({ control, name: "certificates" });
+  const certificates = watch("certificates");
+
+  return (
+    <div className="grid gap-4">
+      <RepeaterHeader
+        label="Minh chứng"
+        description="Tách riêng tên, loại, trạng thái và mô tả công khai cho từng minh chứng."
+        addLabel="Thêm minh chứng"
+        reviewRequired
+        onAdd={() =>
+          append({
+            title: "",
+            type: "",
+            imageUrl: "/images/TutorEvidence/certi-1.png",
+            status: "Chờ xác minh",
+            description: "",
+          })
+        }
+      />
+      {fields.map((field, index) => {
+        const imageUrl = certificates[index]?.imageUrl ?? field.imageUrl;
+        return (
+          <RepeaterItem
+            key={field.id}
+            title={`Minh chứng ${index + 1}`}
+            canRemove={fields.length > 1}
+            onRemove={() => onRemove(index, imageUrl, remove)}
+          >
+            <div className="grid gap-4">
+              <div className="grid gap-4 sm:grid-cols-[144px_minmax(0,1fr)] sm:items-center">
+                <div className="relative aspect-[4/3] overflow-hidden rounded-xl border border-[#cfe1fa] bg-white">
+                  <Image
+                    src={imageUrl}
+                    alt={`Xem trước minh chứng ${index + 1}`}
+                    fill
+                    unoptimized={isLocalPreviewUrl(imageUrl)}
+                    sizes="144px"
+                    className="object-contain p-2"
+                  />
+                </div>
+                <div>
+                  <label htmlFor={`evidence-file-${index}`} className="text-sm font-bold text-[#17142f]">
+                    Tệp hình ảnh
+                  </label>
+                  <p className="mt-1 text-xs leading-5 text-[#56516a]">
+                    JPG, PNG hoặc WEBP, tối đa 10 MB.
+                  </p>
+                  <input
+                    id={`evidence-file-${index}`}
+                    type="file"
+                    accept="image/jpeg,image/png,image/webp"
+                    onChange={(event) => onFileChange(index, event.target.files?.[0])}
+                    className="mt-2 block w-full text-xs text-[#56516a] file:mr-3 file:rounded-full file:border-0 file:bg-[#280f91]/10 file:px-3 file:py-2 file:font-bold file:text-[#280f91]"
+                  />
+                  {fileErrors[index] ? (
+                    <p role="alert" className="mt-2 text-xs font-semibold text-[#9f2017]">
+                      {fileErrors[index]}
+                    </p>
+                  ) : null}
+                </div>
+              </div>
+              <div className="grid gap-4 sm:grid-cols-2">
+                <ProfileField
+                  id={`certificate-${index}-title`}
+                  label="Tên"
+                  error={errors.certificates?.[index]?.title}
+                  registration={register(`certificates.${index}.title`)}
+                />
+                <ProfileField
+                  id={`certificate-${index}-type`}
+                  label="Loại"
+                  error={errors.certificates?.[index]?.type}
+                  registration={register(`certificates.${index}.type`)}
+                />
+              </div>
+              <div className="rounded-xl border border-[#cfe1fa] bg-white px-3 py-3">
+                <p className="text-xs font-bold text-[#56516a]">Trạng thái</p>
+                <p className="mt-1 text-sm font-extrabold text-[#17142f]">{field.status}</p>
+                <p className="mt-1 text-xs leading-5 text-[#716c83]">Trạng thái do BeeWise cập nhật sau khi xét duyệt.</p>
+              </div>
+              <ProfileField
+                id={`certificate-${index}-description`}
+                label="Mô tả công khai"
+                error={errors.certificates?.[index]?.description}
+                registration={register(`certificates.${index}.description`)}
+                multiline
+                rows={3}
+              />
+            </div>
+          </RepeaterItem>
+        );
+      })}
+      <RepeaterError message={errors.certificates?.root?.message} />
+    </div>
+  );
+}
+
+function EvidenceDialogContent({
+  generatedUrls,
+}: {
+  generatedUrls: MutableRefObject<Set<string>>;
+}) {
+  const { setValue } = useFormContext<TutorProfileEditorValues>();
+  const [fileErrors, setFileErrors] = useState<Record<number, string>>({});
+
+  const handleFileChange = (index: number, file?: File) => {
+    if (!file) return;
+    const error = validatePreviewFile(file, imageRule);
+    setFileErrors((current) => ({ ...current, [index]: error ?? "" }));
+    if (error) return;
+    const url = URL.createObjectURL(file);
+    generatedUrls.current.add(url);
+    setValue(`certificates.${index}.imageUrl`, url, { shouldDirty: true });
+  };
+
+  return (
+    <EvidenceFields
+      fileErrors={fileErrors}
+      onFileChange={handleFileChange}
+      onRemove={(index, imageUrl, removeField) => {
+        if (imageUrl && generatedUrls.current.has(imageUrl)) {
+          URL.revokeObjectURL(imageUrl);
+          generatedUrls.current.delete(imageUrl);
+        }
+        removeField(index);
+      }}
+    />
+  );
+}
+
+export function EvidenceEditDialog({
+  profile,
+  onClose,
+  onSave,
+}: {
+  profile: TutorProfileEditorValues;
+  onClose: () => void;
+  onSave: (values: TutorProfileEditorValues) => void;
+}) {
+  const generatedUrls = useRef(new Set<string>());
+  const committed = useRef(false);
+
+  useEffect(
+    () => () => {
+      if (!committed.current) {
+        generatedUrls.current.forEach((url) => URL.revokeObjectURL(url));
+      }
+    },
+    [],
+  );
+
+  return (
+    <ProfileBlockDialog
+      open
+      title="Chỉnh sửa minh chứng"
+      description="Tải ảnh và mô tả từng minh chứng. Trạng thái xét duyệt không thể chỉnh sửa."
+      profile={profile}
+      onClose={onClose}
+      onSave={(values) => {
+        committed.current = true;
+        onSave(values);
+      }}
+    >
+      <EvidenceDialogContent generatedUrls={generatedUrls} />
+    </ProfileBlockDialog>
+  );
+}
diff --git a/apps/sale/features/tutor-profile-editor/components/modals/ExperienceEditDialog.tsx b/apps/sale/features/tutor-profile-editor/components/modals/ExperienceEditDialog.tsx
new file mode 100644
index 0000000..0299951
--- /dev/null
+++ b/apps/sale/features/tutor-profile-editor/components/modals/ExperienceEditDialog.tsx
@@ -0,0 +1,95 @@
+"use client";
+
+import { useFieldArray, useFormContext } from "react-hook-form";
+import type { TutorProfileEditorValues } from "../../schemas/profile-editor.schema";
+import { ProfileBlockDialog } from "../ProfileBlockDialog";
+import { ProfileField } from "../ProfileField";
+import {
+  RepeaterError,
+  RepeaterHeader,
+  RepeaterItem,
+} from "../RepeaterPrimitives";
+
+function ExperienceFields() {
+  const {
+    control,
+    register,
+    formState: { errors },
+  } = useFormContext<TutorProfileEditorValues>();
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: "teachingHistory",
+  });
+
+  return (
+    <div className="grid gap-4">
+      <RepeaterHeader
+        label="Kinh nghiệm giảng dạy"
+        description="Mỗi kinh nghiệm được trình bày thành một mục công khai riêng."
+        addLabel="Thêm kinh nghiệm"
+        reviewRequired
+        onAdd={() =>
+          append({ title: "", detail: "", outcome: "Chờ xác minh" })
+        }
+      />
+      {fields.map((field, index) => (
+        <RepeaterItem
+          key={field.id}
+          title={`Kinh nghiệm ${index + 1}`}
+          canRemove={fields.length > 1}
+          onRemove={() => remove(index)}
+        >
+          <div className="grid gap-4">
+            <ProfileField
+              id={`teaching-history-${index}-title`}
+              label="Tên kinh nghiệm"
+              error={errors.teachingHistory?.[index]?.title}
+              registration={register(`teachingHistory.${index}.title`)}
+            />
+            <ProfileField
+              id={`teaching-history-${index}-detail`}
+              label="Mô tả công khai"
+              error={errors.teachingHistory?.[index]?.detail}
+              registration={register(`teachingHistory.${index}.detail`)}
+              multiline
+              rows={3}
+            />
+            <div className="rounded-xl border border-[#cfe1fa] bg-white px-3 py-3">
+              <p className="text-xs font-bold text-[#56516a]">Trạng thái</p>
+              <p className="mt-1 text-sm font-extrabold text-[#17142f]">
+                {field.outcome}
+              </p>
+              <p className="mt-1 text-xs leading-5 text-[#716c83]">
+                BeeWise cập nhật trạng thái sau khi kiểm tra thông tin.
+              </p>
+            </div>
+          </div>
+        </RepeaterItem>
+      ))}
+      <RepeaterError message={errors.teachingHistory?.root?.message} />
+    </div>
+  );
+}
+
+export function ExperienceEditDialog({
+  profile,
+  onClose,
+  onSave,
+}: {
+  profile: TutorProfileEditorValues;
+  onClose: () => void;
+  onSave: (values: TutorProfileEditorValues) => void;
+}) {
+  return (
+    <ProfileBlockDialog
+      open
+      title="Chỉnh sửa kinh nghiệm"
+      description="Bổ sung các hoạt động giảng dạy. Trạng thái xác minh do hệ thống quản lý."
+      profile={profile}
+      onClose={onClose}
+      onSave={onSave}
+    >
+      <ExperienceFields />
+    </ProfileBlockDialog>
+  );
+}
diff --git a/apps/sale/features/tutor-profile-editor/components/modals/IntroductionEditDialog.tsx b/apps/sale/features/tutor-profile-editor/components/modals/IntroductionEditDialog.tsx
new file mode 100644
index 0000000..b51de70
--- /dev/null
+++ b/apps/sale/features/tutor-profile-editor/components/modals/IntroductionEditDialog.tsx
@@ -0,0 +1,17 @@
+"use client";
+
+import type { TutorProfileEditorValues } from "../../schemas/profile-editor.schema";
+import { ProfileBlockDialog } from "../ProfileBlockDialog";
+import { SimpleListField } from "../SimpleListField";
+
+export function IntroductionEditDialog({ profile, onClose, onSave }: {
+  profile: TutorProfileEditorValues;
+  onClose: () => void;
+  onSave: (values: TutorProfileEditorValues) => void;
+}) {
+  return (
+    <ProfileBlockDialog open title="Chỉnh sửa giới thiệu" description="Tách nội dung thành các đoạn ngắn, rõ ràng và dễ đọc." profile={profile} onClose={onClose} onSave={onSave}>
+      <SimpleListField name="introduction" label="Nội dung giới thiệu" itemLabel="Đoạn giới thiệu" addLabel="Thêm đoạn" reviewRequired multiline />
+    </ProfileBlockDialog>
+  );
+}
diff --git a/apps/sale/features/tutor-profile-editor/components/modals/TeachingMethodsEditDialog.tsx b/apps/sale/features/tutor-profile-editor/components/modals/TeachingMethodsEditDialog.tsx
new file mode 100644
index 0000000..aa53fb3
--- /dev/null
+++ b/apps/sale/features/tutor-profile-editor/components/modals/TeachingMethodsEditDialog.tsx
@@ -0,0 +1,17 @@
+"use client";
+
+import type { TutorProfileEditorValues } from "../../schemas/profile-editor.schema";
+import { ProfileBlockDialog } from "../ProfileBlockDialog";
+import { TeachingMethodListField } from "../TeachingMethodListField";
+
+export function TeachingMethodsEditDialog({ profile, onClose, onSave }: {
+  profile: TutorProfileEditorValues;
+  onClose: () => void;
+  onSave: (values: TutorProfileEditorValues) => void;
+}) {
+  return (
+    <ProfileBlockDialog open title="Chỉnh sửa phương pháp giảng dạy" description="Mô tả cách bạn tổ chức buổi học và theo dõi tiến bộ." profile={profile} onClose={onClose} onSave={onSave}>
+      <TeachingMethodListField />
+    </ProfileBlockDialog>
+  );
+}
diff --git a/apps/sale/features/tutor-profile-editor/components/modals/VideoEditDialog.tsx b/apps/sale/features/tutor-profile-editor/components/modals/VideoEditDialog.tsx
new file mode 100644
index 0000000..ee47501
--- /dev/null
+++ b/apps/sale/features/tutor-profile-editor/components/modals/VideoEditDialog.tsx
@@ -0,0 +1,108 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+} from "@workspace/ui/components/ui/dialog";
+import { Button } from "@workspace/ui/components/ui/button";
+import { validatePreviewFile } from "../../utils/file-preview";
+
+const videoRule = {
+  acceptedTypes: ["video/mp4", "video/webm"],
+  maxBytes: 50 * 1024 * 1024,
+};
+
+export function VideoEditDialog({
+  videoUrl,
+  onClose,
+  onSave,
+}: {
+  videoUrl: string;
+  onClose: () => void;
+  onSave: (videoUrl: string) => void;
+}) {
+  const [previewUrl, setPreviewUrl] = useState(videoUrl);
+  const [fileError, setFileError] = useState<string | null>(null);
+  const generatedUrl = useRef<string | null>(null);
+  const committed = useRef(false);
+
+  useEffect(
+    () => () => {
+      if (!committed.current && generatedUrl.current) {
+        URL.revokeObjectURL(generatedUrl.current);
+      }
+    },
+    [],
+  );
+
+  const handleFileChange = (file?: File) => {
+    if (!file) return;
+    const error = validatePreviewFile(file, videoRule);
+    setFileError(error);
+    if (error) return;
+    if (generatedUrl.current) URL.revokeObjectURL(generatedUrl.current);
+    generatedUrl.current = URL.createObjectURL(file);
+    setPreviewUrl(generatedUrl.current);
+  };
+
+  return (
+    <Dialog open onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="w-[calc(100vw-1rem)] max-w-2xl overflow-hidden rounded-2xl border-[#cfe1fa] bg-white p-0 sm:w-[calc(100vw-2rem)]">
+        <div className="border-b border-[#dce7f7] px-5 py-5 pr-14 sm:px-6">
+          <DialogTitle className="font-nunito text-xl font-extrabold text-[#17142f] sm:text-2xl">
+            Chỉnh sửa video giới thiệu
+          </DialogTitle>
+          <DialogDescription className="mt-1.5 leading-6 text-[#56516a]">
+            Tải video MP4 hoặc WEBM, tối đa 50 MB và xem trước trước khi lưu.
+          </DialogDescription>
+        </div>
+        <div className="grid gap-4 px-5 py-5 sm:px-6">
+          <video
+            key={previewUrl}
+            src={previewUrl}
+            controls
+            preload="metadata"
+            className="aspect-video w-full rounded-2xl bg-black object-contain"
+          >
+            Trình duyệt không hỗ trợ phát video.
+          </video>
+          <div>
+            <label htmlFor="profile-video-file" className="text-sm font-bold text-[#17142f]">
+              Tệp video
+            </label>
+            <input
+              id="profile-video-file"
+              type="file"
+              accept="video/mp4,video/webm"
+              onChange={(event) => handleFileChange(event.target.files?.[0])}
+              className="mt-2 block w-full text-xs text-[#56516a] file:mr-3 file:rounded-full file:border-0 file:bg-[#280f91] file:px-4 file:py-2 file:font-bold file:text-white hover:file:bg-[#200c76]"
+            />
+            {fileError ? (
+              <p role="alert" className="mt-2 text-xs font-semibold text-[#9f2017]">
+                {fileError}
+              </p>
+            ) : null}
+          </div>
+        </div>
+        <div className="flex flex-col-reverse gap-2 border-t border-[#dce7f7] px-5 py-4 sm:flex-row sm:justify-end sm:px-6">
+          <Button type="button" variant="outline" onClick={onClose} className="rounded-full px-5">
+            Hủy
+          </Button>
+          <Button
+            type="button"
+            onClick={() => {
+              committed.current = true;
+              onSave(previewUrl);
+            }}
+            className="rounded-full bg-[#280f91] px-5 text-white hover:bg-[#200c76]"
+          >
+            Lưu video
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/sale/features/tutor-profile-editor/constants/profile-editor.fixture.ts b/apps/sale/features/tutor-profile-editor/constants/profile-editor.fixture.ts
new file mode 100644
index 0000000..46723b3
--- /dev/null
+++ b/apps/sale/features/tutor-profile-editor/constants/profile-editor.fixture.ts
@@ -0,0 +1,44 @@
+import { mockTutorProfile } from "../../tutor-profile/types/mockTutorProfile";
+import type { TutorProfileEditorValues } from "../schemas/profile-editor.schema";
+import { normalizeTeachingMode } from "./profile-editor.options";
+
+const toListItems = (items: string[]) =>
+  items.map((value) => ({ value }));
+
+const toAvailabilityItems = (slots: Array<{ day: string; time: string }>) =>
+  slots.flatMap((slot) => {
+    const days = slot.day.split(",").map((day, index) => {
+      const normalizedDay = day.trim();
+      return index === 0 || normalizedDay === "Chủ nhật"
+        ? normalizedDay
+        : `Thứ ${normalizedDay}`;
+    });
+    return days.map((day) => ({ day, time: slot.time }));
+  });
+
+export const tutorProfileEditorDefaultValues: TutorProfileEditorValues = {
+  displayName: mockTutorProfile.displayName,
+  avatarUrl: mockTutorProfile.avatarUrl,
+  headline: mockTutorProfile.headline,
+  shortIntro: mockTutorProfile.shortIntro,
+  university: mockTutorProfile.university,
+  major: mockTutorProfile.major,
+  studentYear: mockTutorProfile.studentYear,
+  subjects: toListItems(mockTutorProfile.subjects),
+  specializations: toListItems(mockTutorProfile.specializations),
+  teachingModes: [{ value: normalizeTeachingMode(mockTutorProfile.teachingModes) }],
+  area: mockTutorProfile.area,
+  hourlyRate: mockTutorProfile.hourlyRate,
+  availability: toAvailabilityItems(mockTutorProfile.availability),
+  experienceYears: mockTutorProfile.experienceYears,
+  introduction: toListItems(mockTutorProfile.introduction),
+  teachingMethods: mockTutorProfile.teachingMethods.map((item) => ({ ...item })),
+  education: toListItems(mockTutorProfile.education),
+  achievements: toListItems(mockTutorProfile.achievements),
+  teachingHistory: mockTutorProfile.teachingHistory.map((item) => ({ ...item })),
+  certificates: mockTutorProfile.certificates.map((item, index) => ({
+    ...item,
+    imageUrl: `/images/TutorEvidence/certi-${(index % 3) + 1}.png`,
+    status: item.status ?? "Đã xác minh",
+  })),
+};
diff --git a/apps/sale/features/tutor-profile-editor/constants/profile-editor.options.ts b/apps/sale/features/tutor-profile-editor/constants/profile-editor.options.ts
new file mode 100644
index 0000000..4ac880b
--- /dev/null
+++ b/apps/sale/features/tutor-profile-editor/constants/profile-editor.options.ts
@@ -0,0 +1,21 @@
+export const TEACHING_MODE_VALUES = [
+  "Online",
+  "Tại nhà",
+  "Online & tại nhà",
+] as const;
+
+export type TeachingModeValue = (typeof TEACHING_MODE_VALUES)[number];
+
+export const TEACHING_MODE_OPTIONS: Array<{
+  value: TeachingModeValue;
+  label: TeachingModeValue;
+}> = TEACHING_MODE_VALUES.map((value) => ({ value, label: value }));
+
+export function normalizeTeachingMode(items: string[]): TeachingModeValue {
+  const hasOnline = items.some((item) => item.toLocaleLowerCase("vi").includes("online"));
+  const hasHome = items.some((item) => item.toLocaleLowerCase("vi").includes("tại nhà"));
+
+  if (hasOnline && hasHome) return "Online & tại nhà";
+  if (hasHome) return "Tại nhà";
+  return "Online";
+}
diff --git a/apps/sale/features/tutor-profile-editor/hooks/useTutorProfileInlineEditor.ts b/apps/sale/features/tutor-profile-editor/hooks/useTutorProfileInlineEditor.ts
new file mode 100644
index 0000000..5fcc502
--- /dev/null
+++ b/apps/sale/features/tutor-profile-editor/hooks/useTutorProfileInlineEditor.ts
@@ -0,0 +1,68 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { useMutation } from "@tanstack/react-query";
+import { toast } from "@workspace/ui/components/ui/bee-toast/index";
+import { tutorProfileEditorDefaultValues } from "../constants/profile-editor.fixture";
+import type { TutorProfileEditorValues } from "../schemas/profile-editor.schema";
+import { tutorProfileEditorService } from "../services/profile-editor.service";
+import type {
+  ProfileBlockId,
+  ProfileMediaState,
+} from "../types/profile-editor.types";
+import { mapEditorValuesToTutorProfile } from "../utils/profile-editor.mapper";
+
+export function useTutorProfileInlineEditor() {
+  const [profile, setProfile] = useState<TutorProfileEditorValues>(
+    tutorProfileEditorDefaultValues,
+  );
+  const [activeBlock, setActiveBlock] = useState<ProfileBlockId | null>(null);
+  const [media, setMedia] = useState<ProfileMediaState>({
+    videoUrl: "/video/videoplayback.mp4#t=0.1",
+  });
+  const [submittedAt, setSubmittedAt] = useState<string | null>(null);
+
+  const tutor = useMemo(() => mapEditorValuesToTutorProfile(profile), [profile]);
+
+  const submitReviewMutation = useMutation({
+    mutationFn: () => tutorProfileEditorService.submitForReview(profile, media),
+    onSuccess: (result) => {
+      setSubmittedAt(result.updatedAt);
+      toast.success("Đã gửi hồ sơ xét duyệt", {
+        description:
+          "Hồ sơ công khai hiện tại vẫn được giữ cho đến khi nội dung mới được duyệt.",
+        position: "top-right",
+      });
+    },
+    onError: () => {
+      toast.error("Chưa thể gửi hồ sơ", {
+        description: "Vui lòng kiểm tra kết nối và thử lại.",
+        position: "top-right",
+      });
+    },
+  });
+
+  const saveBlock = (values: TutorProfileEditorValues): void => {
+    setProfile(values);
+    setActiveBlock(null);
+    toast.success("Đã cập nhật nội dung", {
+      description: "Thay đổi đã được lưu vào bản chỉnh sửa hiện tại.",
+      position: "top-right",
+    });
+  };
+
+  return {
+    profile,
+    tutor,
+    media,
+    activeBlock,
+    submittedAt,
+    isSubmitting: submitReviewMutation.isPending,
+    openBlock: setActiveBlock,
+    closeBlock: () => setActiveBlock(null),
+    saveBlock,
+    setVideoUrl: (videoUrl: string) =>
+      setMedia((current) => ({ ...current, videoUrl })),
+    submitForReview: () => submitReviewMutation.mutate(),
+  };
+}
diff --git a/apps/sale/features/tutor-profile-editor/index.ts b/apps/sale/features/tutor-profile-editor/index.ts
new file mode 100644
index 0000000..006ae96
--- /dev/null
+++ b/apps/sale/features/tutor-profile-editor/index.ts
@@ -0,0 +1,2 @@
+export { TutorProfileEditorScreen } from "./components/TutorProfileEditorScreen";
+export { ProfileEditorSkeleton } from "./components/ProfileEditorSkeleton";
diff --git a/apps/sale/features/tutor-profile-editor/schemas/profile-editor.schema.ts b/apps/sale/features/tutor-profile-editor/schemas/profile-editor.schema.ts
new file mode 100644
index 0000000..afafc42
--- /dev/null
+++ b/apps/sale/features/tutor-profile-editor/schemas/profile-editor.schema.ts
@@ -0,0 +1,84 @@
+import { z } from "zod";
+import { TEACHING_MODE_VALUES } from "../constants/profile-editor.options";
+
+const requiredText = (label: string, minimum = 2) =>
+  z.string().trim().min(minimum, `${label} cần ít nhất ${minimum} ký tự.`);
+
+const listItemSchema = z.object({ value: requiredText("Nội dung") });
+
+const requiredList = (label: string) =>
+  z.array(listItemSchema).min(1, `Cần có ít nhất một ${label.toLowerCase()}.`);
+
+export const tutorProfileEditorSchema = z.object({
+  displayName: requiredText("Họ và tên"),
+  avatarUrl: z.string(),
+  headline: requiredText("Tiêu đề hồ sơ", 20).max(
+    120,
+    "Tiêu đề hồ sơ tối đa 120 ký tự.",
+  ),
+  shortIntro: requiredText("Giới thiệu ngắn", 30).max(
+    240,
+    "Giới thiệu ngắn tối đa 240 ký tự.",
+  ),
+  university: requiredText("Trường học"),
+  major: requiredText("Chuyên ngành"),
+  studentYear: requiredText("Tình trạng học tập"),
+  subjects: requiredList("Môn giảng dạy"),
+  specializations: requiredList("Chuyên môn nổi bật"),
+  teachingModes: z
+    .array(z.object({ value: z.enum(TEACHING_MODE_VALUES) }))
+    .length(1, "Vui lòng chọn một hình thức dạy."),
+  area: requiredText("Khu vực dạy"),
+  hourlyRate: requiredText("Học phí"),
+  availability: z
+    .array(
+      z.object({
+        day: requiredText("Ngày dạy"),
+        time: requiredText("Khung giờ"),
+      }),
+    )
+    .min(1, "Cần có ít nhất một lịch rảnh."),
+  experienceYears: requiredText("Số năm kinh nghiệm"),
+  introduction: requiredList("Đoạn giới thiệu"),
+  teachingMethods: z
+    .array(
+      z.object({
+        title: requiredText("Tên phương pháp"),
+        description: requiredText("Mô tả phương pháp", 10),
+      }),
+    )
+    .min(1, "Cần có ít nhất một phương pháp giảng dạy."),
+  education: requiredList("Thông tin học vấn"),
+  achievements: requiredList("Thành tích"),
+  teachingHistory: z
+    .array(
+      z.object({
+        title: requiredText("Tên kinh nghiệm"),
+        detail: requiredText("Mô tả kết quả", 10),
+        outcome: requiredText("Trạng thái xác minh"),
+      }),
+    )
+    .min(1, "Cần có ít nhất một kinh nghiệm giảng dạy."),
+  certificates: z
+    .array(
+      z.object({
+        title: requiredText("Tên minh chứng"),
+        type: requiredText("Loại minh chứng"),
+        imageUrl: z.string(),
+        status: requiredText("Trạng thái xác minh"),
+        description: requiredText("Mô tả công khai", 10),
+      }),
+    )
+    .min(1, "Cần có ít nhất một minh chứng."),
+});
+
+export type TutorProfileEditorValues = z.infer<
+  typeof tutorProfileEditorSchema
+>;
+
+export type TutorProfileReviewStatus = "PENDING_REVIEW";
+
+export interface TutorProfileMutationResult {
+  status: TutorProfileReviewStatus;
+  updatedAt: string;
+}
diff --git a/apps/sale/features/tutor-profile-editor/services/profile-editor.service.ts b/apps/sale/features/tutor-profile-editor/services/profile-editor.service.ts
new file mode 100644
index 0000000..d832757
--- /dev/null
+++ b/apps/sale/features/tutor-profile-editor/services/profile-editor.service.ts
@@ -0,0 +1,25 @@
+import type {
+  TutorProfileEditorValues,
+  TutorProfileMutationResult,
+} from "../schemas/profile-editor.schema";
+import type { ProfileMediaState } from "../types/profile-editor.types";
+
+const MOCK_LATENCY_MS = 650;
+
+function waitForMockRequest(): Promise<void> {
+  return new Promise((resolve) => {
+    setTimeout(resolve, MOCK_LATENCY_MS);
+  });
+}
+
+export const tutorProfileEditorService = {
+  async submitForReview(
+    profile: TutorProfileEditorValues,
+    media: ProfileMediaState,
+  ): Promise<TutorProfileMutationResult> {
+    void profile;
+    void media;
+    await waitForMockRequest();
+    return { status: "PENDING_REVIEW", updatedAt: new Date().toISOString() };
+  },
+};
diff --git a/apps/sale/features/tutor-profile-editor/types/profile-editor.types.ts b/apps/sale/features/tutor-profile-editor/types/profile-editor.types.ts
new file mode 100644
index 0000000..9712e76
--- /dev/null
+++ b/apps/sale/features/tutor-profile-editor/types/profile-editor.types.ts
@@ -0,0 +1,12 @@
+export type ProfileBlockId =
+  | "basic"
+  | "introduction"
+  | "methods"
+  | "academic"
+  | "video"
+  | "experience"
+  | "evidence";
+
+export interface ProfileMediaState {
+  videoUrl: string;
+}
diff --git a/apps/sale/features/tutor-profile-editor/utils/file-preview.ts b/apps/sale/features/tutor-profile-editor/utils/file-preview.ts
new file mode 100644
index 0000000..1ce48bf
--- /dev/null
+++ b/apps/sale/features/tutor-profile-editor/utils/file-preview.ts
@@ -0,0 +1,21 @@
+export interface FilePreviewRule {
+  acceptedTypes: string[];
+  maxBytes: number;
+}
+
+export function validatePreviewFile(
+  file: File,
+  rule: FilePreviewRule,
+): string | null {
+  if (!rule.acceptedTypes.includes(file.type)) {
+    return "Định dạng file chưa được hỗ trợ.";
+  }
+  if (file.size > rule.maxBytes) {
+    return `Dung lượng file tối đa ${Math.round(rule.maxBytes / 1024 / 1024)} MB.`;
+  }
+  return null;
+}
+
+export function isLocalPreviewUrl(value: string): boolean {
+  return value.startsWith("blob:");
+}
diff --git a/apps/sale/features/tutor-profile-editor/utils/profile-editor.mapper.ts b/apps/sale/features/tutor-profile-editor/utils/profile-editor.mapper.ts
new file mode 100644
index 0000000..dc08253
--- /dev/null
+++ b/apps/sale/features/tutor-profile-editor/utils/profile-editor.mapper.ts
@@ -0,0 +1,47 @@
+import type { TutorProfileData } from "../../tutor-profile/types/mockTutorProfile";
+import type { TutorProfileEditorValues } from "../schemas/profile-editor.schema";
+
+const listValues = (items: Array<{ value: string }>): string[] =>
+  items.map((item) => item.value.trim()).filter(Boolean);
+
+export function mapEditorValuesToTutorProfile(
+  values: TutorProfileEditorValues,
+): TutorProfileData {
+  return {
+    id: "nguyen-minh-anh-preview",
+    displayName: values.displayName,
+    avatarUrl: values.avatarUrl || "/images/Tutor/1.png",
+    headline: values.headline,
+    shortIntro: values.shortIntro,
+    university: values.university,
+    major: values.major,
+    studentYear: values.studentYear,
+    rating: 4.8,
+    reviewCount: 24,
+    responseTime: "Thường phản hồi trong 15 phút",
+    teachingHours: "350+ giờ dạy đã duyệt",
+    onlineStatus: "Đang nhận học sinh mới",
+    subjects: listValues(values.subjects),
+    specializations: listValues(values.specializations),
+    teachingModes: listValues(values.teachingModes),
+    area: values.area,
+    hourlyRate: values.hourlyRate,
+    availability: values.availability.map((slot) => ({ ...slot })),
+    experienceYears: values.experienceYears,
+    achievements: listValues(values.achievements),
+    introduction: listValues(values.introduction),
+    teachingMethods: values.teachingMethods.map((item) => ({ ...item })),
+    education: listValues(values.education),
+    teachingHistory: values.teachingHistory.map((item) => ({ ...item })),
+    certificates: values.certificates.map((item) => ({ ...item })),
+    reviews: [
+      {
+        author: "Chị Hạnh",
+        relationship: "Phụ huynh học sinh lớp 8",
+        rating: 5,
+        quote:
+          "Con mình hiểu bài nhanh hơn và không còn sợ môn Toán. Bạn giảng dễ hiểu và rất kiên nhẫn.",
+      },
+    ],
+  };
+}
diff --git a/apps/sale/features/tutor-profile/components/TutorHero.tsx b/apps/sale/features/tutor-profile/components/TutorHero.tsx
index d7659da..8f9a451 100644
--- a/apps/sale/features/tutor-profile/components/TutorHero.tsx
+++ b/apps/sale/features/tutor-profile/components/TutorHero.tsx
@@ -105,6 +105,9 @@ function HeroStatCard({
 }
 
 export function TutorHero({ tutor }: TutorHeroProps) {
+  const supportsHomeTeaching = tutor.teachingModes.some((mode) =>
+    mode.toLocaleLowerCase("vi").includes("tại nhà"),
+  );
   const infoCards: CompactInfoCardProps[] = [
     {
       icon: GraduationCap,
@@ -117,12 +120,12 @@ export function TutorHero({ tutor }: TutorHeroProps) {
       title: "Khu vực dạy",
       value: tutor.area,
       tone: "secondary" as const,
-      isHidden: !tutor.teachingModes.includes("Offline"),
+      isHidden: !supportsHomeTeaching,
     },
     {
       icon: Users,
       title: "Hình thức dạy",
-      value: tutor.teachingModes.join(" và "),
+      value: tutor.teachingModes.join(", "),
       tone: "primary" as const,
     },
   ];
@@ -146,6 +149,7 @@ export function TutorHero({ tutor }: TutorHeroProps) {
                   alt={`Ảnh đại diện của gia sư ${tutor.displayName}`}
                   fill
                   priority
+                  unoptimized={tutor.avatarUrl.startsWith("blob:")}
                   sizes="(min-width: 1024px) 176px, (min-width: 640px) 160px, 144px"
                   className="object-cover object-center transition duration-300 group-hover:scale-[1.03]"
                 />
diff --git a/apps/sale/features/tutor-profile/components/TutorOwnProfileScreen.tsx b/apps/sale/features/tutor-profile/components/TutorOwnProfileScreen.tsx
new file mode 100644
index 0000000..c380373
--- /dev/null
+++ b/apps/sale/features/tutor-profile/components/TutorOwnProfileScreen.tsx
@@ -0,0 +1,91 @@
+import Link from "next/link";
+import { Pencil } from "lucide-react";
+import { Button } from "@workspace/ui/components/ui/button";
+import { mockTutorProfile } from "../types/mockTutorProfile";
+import { TutorBioSection } from "./TutorBioSection";
+import { TutorCertificates } from "./TutorCertificates";
+import { TutorEducationAchievements } from "./TutorEducationAchievements";
+import { TutorFeedback } from "./TutorFeedback";
+import { TutorHero } from "./TutorHero";
+import { TutorIntroVideo } from "./TutorIntroVideo";
+import { TutorTeachingHistory } from "./TutorTeachingHistory";
+import { TutorTeachingMethods } from "./TutorTeachingMethods";
+
+function TutorOwnProfileSummary() {
+  return (
+    <aside className="rounded-3xl border border-[#cfe1fa] bg-white p-5 shadow-[0_18px_48px_-30px_rgba(40,15,145,0.25)] sm:p-6 lg:sticky lg:top-24">
+      <p className="text-xs font-bold uppercase tracking-[0.16em] text-[#447353]">
+        Trạng thái hồ sơ
+      </p>
+      <p className="mt-2 text-lg font-black text-[#17142f]">Đã xác thực bởi BeeWise</p>
+      <p className="mt-1 text-sm leading-6 text-[#56516a]">
+        Hồ sơ đang hiển thị và sẵn sàng nhận kết nối mới.
+      </p>
+
+      <div className="my-5 h-px bg-[#dce7f7]" />
+
+      <p className="text-xs font-bold text-[#716c83]">Học phí công khai</p>
+      <p className="mt-1 text-2xl font-black text-[#280f91]">
+        {mockTutorProfile.hourlyRate}
+      </p>
+
+      <h2 className="mt-6 text-sm font-extrabold text-[#17142f]">
+        Lịch có thể nhận lớp
+      </h2>
+      <div className="mt-3 grid gap-3">
+        {mockTutorProfile.availability.map((slot, index) => (
+          <div
+            key={`${slot.day}-${index}`}
+            className="rounded-xl bg-[#f7f9fd] px-3 py-3"
+          >
+            <p className="text-sm font-bold text-[#17142f]">{slot.day}</p>
+            <p className="mt-0.5 text-xs text-[#56516a]">{slot.time}</p>
+          </div>
+        ))}
+      </div>
+    </aside>
+  );
+}
+
+export function TutorOwnProfileScreen() {
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-col gap-4 rounded-3xl border border-[#cfe1fa] bg-white p-5 shadow-sm sm:flex-row sm:items-center sm:justify-between sm:p-6">
+        <div>
+          <p className="text-sm font-bold text-[#280f91]">Hồ sơ gia sư</p>
+          <h1 className="font-nunito mt-1 text-2xl font-black text-[#17142f] sm:text-3xl">
+            Hồ sơ của tôi
+          </h1>
+          <p className="mt-1 text-sm leading-6 text-[#56516a]">
+            Đây là nội dung đang được hiển thị với học viên trên BeeWise.
+          </p>
+        </div>
+        <Button
+          asChild
+          className="h-11 w-full rounded-full bg-[#280f91] px-5 text-white hover:bg-[#200c76] sm:w-auto"
+        >
+          <Link href="/tutor/profile/edit">
+            <Pencil size={17} aria-hidden="true" />
+            Chỉnh sửa hồ sơ
+          </Link>
+        </Button>
+      </div>
+
+      <TutorHero tutor={mockTutorProfile} />
+
+      <div className="grid gap-6 lg:grid-cols-[minmax(0,1.65fr)_minmax(300px,0.75fr)] lg:items-start">
+        <div className="space-y-6">
+          <TutorBioSection tutor={mockTutorProfile} />
+          <TutorTeachingMethods tutor={mockTutorProfile} />
+          <TutorEducationAchievements tutor={mockTutorProfile} />
+          <TutorIntroVideo />
+          <TutorTeachingHistory tutor={mockTutorProfile} />
+          <TutorCertificates />
+          <TutorFeedback tutor={mockTutorProfile} />
+        </div>
+
+        <TutorOwnProfileSummary />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/sale/features/tutor-profile/types/mockTutorProfile.ts b/apps/sale/features/tutor-profile/types/mockTutorProfile.ts
index 4da9097..41ea8dc 100644
--- a/apps/sale/features/tutor-profile/types/mockTutorProfile.ts
+++ b/apps/sale/features/tutor-profile/types/mockTutorProfile.ts
@@ -24,7 +24,8 @@ export interface TeachingHistoryItem {
 export interface CertificateItem {
   title: string;
   type: string;
-  status: string;
+  imageUrl?: string;
+  status?: string;
   description: string;
 }
 
@@ -32,6 +33,7 @@ export interface TutorProfileData {
   id: string;
   displayName: string;
   avatarUrl: string;
+  videoUrl?: string;
   headline: string;
   shortIntro: string;
   university: string;
@@ -62,6 +64,7 @@ export const mockTutorProfile: TutorProfileData = {
   id: "nguyen-minh-anh",
   displayName: "Nguyễn Minh Anh",
   avatarUrl: "/images/Tutor/1.png",
+  videoUrl: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
   headline: "Gia sư Toán lớp 6-12, tập trung nền tảng và sự tự tin khi làm bài",
   shortIntro:
     "Giúp học sinh hiểu bản chất, sửa lỗi sai thường gặp và có lộ trình ôn tập rõ ràng sau mỗi buổi học.",
@@ -75,7 +78,7 @@ export const mockTutorProfile: TutorProfileData = {
   onlineStatus: "Đang nhận học sinh mới",
   subjects: ["Toán 6-9", "Toán 10-12"],
   specializations: ["Củng cố mất gốc", "Luyện thi vào 10"],
-  teachingModes: ["Online", "Tại nhà"],
+  teachingModes: ["Online & tại nhà"],
   area: "Thủ Đức, TP. Hồ Chí Minh",
   hourlyRate: "120.000đ/giờ",
   availability: [
@@ -134,24 +137,28 @@ export const mockTutorProfile: TutorProfileData = {
     {
       title: "Thông tin sinh viên",
       type: "Xác minh học vấn",
+      imageUrl: "/images/certs/1.png",
       status: "Đã xác minh",
       description: "BeeWise đã kiểm tra trạng thái học tập ở mức công khai.",
     },
     {
       title: "Thành tích Toán học",
       type: "Minh chứng thành tích",
-      status: "Đã duyệt",
+      imageUrl: "/images/certs/2.png",
+      status: "Đã xác minh",
       description: "Tóm tắt thành tích học thuật, không hiển thị tài liệu gốc.",
     },
     {
       title: "Kết quả học tập",
       type: "Tóm tắt học tập",
-      status: "Đã duyệt",
+      imageUrl: "/images/certs/3.png",
+      status: "Đã rà soát",
       description: "Thông tin học tập được trình bày ở dạng an toàn công khai.",
     },
     {
       title: "Kinh nghiệm gia sư",
       type: "Xác nhận hoạt động",
+      imageUrl: "/images/certs/4.png",
       status: "Đã duyệt",
       description: "Hoạt động giảng dạy được rà soát và tóm tắt ngắn gọn.",
     },
diff --git a/apps/staff/features/auth/components/AuthLayout.tsx b/apps/staff/features/auth/components/AuthLayout.tsx
index 601ac91..767de35 100644
--- a/apps/staff/features/auth/components/AuthLayout.tsx
+++ b/apps/staff/features/auth/components/AuthLayout.tsx
@@ -20,22 +20,6 @@ export function AuthLayout({ children }: AuthLayoutProps) {
         <div className="absolute inset-0 bg-[url('/brand/grid-pattern.svg')] bg-repeat opacity-[0.02] invert" />
       </div>
 
-      <div className="absolute top-6 left-6 md:top-10 md:left-10 z-10">
-        <Button
-          className="flex items-center gap-2 text-[#0c0c0b]/50 hover:text-[#280f91] hover:bg-[#280f91]/5 rounded-full px-4 h-10 transition-colors backdrop-blur-md bg-white border border-[#0c0c0b]/5 shadow-sm"
-          variant="ghost"
-          onClick={() => router.back()}
-        >
-          <ArrowLeft weight="bold" className="w-4 h-4" />
-          <span
-            className="font-semibold text-sm"
-            style={{ fontFamily: "var(--font-nunito-family)" }}
-          >
-            Quay lại
-          </span>
-        </Button>
-      </div>
-
       <div className="w-full max-w-[500px] px-4 z-10">
         <div
           className="w-full rounded-3xl bg-white
diff --git a/packages/core/configs/navigation.ts b/packages/core/configs/navigation.ts
index a9ca3f2..1e91650 100644
--- a/packages/core/configs/navigation.ts
+++ b/packages/core/configs/navigation.ts
@@ -18,6 +18,7 @@ import {
   Receipt,
   LucideIcon,
   NotebookPen,
+  UsersRound,
 } from "lucide-react";
 
 export interface NavItem {
@@ -94,7 +95,7 @@ export const navigationConfig: RoleNavigation = {
       groupName: "Tổng Quan",
       items: [
         {
-          title: "Dashboard",
+          title: "Tổng Quan",
           url: "/lms/tutor/dashboard",
           icon: LayoutDashboard,
         },
@@ -155,6 +156,11 @@ export const navigationConfig: RoleNavigation = {
           url: "/consultant/workspace",
           icon: MessageCircle,
         },
+        {
+          title: "Yêu Cầu Kết Nối",
+          url: "/consultant/connection-requests",
+          icon: UsersRound,
+        },
       ],
     },
     {
diff --git a/packages/ui/components/layout/Header.tsx b/packages/ui/components/layout/Header.tsx
index b487464..ce35023 100644
--- a/packages/ui/components/layout/Header.tsx
+++ b/packages/ui/components/layout/Header.tsx
@@ -63,7 +63,9 @@ export function Header({
   const storeIsAuthenticated = useAuthStore((state) => state.isAuthenticated);
   const storeIsAuthLoading = useAuthStore((state) => state.isAuthLoading);
   const openDrawer = useNotificationDrawerStore((state) => state.openDrawer);
-  const drawerUnreadCount = useNotificationDrawerStore((state) => state.unreadCount);
+  const drawerUnreadCount = useNotificationDrawerStore(
+    (state) => state.unreadCount,
+  );
   const { mutate: logout } = useLogout();
   const user = previewUser !== undefined ? previewUser : storeUser;
   const isAuthenticated =
@@ -86,7 +88,7 @@ export function Header({
         : user?.lmsAccessEnabled === true;
   const unreadNotificationCount = Math.max(
     0,
-    drawerUnreadCount || (user?.unreadNotificationCount ?? 0)
+    drawerUnreadCount || (user?.unreadNotificationCount ?? 0),
   );
   const unreadChatCount = Math.max(0, user?.unreadChatCount ?? 0);
   const displayName = getDisplayName(user);
@@ -213,7 +215,7 @@ export function Header({
               />
             </div>
             <span className="hidden text-xs font-black uppercase leading-none text-white md:block md:text-base">
-              Cộng Đồng Gia Sư Beewise
+              {isAuthenticated ? "BeeWise" : "Cộng Đồng Gia Sư Beewise"}
             </span>
           </Link>
 
@@ -258,7 +260,14 @@ export function Header({
                   aria-label="Thông báo"
                   className="relative hidden h-8 w-8 items-center justify-center rounded-full text-white/80 transition-colors hover:bg-white/10 hover:text-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent md:inline-flex"
                 >
-                  <Bell className={cn("h-4 w-4", unreadNotificationCount > 0 && "animate-pulse text-accent")} aria-hidden="true" />
+                  <Bell
+                    className={cn(
+                      "h-4 w-4",
+                      unreadNotificationCount > 0 &&
+                        "animate-pulse text-accent",
+                    )}
+                    aria-hidden="true"
+                  />
                   {unreadNotificationCount > 0 && (
                     <span className="absolute -right-1 -top-1 min-w-5 rounded-full bg-accent px-1 text-center text-[10px] font-bold leading-5 text-accent-foreground">
                       {unreadNotificationCount}