diff --git a/apps/api/src/controller/user.controller.ts b/apps/api/src/controller/user.controller.ts
index a877336..c2ca9b6 100644
--- a/apps/api/src/controller/user.controller.ts
+++ b/apps/api/src/controller/user.controller.ts
@@ -23,7 +23,7 @@ const tutorProfileSchema = z.object(tutorProfileFields).strict();
 
 const editableProfileFields = {
   name: z.string().trim().min(1, "Name is required").max(100, "Name is too long"),
-  profileUrl: z.string().trim().url("Please enter a valid profile image URL"),
+  profileUrl: z.string().trim().url("Please enter a valid profile image URL").nullable(),
   bio: z.string().trim().max(1000, "Bio must be at most 1000 characters").nullable(),
 } as const;
 
@@ -38,12 +38,17 @@ const tutorProfileUpdateSchema = z
   .object({
     ...editableProfileFields,
     hourlyRate: tutorProfileFields.hourlyRate.optional(),
+    subjectIds: z
+      .array(z.string().uuid("Each subject ID must be a valid UUID"))
+      .refine((ids) => new Set(ids).size === ids.length, "Subject IDs must be unique")
+      .optional(),
   })
   .strict();
 
 type ProfileData = z.infer<typeof studentProfileSchema> | z.infer<typeof tutorProfileSchema>;
-type ProfileUpdateData =
-  z.infer<typeof studentProfileUpdateSchema> | z.infer<typeof tutorProfileUpdateSchema>;
+type ProfileUpdateRequest =
+  | { role: typeof Role.student; data: z.infer<typeof studentProfileUpdateSchema> }
+  | { role: typeof Role.tutor; data: z.infer<typeof tutorProfileUpdateSchema> };
 
 export const userController = {
   async submitProfile(req: AuthRequest, res: Response, next: NextFunction) {
@@ -95,20 +100,23 @@ export const userController = {
         throw new UnauthorizedError("User not found in request");
       }
 
-      let role: Role;
-      let validatedData: ProfileUpdateData;
+      let profileUpdate: ProfileUpdateRequest;
 
       if (user.role === Role.student) {
-        role = Role.student;
-        validatedData = studentProfileUpdateSchema.parse(req.body);
+        profileUpdate = {
+          role: Role.student,
+          data: studentProfileUpdateSchema.parse(req.body),
+        };
       } else if (user.role === Role.tutor) {
-        role = Role.tutor;
-        validatedData = tutorProfileUpdateSchema.parse(req.body);
+        profileUpdate = {
+          role: Role.tutor,
+          data: tutorProfileUpdateSchema.parse(req.body),
+        };
       } else {
         throw new UnauthorizedError("Invalid authentication role");
       }
 
-      const updatedUser = await userService.updateProfile(user.id, role, validatedData);
+      const updatedUser = await userService.updateProfile(user.id, profileUpdate);
       res.status(200).json(successResponse(updatedUser, "Profile updated successfully"));
     } catch (error) {
       next(error);
diff --git a/apps/api/src/repository/subject.repository.ts b/apps/api/src/repository/subject.repository.ts
index f720c11..e0a62c4 100644
--- a/apps/api/src/repository/subject.repository.ts
+++ b/apps/api/src/repository/subject.repository.ts
@@ -5,4 +5,15 @@ export const subjectRepository = {
   async findAll(): Promise<Subject[]> {
     return prisma.subject.findMany({ orderBy: { name: "asc" } });
   },
+
+  async findByIds(subjectIds: string[]): Promise<Pick<Subject, "id">[]> {
+    if (subjectIds.length === 0) {
+      return [];
+    }
+
+    return prisma.subject.findMany({
+      where: { id: { in: subjectIds } },
+      select: { id: true },
+    });
+  },
 };
diff --git a/apps/api/src/repository/user.repository.ts b/apps/api/src/repository/user.repository.ts
index c00b4ba..9b5a7c6 100644
--- a/apps/api/src/repository/user.repository.ts
+++ b/apps/api/src/repository/user.repository.ts
@@ -74,11 +74,25 @@ export const userRepository = {
     });
   },
 
-  async updateExistingProfile(userId: string, data: ExistingProfileUpdate): Promise<PublicUser> {
+  async updateExistingProfile(
+    userId: string,
+    data: ExistingProfileUpdate,
+    subjectIds?: string[]
+  ): Promise<UserProfileRow> {
     return prisma.user.update({
       where: { id: userId },
-      data,
-      select: publicUserSelect,
+      data: {
+        ...data,
+        ...(subjectIds !== undefined && {
+          tutorSubjects: {
+            deleteMany: {},
+            create: subjectIds.map((subjectId) => ({
+              subject: { connect: { id: subjectId } },
+            })),
+          },
+        }),
+      },
+      select: profileSelect,
     });
   },
 };
