diff --git a/apps/client/src/contexts/ProfileProvider.tsx b/apps/client/src/contexts/ProfileProvider.tsx
index cbf4b1a..dc53874 100644
--- a/apps/client/src/contexts/ProfileProvider.tsx
+++ b/apps/client/src/contexts/ProfileProvider.tsx
@@ -2,29 +2,15 @@ import { raise } from "@cv/utils";
 import {
   createContext,
   type ReactNode,
-  useCallback,
   useContext,
   useMemo,
   useState,
 } from "react";
-import { useMyProfilesQuery } from "@/generated/graphql";
+import { type MyProfilesQuery, useMyProfilesQuery } from "@/generated/graphql";
 
-interface Profile {
-  id: string;
-  name: string;
-  fullName: string | null;
-  headline: string | null;
-  phone: string | null;
-  address: string | null;
-  postalCode: string | null;
-  website: string | null;
-  linkedInUrl: string | null;
-  summary: string | null;
-  createdAt: string;
-  updatedAt: string;
-}
+export type Profile = MyProfilesQuery["myProfiles"][number];
 
-interface ProfileContextType {
+interface ProfileContextValue {
   profiles: Profile[];
   activeProfile: Profile | null;
   activeProfileId: string | null;
@@ -36,81 +22,52 @@ interface ProfileContextType {
 
 const STORAGE_KEY = "cv-generator:active-profile-id";
 
-const ProfileContext = createContext<ProfileContextType | null>(null);
+const ProfileContext = createContext<ProfileContextValue | null>(null);
 
-export function ProfileProvider({ children }: { children: ReactNode }) {
+export const ProfileProvider = ({ children }: { children: ReactNode }) => {
   const [selectedProfileId, setSelectedProfileId] = useState<string | null>(
     () => localStorage.getItem(STORAGE_KEY),
   );
 
   const { data, isPending, refetch } = useMyProfilesQuery(
     {},
-    {
-      retry: false,
-      refetchOnWindowFocus: false,
-    },
-  );
-
-  const profiles = useMemo(
-    () => (data?.myProfiles as Profile[] | undefined) ?? [],
-    [data],
+    { retry: false, refetchOnWindowFocus: false },
   );
 
-  const activeProfile = useMemo(() => {
-    if (profiles.length === 0) return null;
-    if (selectedProfileId) {
-      const found = profiles.find((p) => p.id === selectedProfileId);
-      if (found) return found;
-    }
-    return profiles[0] ?? null;
-  }, [profiles, selectedProfileId]);
-
-  const activeProfileId = activeProfile?.id ?? null;
+  const profiles = data?.myProfiles ?? [];
+  const activeProfile =
+    profiles.find((p) => p.id === selectedProfileId) ?? profiles[0] ?? null;
 
-  const setActiveProfileId = useCallback((id: string) => {
-    setSelectedProfileId(id);
-    localStorage.setItem(STORAGE_KEY, id);
-  }, []);
-
-  const handleRefetch = useCallback(() => {
-    refetch();
-  }, [refetch]);
-
-  const value = useMemo(
+  const value = useMemo<ProfileContextValue>(
     () => ({
       profiles,
       activeProfile,
-      activeProfileId,
-      setActiveProfileId,
+      activeProfileId: activeProfile?.id ?? null,
+      setActiveProfileId: (id) => {
+        setSelectedProfileId(id);
+        localStorage.setItem(STORAGE_KEY, id);
+      },
       isLoading: isPending,
       hasProfiles: profiles.length > 0,
-      refetch: handleRefetch,
+      refetch,
     }),
-    [
-      profiles,
-      activeProfile,
-      activeProfileId,
-      setActiveProfileId,
-      isPending,
-      handleRefetch,
-    ],
+    [profiles, activeProfile, isPending, refetch],
   );
 
   return (
     <ProfileContext.Provider value={value}>{children}</ProfileContext.Provider>
   );
-}
+};
 
-export function useProfile() {
-  return (
-    useContext(ProfileContext) ??
-    raise("useProfile must be used within a ProfileProvider")
-  );
-}
+export const useProfile = (): ProfileContextValue =>
+  useContext(ProfileContext) ??
+  raise("useProfile must be used within a ProfileProvider");
 
-export function useActiveProfileId() {
-  const { activeProfileId } = useProfile();
-  return (
-    activeProfileId ?? raise("No active profile — user needs to create one")
-  );
-}
+/**
+ * Throws if no profile is active. Use in screens that already gate on
+ * `useProfile().hasProfiles`; otherwise prefer reading `activeProfileId`
+ * directly from `useProfile()`.
+ */
+export const useActiveProfileId = (): string =>
+  useProfile().activeProfileId ??
+  raise("No active profile - user needs to create one");
diff --git a/apps/client/src/features/cv-templates/components/EditSidebar.tsx b/apps/client/src/features/cv-templates/components/EditSidebar.tsx
index 1616d97..831c38b 100644
--- a/apps/client/src/features/cv-templates/components/EditSidebar.tsx
+++ b/apps/client/src/features/cv-templates/components/EditSidebar.tsx
@@ -1,66 +1,32 @@
 import { Select, TextInput, Textarea } from "@cv/ui";
+import type { ReactNode } from "react";
 import type { SaveStatus } from "../hooks/useAutosave";
+import type { CVEditorPatch, CVEditorState } from "../hooks/useCVEditor";
+import { SaveStatusLabel } from "./SaveStatusLabel";
 
 interface TemplateOption {
   id: string;
   name: string;
 }
 
-interface ProfileFields {
-  fullName: string;
-  headline: string;
-  summary: string;
+interface SaveState {
+  status: SaveStatus;
+  error: string | null;
 }
 
 interface EditSidebarProps {
-  title: string;
-  introduction: string;
-  templateId: string;
-  templateOptions: TemplateOption[];
-  profile: ProfileFields;
-  onTitleChange: (value: string) => void;
-  onIntroductionChange: (value: string) => void;
-  onTemplateChange: (id: string) => void;
-  onProfileFieldChange: (field: keyof ProfileFields, value: string) => void;
-  saveStatus: SaveStatus;
-  saveError: string | null;
+  state: CVEditorState;
+  onPatch: (patch: CVEditorPatch) => void;
+  templates: TemplateOption[];
+  save: SaveState;
 }
 
-const statusLabel = (status: SaveStatus, error: string | null): string => {
-  if (status === "error") {
-    return error ? `Error: ${error}` : "Save failed";
-  }
-  if (status === "saving") {
-    return "Saving...";
-  }
-  if (status === "saved") {
-    return "Saved";
-  }
-  if (status === "pending") {
-    return "Unsaved changes";
-  }
-  return "All changes saved";
-};
-
-const statusClass = (status: SaveStatus): string => {
-  if (status === "error") {
-    return "text-ctp-red";
-  }
-  if (status === "saving" || status === "pending") {
-    return "text-ctp-yellow";
-  }
-  if (status === "saved") {
-    return "text-ctp-green";
-  }
-  return "text-ctp-subtext0";
-};
-
 const Section = ({
   title,
   children,
 }: {
   title: string;
-  children: React.ReactNode;
+  children: ReactNode;
 }) => (
   <section className="space-y-3">
     <h3 className="text-xs uppercase tracking-wide text-ctp-subtext0 border-b border-ctp-surface1 pb-1">
@@ -71,65 +37,60 @@ const Section = ({
 );
 
 export const EditSidebar = ({
-  title,
-  introduction,
-  templateId,
-  templateOptions,
-  profile,
-  onTitleChange,
-  onIntroductionChange,
-  onTemplateChange,
-  onProfileFieldChange,
-  saveStatus,
-  saveError,
+  state,
+  onPatch,
+  templates,
+  save,
 }: EditSidebarProps) => {
+  const setCv = (cv: Partial<CVEditorState["cv"]>) => onPatch({ cv });
+  const setProfile = (profile: Partial<CVEditorState["profile"]>) =>
+    onPatch({ profile });
+
   return (
     <aside className="bg-ctp-surface0 border-l border-ctp-surface1 flex flex-col h-full">
       <div className="px-6 py-4 border-b border-ctp-surface1">
         <h2 className="text-lg font-semibold text-ctp-text">Edit CV</h2>
-        <p className={`text-xs mt-1 ${statusClass(saveStatus)}`}>
-          {statusLabel(saveStatus, saveError)}
-        </p>
+        <SaveStatusLabel status={save.status} error={save.error} />
       </div>
       <div className="flex-1 overflow-y-auto px-6 py-4 space-y-6">
         <Section title="CV">
           <TextInput
             label="Title"
-            value={title}
-            onChange={onTitleChange}
+            value={state.cv.title}
+            onChange={(title) => setCv({ title })}
             placeholder="e.g. Senior Engineer - 2026"
           />
           <Textarea
             label="Introduction"
-            value={introduction}
-            onChange={onIntroductionChange}
+            value={state.cv.introduction}
+            onChange={(introduction) => setCv({ introduction })}
             placeholder="Short summary that opens the CV"
             rows={5}
           />
           <Select
             label="Template"
-            value={templateId}
-            onChange={onTemplateChange}
-            options={templateOptions.map((t) => ({ value: t.id, label: t.name }))}
+            value={state.cv.templateId}
+            onChange={(templateId) => setCv({ templateId })}
+            options={templates.map((t) => ({ value: t.id, label: t.name }))}
           />
         </Section>
         <Section title="Profile">
           <TextInput
             label="Full name"
-            value={profile.fullName}
-            onChange={(v) => onProfileFieldChange("fullName", v)}
+            value={state.profile.fullName}
+            onChange={(fullName) => setProfile({ fullName })}
             placeholder="Your full name as it appears on the CV"
           />
           <TextInput
             label="Headline"
-            value={profile.headline}
-            onChange={(v) => onProfileFieldChange("headline", v)}
+            value={state.profile.headline}
+            onChange={(headline) => setProfile({ headline })}
             placeholder="e.g. Senior Software Engineer"
           />
           <Textarea
             label="Summary"
-            value={profile.summary}
-            onChange={(v) => onProfileFieldChange("summary", v)}
+            value={state.profile.summary}
+            onChange={(summary) => setProfile({ summary })}
             placeholder="Long-form bio that opens the CV"
             rows={6}
           />
diff --git a/apps/client/src/features/cv-templates/components/SaveStatusLabel.tsx b/apps/client/src/features/cv-templates/components/SaveStatusLabel.tsx
new file mode 100644
index 0000000..e830bdd
--- /dev/null
+++ b/apps/client/src/features/cv-templates/components/SaveStatusLabel.tsx
@@ -0,0 +1,41 @@
+import type { SaveStatus } from "../hooks/useAutosave";
+
+interface SaveStatusLabelProps {
+  status: SaveStatus;
+  error: string | null;
+}
+
+const labelFor = (status: SaveStatus, error: string | null): string => {
+  if (status === "error") {
+    return error ? `Error: ${error}` : "Save failed";
+  }
+  if (status === "saving") {
+    return "Saving...";
+  }
+  if (status === "saved") {
+    return "Saved";
+  }
+  if (status === "pending") {
+    return "Unsaved changes";
+  }
+  return "All changes saved";
+};
+
+const classFor = (status: SaveStatus): string => {
+  if (status === "error") {
+    return "text-ctp-red";
+  }
+  if (status === "saving" || status === "pending") {
+    return "text-ctp-yellow";
+  }
+  if (status === "saved") {
+    return "text-ctp-green";
+  }
+  return "text-ctp-subtext0";
+};
+
+export const SaveStatusLabel = ({ status, error }: SaveStatusLabelProps) => (
+  <p className={`text-xs mt-1 ${classFor(status)}`}>
+    {labelFor(status, error)}
+  </p>
+);
diff --git a/apps/client/src/features/cv-templates/hooks/useCVEditor.ts b/apps/client/src/features/cv-templates/hooks/useCVEditor.ts
new file mode 100644
index 0000000..c13bb1e
--- /dev/null
+++ b/apps/client/src/features/cv-templates/hooks/useCVEditor.ts
@@ -0,0 +1,128 @@
+import { useQueryClient } from "@tanstack/react-query";
+import { useCallback, useMemo, useState } from "react";
+import {
+  type CvQuery,
+  type ProfileQuery,
+  useCvQuery,
+  useProfileQuery,
+  useRenderCvQuery,
+  useUpdateCvMutation,
+  useUpdateProfileMutation,
+} from "@/generated/graphql";
+
+export interface CVEditorState {
+  cv: { title: string; introduction: string; templateId: string };
+  profile: { fullName: string; headline: string; summary: string };
+}
+
+export type CVEditorPatch = {
+  cv?: Partial<CVEditorState["cv"]>;
+  profile?: Partial<CVEditorState["profile"]>;
+};
+
+type CV = NonNullable<CvQuery["cv"]>;
+type Profile = NonNullable<ProfileQuery["profile"]>;
+
+const stateFor = (cv: CV, profile: Profile): CVEditorState => ({
+  cv: {
+    title: cv.title,
+    introduction: cv.introduction ?? "",
+    templateId: cv.template.id,
+  },
+  profile: {
+    fullName: profile.fullName ?? "",
+    headline: profile.headline ?? "",
+    summary: profile.summary ?? "",
+  },
+});
+
+const cvDirty = (a: CVEditorState["cv"], b: CVEditorState["cv"]): boolean =>
+  a.title !== b.title ||
+  a.introduction !== b.introduction ||
+  a.templateId !== b.templateId;
+
+const profileDirty = (
+  a: CVEditorState["profile"],
+  b: CVEditorState["profile"],
+): boolean =>
+  a.fullName !== b.fullName ||
+  a.headline !== b.headline ||
+  a.summary !== b.summary;
+
+const orNull = (s: string): string | null => (s === "" ? null : s);
+
+interface UseCVEditorOptions {
+  cv: CV;
+  profile: Profile;
+}
+
+/**
+ * Owns the CV editor's form state. Exposes a `state` snapshot, a `patch`
+ * setter that takes a deep `Partial<CVEditorState>`, and a `save` that
+ * dispatches only the mutations whose slice actually changed.
+ *
+ * The `save` accepts the snapshot to persist (rather than reading from
+ * `state`) so it composes cleanly with `useAutosave`, which captures the
+ * latest value at flush time.
+ */
+export const useCVEditor = ({ cv, profile }: UseCVEditorOptions) => {
+  const queryClient = useQueryClient();
+  const updateCv = useUpdateCvMutation();
+  const updateProfile = useUpdateProfileMutation();
+
+  const initial = useMemo(() => stateFor(cv, profile), [cv, profile]);
+  const [state, setState] = useState<CVEditorState>(initial);
+
+  const patch = useCallback((p: CVEditorPatch) => {
+    setState((prev) => ({
+      cv: { ...prev.cv, ...(p.cv ?? {}) },
+      profile: { ...prev.profile, ...(p.profile ?? {}) },
+    }));
+  }, []);
+
+  const save = useCallback(
+    async (next: CVEditorState) => {
+      const tasks: Promise<unknown>[] = [];
+      if (cvDirty(initial.cv, next.cv)) {
+        tasks.push(
+          updateCv.mutateAsync({
+            id: cv.id,
+            input: {
+              title: next.cv.title,
+              introduction: orNull(next.cv.introduction),
+              templateId: next.cv.templateId,
+            },
+          }),
+        );
+      }
+      if (profileDirty(initial.profile, next.profile)) {
+        tasks.push(
+          updateProfile.mutateAsync({
+            id: profile.id,
+            input: {
+              fullName: orNull(next.profile.fullName),
+              headline: orNull(next.profile.headline),
+              summary: orNull(next.profile.summary),
+            },
+          }),
+        );
+      }
+      if (tasks.length === 0) return;
+      await Promise.all(tasks);
+      await Promise.all([
+        queryClient.invalidateQueries({
+          queryKey: useCvQuery.getKey({ id: cv.id }),
+        }),
+        queryClient.invalidateQueries({
+          queryKey: useProfileQuery.getKey({ id: profile.id }),
+        }),
+        queryClient.invalidateQueries({
+          queryKey: useRenderCvQuery.getKey({ cvId: cv.id }),
+        }),
+      ]);
+    },
+    [cv.id, profile.id, initial, updateCv, updateProfile, queryClient],
+  );
+
+  return { state, patch, save, initial };
+};
diff --git a/apps/client/src/features/cv-templates/hooks/useCVEditorData.ts b/apps/client/src/features/cv-templates/hooks/useCVEditorData.ts
new file mode 100644
index 0000000..415bb6a
--- /dev/null
+++ b/apps/client/src/features/cv-templates/hooks/useCVEditorData.ts
@@ -0,0 +1,31 @@
+import {
+  useCvQuery,
+  useCvTemplatesQuery,
+  useProfileQuery,
+  useRenderCvQuery,
+} from "@/generated/graphql";
+
+/**
+ * Bundles the four queries the CV editor needs into a single hook so the
+ * page component stays focused on layout. Profile is gated on the CV's
+ * `profileId` to avoid a wasted request before the CV resolves.
+ */
+export const useCVEditorData = (cvId: string) => {
+  const cv = useCvQuery({ id: cvId }, { enabled: !!cvId });
+  const profileId = cv.data?.cv?.profileId ?? "";
+  const profile = useProfileQuery(
+    { id: profileId },
+    { enabled: !!profileId },
+  );
+  const render = useRenderCvQuery({ cvId }, { enabled: !!cvId });
+  const templates = useCvTemplatesQuery({ first: 50 });
+
+  return {
+    cv,
+    profile,
+    render,
+    templates,
+    profileId,
+    isLoading: cv.isLoading || profile.isLoading || render.isLoading,
+  };
+};
diff --git a/apps/client/src/pages/CVEditPage.tsx b/apps/client/src/pages/CVEditPage.tsx
index afcd3af..81106b5 100644
--- a/apps/client/src/pages/CVEditPage.tsx
+++ b/apps/client/src/pages/CVEditPage.tsx
@@ -1,177 +1,111 @@
 import { ViewTransitionLink } from "@cv/routing";
 import { Button } from "@cv/ui";
-import { useQueryClient } from "@tanstack/react-query";
-import { useCallback, useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import { EditSidebar } from "@/features/cv-templates/components/EditSidebar";
 import { useAutosave } from "@/features/cv-templates/hooks/useAutosave";
-import {
-  useCvQuery,
-  useCvTemplatesQuery,
-  useProfileQuery,
-  useRenderCvQuery,
-  useUpdateCvMutation,
-  useUpdateProfileMutation,
-} from "@/generated/graphql";
-
-interface EditState {
-  title: string;
-  introduction: string;
-  templateId: string;
-  fullName: string;
-  headline: string;
-  summary: string;
-}
-
-const emptyState: EditState = {
-  title: "",
-  introduction: "",
-  templateId: "",
-  fullName: "",
-  headline: "",
-  summary: "",
-};
+import { useCVEditor } from "@/features/cv-templates/hooks/useCVEditor";
+import { useCVEditorData } from "@/features/cv-templates/hooks/useCVEditorData";
+
+const LoadingScreen = ({ message }: { message: string }) => (
+  <div className="flex items-center justify-center min-h-screen">
+    <div className="text-ctp-text">{message}</div>
+  </div>
+);
+
+const NotFoundScreen = () => (
+  <div className="flex flex-col items-center justify-center min-h-screen">
+    <h2 className="text-2xl font-bold text-ctp-text mb-4">CV Not Found</h2>
+    <ViewTransitionLink to="/cvs">
+      <Button>Back to My CVs</Button>
+    </ViewTransitionLink>
+  </div>
+);
 
 export const CVEditPage = () => {
   const { id } = useParams<{ id: string }>();
   const cvId = id ?? "";
-  const queryClient = useQueryClient();
+  const data = useCVEditorData(cvId);
 
-  const { data: cvData, isLoading: cvLoading } = useCvQuery(
-    { id: cvId },
-    { enabled: !!cvId },
-  );
-
-  const profileId = cvData?.cv?.profileId ?? "";
-  const { data: profileData, isLoading: profileLoading } = useProfileQuery(
-    { id: profileId },
-    { enabled: !!profileId },
-  );
-  const { data: renderData, isLoading: renderLoading } = useRenderCvQuery(
-    { cvId },
-    { enabled: !!cvId },
-  );
-  const { data: templatesData } = useCvTemplatesQuery({ first: 50 });
-
-  const updateCv = useUpdateCvMutation();
-  const updateProfile = useUpdateProfileMutation();
-
-  const [edit, setEdit] = useState<EditState | null>(null);
-
-  useEffect(() => {
-    if (cvData?.cv && profileData?.profile && edit === null) {
-      setEdit({
-        title: cvData.cv.title,
-        introduction: cvData.cv.introduction ?? "",
-        templateId: cvData.cv.template.id,
-        fullName: profileData.profile.fullName ?? "",
-        headline: profileData.profile.headline ?? "",
-        summary: profileData.profile.summary ?? "",
-      });
-    }
-  }, [cvData, profileData, edit]);
-
-  const initialState: EditState =
-    cvData?.cv && profileData?.profile
-      ? {
-          title: cvData.cv.title,
-          introduction: cvData.cv.introduction ?? "",
-          templateId: cvData.cv.template.id,
-          fullName: profileData.profile.fullName ?? "",
-          headline: profileData.profile.headline ?? "",
-          summary: profileData.profile.summary ?? "",
-        }
-      : emptyState;
+  if (data.isLoading) {
+    return <LoadingScreen message="Loading CV..." />;
+  }
+  if (!data.cv.data?.cv || !data.profile.data?.profile) {
+    return <NotFoundScreen />;
+  }
 
-  const handleSave = useCallback(
-    async (state: EditState) => {
-      if (!cvId || !profileId) {
-        return;
+  return (
+    <CVEditPageBody
+      cvId={cvId}
+      cv={data.cv.data.cv}
+      profile={data.profile.data.profile}
+      renderedHtml={data.render.data?.renderCV?.html}
+      templates={
+        data.templates.data?.cvTemplates?.edges.map(({ node }) => ({
+          id: node.id,
+          name: node.name,
+        })) ?? []
       }
-      await Promise.all([
-        updateCv.mutateAsync({
-          id: cvId,
-          input: {
-            title: state.title,
-            introduction: state.introduction === "" ? null : state.introduction,
-            templateId: state.templateId,
-          },
-        }),
-        updateProfile.mutateAsync({
-          id: profileId,
-          input: {
-            fullName: state.fullName === "" ? null : state.fullName,
-            headline: state.headline === "" ? null : state.headline,
-            summary: state.summary === "" ? null : state.summary,
-          },
-        }),
-      ]);
-      await Promise.all([
-        queryClient.invalidateQueries({ queryKey: ["CV", { id: cvId }] }),
-        queryClient.invalidateQueries({ queryKey: ["Profile", { id: profileId }] }),
-        queryClient.invalidateQueries({ queryKey: ["RenderCV", { cvId }] }),
-      ]);
-    },
-    [cvId, profileId, updateCv, updateProfile, queryClient],
+    />
   );
+};
 
-  const { status: saveStatus, error: saveError } = useAutosave({
-    value: edit ?? initialState,
-    initialValue: initialState,
-    onSave: handleSave,
-  });
-
-  if (cvLoading || profileLoading || renderLoading || edit === null) {
-    return (
-      <div className="flex items-center justify-center min-h-screen">
-        <div className="text-ctp-text">Loading CV...</div>
-      </div>
-    );
-  }
-
-  if (!cvData?.cv) {
-    return (
-      <div className="flex flex-col items-center justify-center min-h-screen">
-        <h2 className="text-2xl font-bold text-ctp-text mb-4">CV Not Found</h2>
-        <ViewTransitionLink to="/cvs">
-          <Button>Back to My CVs</Button>
-        </ViewTransitionLink>
-      </div>
-    );
-  }
+interface CVEditPageBodyProps {
+  cvId: string;
+  cv: NonNullable<
+    NonNullable<ReturnType<typeof useCVEditorData>["cv"]["data"]>["cv"]
+  >;
+  profile: NonNullable<
+    NonNullable<ReturnType<typeof useCVEditorData>["profile"]["data"]>["profile"]
+  >;
+  renderedHtml: string | undefined;
+  templates: Array<{ id: string; name: string }>;
+}
 
-  const templateOptions =
-    templatesData?.cvTemplates?.edges.map(({ node }) => ({
-      id: node.id,
-      name: node.name,
-    })) ?? [];
+/**
+ * Split out so the editor hooks only run after data has resolved. The
+ * top-level `CVEditPage` handles loading/empty states; this body holds
+ * the editor state and the layout.
+ */
+const CVEditPageBody = ({
+  cvId,
+  cv,
+  profile,
+  renderedHtml,
+  templates,
+}: CVEditPageBodyProps) => {
+  const editor = useCVEditor({ cv, profile });
+  const { status, error } = useAutosave({
+    value: editor.state,
+    initialValue: editor.initial,
+    onSave: editor.save,
+  });
 
   return (
     <div className="min-h-screen bg-ctp-base flex flex-col">
       <div className="bg-ctp-surface0 border-b border-ctp-surface1 py-4">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between">
           <div>
-            <h1 className="text-2xl font-bold text-ctp-text">{edit.title}</h1>
+            <h1 className="text-2xl font-bold text-ctp-text">
+              {editor.state.cv.title}
+            </h1>
             <p className="text-sm text-ctp-subtext0">
               Editing - changes save automatically
             </p>
           </div>
-          <div className="flex gap-3">
-            <ViewTransitionLink
-              to={`/cvs/${cvId}`}
-              className="inline-flex items-center justify-center rounded-md font-medium h-10 px-4 py-2 text-ctp-text hover:bg-ctp-surface0 transition-colors"
-            >
-              Done
-            </ViewTransitionLink>
-          </div>
+          <ViewTransitionLink
+            to={`/cvs/${cvId}`}
+            className="inline-flex items-center justify-center rounded-md font-medium h-10 px-4 py-2 text-ctp-text hover:bg-ctp-surface0 transition-colors"
+          >
+            Done
+          </ViewTransitionLink>
         </div>
       </div>
 
       <div className="flex-1 grid grid-cols-1 lg:grid-cols-[3fr_2fr] min-h-0">
         <div className="p-4 sm:p-6 overflow-auto">
-          {renderData?.renderCV?.html ? (
+          {renderedHtml ? (
             <iframe
-              srcDoc={renderData.renderCV.html}
+              srcDoc={renderedHtml}
               sandbox=""
               title="CV Preview"
               className="w-full bg-white rounded-lg shadow-lg border-0"
@@ -184,35 +118,10 @@ export const CVEditPage = () => {
           )}
         </div>
         <EditSidebar
-          title={edit.title}
-          introduction={edit.introduction}
-          templateId={edit.templateId}
-          templateOptions={templateOptions}
-          profile={{
-            fullName: edit.fullName,
-            headline: edit.headline,
-            summary: edit.summary,
-          }}
-          onTitleChange={(title) =>
-            setEdit((current) => (current ? { ...current, title } : current))
-          }
-          onIntroductionChange={(introduction) =>
-            setEdit((current) =>
-              current ? { ...current, introduction } : current,
-            )
-          }
-          onTemplateChange={(templateId) =>
-            setEdit((current) =>
-              current ? { ...current, templateId } : current,
-            )
-          }
-          onProfileFieldChange={(field, value) =>
-            setEdit((current) =>
-              current ? { ...current, [field]: value } : current,
-            )
-          }
-          saveStatus={saveStatus}
-          saveError={saveError}
+          state={editor.state}
+          onPatch={editor.patch}
+          templates={templates}
+          save={{ status, error }}
         />
       </div>
     </div>