diff --git a/apps/api/src/router/user.router.ts b/apps/api/src/router/user.router.ts
index f18e6ad..a491dad 100644
--- a/apps/api/src/router/user.router.ts
+++ b/apps/api/src/router/user.router.ts
@@ -71,6 +71,7 @@ import type { AuthRequest } from "../common/middleware/auth.middleware.js";
  *         profileUrl:
  *           type: string
  *           format: uri
+ *           nullable: true
  *           example: "https://cdn.example.com/student.jpg"
  *         bio:
  *           type: string
@@ -100,6 +101,7 @@ import type { AuthRequest } from "../common/middleware/auth.middleware.js";
  *         profileUrl:
  *           type: string
  *           format: uri
+ *           nullable: true
  *           example: "https://cdn.example.com/tutor.jpg"
  *         bio:
  *           type: string
@@ -111,6 +113,13 @@ import type { AuthRequest } from "../common/middleware/auth.middleware.js";
  *           exclusiveMinimum: 0
  *           description: Optional; retains its current value when omitted
  *           example: 750.0
+ *         subjectIds:
+ *           type: array
+ *           uniqueItems: true
+ *           description: Optional; omitted retains current subjects, an empty array removes all subjects, and a non-empty array replaces them.
+ *           items:
+ *             type: string
+ *             format: uuid
  */
 
 // Cast router to use AuthRequest
@@ -186,8 +195,22 @@ router.get("/me", authMiddleware, userController.getProfile);
  *               - $ref: '#/components/schemas/StudentProfileUpdate'
  *               - $ref: '#/components/schemas/TutorProfileUpdate'
  *     responses:
- *       200: { description: Profile updated successfully }
- *       400: { description: Missing, invalid, role-incompatible, or unknown request fields }
+ *       200:
+ *         description: Profile updated successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success: { type: boolean, example: true }
+ *                 message: { type: string, example: Profile updated successfully }
+ *                 data:
+ *                   allOf:
+ *                     - $ref: '#/components/schemas/UserProfile'
+ *                     - type: object
+ *                       properties:
+ *                         profileComplete: { type: boolean, example: true }
+ *       400: { description: Missing, invalid, role-incompatible, duplicate, malformed, or unknown request fields or subject IDs }
  *       401: { description: Missing or invalid authentication, deleted user, or role mismatch }
  *       409: { description: Initial profile completion is required }
  *       500: { description: Internal server error }
diff --git a/apps/api/src/service/user.service.ts b/apps/api/src/service/user.service.ts
index cf76539..fad0901 100644
--- a/apps/api/src/service/user.service.ts
+++ b/apps/api/src/service/user.service.ts
@@ -1,5 +1,10 @@
 import { Role, User, Prisma } from "@prisma/client";
-import { userRepository } from "../repository/user.repository.js";
+import {
+  userRepository,
+  type ExistingProfileUpdate,
+  type UserProfileRow,
+} from "../repository/user.repository.js";
+import { subjectRepository } from "../repository/subject.repository.js";
 import {
   NotFoundError,
   BadRequestError,
@@ -13,12 +18,48 @@ type ProfileData = {
   hourlyRate?: number;
 };
 
-type ProfileUpdateData = ProfileData & {
+type CommonProfileUpdateData = {
   name: string;
-  profileUrl: string;
+  profileUrl: string | null;
   bio: string | null;
 };
 
+type StudentProfileUpdateData = CommonProfileUpdateData & {
+  gradeLevel?: string;
+  goals?: string;
+  hourlyRate?: never;
+  subjectIds?: never;
+};
+
+type TutorProfileUpdateData = CommonProfileUpdateData & {
+  hourlyRate?: number;
+  subjectIds?: string[];
+  gradeLevel?: never;
+  goals?: never;
+};
+
+type ProfileUpdateRequest =
+  | { role: typeof Role.student; data: StudentProfileUpdateData }
+  | { role: typeof Role.tutor; data: TutorProfileUpdateData };
+
+function mapProfile(user: UserProfileRow) {
+  return {
+    id: user.id,
+    name: user.name,
+    email: user.email,
+    role: user.role,
+    profileUrl: user.profileUrl,
+    bio: user.bio,
+    hourlyRate: user.hourlyRate === null ? null : Number(user.hourlyRate),
+    gradeLevel: user.gradeLevel,
+    goals: user.goals,
+    walletBalance: Number(user.walletBalance),
+    profileComplete: user.profileComplete,
+    createdAt: user.createdAt,
+    subjects: user.tutorSubjects.map((tutorSubject) => tutorSubject.subject),
+  };
+}
+
 export const userService = {
   async completeProfile(userId: string, role: Role, data: ProfileData) {
     let updateData: Partial<User> = { profileComplete: true };
@@ -46,23 +87,11 @@ export const userService = {
       throw new NotFoundError("User not found");
     }
 
-    return {
-      id: user.id,
-      name: user.name,
-      email: user.email,
-      role: user.role,
-      profileUrl: user.profileUrl,
-      bio: user.bio,
-      hourlyRate: user.hourlyRate ? Number(user.hourlyRate) : null,
-      gradeLevel: user.gradeLevel,
-      goals: user.goals,
-      walletBalance: Number(user.walletBalance),
-      createdAt: user.createdAt,
-      subjects: user.tutorSubjects.map((ts) => ts.subject),
-    };
+    return mapProfile(user);
   },
 
-  async updateProfile(userId: string, role: Role, data: ProfileUpdateData) {
+  async updateProfile(userId: string, profileUpdate: ProfileUpdateRequest) {
+    const { role, data } = profileUpdate;
     const profileOwner = await userRepository.findProfileOwnerById(userId);
 
     if (!profileOwner) {
@@ -83,7 +112,8 @@ export const userService = {
       bio: data.bio,
     };
 
-    let updateData;
+    let updateData: ExistingProfileUpdate;
+    let subjectIds: string[] | undefined;
     if (role === Role.student) {
       updateData = {
         ...commonData,
@@ -97,12 +127,30 @@ export const userService = {
           hourlyRate: new Prisma.Decimal(data.hourlyRate),
         }),
       };
+
+      subjectIds = data.subjectIds;
+      if (subjectIds !== undefined) {
+        const existingSubjects = await subjectRepository.findByIds(subjectIds);
+        const existingSubjectIds = new Set(existingSubjects.map((subject) => subject.id));
+        const unknownSubjectIds = subjectIds.filter(
+          (subjectId) => !existingSubjectIds.has(subjectId)
+        );
+
+        if (unknownSubjectIds.length > 0) {
+          throw new BadRequestError(`Unknown subject IDs: ${unknownSubjectIds.join(", ")}`);
+        }
+      }
     } else {
       throw new UnauthorizedError("Invalid authentication role");
     }
 
     try {
-      return await userRepository.updateExistingProfile(userId, updateData);
+      const updatedUser = await userRepository.updateExistingProfile(
+        userId,
+        updateData,
+        subjectIds
+      );
+      return mapProfile(updatedUser);
     } catch (error) {
       if (error instanceof Prisma.PrismaClientKnownRequestError && error.code === "P2025") {
         throw new UnauthorizedError("Authenticated user no longer exists");
diff --git a/apps/web/src/app/profile/edit/page.tsx b/apps/web/src/app/profile/edit/page.tsx
new file mode 100644
index 0000000..8f9fe04
--- /dev/null
+++ b/apps/web/src/app/profile/edit/page.tsx
@@ -0,0 +1,27 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { ArrowLeft } from "lucide-react";
+
+import { ProfileEditForm } from "@/components/profile/profile-edit-form";
+
+export const metadata: Metadata = {
+  title: "Edit profile | Tutorist",
+  description: "Update your Tutorist profile.",
+};
+
+export default function EditProfilePage() {
+  return (
+    <main className="min-h-[calc(100vh-64px)] bg-[#faf9fc] px-4 py-4 sm:px-6 lg:px-10">
+      <div className="mx-auto w-full max-w-5xl">
+        <Link
+          href="/profile"
+          className="mb-3 inline-flex min-h-10 items-center gap-2 rounded-xl bg-primary px-4 py-2 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-primary/[0.8] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
+        >
+          <ArrowLeft aria-hidden="true" className="size-4" />
+          Back to profile
+        </Link>
+        <ProfileEditForm />
+      </div>
+    </main>
+  );
+}
diff --git a/apps/web/src/components/Navbar.tsx b/apps/web/src/components/Navbar.tsx
index 8137ad1..301dc82 100644
--- a/apps/web/src/components/Navbar.tsx
+++ b/apps/web/src/components/Navbar.tsx
@@ -16,6 +16,7 @@ const NAV_LINKS = [
   { label: "Find tutors", href: "/tutors" },
   { label: "My classroom", href: "/classroom" },
   { label: "Message", href: "/message" },
+  { label: "My profile", href: "/profile" },
 ];
 
 const FOCUSABLE_SELECTOR =
@@ -178,13 +179,6 @@ export function Navbar({ isLoggedIn, userName, userMoney, profileUrl }: NavbarPr
                 </Link>
               )}
             </div>
-            <Button
-              variant="outline"
-              className="text-sm font-semibold px-4 py-2"
-              onClick={() => router.push("/profile")}
-            >
-              Edit Profile
-            </Button>
           </div>
         ) : (
           <>
diff --git a/apps/web/src/components/profile/profile-completion-form.tsx b/apps/web/src/components/profile/profile-completion-form.tsx
index 00792a9..0f7aeef 100644
--- a/apps/web/src/components/profile/profile-completion-form.tsx
+++ b/apps/web/src/components/profile/profile-completion-form.tsx
@@ -17,7 +17,7 @@ type ProfileCompletionFormProps = {
   role: UserRole;
 };
 
-const GRADE_LEVELS = [
+export const GRADE_LEVELS = [
   "Grade 7",
   "Grade 8",
   "Grade 9",
diff --git a/apps/web/src/components/profile/profile-details.tsx b/apps/web/src/components/profile/profile-details.tsx
index fd4c455..2ab3f2d 100644
--- a/apps/web/src/components/profile/profile-details.tsx
+++ b/apps/web/src/components/profile/profile-details.tsx
@@ -1,9 +1,10 @@
 "use client";
 
-import { LogOut, Mail } from "lucide-react";
+import { LogOut, Mail, Pencil } from "lucide-react";
+import Link from "next/link";
 
 import { ProfileAvatar } from "@/components/profile/profile-avatar";
-import { Button } from "@/components/ui/button";
+import { Button, buttonVariants } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import type { UserProfile } from "@/types/user";
 
@@ -95,6 +96,10 @@ export function ProfileDetails({
               }
             />
           )}
+          <Link href="/profile/edit" className={cn(buttonVariants(), "w-full")}>
+            <Pencil aria-hidden="true" className="size-4 shrink-0" />
+            Edit Profile
+          </Link>
           {onLogout && (
             <Button
               type="button"
diff --git a/apps/web/src/components/profile/profile-edit-form.tsx b/apps/web/src/components/profile/profile-edit-form.tsx
new file mode 100644
index 0000000..204f86d
--- /dev/null
+++ b/apps/web/src/components/profile/profile-edit-form.tsx
@@ -0,0 +1,383 @@
+"use client";
+
+import { type FormEvent, useEffect, useRef, useState } from "react";
+import { Camera, UserRound } from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { MultiSelect } from "@/components/ui/multi-select";
+import { Select } from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { ApiError, apiClient } from "@/lib/api-client";
+import { clearSession, getToken, saveSession } from "@/lib/auth-storage";
+import { GRADE_LEVELS } from "@/components/profile/profile-completion-form";
+import type { Subject } from "@/types/subject";
+import type { ProfileUpdateResponse, UserProfile } from "@/types/user";
+
+type Fields = { gradeLevel: string; goals: string; hourlyRate: string };
+
+function fieldsFromProfile(profile: UserProfile): Fields {
+  return {
+    gradeLevel: profile.gradeLevel ?? "",
+    goals: profile.goals ?? "",
+    hourlyRate: profile.hourlyRate === null ? "" : String(profile.hourlyRate),
+  };
+}
+
+function haveSameSubjectIds(left: string[], right: string[]) {
+  return JSON.stringify([...left].sort()) === JSON.stringify([...right].sort());
+}
+
+export function ProfileEditForm() {
+  const router = useRouter();
+  const [profile, setProfile] = useState<UserProfile | null>(null);
+  const [name, setName] = useState("");
+  const [about, setAbout] = useState("");
+  const [fields, setFields] = useState<Fields>({ gradeLevel: "", goals: "", hourlyRate: "" });
+  const [availableSubjects, setAvailableSubjects] = useState<Subject[]>([]);
+  const [selectedSubjectIds, setSelectedSubjectIds] = useState<string[]>([]);
+  const [touched, setTouched] = useState<Partial<Record<keyof Fields, boolean>>>({});
+  const [loading, setLoading] = useState(true);
+  const [needsLogin, setNeedsLogin] = useState(false);
+  const [loadError, setLoadError] = useState("");
+  const [attempt, setAttempt] = useState(0);
+  const [saving, setSaving] = useState(false);
+  const [saveError, setSaveError] = useState("");
+  const [saved, setSaved] = useState(false);
+  const submitting = useRef(false);
+
+  useEffect(() => {
+    let active = true;
+    if (!getToken()) {
+      setNeedsLogin(true);
+      setLoading(false);
+      return;
+    }
+    setLoading(true);
+    setLoadError("");
+    setProfile(null);
+    setAvailableSubjects([]);
+    setSelectedSubjectIds([]);
+
+    async function loadProfile() {
+      try {
+        const current = await apiClient.get<UserProfile>("/users/me");
+        const subjects =
+          current.role === "tutor" ? await apiClient.get<Subject[]>("/subjects") : [];
+
+        if (!active) return;
+        setProfile(current);
+        setName(current.name ?? "");
+        setAbout(current.bio ?? "");
+        setFields(fieldsFromProfile(current));
+        setAvailableSubjects(subjects);
+        setSelectedSubjectIds(current.subjects.map((subject) => subject.id));
+      } catch (error) {
+        if (active) {
+          if (error instanceof ApiError && error.status === 401) {
+            clearSession();
+            setNeedsLogin(true);
+            return;
+          }
+          setLoadError(error instanceof Error ? error.message : "Unable to load your profile.");
+        }
+      } finally {
+        if (active) setLoading(false);
+      }
+    }
+
+    void loadProfile();
+    return () => {
+      active = false;
+    };
+  }, [attempt]);
+
+  const isStudent = profile?.role === "student";
+  const rate = Number(fields.hourlyRate);
+  // Match the controller schema: trimmed required strings, or a finite positive number.
+  const errors = {
+    gradeLevel: fields.gradeLevel.trim() ? "" : "Please select your grade level.",
+    goals: fields.goals.trim() ? "" : "Please enter your learning goals.",
+    hourlyRate:
+      fields.hourlyRate.trim() && Number.isFinite(rate) && rate > 0
+        ? ""
+        : "Enter an hourly rate greater than 0.",
+  };
+  const valid =
+    Boolean(name.trim()) &&
+    name.trim().length <= 100 &&
+    about.trim().length <= 1000 &&
+    (isStudent ? !errors.gradeLevel && !errors.goals : !errors.hourlyRate);
+  const changed = Boolean(
+    profile &&
+    (name.trim() !== (profile.name ?? "").trim() ||
+      about.trim() !== (profile.bio ?? "").trim() ||
+      (isStudent
+        ? fields.gradeLevel.trim() !== (profile.gradeLevel ?? "").trim() ||
+          fields.goals.trim() !== (profile.goals ?? "").trim()
+        : (fields.hourlyRate.trim() !== "" && rate !== profile.hourlyRate) ||
+          !haveSameSubjectIds(
+            selectedSubjectIds,
+            profile.subjects.map((subject) => subject.id)
+          )))
+  );
+
+  function edit(field: keyof Fields, value: string) {
+    setFields((current) => ({ ...current, [field]: value }));
+    setSaved(false);
+    setSaveError("");
+  }
+
+  function touch(field: keyof Fields) {
+    setTouched((current) => ({ ...current, [field]: true }));
+  }
+
+  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (!profile || submitting.current || !valid || !changed) return;
+    submitting.current = true;
+    setSaving(true);
+    setSaveError("");
+    setSaved(false);
+    try {
+      const updated = await apiClient.put<ProfileUpdateResponse>("/users/profile", {
+        name: name.trim(),
+        profileUrl: profile.profileUrl,
+        bio: about.trim() || null,
+        ...(isStudent
+          ? { gradeLevel: fields.gradeLevel.trim(), goals: fields.goals.trim() }
+          : { hourlyRate: rate, subjectIds: selectedSubjectIds }),
+      });
+      const current: UserProfile = updated;
+      setProfile(current);
+      setName(current.name ?? "");
+      setAbout(current.bio ?? "");
+      setFields(fieldsFromProfile(current));
+      setSelectedSubjectIds(current.subjects.map((subject) => subject.id));
+      setTouched({});
+      const token = getToken();
+      if (token) {
+        const { id, name, email, role, profileUrl } = current;
+        saveSession({ token, user: { id, name, email, role, profileUrl } });
+      }
+      setSaved(true);
+      router.refresh();
+    } catch (error) {
+      if (error instanceof ApiError && error.status === 401) {
+        clearSession();
+        setNeedsLogin(true);
+        return;
+      }
+      setSaveError(
+        error instanceof Error ? error.message : "Unable to save your profile. Please try again."
+      );
+    } finally {
+      submitting.current = false;
+      setSaving(false);
+    }
+  }
+
+  if (loading) {
+    return (
+      <p role="status" className="p-8 text-center text-ink">
+        Loading your profile...
+      </p>
+    );
+  }
+
+  if (needsLogin) {
+    return (
+      <section className="mx-auto max-w-lg space-y-6">
+        <h1 className="font-outfit text-2xl font-semibold text-ink">
+          Sign in to edit your profile
+        </h1>
+        <Link href="/login" className="inline-block text-primary underline">
+          Sign in
+        </Link>
+      </section>
+    );
+  }
+
+  if (!profile) {
+    return (
+      <section className="space-y-4 rounded-3xl border border-hairline bg-white p-8">
+        <h1 className="font-outfit text-2xl font-semibold text-ink">Your profile</h1>
+        <p role="alert" className="text-error">
+          {loadError}
+        </p>
+        <div className="flex flex-wrap items-center gap-4">
+          <Button onClick={() => setAttempt((current) => current + 1)}>Try again</Button>
+          <Link href="/login" className="text-primary underline">
+            Sign in
+          </Link>
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <div className="rounded-3xl border border-hairline bg-white shadow-sm">
+      <section className="min-w-0 p-5 sm:p-6">
+        <h1 className="font-outfit text-2xl font-semibold text-ink">
+          Edit {isStudent ? "student" : "tutor"} profile
+        </h1>
+        <p className="mb-4 mt-1 text-sm text-ink/70">Update your profile details.</p>
+        <form noValidate onSubmit={handleSubmit} aria-busy={saving}>
+          <fieldset disabled={saving} className="grid min-w-0 grid-cols-1 gap-4 sm:grid-cols-2">
+            <legend className="sr-only">Profile information</legend>
+            <div className="flex flex-col items-center gap-3 border-b border-hairline pb-4 sm:col-span-2 sm:flex-row sm:flex-wrap sm:gap-5">
+              <div className="flex size-32 shrink-0 items-center justify-center overflow-hidden rounded-full border-2 border-primary/20 bg-primary/5 sm:size-40">
+                {profile.profileUrl ? (
+                  <Image
+                    src={profile.profileUrl}
+                    alt="Profile photo"
+                    width={160}
+                    height={160}
+                    unoptimized
+                    className="size-full object-cover"
+                  />
+                ) : (
+                  <UserRound aria-hidden="true" className="size-16 text-primary/60 sm:size-20" />
+                )}
+              </div>
+              <div className="flex flex-col items-center gap-2 sm:items-start">
+                <Button
+                  type="button"
+                  variant="outline"
+                  disabled
+                  title="Photo uploads are not available yet"
+                >
+                  <Camera aria-hidden="true" className="size-4" />
+                  Change photo
+                </Button>
+                <p className="text-xs text-ink/60">JPG, PNG or WebP. Maximum 5 MB.</p>
+              </div>
+            </div>
+            <Input
+              name="name"
+              label="Name"
+              autoComplete="name"
+              placeholder="Enter your name"
+              maxLength={100}
+              value={name}
+              required
+              error={!name.trim()}
+              errorMessage="Please enter your name."
+              onChange={(event) => {
+                setName(event.target.value);
+                setSaved(false);
+                setSaveError("");
+              }}
+              className="h-10 rounded-xl"
+            />
+            <Textarea
+              name="bio"
+              wrapperClassName="sm:row-start-3"
+              label="About"
+              placeholder="Tell us a little about yourself."
+              maxLength={1000}
+              value={about}
+              onChange={(event) => {
+                setAbout(event.target.value);
+                setSaved(false);
+                setSaveError("");
+              }}
+              className="h-24 min-h-24 rounded-xl"
+            />
+            {isStudent ? (
+              <>
+                <Select
+                  name="gradeLevel"
+                  label="Grade level"
+                  placeholder="Select your grade level"
+                  options={
+                    fields.gradeLevel && !GRADE_LEVELS.includes(fields.gradeLevel)
+                      ? [fields.gradeLevel, ...GRADE_LEVELS]
+                      : GRADE_LEVELS
+                  }
+                  value={fields.gradeLevel}
+                  onValueChange={(value) => {
+                    edit("gradeLevel", value);
+                    touch("gradeLevel");
+                  }}
+                  disabled={saving}
+                  error={Boolean(touched.gradeLevel && errors.gradeLevel)}
+                  errorMessage={errors.gradeLevel}
+                  className="w-full gap-2 sm:col-start-2 sm:row-start-2 [&>button]:h-10 [&>button]:rounded-xl [&>button]:px-4 [&>button]:text-sm [&>button:focus-visible]:ring-4 [&>button:focus-visible]:ring-primary/10"
+                />
+                <Textarea
+                  name="goals"
+                  wrapperClassName="sm:col-start-2 sm:row-start-3"
+                  label="Learning goals"
+                  required
+                  value={fields.goals}
+                  onChange={(event) => edit("goals", event.target.value)}
+                  onBlur={() => touch("goals")}
+                  error={Boolean(touched.goals && errors.goals)}
+                  errorMessage={errors.goals}
+                  placeholder="What would you like to learn?"
+                  className="h-24 min-h-24 rounded-xl"
+                />
+              </>
+            ) : (
+              <>
+                <Input
+                  name="hourlyRate"
+                  label="Hourly rate ($)"
+                  type="number"
+                  inputMode="decimal"
+                  step="any"
+                  required
+                  value={fields.hourlyRate}
+                  onChange={(event) => edit("hourlyRate", event.target.value)}
+                  onBlur={() => touch("hourlyRate")}
+                  error={Boolean(touched.hourlyRate && errors.hourlyRate)}
+                  errorMessage={errors.hourlyRate}
+                  className="h-10 rounded-xl"
+                />
+                <MultiSelect
+                  name="subjectIds"
+                  label="Subjects you teach"
+                  placeholder="Select subjects"
+                  options={availableSubjects.map((subject) => ({
+                    label: subject.name,
+                    value: subject.id,
+                  }))}
+                  value={selectedSubjectIds}
+                  onValueChange={(subjectIds) => {
+                    setSelectedSubjectIds(subjectIds);
+                    setSaved(false);
+                    setSaveError("");
+                  }}
+                  disabled={saving}
+                  className="w-full gap-2 sm:col-start-2 sm:row-start-3 [&>button]:h-10 [&>button]:rounded-xl [&>button]:px-4 [&>button]:text-sm [&>button:focus-visible]:ring-4 [&>button:focus-visible]:ring-primary/10"
+                />
+              </>
+            )}
+            <div className="flex justify-end border-t border-hairline pt-3 sm:col-span-2">
+              <Button
+                type="submit"
+                isLoading={saving}
+                disabled={saving || !valid || !changed}
+                className="h-10 w-full rounded-xl px-8 shadow-cta disabled:opacity-60 sm:w-auto sm:min-w-44"
+              >
+                {saving ? "Saving changes..." : "Save changes"}
+              </Button>
+            </div>
+          </fieldset>
+          <p role="status" className="text-sm text-ink empty:hidden">
+            {saving ? "Saving your profile..." : saved ? "Your profile has been saved." : ""}
+          </p>
+          {saveError && (
+            <p role="alert" className="mt-4 text-sm text-error">
+              {saveError}
+            </p>
+          )}
+        </form>
+      </section>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/ui/multi-select.stories.tsx b/apps/web/src/components/ui/multi-select.stories.tsx
index 7014c49..38b87ee 100644
--- a/apps/web/src/components/ui/multi-select.stories.tsx
+++ b/apps/web/src/components/ui/multi-select.stories.tsx
@@ -1,5 +1,6 @@
 import { Fragment, type ReactNode } from "react";
 import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { expect, fn, userEvent, within } from "storybook/test";
 import { MultiSelect } from "@/components/ui/multi-select";
 
 const options = ["Category 1", "Category 2", "Category 3", "Category 4"];
@@ -51,6 +52,29 @@ export const WithError: Story = {
   },
 };
 
+export const SubjectOptions: Story = {
+  args: {
+    label: "Subjects you teach",
+    placeholder: "Select subjects",
+    options: [
+      { label: "Mathematics", value: "6f050b29-f070-49ae-b2ab-91d96a469f88" },
+      { label: "Physics", value: "9477ccf6-21e6-433d-b042-96dfba1056ac" },
+    ],
+    onValueChange: fn(),
+  },
+  play: async ({ args, canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole("button", { name: /Subjects you teach/ }));
+
+    const body = within(canvasElement.ownerDocument.body);
+    await userEvent.click(await body.findByRole("menuitemcheckbox", { name: "Mathematics" }));
+
+    await expect(args.onValueChange).toHaveBeenLastCalledWith([
+      "6f050b29-f070-49ae-b2ab-91d96a469f88",
+    ]);
+  },
+};
+
 export const AllStates: Story = {
   parameters: {
     layout: "fullscreen",
diff --git a/apps/web/src/components/ui/multi-select.tsx b/apps/web/src/components/ui/multi-select.tsx
index 99370d0..e63334e 100644
--- a/apps/web/src/components/ui/multi-select.tsx
+++ b/apps/web/src/components/ui/multi-select.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useId, useState } from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { Check, ChevronDown } from "lucide-react";
@@ -5,10 +7,16 @@ import { cn } from "@/lib/utils";
 
 const textSize = "text-sm leading-[23px] md:text-base md:leading-[26px]";
 
+export interface MultiSelectOption {
+  label: string;
+  value: string;
+  disabled?: boolean;
+}
+
 export interface MultiSelectProps {
   label?: string;
   placeholder?: string;
-  options: string[];
+  options: Array<string | MultiSelectOption>;
   value?: string[];
   defaultValue?: string[];
   onValueChange?: (value: string[]) => void;
@@ -42,15 +50,20 @@ const MultiSelect = ({
 }: MultiSelectProps) => {
   const [internalValue, setInternalValue] = useState<string[]>(defaultValue ?? []);
   const selected = value ?? internalValue;
+  const normalizedOptions = options.map((option) =>
+    typeof option === "string" ? { label: option, value: option } : option
+  );
 
   const labelId = useId();
   const triggerId = useId();
   const errorId = useId();
 
-  const toggle = (option: string) => {
-    const next = selected.includes(option)
-      ? selected.filter((v) => v !== option)
-      : [...selected, option];
+  const toggle = (option: MultiSelectOption) => {
+    if (disabled || option.disabled) return;
+
+    const next = selected.includes(option.value)
+      ? selected.filter((value) => value !== option.value)
+      : [...selected, option.value];
     if (value === undefined) {
       setInternalValue(next);
     }
@@ -96,13 +109,13 @@ const MultiSelect = ({
             sideOffset={4}
             className="flex flex-col gap-1 border-hairline data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 w-[var(--radix-dropdown-menu-trigger-width,12.5rem)] rounded-lg border bg-white p-1.5 shadow-black"
           >
-            {options.map((option) => {
-              const checked = selected.includes(option);
+            {normalizedOptions.map((option) => {
+              const checked = selected.includes(option.value);
               return (
                 <DropdownMenuPrimitive.CheckboxItem
-                  key={option}
+                  key={option.value}
                   checked={checked}
-                  disabled={disabled}
+                  disabled={disabled || option.disabled}
                   onCheckedChange={() => toggle(option)}
                   onSelect={(e) => e.preventDefault()}
                   className={cn(
@@ -122,7 +135,7 @@ const MultiSelect = ({
                   >
                     {checked && <Check className="size-3.5 text-white" strokeWidth={3} />}
                   </span>
-                  {option}
+                  {option.label}
                 </DropdownMenuPrimitive.CheckboxItem>
               );
             })}
@@ -130,7 +143,7 @@ const MultiSelect = ({
         </DropdownMenuPrimitive.Portal>
       </DropdownMenuPrimitive.Root>
       {name &&
-        selected.map((option) => <input key={option} type="hidden" name={name} value={option} />)}
+        selected.map((value) => <input key={value} type="hidden" name={name} value={value} />)}
       {error && errorMessage && (
         <span id={errorId} className="font-inter text-error text-xs leading-[23px] sm:text-sm">
           {errorMessage}
diff --git a/apps/web/src/lib/api-client.ts b/apps/web/src/lib/api-client.ts
index c43a153..cf70667 100644
--- a/apps/web/src/lib/api-client.ts
+++ b/apps/web/src/lib/api-client.ts
@@ -44,6 +44,8 @@ export const apiClient = {
   get: <T>(path: string) => request<T>(path),
   post: <T>(path: string, data: unknown) =>
     request<T>(path, { method: "POST", body: JSON.stringify(data) }),
+  put: <T>(path: string, data: unknown) =>
+    request<T>(path, { method: "PUT", body: JSON.stringify(data) }),
   patch: <T>(path: string, data: unknown) =>
     request<T>(path, { method: "PATCH", body: JSON.stringify(data) }),
   delete: <T>(path: string) => request<T>(path, { method: "DELETE" }),
diff --git a/apps/web/src/types/profile.ts b/apps/web/src/types/profile.ts
new file mode 100644
index 0000000..a654bea
--- /dev/null
+++ b/apps/web/src/types/profile.ts
@@ -0,0 +1,21 @@
+import type { LoginResponse } from "@/types/auth";
+
+export type UserProfile = LoginResponse["user"] & {
+  bio: string | null;
+  gradeLevel: string | null;
+  goals: string | null;
+  hourlyRate: number | null;
+  walletBalance: number;
+  createdAt: string;
+  subjects: { id: string; name: string }[];
+};
+
+// The update endpoint returns Prisma decimals as JSON strings.
+export type ProfileUpdateResponse = Omit<
+  UserProfile,
+  "hourlyRate" | "walletBalance" | "subjects"
+> & {
+  hourlyRate: string | number | null;
+  walletBalance: string | number;
+  profileComplete: boolean;
+};
diff --git a/apps/web/src/types/user.ts b/apps/web/src/types/user.ts
index 84a2ca1..6a1bb22 100644
--- a/apps/web/src/types/user.ts
+++ b/apps/web/src/types/user.ts
@@ -1,7 +1,7 @@
 import type { UserRole } from "@/types/auth";
 import type { Subject } from "@/types/subject";
 
-/** Shape of `GET /users/me` and the body echoed back by `PATCH /users/me`. */
+/** Shape of `GET /users/me`. */
 export type UserProfile = {
   id: string;
   name: string | null;
@@ -20,3 +20,8 @@ export type UserProfile = {
   /** Subjects the tutor teaches; always empty for students. */
   subjects: Subject[];
 };
+
+/** Shape of a successful `PUT /users/profile` response. */
+export type ProfileUpdateResponse = UserProfile & {
+  profileComplete: boolean;
+};