diff --git a/apps/studio/app/(main)/(dashboard)/components/RecentCard.tsx b/apps/studio/app/(main)/(dashboard)/components/RecentCard.tsx
index 1c40147..9598ad3 100644
--- a/apps/studio/app/(main)/(dashboard)/components/RecentCard.tsx
+++ b/apps/studio/app/(main)/(dashboard)/components/RecentCard.tsx
@@ -7,14 +7,16 @@ import { FileText } from "lucide-react";
 import { Badge } from "@veriworkly/ui";
 
 import { getDocumentDefinition } from "@/features/documents/core/registry";
+import { getDocumentEditorPath } from "@/features/documents/core/routes";
 import { type DocumentLibraryItem } from "@/features/documents/services/document-library";
 
 const RecentCard = ({ doc }: { doc: DocumentLibraryItem }) => {
   const definition = getDocumentDefinition(doc.type);
+  const editorPath = getDocumentEditorPath(doc.type, doc.id);
 
   return (
     <Link
-      href={`/editor/${doc.type.toLowerCase()}/${doc.id}`}
+      href={editorPath}
       className="border-border bg-background/70 group hover:border-accent/40 hover:bg-card overflow-hidden rounded-xl border transition"
     >
       <div className="border-border/70 relative h-32 border-b bg-[color-mix(in_oklab,var(--card)_78%,var(--background))]">
diff --git a/apps/studio/app/(main)/(dashboard)/documents/components/DocumentActionsMenu.tsx b/apps/studio/app/(main)/(dashboard)/documents/components/DocumentActionsMenu.tsx
index ed151e2..14ff7ed 100644
--- a/apps/studio/app/(main)/(dashboard)/documents/components/DocumentActionsMenu.tsx
+++ b/apps/studio/app/(main)/(dashboard)/documents/components/DocumentActionsMenu.tsx
@@ -16,6 +16,7 @@ import { useRouter } from "next/navigation";
 import { Menu, MenuItem, MenuSeparator } from "@veriworkly/ui";
 
 import type { DocumentLibraryItem } from "@/features/documents/services/document-library";
+import { getDocumentEditorPath } from "@/features/documents/core/routes";
 
 export interface DocumentActionsMenuProps {
   doc: DocumentLibraryItem;
@@ -37,6 +38,7 @@ export function DocumentActionsMenu({
   onSyncDetailsAction,
 }: DocumentActionsMenuProps) {
   const router = useRouter();
+  const editorPath = getDocumentEditorPath(doc.type, doc.id);
 
   return (
     <Menu
@@ -66,7 +68,7 @@ export function DocumentActionsMenu({
             className="h-8 rounded-lg text-xs"
             onClick={() => {
               close();
-              router.push(`/editor/${doc.type.toLowerCase()}/${doc.id}`);
+              router.push(editorPath);
             }}
           >
             <ExternalLink className="h-4 w-4" />
@@ -122,9 +124,7 @@ export function DocumentActionsMenu({
             className="h-8 rounded-lg text-xs"
             onClick={() => {
               close();
-              void navigator.clipboard.writeText(
-                `${window.location.origin}/editor/${doc.type.toLowerCase()}/${doc.id}`,
-              );
+              void navigator.clipboard.writeText(`${window.location.origin}${editorPath}`);
               toast.success("Document link copied");
             }}
           >
diff --git a/apps/studio/app/(main)/(dashboard)/documents/components/DocumentListRow.tsx b/apps/studio/app/(main)/(dashboard)/documents/components/DocumentListRow.tsx
index df663cf..6894202 100644
--- a/apps/studio/app/(main)/(dashboard)/documents/components/DocumentListRow.tsx
+++ b/apps/studio/app/(main)/(dashboard)/documents/components/DocumentListRow.tsx
@@ -8,6 +8,7 @@ import type { SyncTelemetry } from "@/features/documents/services/document-sync"
 import type { DocumentLibraryItem } from "@/features/documents/services/document-library";
 
 import { getDocumentDefinition } from "@/features/documents/core/registry";
+import { getDocumentEditorPath } from "@/features/documents/core/routes";
 import { formatRelative } from "@/features/documents/services/document-library";
 
 import { DocumentActionsMenu } from "./DocumentActionsMenu";
@@ -35,6 +36,7 @@ export function DocumentListRow({
   onSyncDetailsAction,
 }: DocumentListRowProps) {
   const Icon = docIconMap[doc.type];
+  const editorPath = getDocumentEditorPath(doc.type, doc.id);
 
   return (
     <article className="grid gap-3 p-4 sm:grid-cols-[auto_minmax(0,1fr)_auto] sm:items-center sm:p-5">
@@ -67,7 +69,7 @@ export function DocumentListRow({
 
       <div className="flex items-center gap-2 sm:justify-end">
         <Button asChild size="sm" variant="secondary">
-          <Link href={`/editor/${doc.type.toLowerCase()}/${doc.id}`}>Open</Link>
+          <Link href={editorPath}>Open</Link>
         </Button>
 
         <DocumentActionsMenu
diff --git a/apps/studio/app/(main)/(dashboard)/documents/components/DocumentPreviewCard.tsx b/apps/studio/app/(main)/(dashboard)/documents/components/DocumentPreviewCard.tsx
index de08de6..f0629fb 100644
--- a/apps/studio/app/(main)/(dashboard)/documents/components/DocumentPreviewCard.tsx
+++ b/apps/studio/app/(main)/(dashboard)/documents/components/DocumentPreviewCard.tsx
@@ -9,6 +9,7 @@ import type { SyncTelemetry } from "@/features/documents/services/document-sync"
 import type { DocumentLibraryItem } from "@/features/documents/services/document-library";
 
 import { getDocumentDefinition } from "@/features/documents/core/registry";
+import { getDocumentEditorPath } from "@/features/documents/core/routes";
 import { formatRelative } from "@/features/documents/services/document-library";
 
 import { DocumentActionsMenu } from "./DocumentActionsMenu";
@@ -35,6 +36,8 @@ export function DocumentPreviewCard({
   onSyncNowAction,
   onSyncDetailsAction,
 }: DocumentPreviewCardProps) {
+  const editorPath = getDocumentEditorPath(doc.type, doc.id);
+
   return (
     <article className="group border-border bg-card hover:border-accent/40 relative aspect-3/4 w-full min-w-0 overflow-hidden rounded-xl border transition hover:shadow-sm">
       <div className="absolute inset-0 bg-[color-mix(in_oklab,var(--background)_94%,white)]">
@@ -79,7 +82,7 @@ export function DocumentPreviewCard({
       <Link
         aria-label={`Open ${doc.title}`}
         className="absolute inset-0 z-20 cursor-pointer"
-        href={`/editor/${doc.type.toLowerCase()}/${doc.id}`}
+        href={editorPath}
       />
 
       <div className="absolute top-2 right-2 z-30 opacity-0 transition-opacity duration-200 group-hover:opacity-100">
diff --git a/apps/studio/app/(main)/editor/[type]/[id]/preview/PreviewClient.tsx b/apps/studio/app/(main)/editor/[type]/[id]/preview/PreviewClient.tsx
index ece57fa..7cae30b 100644
--- a/apps/studio/app/(main)/editor/[type]/[id]/preview/PreviewClient.tsx
+++ b/apps/studio/app/(main)/editor/[type]/[id]/preview/PreviewClient.tsx
@@ -15,6 +15,7 @@ import { loadResumeById } from "@/features/resume/services/resume-service";
 import { loadDocumentById } from "@/features/documents/services/document-workspace-service";
 import type { DocumentType } from "@/features/documents/core/document-types";
 import type { CoverLetterContent } from "@/features/cover-letter/types";
+import { getDocumentEditorPath } from "@/features/documents/core/routes";
 import { CoverLetterPreview } from "@/templates/cover-letter/web";
 
 interface PreviewClientProps {
@@ -58,7 +59,7 @@ export function PreviewClient({ documentId, type }: PreviewClientProps) {
   const found = type === "RESUME" ? Boolean(routeResume) : Boolean(routeDocument);
   const title =
     type === "RESUME" ? resume.basics.fullName || "Untitled Resume" : routeDocument?.title;
-  const routeType = type.toLowerCase();
+  const editorPath = getDocumentEditorPath(type, documentId);
   const debugType = type === "COVER_LETTER" ? "cover-letter" : type.toLowerCase();
   const debugTemplateId = type === "RESUME" ? resume.templateId : routeDocument?.templateId;
   const canDebugPdf = type === "RESUME" || type === "COVER_LETTER";
@@ -87,7 +88,7 @@ export function PreviewClient({ documentId, type }: PreviewClientProps) {
           ) : null}
 
           <Link
-            href={`/editor/${routeType}/${documentId}`}
+            href={editorPath}
             className="text-foreground hover:bg-card inline-flex h-9 items-center justify-center rounded-full bg-transparent px-3 text-sm font-medium transition"
           >
             Back to editor
diff --git a/apps/studio/app/(main)/editor/components/EditorContentPanel.tsx b/apps/studio/app/(main)/editor/components/EditorContentPanel.tsx
deleted file mode 100644
index 70549c2..0000000
--- a/apps/studio/app/(main)/editor/components/EditorContentPanel.tsx
+++ /dev/null
@@ -1,168 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import type { DragEvent } from "react";
-
-import type { ResumeSectionId } from "@/types/resume";
-
-import { useResume } from "@/features/resume/hooks/use-resume";
-
-import LinksSection from "./content/sections/LinksSection";
-import AwardsSection from "./content/sections/AwardsSection";
-import BasicsSection from "./content/sections/BasicsSection";
-import CustomSection from "./content/sections/CustomSection";
-import SkillsSection from "./content/sections/SkillsSection";
-import SummarySection from "./content/sections/SummarySection";
-import ProjectsSection from "./content/sections/ProjectsSection";
-import LanguagesSection from "./content/sections/LanguagesSection";
-import InterestsSection from "./content/sections/InterestsSection";
-import VolunteerSection from "./content/sections/VolunteerSection";
-import EducationSection from "./content/sections/EducationSection";
-import ReferencesSection from "./content/sections/ReferencesSection";
-import ExperienceSection from "./content/sections/ExperienceSection";
-import AchievementsSection from "./content/sections/AchievementsSection";
-import PublicationsSection from "./content/sections/PublicationsSection";
-import CertificationsSection from "./content/sections/CertificationsSection";
-
-const EditorContentPanel = () => {
-  const { reorderSections, resume } = useResume();
-
-  const [draggedSectionId, setDraggedSectionId] = useState<ResumeSectionId | null>(null);
-  const [openSectionId, setOpenSectionId] = useState<ResumeSectionId | null>("basics");
-
-  function handleToggleSection(sectionId: ResumeSectionId) {
-    setOpenSectionId((currentSectionId) => (currentSectionId === sectionId ? null : sectionId));
-  }
-
-  return (
-    <div className="space-y-6">
-      <div className="space-y-1">
-        <p className="text-muted text-xs font-semibold tracking-[0.22em] uppercase">
-          Resume Content
-        </p>
-
-        <h2 className="text-foreground text-xl font-semibold">Content editor</h2>
-      </div>
-
-      <div className="space-y-3">
-        {resume.sections
-          .slice()
-          .sort((left, right) => left.order - right.order)
-          .map((section, sectionIndex) => {
-            const handleDragStart = (event: DragEvent<HTMLSpanElement>) => {
-              setDraggedSectionId(section.id);
-
-              if (event.dataTransfer) {
-                event.dataTransfer.effectAllowed = "move";
-              }
-            };
-
-            const handleDragOver = (event: DragEvent<HTMLDivElement>) => {
-              event.preventDefault();
-
-              if (event.dataTransfer) {
-                event.dataTransfer.dropEffect = "move";
-              }
-            };
-
-            const handleDrop = (event: DragEvent<HTMLDivElement>) => {
-              event.preventDefault();
-
-              if (draggedSectionId && draggedSectionId !== section.id) {
-                const draggedIndex = resume.sections.findIndex(
-                  (item) => item.id === draggedSectionId,
-                );
-
-                if (draggedIndex !== -1) {
-                  reorderSections(draggedIndex, sectionIndex);
-                }
-              }
-
-              setDraggedSectionId(null);
-            };
-
-            const handleDragEnd = () => {
-              setDraggedSectionId(null);
-            };
-
-            const sectionProps = {
-              isOpen: openSectionId === section.id,
-              onDragEnd: handleDragEnd,
-              onDragOver: handleDragOver,
-              onDragStart: handleDragStart,
-              onDrop: handleDrop,
-              onToggle: handleToggleSection,
-            };
-
-            if (section.id === "basics") {
-              return <BasicsSection key={section.id} {...sectionProps} />;
-            }
-
-            if (section.id === "links") {
-              return <LinksSection key={section.id} {...sectionProps} />;
-            }
-
-            if (section.id === "summary") {
-              return <SummarySection key={section.id} {...sectionProps} />;
-            }
-
-            if (section.id === "experience") {
-              return <ExperienceSection key={section.id} {...sectionProps} />;
-            }
-
-            if (section.id === "education") {
-              return <EducationSection key={section.id} {...sectionProps} />;
-            }
-
-            if (section.id === "projects") {
-              return <ProjectsSection key={section.id} {...sectionProps} />;
-            }
-
-            if (section.id === "skills") {
-              return <SkillsSection key={section.id} {...sectionProps} />;
-            }
-
-            if (section.id === "certifications") {
-              return <CertificationsSection key={section.id} {...sectionProps} />;
-            }
-
-            if (section.id === "awards") {
-              return <AwardsSection key={section.id} {...sectionProps} />;
-            }
-
-            if (section.id === "publications") {
-              return <PublicationsSection key={section.id} {...sectionProps} />;
-            }
-
-            if (section.id === "languages") {
-              return <LanguagesSection key={section.id} {...sectionProps} />;
-            }
-
-            if (section.id === "interests") {
-              return <InterestsSection key={section.id} {...sectionProps} />;
-            }
-
-            if (section.id === "volunteer") {
-              return <VolunteerSection key={section.id} {...sectionProps} />;
-            }
-
-            if (section.id === "references") {
-              return <ReferencesSection key={section.id} {...sectionProps} />;
-            }
-
-            if (section.id === "achievements") {
-              return <AchievementsSection key={section.id} {...sectionProps} />;
-            }
-
-            if (section.id === "custom") {
-              return <CustomSection key={section.id} {...sectionProps} />;
-            }
-
-            return null;
-          })}
-      </div>
-    </div>
-  );
-};
-
-export default EditorContentPanel;
diff --git a/apps/studio/app/(main)/editor/components/EditorLayout.tsx b/apps/studio/app/(main)/editor/components/EditorLayout.tsx
deleted file mode 100644
index 1c013bd..0000000
--- a/apps/studio/app/(main)/editor/components/EditorLayout.tsx
+++ /dev/null
@@ -1,317 +0,0 @@
-"use client";
-
-import { useRouter, useSearchParams } from "next/navigation";
-import { useDeferredValue, useEffect, useRef, useState } from "react";
-
-import type { TemplateComponent } from "@/types/template";
-
-import { Card } from "@veriworkly/ui";
-
-import {
-  startDocumentSyncWorker,
-  hydrateCloudDocumentByIdToLocalStorage,
-} from "@/features/documents/services/document-sync";
-import {
-  loadResumeById,
-  createResumeWithTemplate,
-} from "@/features/resume/services/resume-service";
-import { useResume } from "@/features/resume/hooks/use-resume";
-import { loadWorkspaceSettingsFromLocalStorage } from "@/features/documents/services/workspace-settings";
-
-import { loadTemplateComponentById } from "@/templates";
-
-import Toolbar from "./Toolbar";
-import EditorModals from "./EditorModals";
-import EditorContentPanel from "./EditorContentPanel";
-import EditorSettingsPanel from "./EditorSettingsPanel";
-
-import { useUserStore } from "@/store/useUserStore";
-
-interface EditorLayoutProps {
-  resumeId: string;
-}
-
-const EditorLayout = ({ resumeId }: EditorLayoutProps) => {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-
-  const hasHydratedRef = useRef(false);
-
-  const isLoggedIn = useUserStore((state) => state.isLoggedIn);
-
-  const { hydrateFromStorage, resume, saveToStorage, setResume } = useResume();
-
-  const [panelOpen, setPanelOpen] = useState(true);
-  const [activeTab, setActiveTab] = useState<"editor" | "preview">("editor");
-  const [activePanel, setActivePanel] = useState<"content" | "settings">("content");
-
-  const [templateComponent, setTemplateComponent] = useState<TemplateComponent | null>(null);
-
-  const [shareModalOpen, setShareModalOpen] = useState(false);
-  const [deleteModalOpen, setDeleteModalOpen] = useState(false);
-
-  const deferredResume = useDeferredValue(resume);
-
-  const resumePreviewId = `resume-preview-${resume.id}`;
-
-  const stagePaddingClass = resume.customization.pagePadding === 0 ? "p-0" : "p-3 md:p-6";
-
-  useEffect(() => {
-    let cancelled = false;
-
-    const hydrate = async () => {
-      if (resumeId === "new") {
-        const template = searchParams.get("template") || "executive-clarity";
-        const newResume = createResumeWithTemplate(template);
-
-        router.replace(`/editor/resume/${newResume.id}`);
-
-        return;
-      }
-
-      if (resumeId) {
-        const routeResume = loadResumeById(resumeId);
-
-        if (routeResume) {
-          setResume(routeResume);
-          hasHydratedRef.current = true;
-
-          return;
-        }
-
-        const cloudResult = await hydrateCloudDocumentByIdToLocalStorage("RESUME", resumeId);
-
-        if (!cancelled && cloudResult.ok) {
-          const hydratedResume = loadResumeById(resumeId);
-
-          if (hydratedResume) {
-            setResume(hydratedResume);
-            hasHydratedRef.current = true;
-            return;
-          }
-        }
-      }
-
-      if (!cancelled) {
-        hydrateFromStorage();
-        hasHydratedRef.current = true;
-      }
-    };
-
-    void hydrate();
-
-    return () => {
-      cancelled = true;
-    };
-  }, [hydrateFromStorage, resumeId, router, searchParams, setResume]);
-
-  useEffect(() => {
-    if (!hasHydratedRef.current) {
-      return;
-    }
-
-    saveToStorage({ debounceMs: 300 });
-  }, [resume, saveToStorage]);
-
-  useEffect(() => {
-    if (!hasHydratedRef.current) {
-      return;
-    }
-
-    if (!isLoggedIn) {
-      return;
-    }
-
-    const workspaceSettings = loadWorkspaceSettingsFromLocalStorage();
-
-    startDocumentSyncWorker("RESUME", {
-      enabled: isLoggedIn && workspaceSettings.autoSyncEnabled,
-      idleDelayMs: 12_000,
-    });
-  }, [isLoggedIn, resume.updatedAt]);
-
-  useEffect(() => {
-    let cancelled = false;
-
-    const loadTemplate = async () => {
-      const nextTemplate = await loadTemplateComponentById(deferredResume.templateId);
-
-      if (!cancelled) {
-        setTemplateComponent(() => nextTemplate);
-      }
-    };
-
-    void loadTemplate();
-
-    return () => {
-      cancelled = true;
-    };
-  }, [deferredResume.templateId]);
-
-  return (
-    <div className="flex h-[calc(100dvh-2rem)] min-h-0 flex-col gap-4 overflow-hidden">
-      <div className="sticky top-0 z-30">
-        <Toolbar
-          resumeId={resumeId}
-          resumePreviewId={resumePreviewId}
-          onOpenShare={() => setShareModalOpen(true)}
-          onOpenDelete={() => setDeleteModalOpen(true)}
-        />
-      </div>
-
-      <EditorModals
-        shareModalOpen={shareModalOpen}
-        onShareModalClose={() => setShareModalOpen(false)}
-        deleteModalOpen={deleteModalOpen}
-        onDeleteModalClose={() => setDeleteModalOpen(false)}
-      />
-
-      <div className="border-border bg-card inline-flex rounded-2xl border p-1 md:hidden">
-        <button
-          className={`rounded-xl px-4 py-2 text-sm font-medium ${
-            activeTab === "editor" ? "bg-accent text-accent-foreground" : "text-muted"
-          }`}
-          onClick={() => setActiveTab("editor")}
-          type="button"
-        >
-          Edit
-        </button>
-
-        <button
-          className={`rounded-xl px-4 py-2 text-sm font-medium ${
-            activeTab === "preview" ? "bg-accent text-accent-foreground" : "text-muted"
-          }`}
-          onClick={() => setActiveTab("preview")}
-          type="button"
-        >
-          Preview
-        </button>
-      </div>
-
-      <div
-        className={`grid min-h-0 flex-1 gap-4 overflow-hidden ${
-          panelOpen ? "xl:grid-cols-[minmax(0,420px)_minmax(0,1fr)]" : "grid-cols-1"
-        }`}
-      >
-        {panelOpen ? (
-          <div className={activeTab === "preview" ? "hidden min-h-0 md:block" : "block min-h-0"}>
-            <Card className="flex h-full min-h-0 flex-col p-4">
-              <div className="mb-4 flex items-center justify-between gap-3">
-                <div className="border-border bg-background inline-flex rounded-2xl border p-1">
-                  <button
-                    className={`rounded-xl px-3 py-2 text-sm font-medium ${
-                      activePanel === "content" ? "bg-accent text-accent-foreground" : "text-muted"
-                    }`}
-                    onClick={() => setActivePanel("content")}
-                    type="button"
-                  >
-                    Content
-                  </button>
-
-                  <button
-                    className={`rounded-xl px-3 py-2 text-sm font-medium ${
-                      activePanel === "settings" ? "bg-accent text-accent-foreground" : "text-muted"
-                    }`}
-                    onClick={() => setActivePanel("settings")}
-                    type="button"
-                  >
-                    Settings
-                  </button>
-                </div>
-
-                <button
-                  className="border-border bg-background text-muted hover:text-foreground flex h-9 w-9 items-center justify-center rounded-xl border text-lg"
-                  onClick={() => setPanelOpen(false)}
-                  type="button"
-                >
-                  x
-                </button>
-              </div>
-
-              <div className="min-h-0 flex-1 overflow-y-auto pr-1">
-                {activePanel === "content" ? <EditorContentPanel /> : <EditorSettingsPanel />}
-              </div>
-            </Card>
-          </div>
-        ) : null}
-
-        {!panelOpen ? (
-          <div className={activeTab === "preview" ? "hidden min-h-0 md:block" : "block min-h-0"}>
-            <Card className="space-y-3 p-3">
-              <p className="text-muted px-1 text-xs font-semibold tracking-[0.2em] uppercase">
-                Panels
-              </p>
-
-              <button
-                type="button"
-                className={`w-full rounded-xl px-3 py-2 text-left text-sm font-medium ${
-                  activePanel === "content"
-                    ? "bg-accent text-accent-foreground"
-                    : "bg-background text-muted"
-                }`}
-                onClick={() => {
-                  setActivePanel("content");
-                  setPanelOpen(true);
-                }}
-              >
-                Open content editor
-              </button>
-
-              <button
-                type="button"
-                className={`w-full rounded-xl px-3 py-2 text-left text-sm font-medium ${
-                  activePanel === "settings"
-                    ? "bg-accent text-accent-foreground"
-                    : "bg-background text-muted"
-                }`}
-                onClick={() => {
-                  setActivePanel("settings");
-                  setPanelOpen(true);
-                }}
-              >
-                Open style settings
-              </button>
-            </Card>
-          </div>
-        ) : null}
-
-        <Card
-          className={`h-full min-h-0 flex-col overflow-hidden p-0 ${
-            activeTab === "editor" ? "hidden md:flex" : "flex"
-          }`}
-        >
-          <div className="from-background via-card to-background relative flex min-h-0 flex-1 flex-col bg-linear-to-br">
-            <div className="border-border/80 bg-card/80 shrink-0 border-b px-4 py-3 backdrop-blur md:px-6">
-              <div>
-                <p className="text-muted text-[11px] font-semibold tracking-[0.22em] uppercase">
-                  Live Preview
-                </p>
-
-                <p className="text-foreground text-sm font-medium">
-                  {deferredResume.basics.fullName || "Untitled Resume"}
-                </p>
-              </div>
-            </div>
-
-            <div className="relative h-full min-h-0 flex-1 overflow-y-auto p-4 md:p-8">
-              <div
-                className={`relative flex min-h-[70vh] justify-center rounded-3xl border border-dashed border-[color-mix(in_oklab,var(--border)_70%,transparent)] bg-[color-mix(in_oklab,var(--background)_92%,white)] ${stagePaddingClass}`}
-              >
-                <div className="w-full max-w-212.5" id={resumePreviewId}>
-                  {templateComponent
-                    ? (() => {
-                        const TemplateComponent = templateComponent;
-                        return <TemplateComponent resume={deferredResume} />;
-                      })()
-                    : null}
-                </div>
-              </div>
-            </div>
-          </div>
-        </Card>
-      </div>
-    </div>
-  );
-};
-
-export default EditorLayout;
diff --git a/apps/studio/app/(main)/editor/components/content/sections/EducationSection.tsx b/apps/studio/app/(main)/editor/components/content/sections/EducationSection.tsx
deleted file mode 100644
index c2ef61a..0000000
--- a/apps/studio/app/(main)/editor/components/content/sections/EducationSection.tsx
+++ /dev/null
@@ -1,181 +0,0 @@
-"use client";
-
-import { useMemo, useState } from "react";
-
-import type { BaseSectionProps } from "./section-types";
-
-import { Input } from "@veriworkly/ui";
-import { Button } from "@veriworkly/ui";
-
-import { useResume } from "@/features/resume/hooks/use-resume";
-import { validateEducation } from "@/features/resume/utils/validation";
-
-import DraggableSection from "./DraggableSection";
-import { Field, invalidClass, TextArea } from "../EditorFormPrimitives";
-
-const EducationSection = ({
-  isOpen,
-  onDragEnd,
-  onDragOver,
-  onDragStart,
-  onDrop,
-  onToggle,
-}: BaseSectionProps) => {
-  const { addEducation, removeEducation, resume, updateEducation } = useResume();
-
-  const [educationIndex, setEducationIndex] = useState(0);
-
-  const safeEducationIndex = Math.min(educationIndex, Math.max(0, resume.education.length - 1));
-
-  const activeEducation = resume.education[safeEducationIndex];
-
-  const educationErrors = useMemo(
-    () => (activeEducation ? validateEducation(activeEducation) : {}),
-    [activeEducation],
-  );
-
-  if (!activeEducation) {
-    return null;
-  }
-
-  return (
-    <DraggableSection
-      id="education"
-      isOpen={isOpen}
-      onDrop={onDrop}
-      label="Education"
-      onToggle={onToggle}
-      onDragEnd={onDragEnd}
-      onDragOver={onDragOver}
-      onDragStart={onDragStart}
-    >
-      <div className="mb-3 flex flex-wrap gap-2">
-        <select
-          className="border-border bg-background h-10 rounded-xl border px-3 text-sm"
-          onChange={(event) => setEducationIndex(Number(event.target.value))}
-          value={safeEducationIndex}
-        >
-          {resume.education.map((_, index) => (
-            <option key={index} value={index}>
-              Education {index + 1}
-            </option>
-          ))}
-        </select>
-
-        <Button onClick={addEducation} size="sm" variant="secondary">
-          Add
-        </Button>
-
-        <Button
-          disabled={resume.education.length <= 1}
-          onClick={() => removeEducation(safeEducationIndex)}
-          size="sm"
-          variant="ghost"
-        >
-          Remove
-        </Button>
-      </div>
-
-      <div className="grid gap-4 md:grid-cols-2">
-        <Field error={educationErrors.school} label="School">
-          <Input
-            className={invalidClass(educationErrors.school)}
-            onChange={(event) =>
-              updateEducation(safeEducationIndex, {
-                school: event.target.value,
-              })
-            }
-            value={activeEducation.school}
-          />
-        </Field>
-
-        <Field error={educationErrors.degree} label="Degree">
-          <Input
-            className={invalidClass(educationErrors.degree)}
-            onChange={(event) =>
-              updateEducation(safeEducationIndex, {
-                degree: event.target.value,
-              })
-            }
-            value={activeEducation.degree}
-          />
-        </Field>
-
-        <Field error={educationErrors.field} label="Field of study">
-          <Input
-            className={invalidClass(educationErrors.field)}
-            onChange={(event) =>
-              updateEducation(safeEducationIndex, {
-                field: event.target.value,
-              })
-            }
-            value={activeEducation.field}
-          />
-        </Field>
-
-        <Field error={educationErrors.startDate} label="Start year">
-          <Input
-            className={invalidClass(educationErrors.startDate)}
-            inputMode="numeric"
-            maxLength={4}
-            onChange={(event) =>
-              updateEducation(safeEducationIndex, {
-                startDate: event.target.value.replace(/\D/g, "").slice(0, 4),
-              })
-            }
-            pattern="[0-9]*"
-            placeholder="2019"
-            value={activeEducation.startDate}
-          />
-        </Field>
-
-        <Field error={educationErrors.endDate} label="End year">
-          <Input
-            className={invalidClass(educationErrors.endDate)}
-            disabled={activeEducation.current}
-            inputMode="numeric"
-            maxLength={4}
-            onChange={(event) =>
-              updateEducation(safeEducationIndex, {
-                endDate: event.target.value.replace(/\D/g, "").slice(0, 4),
-              })
-            }
-            pattern="[0-9]*"
-            placeholder="2023"
-            value={activeEducation.endDate}
-          />
-        </Field>
-
-        <label className="text-foreground border-border flex items-center gap-3 rounded-2xl border px-4 py-3 text-sm font-medium">
-          <input
-            checked={activeEducation.current}
-            className="accent-accent h-4 w-4"
-            onChange={(event) =>
-              updateEducation(safeEducationIndex, {
-                current: event.target.checked,
-                endDate: event.target.checked ? "" : activeEducation.endDate,
-              })
-            }
-            type="checkbox"
-          />
-          I currently study here
-        </label>
-      </div>
-
-      <div className="mt-4">
-        <Field label="Summary">
-          <TextArea
-            onChange={(event) =>
-              updateEducation(safeEducationIndex, {
-                summary: event.target.value,
-              })
-            }
-            value={activeEducation.summary}
-          />
-        </Field>
-      </div>
-    </DraggableSection>
-  );
-};
-
-export default EducationSection;
diff --git a/apps/studio/app/(main)/editor/components/content/sections/SkillsSection.tsx b/apps/studio/app/(main)/editor/components/content/sections/SkillsSection.tsx
deleted file mode 100644
index 90d7a14..0000000
--- a/apps/studio/app/(main)/editor/components/content/sections/SkillsSection.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-"use client";
-
-import { useMemo, useState } from "react";
-
-import type { BaseSectionProps } from "./section-types";
-
-import { Input } from "@veriworkly/ui";
-import { Button } from "@veriworkly/ui";
-
-import { Field, invalidClass, DelimitedTextArea } from "../EditorFormPrimitives";
-
-import { useResume } from "@/features/resume/hooks/use-resume";
-import { validateSkillGroup } from "@/features/resume/utils/validation";
-
-import DraggableSection from "./DraggableSection";
-
-const SkillsSection = ({
-  isOpen,
-  onDragEnd,
-  onDragOver,
-  onDragStart,
-  onDrop,
-  onToggle,
-}: BaseSectionProps) => {
-  const { addSkillGroup, removeSkillGroup, resume, updateSkillGroup } = useResume();
-
-  const [skillIndex, setSkillIndex] = useState(0);
-
-  const safeSkillIndex = Math.min(skillIndex, Math.max(0, resume.skills.length - 1));
-
-  const activeSkillGroup = resume.skills[safeSkillIndex];
-
-  const skillErrors = useMemo(
-    () => (activeSkillGroup ? validateSkillGroup(activeSkillGroup) : {}),
-    [activeSkillGroup],
-  );
-
-  if (!activeSkillGroup) {
-    return null;
-  }
-
-  return (
-    <DraggableSection
-      id="skills"
-      label="Skills"
-      isOpen={isOpen}
-      onDrop={onDrop}
-      onToggle={onToggle}
-      onDragEnd={onDragEnd}
-      onDragOver={onDragOver}
-      onDragStart={onDragStart}
-    >
-      <div className="mb-3 flex flex-wrap gap-2">
-        <select
-          className="border-border bg-background h-10 rounded-xl border px-3 text-sm"
-          onChange={(event) => setSkillIndex(Number(event.target.value))}
-          value={safeSkillIndex}
-        >
-          {resume.skills.map((item, index) => (
-            <option key={item.id} value={index}>
-              {item.name || `Group ${index + 1}`}
-            </option>
-          ))}
-        </select>
-
-        <Button onClick={addSkillGroup} size="sm" variant="secondary">
-          Add
-        </Button>
-
-        <Button
-          disabled={resume.skills.length <= 1}
-          onClick={() => removeSkillGroup(safeSkillIndex)}
-          size="sm"
-          variant="ghost"
-        >
-          Remove
-        </Button>
-      </div>
-
-      <Field error={skillErrors.name} label="Group name">
-        <Input
-          className={invalidClass(skillErrors.name)}
-          onChange={(event) =>
-            updateSkillGroup(safeSkillIndex, {
-              name: event.target.value,
-            })
-          }
-          value={activeSkillGroup.name}
-        />
-      </Field>
-
-      <Field error={skillErrors.keywords} label="Keywords (comma separated)">
-        <DelimitedTextArea
-          key={activeSkillGroup.id}
-          value={activeSkillGroup.keywords}
-          className={invalidClass(skillErrors.keywords)}
-          onChange={(nextKeywords) =>
-            updateSkillGroup(safeSkillIndex, {
-              keywords: nextKeywords,
-            })
-          }
-        />
-      </Field>
-
-      {activeSkillGroup.keywords.length ? (
-        <div className="flex flex-wrap gap-2">
-          {activeSkillGroup.keywords.map((keyword) => (
-            <span
-              className="border-border bg-background text-muted rounded-full border px-3 py-1 text-xs font-medium"
-              key={keyword}
-            >
-              {keyword}
-            </span>
-          ))}
-        </div>
-      ) : null}
-    </DraggableSection>
-  );
-};
-
-export default SkillsSection;
diff --git a/apps/studio/app/(main)/editor/page.tsx b/apps/studio/app/(main)/editor/page.tsx
index bb2dfe0..27200ba 100644
--- a/apps/studio/app/(main)/editor/page.tsx
+++ b/apps/studio/app/(main)/editor/page.tsx
@@ -1,6 +1,7 @@
 import { redirect } from "next/navigation";
 
 import { getTemplateById, templateRegistry } from "@/templates";
+import { getDocumentEditorPath } from "@/features/documents/core/routes";
 
 interface EditorEntryPageProps {
   searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
@@ -19,5 +20,5 @@ export default async function EditorEntryPage({ searchParams }: EditorEntryPageP
   const resolvedTemplate =
     (templateParam ? getTemplateById(templateParam) : null) ?? templateRegistry[0];
 
-  redirect(`/editor/resume/new?template=${resolvedTemplate.id}`);
+  redirect(`${getDocumentEditorPath("RESUME", "new")}?template=${resolvedTemplate.id}`);
 }
diff --git a/apps/studio/components/dashboard/StudioShell.tsx b/apps/studio/components/dashboard/StudioShell.tsx
index db761e8..501be83 100644
--- a/apps/studio/components/dashboard/StudioShell.tsx
+++ b/apps/studio/components/dashboard/StudioShell.tsx
@@ -22,6 +22,7 @@ import { WorkspaceSearchModal } from "@/components/dashboard/WorkspaceSearchModa
 
 import { createResume } from "@/features/resume/services/resume-service";
 import { signOutCurrentUser } from "@/features/auth/services/current-user";
+import { getDocumentEditorPath } from "@/features/documents/core/routes";
 import { createDocument } from "@/features/documents/services/document-workspace-service";
 import type { DocumentType } from "@/features/documents/core/document-types";
 
@@ -34,7 +35,7 @@ interface StudioShellProps {
   mainClassName?: string;
 }
 
-const STUDIO_VERSION = "v3.4.0";
+const STUDIO_VERSION = "v3.8.0";
 
 const StudioShell = ({ children, mainClassName }: StudioShellProps) => {
   const router = useRouter();
@@ -53,13 +54,13 @@ const StudioShell = ({ children, mainClassName }: StudioShellProps) => {
   const createNewDocument = (type: DocumentType) => {
     if (type === "RESUME") {
       const resume = createResume();
-      router.push(`/editor/resume/${resume.id}`);
+      router.push(getDocumentEditorPath("RESUME", resume.id));
 
       return;
     }
 
     const document = createDocument(type);
-    router.push(`/editor/${type.toLowerCase()}/${document.id}`);
+    router.push(getDocumentEditorPath(type, document.id));
   };
 
   const handleLogout = async () => {
@@ -238,7 +239,7 @@ const StudioShell = ({ children, mainClassName }: StudioShellProps) => {
         <WorkspaceSearchModal
           open={searchOpen}
           onClose={() => setSearchOpen(false)}
-          onOpenDocument={(id) => router.push(`/editor/resume/${id}`)}
+          onOpenDocument={(doc) => router.push(getDocumentEditorPath(doc.type, doc.id))}
         />
 
         <NewDocumentModal
diff --git a/apps/studio/components/dashboard/WorkspaceSearchModal.tsx b/apps/studio/components/dashboard/WorkspaceSearchModal.tsx
index ccbaf18..72b0dd1 100644
--- a/apps/studio/components/dashboard/WorkspaceSearchModal.tsx
+++ b/apps/studio/components/dashboard/WorkspaceSearchModal.tsx
@@ -3,11 +3,14 @@
 import { FileText, Search, X } from "lucide-react";
 import { useEffect, useId, useMemo, useState } from "react";
 
-import { listSavedResumes } from "@/features/resume/services/resume-core";
+import type { DocumentType } from "@/features/documents/core/document-types";
+
+import { getDocumentDefinition } from "@/features/documents/core/registry";
+import { listDocuments } from "@/features/documents/services/document-workspace-service";
 
 type SearchResult = {
   id: string;
-  type: "RESUME";
+  type: DocumentType;
   title: string;
   subtitle: string;
   updatedAt: string;
@@ -20,7 +23,7 @@ export function WorkspaceSearchModal({
 }: {
   open: boolean;
   onClose: () => void;
-  onOpenDocument: (id: string) => void;
+  onOpenDocument: (doc: SearchResult) => void;
 }) {
   const [query, setQuery] = useState("");
   const inputId = useId();
@@ -39,17 +42,21 @@ export function WorkspaceSearchModal({
   const results = useMemo(() => {
     if (!open) return [];
 
-    const resumes: SearchResult[] = listSavedResumes().map((resume) => ({
-      id: resume.id,
-      type: "RESUME",
-      title: resume.title,
-      subtitle: resume.role || "Resume",
-      updatedAt: resume.updatedAt,
-    }));
+    const documents: SearchResult[] = listDocuments().map((document) => {
+      const definition = getDocumentDefinition(document.type);
+
+      return {
+        id: document.id,
+        type: document.type,
+        title: document.title,
+        subtitle: definition.label,
+        updatedAt: document.updatedAt,
+      };
+    });
 
     const needle = query.trim().toLowerCase();
 
-    return resumes
+    return documents
       .filter((doc) => !needle || `${doc.title} ${doc.subtitle}`.toLowerCase().includes(needle))
       .sort((left, right) => Date.parse(right.updatedAt) - Date.parse(left.updatedAt))
       .slice(0, 10);
@@ -113,7 +120,7 @@ export function WorkspaceSearchModal({
                 className="hover:bg-accent/10 focus-visible:bg-accent/10 flex w-full items-center gap-3 rounded-xl p-3 text-left outline-none"
                 onClick={() => {
                   onClose();
-                  onOpenDocument(doc.id);
+                  onOpenDocument(doc);
                 }}
               >
                 <span className="bg-accent/10 text-accent flex h-10 w-10 shrink-0 items-center justify-center rounded-lg">
@@ -122,14 +129,14 @@ export function WorkspaceSearchModal({
 
                 <span className="min-w-0 flex-1">
                   <span className="block truncate text-sm font-bold">{doc.title}</span>
-                  <span className="text-muted block truncate text-xs">Resume - {doc.subtitle}</span>
+                  <span className="text-muted block truncate text-xs">{doc.subtitle}</span>
                 </span>
               </button>
             ))
           ) : (
             <div className="p-8 text-center">
               <p className="font-bold">No documents found</p>
-              <p className="text-muted mt-1 text-sm">Try another resume title or role.</p>
+              <p className="text-muted mt-1 text-sm">Try another document title.</p>
             </div>
           )}
         </div>
diff --git a/apps/studio/components/modals/SyncDetailsModal.tsx b/apps/studio/components/modals/SyncDetailsModal.tsx
index 342b8b3..c5e176d 100644
--- a/apps/studio/components/modals/SyncDetailsModal.tsx
+++ b/apps/studio/components/modals/SyncDetailsModal.tsx
@@ -17,6 +17,7 @@ import type { SyncTelemetry } from "@/features/documents/services/document-sync"
 import type { DocumentLibraryItem } from "@/features/documents/services/document-library";
 
 import { cn } from "@/lib/utils";
+import { getDocumentEditorPath } from "@/features/documents/core/routes";
 
 import { Modal, Button } from "@veriworkly/ui";
 
@@ -45,7 +46,7 @@ const SyncDetailsModal = ({
 
   const isSyncing = syncingDocumentId === document.id;
   const isConflicted = document.sync.status === "conflicted";
-  const editorHref = `/editor/${document.type.toLowerCase()}/${document.id}`;
+  const editorHref = getDocumentEditorPath(document.type, document.id);
 
   if (!document) return null;
 
diff --git a/apps/studio/features/cover-letter/editor/CoverLetterEditor.tsx b/apps/studio/features/cover-letter/editor/CoverLetterEditor.tsx
index 8cb687e..b9eee6e 100644
--- a/apps/studio/features/cover-letter/editor/CoverLetterEditor.tsx
+++ b/apps/studio/features/cover-letter/editor/CoverLetterEditor.tsx
@@ -1,200 +1,53 @@
 "use client";
 
-import Link from "next/link";
+import type { ReactNode } from "react";
+
 import { toast } from "sonner";
 import { useRouter } from "next/navigation";
-import { useEffect, useRef, useState } from "react";
-import { FileSearch, PanelLeftClose, PanelLeftOpen } from "lucide-react";
-
-import { Button, Card, Input, Select, TextArea } from "@veriworkly/ui";
+import { useEffect, useMemo, useState } from "react";
 
-import { cn } from "@/lib/utils";
+import { Button, Card } from "@veriworkly/ui";
 
 import { useUserStore } from "@/store/useUserStore";
 
-import type { BaseDocument, ExportFormat } from "@/features/documents/core/types";
-import type { ResumeLinkDisplayMode, ResumeLinkItem, ResumeLinkType } from "@/types/resume";
-import type { CoverLetterAppearance, CoverLetterContent } from "@/features/cover-letter/types";
+import type { BaseDocument } from "@/features/documents/core/types";
+import type { CoverLetterContent } from "@/features/cover-letter/types";
 
-import {
-  startDocumentSyncWorker,
-  hydrateCloudDocumentByIdToLocalStorage,
-} from "@/features/documents/services/document-sync";
-import {
-  saveDocument,
-  deleteDocument,
-  loadDocumentById,
-} from "@/features/documents/services/document-workspace-service";
 import { CoverLetterPreview } from "@/templates/cover-letter/web";
 import ShareDocumentModal from "@/components/modals/ShareDocumentModal";
-import { createDefaultCoverLetter } from "@/features/cover-letter/defaults";
-import ToolbarHeader from "@/app/(main)/editor/components/toolbar/ToolbarHeader";
-import { templateCatalogByType } from "@/features/documents/core/template-catalog";
-import { exportDocumentByType } from "@/features/documents/export/export-dispatcher";
-import { fontOptions, type FontFamilyId } from "@/features/documents/constants/fonts";
-import { linkTypeOptions } from "@/app/(main)/editor/components/content/editor-options";
-import ToolbarActionsMenu from "@/app/(main)/editor/components/toolbar/ToolbarActionsMenu";
-import ToolbarDownloadMenu from "@/app/(main)/editor/components/toolbar/ToolbarDownloadMenu";
+import { DocumentEditorShell } from "@/features/documents/editor/DocumentEditorShell";
+import { startDocumentSyncWorker } from "@/features/documents/services/document-sync";
+import { deleteDocument } from "@/features/documents/services/document-workspace-service";
 import { loadWorkspaceSettingsFromLocalStorage } from "@/features/documents/services/workspace-settings";
 
-interface Props {
-  documentId: string;
-}
-
-type EditorPanel = "content" | "settings";
-
-function getInitialDocument(documentId: string) {
-  return loadDocumentById("COVER_LETTER", documentId) as BaseDocument<CoverLetterContent> | null;
-}
+import { CoverLetterToolbar } from "./components/CoverLetterToolbar";
+import { useCoverLetterDocument } from "./hooks/useCoverLetterDocument";
+import { CoverLetterContentPanel } from "./components/CoverLetterContentPanel";
+import { CoverLetterSettingsPanel } from "./components/CoverLetterSettingsPanel";
 
-function Field({
-  label,
-  value,
-  placeholder,
-  onChange,
-}: {
-  label: string;
-  value: string;
-  placeholder?: string;
-  onChange: (value: string) => void;
-}) {
-  return (
-    <label className="grid gap-1.5">
-      <span className="text-muted text-xs font-semibold">{label}</span>
-      <Input
-        value={value}
-        placeholder={placeholder}
-        onChange={(event) => onChange(event.target.value)}
-      />
-    </label>
-  );
-}
-
-function TextField({
-  label,
-  value,
-  placeholder,
-  className,
-  onChange,
-}: {
-  label: string;
-  value: string;
-  placeholder?: string;
-  className?: string;
-  onChange: (value: string) => void;
-}) {
-  return (
-    <label className="grid gap-1.5">
-      <span className="text-muted text-xs font-semibold">{label}</span>
-      <TextArea
-        className={cn("min-h-28 leading-6", className)}
-        value={value}
-        placeholder={placeholder}
-        onChange={(event) => onChange(event.target.value)}
-      />
-    </label>
-  );
-}
-
-function RangeField({
-  label,
-  value,
-  min,
-  max,
-  step,
-  onChange,
-}: {
-  label: string;
-  value: number;
-  min: number;
-  max: number;
-  step?: number;
-  onChange: (value: number) => void;
-}) {
-  return (
-    <label className="grid gap-2 text-sm font-medium">
-      <span>{label}</span>
-      <input
-        className="accent-accent w-full"
-        type="range"
-        min={min}
-        max={max}
-        step={step}
-        value={value}
-        onChange={(event) => onChange(Number(event.target.value))}
-      />
-    </label>
-  );
-}
-
-function ColorField({
-  label,
-  value,
-  onChange,
-}: {
-  label: string;
-  value: string;
-  onChange: (value: string) => void;
-}) {
-  return (
-    <label className="grid gap-2 text-sm font-medium">
-      <span>{label}</span>
-      <input
-        className="border-border bg-background h-11 w-full rounded-2xl border p-1"
-        type="color"
-        value={value}
-        onChange={(event) => onChange(event.target.value)}
-      />
-    </label>
-  );
+interface CoverLetterEditorProps {
+  documentId: string;
 }
 
-export default function CoverLetterEditor({ documentId }: Props) {
+export default function CoverLetterEditor({ documentId }: CoverLetterEditorProps) {
   const router = useRouter();
-
   const isLoggedIn = useUserStore((state) => state.isLoggedIn);
-
-  const [hydrated, setHydrated] = useState(false);
-  const [panelOpen, setPanelOpen] = useState(true);
-  const fileInputRef = useRef<HTMLInputElement>(null);
-  const [message, setMessage] = useState("Autosave ready");
   const [shareModalOpen, setShareModalOpen] = useState(false);
-  const [activePanel, setActivePanel] = useState<EditorPanel>("content");
-  const [activeTab, setActiveTab] = useState<"editor" | "preview">("editor");
-  const [doc, setDoc] = useState<BaseDocument<CoverLetterContent> | null>(null);
-  const [activeDownload, setActiveDownload] = useState<ExportFormat | null>(null);
-
-  useEffect(() => {
-    let cancelled = false;
-
-    const hydrate = async () => {
-      const localDocument = getInitialDocument(documentId);
-
-      if (!cancelled && localDocument) {
-        setDoc(localDocument);
-        setHydrated(true);
-        return;
-      }
-
-      const cloudResult = await hydrateCloudDocumentByIdToLocalStorage("COVER_LETTER", documentId);
-
-      if (!cancelled && cloudResult.ok) {
-        setDoc(getInitialDocument(documentId));
-        setHydrated(true);
-        return;
-      }
-
-      if (cancelled) return;
-      setDoc(null);
-      setHydrated(true);
-    };
 
-    void hydrate();
-
-    return () => {
-      cancelled = true;
-    };
-  }, [documentId]);
+  const {
+    doc,
+    hydrated,
+    message,
+    setMessage,
+    updateDocument,
+    updateContent,
+    updateAppearance,
+    updateLinks,
+    addLink,
+    updateLink,
+    removeLink,
+    saveCurrentDocument,
+  } = useCoverLetterDocument(documentId);
 
   useEffect(() => {
     if (!hydrated || !isLoggedIn) return;
@@ -207,112 +60,33 @@ export default function CoverLetterEditor({ documentId }: Props) {
     });
   }, [hydrated, isLoggedIn, doc?.updatedAt]);
 
+  const links = useMemo(
+    () => doc?.content.links ?? { displayMode: "icon-username" as const, items: [] },
+    [doc?.content.links],
+  );
+
   if (!hydrated) {
-    return (
-      <div className="mx-auto max-w-3xl px-4 py-10">
-        <Card className="space-y-3 text-center">
-          <h1 className="text-foreground text-xl font-semibold">Loading cover letter</h1>
-          <p className="text-muted text-sm">Preparing your editor.</p>
-        </Card>
-      </div>
-    );
+    return <CoverLetterStateCard title="Loading cover letter" message="Preparing your editor." />;
   }
 
   if (!doc) {
     return (
-      <div className="mx-auto max-w-3xl px-4 py-10">
-        <Card className="space-y-3 text-center">
-          <h1 className="text-foreground text-xl font-semibold">Cover letter not found</h1>
-          <p className="text-muted text-sm">Return to documents and choose another letter.</p>
-          <Button asChild variant="secondary">
-            <Link href="/documents">Back to documents</Link>
-          </Button>
-        </Card>
-      </div>
+      <CoverLetterStateCard
+        title="Cover letter not found"
+        message="Return to documents and choose another letter."
+      >
+        <Button onClick={() => router.push("/documents")} variant="secondary">
+          Back to documents
+        </Button>
+      </CoverLetterStateCard>
     );
   }
 
   const currentDoc = doc;
-  const content = currentDoc.content;
-  const appearance = content.appearance;
-  const links = content.links ?? { displayMode: "icon-username" as const, items: [] };
-
-  function updateDocument(next: BaseDocument<CoverLetterContent>) {
-    setDoc(next);
-    saveDocument(next);
-    setMessage("Saved locally");
-  }
-
-  function updateContent(patch: Partial<CoverLetterContent>) {
-    updateDocument({
-      ...currentDoc,
-      title:
-        patch.jobTitle || patch.companyName
-          ? [patch.jobTitle ?? content.jobTitle, patch.companyName ?? content.companyName]
-              .filter(Boolean)
-              .join(" - ") || currentDoc.title
-          : currentDoc.title,
-      updatedAt: new Date().toISOString(),
-      content: { ...content, ...patch },
-    });
-  }
-
-  function updateAppearance(patch: Partial<CoverLetterAppearance>) {
-    updateContent({ appearance: { ...appearance, ...patch } });
-  }
-
-  function updateLinks(patch: Partial<CoverLetterContent["links"]>) {
-    updateContent({ links: { ...links, ...patch } });
-  }
-
-  function addLink() {
-    const next: ResumeLinkItem = {
-      id: `cover-link-${Date.now().toString(36)}`,
-      type: "linkedin",
-      label: "",
-      url: "",
-    };
-    updateLinks({ items: [...links.items, next] });
-  }
-
-  function updateLink(index: number, patch: Partial<ResumeLinkItem>) {
-    updateLinks({
-      items: links.items.map((item, itemIndex) =>
-        itemIndex === index ? { ...item, ...patch } : item,
-      ),
-    });
-  }
-
-  function removeLink(index: number) {
-    updateLinks({ items: links.items.filter((_, itemIndex) => itemIndex !== index) });
-  }
-
-  async function download(format: ExportFormat) {
-    setActiveDownload(format);
-    try {
-      await exportDocumentByType(currentDoc, format);
-      setMessage(`${format.toUpperCase()} downloaded`);
-    } catch {
-      setMessage(`Could not generate ${format.toUpperCase()}`);
-    } finally {
-      setActiveDownload(null);
-    }
-  }
-
-  function saveCurrentDocument() {
-    saveDocument(currentDoc);
-    setMessage("Draft saved locally");
-  }
-
-  function deleteCurrentDocument() {
-    const confirmed = window.confirm(`Delete "${currentDoc.title}"? This cannot be undone.`);
-    if (!confirmed) return;
-    deleteDocument("COVER_LETTER", currentDoc.id);
-    router.push("/documents");
-  }
 
   async function importJson(file: File | undefined) {
     if (!file) return;
+
     try {
       const parsed = JSON.parse(await file.text()) as unknown;
       const imported =
@@ -320,481 +94,77 @@ export default function CoverLetterEditor({ documentId }: Props) {
           ? (parsed as BaseDocument<CoverLetterContent>)
           : ({ ...currentDoc, content: parsed } as BaseDocument<CoverLetterContent>);
 
-      const next = {
-        ...currentDoc,
-        title: imported.title || currentDoc.title,
-        templateId: imported.templateId || currentDoc.templateId,
-        updatedAt: new Date().toISOString(),
-        content: {
-          ...content,
-          ...(imported.content as Partial<CoverLetterContent>),
-          appearance: {
-            ...appearance,
-            ...((imported.content as Partial<CoverLetterContent>).appearance ?? {}),
+      updateDocument(
+        {
+          ...currentDoc,
+          title: imported.title || currentDoc.title,
+          templateId: imported.templateId || currentDoc.templateId,
+          updatedAt: new Date().toISOString(),
+          content: {
+            ...currentDoc.content,
+            ...(imported.content as Partial<CoverLetterContent>),
+            appearance: {
+              ...currentDoc.content.appearance,
+              ...((imported.content as Partial<CoverLetterContent>).appearance ?? {}),
+            },
           },
         },
-      };
+        { flush: true },
+      );
 
-      updateDocument(next);
       toast.success("Cover letter imported");
     } catch {
       toast.error("Import failed. Use a valid cover letter JSON file.");
-    } finally {
-      if (fileInputRef.current) fileInputRef.current.value = "";
     }
   }
 
-  return (
-    <div className="flex h-[calc(100dvh-2rem)] min-h-0 flex-col gap-4 overflow-hidden">
-      <header className="border-border bg-card/95 z-30 flex shrink-0 flex-wrap items-center justify-between gap-3 rounded-3xl border p-4 shadow-sm backdrop-blur">
-        <ToolbarHeader
-          title="Cover Letter Editor"
-          message={message}
-          onBack={() => router.push("/documents")}
-        />
-
-        <div className="flex flex-wrap items-center gap-2">
-          {process.env.NODE_ENV === "development" ? (
-            <Button asChild size="sm" variant="secondary">
-              <Link
-                href={`/pdf-debug/cover-letter/${currentDoc.templateId}?id=${currentDoc.id}`}
-                target="_blank"
-                rel="noreferrer"
-              >
-                <FileSearch className="mr-2 h-4 w-4" />
-                PDF Debug
-              </Link>
-            </Button>
-          ) : null}
+  function deleteCurrentDocument() {
+    const confirmed = window.confirm(`Delete "${currentDoc.title}"? This cannot be undone.`);
+    if (!confirmed) return;
 
-          <Button
-            size="sm"
-            variant="secondary"
-            onClick={() => router.push(`/editor/cover_letter/${currentDoc.id}/preview`)}
-          >
-            Full Preview
-          </Button>
+    deleteDocument("COVER_LETTER", currentDoc.id);
+    router.push("/documents");
+  }
 
-          <Button size="sm" variant="secondary" onClick={saveCurrentDocument}>
-            Save
-          </Button>
+  const content = currentDoc.content;
 
-          <input
-            ref={fileInputRef}
-            type="file"
-            accept="application/json"
-            className="hidden"
-            onChange={(event) => void importJson(event.target.files?.[0])}
+  return (
+    <>
+      <DocumentEditorShell
+        toolbar={
+          <CoverLetterToolbar
+            document={currentDoc}
+            message={message}
+            onDelete={deleteCurrentDocument}
+            onImportJson={importJson}
+            onOpenShare={() => setShareModalOpen(true)}
+            onSave={saveCurrentDocument}
+            onSetMessage={setMessage}
+            onUpdateDocument={updateDocument}
           />
-
-          <ToolbarDownloadMenu
-            activeDownload={activeDownload}
-            onDownloadPdf={() => download("pdf")}
-            onDownloadDocx={() => download("docx")}
-            onDownloadHtml={() => void download("html")}
-            onDownloadText={() => void download("txt")}
-            onDownloadJson={() => void download("json")}
-            onDownloadMarkdown={() => void download("markdown")}
+        }
+        contentPanel={
+          <CoverLetterContentPanel
+            content={content}
+            links={links}
+            onAddLink={addLink}
+            onRemoveLink={removeLink}
+            onUpdateContent={updateContent}
+            onUpdateLink={updateLink}
+            onUpdateLinks={updateLinks}
           />
-
-          <ToolbarActionsMenu
-            onShare={() => setShareModalOpen(true)}
-            onDelete={deleteCurrentDocument}
-            onExport={() => void download("json")}
-            onImport={() => fileInputRef.current?.click()}
-            onReset={() => {
-              const reset = createDefaultCoverLetter(currentDoc.id);
-              updateDocument({ ...reset, updatedAt: new Date().toISOString() });
-              setMessage("Cover letter reset to defaults");
-            }}
+        }
+        settingsPanel={
+          <CoverLetterSettingsPanel
+            document={currentDoc}
+            appearance={content.appearance}
+            onUpdateDocument={updateDocument}
+            onUpdateAppearance={updateAppearance}
           />
-        </div>
-      </header>
-
-      <div className="border-border bg-card inline-flex shrink-0 rounded-2xl border p-1 md:hidden">
-        <button
-          className={cn(
-            "rounded-xl px-4 py-2 text-sm font-medium",
-            activeTab === "editor" ? "bg-accent text-accent-foreground" : "text-muted",
-          )}
-          onClick={() => setActiveTab("editor")}
-          type="button"
-        >
-          Edit
-        </button>
-        <button
-          className={cn(
-            "rounded-xl px-4 py-2 text-sm font-medium",
-            activeTab === "preview" ? "bg-accent text-accent-foreground" : "text-muted",
-          )}
-          onClick={() => setActiveTab("preview")}
-          type="button"
-        >
-          Preview
-        </button>
-      </div>
-
-      <div
-        className={cn(
-          "grid min-h-0 flex-1 gap-4 overflow-hidden",
-          panelOpen ? "xl:grid-cols-[minmax(0,420px)_minmax(0,1fr)]" : "grid-cols-1",
-        )}
-      >
-        {panelOpen ? (
-          <Card
-            className={cn(
-              "flex h-full min-h-0 flex-col p-4",
-              activeTab === "preview" && "hidden md:flex",
-            )}
-          >
-            <div className="mb-4 flex items-center justify-between gap-3">
-              <div className="border-border bg-background inline-flex rounded-2xl border p-1">
-                <button
-                  className={cn(
-                    "rounded-xl px-3 py-2 text-sm font-medium",
-                    activePanel === "content" ? "bg-accent text-accent-foreground" : "text-muted",
-                  )}
-                  onClick={() => setActivePanel("content")}
-                  type="button"
-                >
-                  Content
-                </button>
-                <button
-                  className={cn(
-                    "rounded-xl px-3 py-2 text-sm font-medium",
-                    activePanel === "settings" ? "bg-accent text-accent-foreground" : "text-muted",
-                  )}
-                  onClick={() => setActivePanel("settings")}
-                  type="button"
-                >
-                  Settings
-                </button>
-              </div>
-              <button
-                className="border-border bg-background text-muted hover:text-foreground flex h-9 w-9 items-center justify-center rounded-xl border"
-                onClick={() => setPanelOpen(false)}
-                type="button"
-                aria-label="Collapse editor panel"
-              >
-                <PanelLeftClose className="h-4 w-4" />
-              </button>
-            </div>
-
-            <div className="min-h-0 flex-1 overflow-y-auto pr-1">
-              {activePanel === "content" ? (
-                <div className="space-y-6">
-                  <EditorBlock title="Profile">
-                    <Field
-                      label="Full name"
-                      value={content.senderName}
-                      onChange={(senderName) => updateContent({ senderName })}
-                    />
-                    <Field
-                      label="Professional title"
-                      value={content.senderTitle}
-                      onChange={(senderTitle) => updateContent({ senderTitle })}
-                    />
-                    <div className="grid gap-3 sm:grid-cols-2">
-                      <Field
-                        label="Email"
-                        value={content.senderEmail}
-                        onChange={(senderEmail) => updateContent({ senderEmail })}
-                      />
-                      <Field
-                        label="Phone"
-                        value={content.senderPhone}
-                        onChange={(senderPhone) => updateContent({ senderPhone })}
-                      />
-                    </div>
-                    <Field
-                      label="Location"
-                      value={content.senderLocation}
-                      onChange={(senderLocation) => updateContent({ senderLocation })}
-                    />
-                    <Field
-                      label="Website"
-                      value={content.senderWebsite}
-                      onChange={(senderWebsite) => updateContent({ senderWebsite })}
-                    />
-                  </EditorBlock>
-
-                  <EditorBlock title="Links">
-                    <label className="grid gap-1.5">
-                      <span className="text-muted text-xs font-semibold">Display style</span>
-                      <Select
-                        value={links.displayMode}
-                        onChange={(event) =>
-                          updateLinks({ displayMode: event.target.value as ResumeLinkDisplayMode })
-                        }
-                      >
-                        <option value="icon">Icons only</option>
-                        <option value="icon-username">Icon + username</option>
-                      </Select>
-                    </label>
-
-                    <div className="grid gap-3">
-                      {links.items.map((item, index) => (
-                        <div
-                          key={item.id}
-                          className="border-border grid gap-3 rounded-xl border p-3"
-                        >
-                          <div className="grid gap-3 sm:grid-cols-2">
-                            <label className="grid gap-1.5">
-                              <span className="text-muted text-xs font-semibold">Link type</span>
-                              <Select
-                                value={item.type}
-                                onChange={(event) =>
-                                  updateLink(index, {
-                                    type: event.target.value as ResumeLinkType,
-                                  })
-                                }
-                              >
-                                {linkTypeOptions.map((type) => (
-                                  <option key={type} value={type}>
-                                    {type}
-                                  </option>
-                                ))}
-                              </Select>
-                            </label>
-                            <Field
-                              label="Label"
-                              value={item.label}
-                              placeholder="veriworkly-user"
-                              onChange={(label) => updateLink(index, { label })}
-                            />
-                          </div>
-                          <Field
-                            label="URL"
-                            value={item.url}
-                            placeholder="https://..."
-                            onChange={(url) => updateLink(index, { url })}
-                          />
-                          <Button
-                            size="sm"
-                            variant="ghost"
-                            className="justify-self-start"
-                            onClick={() => removeLink(index)}
-                          >
-                            Remove link
-                          </Button>
-                        </div>
-                      ))}
-                    </div>
-
-                    <Button size="sm" variant="secondary" onClick={addLink}>
-                      Add link
-                    </Button>
-                  </EditorBlock>
-
-                  <EditorBlock title="Target">
-                    <Field
-                      label="Target role"
-                      value={content.jobTitle}
-                      onChange={(jobTitle) => updateContent({ jobTitle })}
-                    />
-                    <Field
-                      label="Company"
-                      value={content.companyName}
-                      onChange={(companyName) => updateContent({ companyName })}
-                    />
-                    <div className="grid gap-3 sm:grid-cols-2">
-                      <Field
-                        label="Hiring manager"
-                        value={content.recipientName}
-                        onChange={(recipientName) => updateContent({ recipientName })}
-                      />
-                      <Field
-                        label="Recipient title"
-                        value={content.recipientTitle}
-                        onChange={(recipientTitle) => updateContent({ recipientTitle })}
-                      />
-                    </div>
-                    <Field
-                      label="Company location"
-                      value={content.companyLocation}
-                      onChange={(companyLocation) => updateContent({ companyLocation })}
-                    />
-                    <Field
-                      label="Date"
-                      value={content.date}
-                      onChange={(date) => updateContent({ date })}
-                    />
-                  </EditorBlock>
-
-                  <EditorBlock title="Letter">
-                    <Field
-                      label="Subject"
-                      value={content.subject}
-                      placeholder="Application for Senior Product Engineer"
-                      onChange={(subject) => updateContent({ subject })}
-                    />
-                    <Field
-                      label="Greeting"
-                      value={content.greeting}
-                      onChange={(greeting) => updateContent({ greeting })}
-                    />
-                    <TextField
-                      label="Opening"
-                      value={content.opening}
-                      onChange={(opening) => updateContent({ opening })}
-                    />
-                    <TextField
-                      label="Main body"
-                      value={content.body}
-                      className="min-h-44 font-mono text-[13px]"
-                      onChange={(body) => updateContent({ body })}
-                    />
-                    <TextField
-                      label="Proof points"
-                      value={content.highlights}
-                      className="min-h-32 font-mono text-[13px]"
-                      onChange={(highlights) => updateContent({ highlights })}
-                    />
-                    <div className="grid gap-3 sm:grid-cols-2">
-                      <Field
-                        label="Closing"
-                        value={content.closing}
-                        onChange={(closing) => updateContent({ closing })}
-                      />
-                      <Field
-                        label="Signature"
-                        value={content.signature}
-                        onChange={(signature) => updateContent({ signature })}
-                      />
-                    </div>
-                    <Field
-                      label="Postscript"
-                      value={content.postscript}
-                      onChange={(postscript) => updateContent({ postscript })}
-                    />
-                  </EditorBlock>
-                </div>
-              ) : (
-                <div className="space-y-6">
-                  <EditorBlock title="Template">
-                    <label className="grid gap-2 text-sm font-medium">
-                      <span>Template</span>
-                      <Select
-                        value={currentDoc.templateId}
-                        onChange={(event) =>
-                          updateDocument({
-                            ...currentDoc,
-                            templateId: event.target.value,
-                            updatedAt: new Date().toISOString(),
-                          })
-                        }
-                      >
-                        {templateCatalogByType.COVER_LETTER.map((template) => (
-                          <option key={template.id} value={template.id}>
-                            {template.name}
-                          </option>
-                        ))}
-                      </Select>
-                    </label>
-                  </EditorBlock>
-
-                  <EditorBlock title="Layout">
-                    <label className="grid gap-2 text-sm font-medium">
-                      <span>Font style</span>
-                      <Select
-                        value={appearance.fontFamily}
-                        onChange={(event) =>
-                          updateAppearance({ fontFamily: event.target.value as FontFamilyId })
-                        }
-                      >
-                        {fontOptions.map((font) => (
-                          <option key={font.value} value={font.value}>
-                            {font.label}
-                          </option>
-                        ))}
-                      </Select>
-                    </label>
-
-                    <RangeField
-                      label={`Page margin (${appearance.pageMargin}px)`}
-                      min={24}
-                      max={72}
-                      value={appearance.pageMargin}
-                      onChange={(pageMargin) => updateAppearance({ pageMargin })}
-                    />
-                    <RangeField
-                      label={`Paragraph gap (${appearance.paragraphSpacing}px)`}
-                      min={4}
-                      max={24}
-                      value={appearance.paragraphSpacing}
-                      onChange={(paragraphSpacing) => updateAppearance({ paragraphSpacing })}
-                    />
-                    <RangeField
-                      label={`Line height (${appearance.lineHeight.toFixed(2)})`}
-                      min={1.25}
-                      max={1.8}
-                      step={0.05}
-                      value={appearance.lineHeight}
-                      onChange={(lineHeight) => updateAppearance({ lineHeight })}
-                    />
-                  </EditorBlock>
-
-                  <EditorBlock title="Colors">
-                    <ColorField
-                      label="Accent color"
-                      value={appearance.accentColor}
-                      onChange={(accentColor) => updateAppearance({ accentColor })}
-                    />
-                    <ColorField
-                      label="Sidebar color"
-                      value={appearance.sidebarColor}
-                      onChange={(sidebarColor) => updateAppearance({ sidebarColor })}
-                    />
-                    <ColorField
-                      label="Page color"
-                      value={appearance.pageColor}
-                      onChange={(pageColor) => updateAppearance({ pageColor })}
-                    />
-                    <ColorField
-                      label="Text color"
-                      value={appearance.textColor}
-                      onChange={(textColor) => updateAppearance({ textColor })}
-                    />
-                  </EditorBlock>
-                </div>
-              )}
-            </div>
-          </Card>
-        ) : (
-          <Card className={cn("space-y-3 p-3", activeTab === "preview" && "hidden md:block")}>
-            <p className="text-muted px-1 text-xs font-semibold tracking-[0.2em] uppercase">
-              Panels
-            </p>
-            <Button variant="secondary" size="sm" onClick={() => setPanelOpen(true)}>
-              <PanelLeftOpen className="mr-2 h-4 w-4" />
-              Open editor
-            </Button>
-          </Card>
-        )}
-
-        <Card
-          className={cn(
-            "h-full min-h-0 flex-col overflow-hidden p-0",
-            activeTab === "editor" ? "hidden md:flex" : "flex",
-          )}
-        >
-          <div className="from-background via-card to-background flex min-h-0 flex-1 flex-col bg-linear-to-br">
-            <div className="border-border/80 bg-card/80 shrink-0 border-b px-4 py-3 backdrop-blur md:px-6">
-              <p className="text-muted text-[11px] font-semibold tracking-[0.22em] uppercase">
-                Live Preview
-              </p>
-              <p className="text-foreground text-sm font-medium">
-                {currentDoc.title || "Cover Letter"}
-              </p>
-            </div>
-            <div className="relative min-h-0 flex-1 overflow-y-auto p-4 md:p-8">
-              <div className="relative flex min-h-full justify-center rounded-3xl border border-dashed border-[color-mix(in_oklab,var(--border)_70%,transparent)] bg-[color-mix(in_oklab,var(--background)_92%,white)] p-3 md:p-6">
-                <CoverLetterPreview content={content} templateId={currentDoc.templateId} />
-              </div>
-            </div>
-          </div>
-        </Card>
-      </div>
+        }
+        preview={<CoverLetterPreview content={content} templateId={currentDoc.templateId} />}
+        previewTitle={currentDoc.title || "Cover Letter"}
+      />
 
       {shareModalOpen ? (
         <ShareDocumentModal
@@ -815,17 +185,26 @@ export default function CoverLetterEditor({ documentId }: Props) {
           onClose={() => setShareModalOpen(false)}
         />
       ) : null}
-    </div>
+    </>
   );
 }
 
-function EditorBlock({ children, title }: { children: React.ReactNode; title: string }) {
+function CoverLetterStateCard({
+  title,
+  message,
+  children,
+}: {
+  title: string;
+  message: string;
+  children?: ReactNode;
+}) {
   return (
-    <section className="space-y-4">
-      <div className="space-y-1">
-        <p className="text-muted text-xs font-semibold tracking-[0.22em] uppercase">{title}</p>
-      </div>
-      {children}
-    </section>
+    <div className="mx-auto max-w-3xl px-4 py-10">
+      <Card className="space-y-3 text-center">
+        <h1 className="text-foreground text-xl font-semibold">{title}</h1>
+        <p className="text-muted text-sm">{message}</p>
+        {children}
+      </Card>
+    </div>
   );
 }
diff --git a/apps/studio/features/cover-letter/editor/components/CoverLetterContentPanel.tsx b/apps/studio/features/cover-letter/editor/components/CoverLetterContentPanel.tsx
new file mode 100644
index 0000000..4e4da93
--- /dev/null
+++ b/apps/studio/features/cover-letter/editor/components/CoverLetterContentPanel.tsx
@@ -0,0 +1,235 @@
+"use client";
+
+import { Button, Select } from "@veriworkly/ui";
+
+import type { CoverLetterContent } from "@/features/cover-letter/types";
+import type { ResumeLinkDisplayMode, ResumeLinkItem, ResumeLinkType } from "@/types/resume";
+
+import { linkTypeOptions } from "@/features/documents/editor/link-options";
+
+import { EditorBlock, Field, TextField } from "./CoverLetterFields";
+
+interface CoverLetterContentPanelProps {
+  content: CoverLetterContent;
+  links: CoverLetterContent["links"];
+  onAddLink: () => void;
+  onRemoveLink: (index: number) => void;
+  onUpdateContent: (patch: Partial<CoverLetterContent>) => void;
+  onUpdateLink: (index: number, patch: Partial<ResumeLinkItem>) => void;
+  onUpdateLinks: (patch: Partial<CoverLetterContent["links"]>) => void;
+}
+
+export function CoverLetterContentPanel({
+  content,
+  links,
+  onAddLink,
+  onRemoveLink,
+  onUpdateContent,
+  onUpdateLink,
+  onUpdateLinks,
+}: CoverLetterContentPanelProps) {
+  return (
+    <div className="space-y-6">
+      <EditorBlock title="Profile">
+        <Field
+          label="Full name"
+          value={content.senderName}
+          onChange={(senderName) => onUpdateContent({ senderName })}
+        />
+
+        <Field
+          label="Professional title"
+          value={content.senderTitle}
+          onChange={(senderTitle) => onUpdateContent({ senderTitle })}
+        />
+
+        <div className="grid gap-3 sm:grid-cols-2">
+          <Field
+            label="Email"
+            value={content.senderEmail}
+            onChange={(senderEmail) => onUpdateContent({ senderEmail })}
+          />
+
+          <Field
+            label="Phone"
+            value={content.senderPhone}
+            onChange={(senderPhone) => onUpdateContent({ senderPhone })}
+          />
+        </div>
+
+        <Field
+          label="Location"
+          value={content.senderLocation}
+          onChange={(senderLocation) => onUpdateContent({ senderLocation })}
+        />
+
+        <Field
+          label="Website"
+          value={content.senderWebsite}
+          onChange={(senderWebsite) => onUpdateContent({ senderWebsite })}
+        />
+      </EditorBlock>
+
+      <EditorBlock title="Links">
+        <label className="grid gap-1.5">
+          <span className="text-muted text-xs font-semibold">Display style</span>
+
+          <Select
+            value={links.displayMode}
+            onChange={(event) =>
+              onUpdateLinks({ displayMode: event.target.value as ResumeLinkDisplayMode })
+            }
+          >
+            <option value="icon">Icons only</option>
+            <option value="icon-username">Icon + username</option>
+          </Select>
+        </label>
+
+        <div className="grid gap-3">
+          {links.items.map((item, index) => (
+            <div key={item.id} className="border-border grid gap-3 rounded-xl border p-3">
+              <div className="grid gap-3 sm:grid-cols-2">
+                <label className="grid gap-1.5">
+                  <span className="text-muted text-xs font-semibold">Link type</span>
+
+                  <Select
+                    value={item.type}
+                    onChange={(event) =>
+                      onUpdateLink(index, {
+                        type: event.target.value as ResumeLinkType,
+                      })
+                    }
+                  >
+                    {linkTypeOptions.map((type) => (
+                      <option key={type} value={type}>
+                        {type}
+                      </option>
+                    ))}
+                  </Select>
+                </label>
+
+                <Field
+                  label="Label"
+                  value={item.label}
+                  placeholder="veriworkly-user"
+                  onChange={(label) => onUpdateLink(index, { label })}
+                />
+              </div>
+
+              <Field
+                label="URL"
+                value={item.url}
+                placeholder="https://..."
+                onChange={(url) => onUpdateLink(index, { url })}
+              />
+
+              <Button
+                size="sm"
+                variant="ghost"
+                className="justify-self-start"
+                onClick={() => onRemoveLink(index)}
+              >
+                Remove link
+              </Button>
+            </div>
+          ))}
+        </div>
+
+        <Button size="sm" variant="secondary" onClick={onAddLink}>
+          Add link
+        </Button>
+      </EditorBlock>
+
+      <EditorBlock title="Target">
+        <Field
+          label="Target role"
+          value={content.jobTitle}
+          onChange={(jobTitle) => onUpdateContent({ jobTitle })}
+        />
+
+        <Field
+          label="Company"
+          value={content.companyName}
+          onChange={(companyName) => onUpdateContent({ companyName })}
+        />
+
+        <div className="grid gap-3 sm:grid-cols-2">
+          <Field
+            label="Hiring manager"
+            value={content.recipientName}
+            onChange={(recipientName) => onUpdateContent({ recipientName })}
+          />
+
+          <Field
+            label="Recipient title"
+            value={content.recipientTitle}
+            onChange={(recipientTitle) => onUpdateContent({ recipientTitle })}
+          />
+        </div>
+
+        <Field
+          label="Company location"
+          value={content.companyLocation}
+          onChange={(companyLocation) => onUpdateContent({ companyLocation })}
+        />
+
+        <Field label="Date" value={content.date} onChange={(date) => onUpdateContent({ date })} />
+      </EditorBlock>
+
+      <EditorBlock title="Letter">
+        <Field
+          label="Subject"
+          value={content.subject}
+          placeholder="Application for Senior Product Engineer"
+          onChange={(subject) => onUpdateContent({ subject })}
+        />
+
+        <Field
+          label="Greeting"
+          value={content.greeting}
+          onChange={(greeting) => onUpdateContent({ greeting })}
+        />
+
+        <TextField
+          label="Opening"
+          value={content.opening}
+          onChange={(opening) => onUpdateContent({ opening })}
+        />
+
+        <TextField
+          label="Main body"
+          value={content.body}
+          className="min-h-44 font-mono text-[13px]"
+          onChange={(body) => onUpdateContent({ body })}
+        />
+
+        <TextField
+          label="Proof points"
+          value={content.highlights}
+          className="min-h-32 font-mono text-[13px]"
+          onChange={(highlights) => onUpdateContent({ highlights })}
+        />
+
+        <div className="grid gap-3 sm:grid-cols-2">
+          <Field
+            label="Closing"
+            value={content.closing}
+            onChange={(closing) => onUpdateContent({ closing })}
+          />
+
+          <Field
+            label="Signature"
+            value={content.signature}
+            onChange={(signature) => onUpdateContent({ signature })}
+          />
+        </div>
+
+        <Field
+          label="Postscript"
+          value={content.postscript}
+          onChange={(postscript) => onUpdateContent({ postscript })}
+        />
+      </EditorBlock>
+    </div>
+  );
+}
diff --git a/apps/studio/features/cover-letter/editor/components/CoverLetterFields.tsx b/apps/studio/features/cover-letter/editor/components/CoverLetterFields.tsx
new file mode 100644
index 0000000..f32afe6
--- /dev/null
+++ b/apps/studio/features/cover-letter/editor/components/CoverLetterFields.tsx
@@ -0,0 +1,123 @@
+"use client";
+
+import type { ReactNode } from "react";
+
+import { Input, TextArea } from "@veriworkly/ui";
+
+import { cn } from "@/lib/utils";
+
+export function Field({
+  label,
+  value,
+  placeholder,
+  onChange,
+}: {
+  label: string;
+  value: string;
+  placeholder?: string;
+  onChange: (value: string) => void;
+}) {
+  return (
+    <label className="grid gap-1.5">
+      <span className="text-muted text-xs font-semibold">{label}</span>
+      <Input
+        value={value}
+        placeholder={placeholder}
+        onChange={(event) => onChange(event.target.value)}
+      />
+    </label>
+  );
+}
+
+export function TextField({
+  label,
+  value,
+  placeholder,
+  className,
+  onChange,
+}: {
+  label: string;
+  value: string;
+  placeholder?: string;
+  className?: string;
+  onChange: (value: string) => void;
+}) {
+  return (
+    <label className="grid gap-1.5">
+      <span className="text-muted text-xs font-semibold">{label}</span>
+
+      <TextArea
+        className={cn("min-h-28 leading-6", className)}
+        value={value}
+        placeholder={placeholder}
+        onChange={(event) => onChange(event.target.value)}
+      />
+    </label>
+  );
+}
+
+export function RangeField({
+  label,
+  value,
+  min,
+  max,
+  step,
+  onChange,
+}: {
+  label: string;
+  value: number;
+  min: number;
+  max: number;
+  step?: number;
+  onChange: (value: number) => void;
+}) {
+  return (
+    <label className="grid gap-2 text-sm font-medium">
+      <span>{label}</span>
+
+      <input
+        className="accent-accent w-full"
+        type="range"
+        min={min}
+        max={max}
+        step={step}
+        value={value}
+        onChange={(event) => onChange(Number(event.target.value))}
+      />
+    </label>
+  );
+}
+
+export function ColorField({
+  label,
+  value,
+  onChange,
+}: {
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+}) {
+  return (
+    <label className="grid gap-2 text-sm font-medium">
+      <span>{label}</span>
+
+      <input
+        className="border-border bg-background h-11 w-full rounded-2xl border p-1"
+        type="color"
+        value={value}
+        onChange={(event) => onChange(event.target.value)}
+      />
+    </label>
+  );
+}
+
+export function EditorBlock({ children, title }: { children: ReactNode; title: string }) {
+  return (
+    <section className="space-y-4">
+      <div className="space-y-1">
+        <p className="text-muted text-xs font-semibold tracking-[0.22em] uppercase">{title}</p>
+      </div>
+      {children}
+    </section>
+  );
+}
diff --git a/apps/studio/features/cover-letter/editor/components/CoverLetterSettingsPanel.tsx b/apps/studio/features/cover-letter/editor/components/CoverLetterSettingsPanel.tsx
new file mode 100644
index 0000000..00bb299
--- /dev/null
+++ b/apps/studio/features/cover-letter/editor/components/CoverLetterSettingsPanel.tsx
@@ -0,0 +1,126 @@
+"use client";
+
+import { Select } from "@veriworkly/ui";
+
+import type { BaseDocument } from "@/features/documents/core/types";
+import type { FontFamilyId } from "@/features/documents/constants/fonts";
+import type { CoverLetterAppearance, CoverLetterContent } from "@/features/cover-letter/types";
+
+import { fontOptions } from "@/features/documents/constants/fonts";
+import { templateCatalogByType } from "@/features/documents/core/template-catalog";
+
+import { ColorField, EditorBlock, RangeField } from "./CoverLetterFields";
+
+interface CoverLetterSettingsPanelProps {
+  document: BaseDocument<CoverLetterContent>;
+  appearance: CoverLetterAppearance;
+  onUpdateDocument: (
+    next: BaseDocument<CoverLetterContent>,
+    options?: { debounceMs?: number; flush?: boolean },
+  ) => void;
+  onUpdateAppearance: (patch: Partial<CoverLetterAppearance>) => void;
+}
+
+export function CoverLetterSettingsPanel({
+  document,
+  appearance,
+  onUpdateDocument,
+  onUpdateAppearance,
+}: CoverLetterSettingsPanelProps) {
+  return (
+    <div className="space-y-6">
+      <EditorBlock title="Template">
+        <label className="grid gap-2 text-sm font-medium">
+          <span>Template</span>
+
+          <Select
+            value={document.templateId}
+            onChange={(event) =>
+              onUpdateDocument({
+                ...document,
+                templateId: event.target.value,
+                updatedAt: new Date().toISOString(),
+              })
+            }
+          >
+            {templateCatalogByType.COVER_LETTER.map((template) => (
+              <option key={template.id} value={template.id}>
+                {template.name}
+              </option>
+            ))}
+          </Select>
+        </label>
+      </EditorBlock>
+
+      <EditorBlock title="Layout">
+        <label className="grid gap-2 text-sm font-medium">
+          <span>Font style</span>
+
+          <Select
+            value={appearance.fontFamily}
+            onChange={(event) =>
+              onUpdateAppearance({ fontFamily: event.target.value as FontFamilyId })
+            }
+          >
+            {fontOptions.map((font) => (
+              <option key={font.value} value={font.value}>
+                {font.label}
+              </option>
+            ))}
+          </Select>
+        </label>
+
+        <RangeField
+          min={24}
+          max={72}
+          value={appearance.pageMargin}
+          label={`Page margin (${appearance.pageMargin}px)`}
+          onChange={(pageMargin) => onUpdateAppearance({ pageMargin })}
+        />
+
+        <RangeField
+          min={4}
+          max={24}
+          value={appearance.paragraphSpacing}
+          label={`Paragraph gap (${appearance.paragraphSpacing}px)`}
+          onChange={(paragraphSpacing) => onUpdateAppearance({ paragraphSpacing })}
+        />
+
+        <RangeField
+          min={1.25}
+          max={1.8}
+          step={0.05}
+          value={appearance.lineHeight}
+          label={`Line height (${appearance.lineHeight.toFixed(2)})`}
+          onChange={(lineHeight) => onUpdateAppearance({ lineHeight })}
+        />
+      </EditorBlock>
+
+      <EditorBlock title="Colors">
+        <ColorField
+          label="Accent color"
+          value={appearance.accentColor}
+          onChange={(accentColor) => onUpdateAppearance({ accentColor })}
+        />
+
+        <ColorField
+          label="Sidebar color"
+          value={appearance.sidebarColor}
+          onChange={(sidebarColor) => onUpdateAppearance({ sidebarColor })}
+        />
+
+        <ColorField
+          label="Page color"
+          value={appearance.pageColor}
+          onChange={(pageColor) => onUpdateAppearance({ pageColor })}
+        />
+
+        <ColorField
+          label="Text color"
+          value={appearance.textColor}
+          onChange={(textColor) => onUpdateAppearance({ textColor })}
+        />
+      </EditorBlock>
+    </div>
+  );
+}
diff --git a/apps/studio/features/cover-letter/editor/components/CoverLetterToolbar.tsx b/apps/studio/features/cover-letter/editor/components/CoverLetterToolbar.tsx
new file mode 100644
index 0000000..f44536e
--- /dev/null
+++ b/apps/studio/features/cover-letter/editor/components/CoverLetterToolbar.tsx
@@ -0,0 +1,133 @@
+"use client";
+
+import Link from "next/link";
+import { useRef, useState } from "react";
+import { FileSearch } from "lucide-react";
+import { useRouter } from "next/navigation";
+
+import { Button } from "@veriworkly/ui";
+
+import type { CoverLetterContent } from "@/features/cover-letter/types";
+import type { BaseDocument, ExportFormat } from "@/features/documents/core/types";
+
+import ToolbarHeader from "@/features/documents/editor/toolbar/ToolbarHeader";
+import ToolbarActionsMenu from "@/features/documents/editor/toolbar/ToolbarActionsMenu";
+import ToolbarDownloadMenu from "@/features/documents/editor/toolbar/ToolbarDownloadMenu";
+
+import { getDocumentPreviewPath } from "@/features/documents/core/routes";
+import { createDefaultCoverLetter } from "@/features/cover-letter/defaults";
+import { exportDocumentByType } from "@/features/documents/export/export-dispatcher";
+
+interface CoverLetterToolbarProps {
+  document: BaseDocument<CoverLetterContent>;
+  message: string;
+  onDelete: () => void;
+  onImportJson: (file: File | undefined) => Promise<void>;
+  onOpenShare: () => void;
+  onSave: () => void;
+  onSetMessage: (message: string) => void;
+  onUpdateDocument: (
+    next: BaseDocument<CoverLetterContent>,
+    options?: { debounceMs?: number; flush?: boolean },
+  ) => void;
+}
+
+export function CoverLetterToolbar({
+  document,
+  message,
+  onDelete,
+  onImportJson,
+  onOpenShare,
+  onSave,
+  onSetMessage,
+  onUpdateDocument,
+}: CoverLetterToolbarProps) {
+  const router = useRouter();
+
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [activeDownload, setActiveDownload] = useState<ExportFormat | null>(null);
+
+  async function download(format: ExportFormat) {
+    setActiveDownload(format);
+
+    try {
+      await exportDocumentByType(document, format);
+      onSetMessage(`${format.toUpperCase()} downloaded`);
+    } catch {
+      onSetMessage(`Could not generate ${format.toUpperCase()}`);
+    } finally {
+      setActiveDownload(null);
+    }
+  }
+
+  return (
+    <header className="border-border bg-card/95 z-30 flex shrink-0 flex-wrap items-center justify-between gap-3 rounded-3xl border p-4 shadow-sm backdrop-blur">
+      <ToolbarHeader
+        title="Cover Letter Editor"
+        message={message}
+        onBack={() => router.push("/documents")}
+      />
+
+      <div className="flex flex-wrap items-center gap-2">
+        {process.env.NODE_ENV === "development" ? (
+          <Button asChild size="sm" variant="secondary">
+            <Link
+              href={`/pdf-debug/cover-letter/${document.templateId}?id=${document.id}`}
+              target="_blank"
+              rel="noreferrer"
+            >
+              <FileSearch className="mr-2 h-4 w-4" />
+              PDF Debug
+            </Link>
+          </Button>
+        ) : null}
+
+        <Button
+          size="sm"
+          variant="secondary"
+          onClick={() => router.push(getDocumentPreviewPath("COVER_LETTER", document.id))}
+        >
+          Full Preview
+        </Button>
+
+        <Button size="sm" variant="secondary" onClick={onSave}>
+          Save
+        </Button>
+
+        <input
+          type="file"
+          className="hidden"
+          ref={fileInputRef}
+          accept="application/json"
+          onChange={(event) => {
+            void onImportJson(event.target.files?.[0]).finally(() => {
+              event.currentTarget.value = "";
+            });
+          }}
+        />
+
+        <ToolbarDownloadMenu
+          activeDownload={activeDownload}
+          onDownloadPdf={() => download("pdf")}
+          onDownloadDocx={() => download("docx")}
+          onDownloadHtml={() => void download("html")}
+          onDownloadText={() => void download("txt")}
+          onDownloadJson={() => void download("json")}
+          onDownloadMarkdown={() => void download("markdown")}
+        />
+
+        <ToolbarActionsMenu
+          onShare={onOpenShare}
+          onDelete={onDelete}
+          onExport={() => void download("json")}
+          onImport={() => fileInputRef.current?.click()}
+          onReset={() => {
+            const reset = createDefaultCoverLetter(document.id);
+            onUpdateDocument({ ...reset, updatedAt: new Date().toISOString() }, { flush: true });
+            onSetMessage("Cover letter reset to defaults");
+          }}
+        />
+      </div>
+    </header>
+  );
+}
diff --git a/apps/studio/features/cover-letter/editor/hooks/useCoverLetterDocument.ts b/apps/studio/features/cover-letter/editor/hooks/useCoverLetterDocument.ts
new file mode 100644
index 0000000..9d5f985
--- /dev/null
+++ b/apps/studio/features/cover-letter/editor/hooks/useCoverLetterDocument.ts
@@ -0,0 +1,155 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import type { ResumeLinkItem } from "@/types/resume";
+import type { BaseDocument } from "@/features/documents/core/types";
+import type { CoverLetterAppearance, CoverLetterContent } from "@/features/cover-letter/types";
+
+import {
+  saveDocument,
+  loadDocumentById,
+} from "@/features/documents/services/document-workspace-service";
+import { hydrateCloudDocumentByIdToLocalStorage } from "@/features/documents/services/document-sync";
+
+function loadCoverLetter(documentId: string) {
+  return loadDocumentById("COVER_LETTER", documentId) as BaseDocument<CoverLetterContent> | null;
+}
+
+export function useCoverLetterDocument(documentId: string) {
+  const [hydrated, setHydrated] = useState(false);
+  const [message, setMessage] = useState("Autosave ready");
+
+  const [doc, setDoc] = useState<BaseDocument<CoverLetterContent> | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const hydrate = async () => {
+      const localDocument = loadCoverLetter(documentId);
+
+      if (!cancelled && localDocument) {
+        setDoc(localDocument);
+        setHydrated(true);
+        return;
+      }
+
+      const cloudResult = await hydrateCloudDocumentByIdToLocalStorage("COVER_LETTER", documentId);
+
+      if (!cancelled && cloudResult.ok) {
+        setDoc(loadCoverLetter(documentId));
+        setHydrated(true);
+        return;
+      }
+
+      if (cancelled) return;
+      setDoc(null);
+      setHydrated(true);
+    };
+
+    void hydrate();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [documentId]);
+
+  function updateDocument(
+    next: BaseDocument<CoverLetterContent>,
+    options: { debounceMs?: number; flush?: boolean } = { debounceMs: 300 },
+  ) {
+    setDoc(next);
+    saveDocument(next, options);
+    setMessage("Saved locally");
+  }
+
+  function saveCurrentDocument() {
+    if (!doc) return;
+
+    saveDocument(doc, { flush: true });
+    setMessage("Draft saved locally");
+  }
+
+  function updateContent(patch: Partial<CoverLetterContent>) {
+    if (!doc) return;
+
+    const content = doc.content;
+
+    updateDocument({
+      ...doc,
+      title:
+        patch.jobTitle || patch.companyName
+          ? [patch.jobTitle ?? content.jobTitle, patch.companyName ?? content.companyName]
+              .filter(Boolean)
+              .join(" - ") || doc.title
+          : doc.title,
+      updatedAt: new Date().toISOString(),
+      content: { ...content, ...patch },
+    });
+  }
+
+  function updateAppearance(patch: Partial<CoverLetterAppearance>) {
+    if (!doc) return;
+
+    updateContent({
+      appearance: {
+        ...doc.content.appearance,
+        ...patch,
+      },
+    });
+  }
+
+  function updateLinks(patch: Partial<CoverLetterContent["links"]>) {
+    if (!doc) return;
+
+    const links = doc.content.links ?? { displayMode: "icon-username" as const, items: [] };
+    updateContent({ links: { ...links, ...patch } });
+  }
+
+  function addLink() {
+    if (!doc) return;
+
+    const links = doc.content.links ?? { displayMode: "icon-username" as const, items: [] };
+    const next: ResumeLinkItem = {
+      id: `cover-link-${Date.now().toString(36)}`,
+      type: "linkedin",
+      label: "",
+      url: "",
+    };
+
+    updateLinks({ items: [...links.items, next] });
+  }
+
+  function updateLink(index: number, patch: Partial<ResumeLinkItem>) {
+    if (!doc) return;
+
+    const links = doc.content.links ?? { displayMode: "icon-username" as const, items: [] };
+    updateLinks({
+      items: links.items.map((item, itemIndex) =>
+        itemIndex === index ? { ...item, ...patch } : item,
+      ),
+    });
+  }
+
+  function removeLink(index: number) {
+    if (!doc) return;
+
+    const links = doc.content.links ?? { displayMode: "icon-username" as const, items: [] };
+    updateLinks({ items: links.items.filter((_, itemIndex) => itemIndex !== index) });
+  }
+
+  return {
+    doc,
+    hydrated,
+    message,
+    setMessage,
+    updateDocument,
+    updateContent,
+    updateAppearance,
+    updateLinks,
+    addLink,
+    updateLink,
+    removeLink,
+    saveCurrentDocument,
+  };
+}
diff --git a/apps/studio/features/documents/core/registry.tsx b/apps/studio/features/documents/core/registry.tsx
index 82b4e7c..c96f5ff 100644
--- a/apps/studio/features/documents/core/registry.tsx
+++ b/apps/studio/features/documents/core/registry.tsx
@@ -15,9 +15,13 @@ import { parseCoverLetterDocument } from "@/features/cover-letter/schema";
 import { defaultResume } from "@/features/resume/constants/default-resume";
 import { parseResumeDataInput } from "@/features/resume/schemas/resume-storage-schema";
 
-const ResumeEditor = dynamic(() => import("@/app/(main)/editor/components/EditorLayout"));
+const ResumeEditor = dynamic(() => import("@/features/resume/editor/ResumeEditor"));
 const CoverLetterEditor = dynamic(() => import("@/features/cover-letter/editor/CoverLetterEditor"));
 
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null;
+}
+
 function wrapResumeDocument(id: string): BaseDocument {
   const now = new Date().toISOString();
 
@@ -39,18 +43,35 @@ function wrapResumeDocument(id: string): BaseDocument {
 }
 
 function parseResumeDocument(input: unknown): BaseDocument | null {
-  const resume = parseResumeDataInput(input);
+  const document = isRecord(input) ? input : {};
+  const resumeInput = isRecord(document.content) ? document.content : input;
+  const resume = parseResumeDataInput(resumeInput);
 
   if (!resume) return null;
 
+  const id = typeof document.id === "string" ? document.id : resume.id;
+  const templateId =
+    typeof document.templateId === "string" ? document.templateId : resume.templateId;
+  const updatedAt = typeof document.updatedAt === "string" ? document.updatedAt : resume.updatedAt;
+  const sync = isRecord(document.sync) ? { ...resume.sync, ...document.sync } : resume.sync;
+
+  const content = {
+    ...resume,
+    id,
+    templateId,
+    updatedAt,
+    sync,
+  };
+
   return {
-    id: resume.id,
+    id,
     type: "RESUME",
-    title: resume.basics.fullName || "Resume",
-    templateId: resume.templateId,
-    content: resume,
-    updatedAt: resume.updatedAt,
-    sync: resume.sync,
+    title:
+      (typeof document.title === "string" && document.title) || content.basics.fullName || "Resume",
+    templateId,
+    content,
+    updatedAt,
+    sync,
   };
 }
 
@@ -64,7 +85,7 @@ export const documentRegistry: Record<DocumentType, DocumentDefinition> = {
     templates: templateCatalogByType.RESUME,
     createDefault: wrapResumeDocument,
     parse: parseResumeDocument,
-    Editor: ({ documentId }: { documentId: string }) => <ResumeEditor resumeId={documentId} />,
+    Editor: ResumeEditor,
   },
 
   COVER_LETTER: {
diff --git a/apps/studio/features/documents/core/routes.ts b/apps/studio/features/documents/core/routes.ts
new file mode 100644
index 0000000..39a3a88
--- /dev/null
+++ b/apps/studio/features/documents/core/routes.ts
@@ -0,0 +1,9 @@
+import type { DocumentType } from "./document-types";
+
+export function getDocumentEditorPath(type: DocumentType, id: string) {
+  return `/editor/${type.toLowerCase()}/${id}`;
+}
+
+export function getDocumentPreviewPath(type: DocumentType, id: string) {
+  return `${getDocumentEditorPath(type, id)}/preview`;
+}
diff --git a/apps/studio/features/documents/editor/DocumentEditorShell.tsx b/apps/studio/features/documents/editor/DocumentEditorShell.tsx
new file mode 100644
index 0000000..122c358
--- /dev/null
+++ b/apps/studio/features/documents/editor/DocumentEditorShell.tsx
@@ -0,0 +1,205 @@
+"use client";
+
+import type { ReactNode } from "react";
+
+import { useState } from "react";
+import { PanelLeftClose, PanelLeftOpen } from "lucide-react";
+
+import { Button, Card } from "@veriworkly/ui";
+
+import { cn } from "@/lib/utils";
+
+type EditorPanel = "content" | "settings";
+type MobileTab = "editor" | "preview";
+
+interface DocumentEditorShellProps {
+  toolbar: ReactNode;
+  modals?: ReactNode;
+  contentPanel: ReactNode;
+  settingsPanel: ReactNode;
+  preview: ReactNode;
+  previewTitle: string;
+  previewId?: string;
+  previewStageClassName?: string;
+  contentLabel?: string;
+  settingsLabel?: string;
+  defaultPanel?: EditorPanel;
+}
+
+export function DocumentEditorShell({
+  toolbar,
+  modals,
+  contentPanel,
+  settingsPanel,
+  preview,
+  previewTitle,
+  previewId,
+  previewStageClassName,
+  contentLabel = "Content",
+  settingsLabel = "Settings",
+  defaultPanel = "content",
+}: DocumentEditorShellProps) {
+  const [panelOpen, setPanelOpen] = useState(true);
+  const [activeTab, setActiveTab] = useState<MobileTab>("editor");
+  const [activePanel, setActivePanel] = useState<EditorPanel>(defaultPanel);
+
+  return (
+    <div className="flex h-[calc(100dvh-2rem)] min-h-0 flex-col gap-4 overflow-hidden">
+      <div className="sticky top-0 z-30">{toolbar}</div>
+
+      {modals}
+
+      <div className="border-border bg-card inline-flex shrink-0 rounded-2xl border p-1 md:hidden">
+        <button
+          className={cn(
+            "rounded-xl px-4 py-2 text-sm font-medium",
+            activeTab === "editor" ? "bg-accent text-accent-foreground" : "text-muted",
+          )}
+          onClick={() => setActiveTab("editor")}
+          type="button"
+        >
+          Edit
+        </button>
+
+        <button
+          className={cn(
+            "rounded-xl px-4 py-2 text-sm font-medium",
+            activeTab === "preview" ? "bg-accent text-accent-foreground" : "text-muted",
+          )}
+          onClick={() => setActiveTab("preview")}
+          type="button"
+        >
+          Preview
+        </button>
+      </div>
+
+      <div
+        className={cn(
+          "grid min-h-0 flex-1 gap-4 overflow-hidden",
+          panelOpen ? "xl:grid-cols-[minmax(0,420px)_minmax(0,1fr)]" : "grid-cols-1",
+        )}
+      >
+        {panelOpen ? (
+          <div className={activeTab === "preview" ? "hidden min-h-0 md:block" : "block min-h-0"}>
+            <Card className="flex h-full min-h-0 flex-col p-4">
+              <div className="mb-4 flex items-center justify-between gap-3">
+                <div className="border-border bg-background inline-flex rounded-2xl border p-1">
+                  <PanelTabButton
+                    active={activePanel === "content"}
+                    label={contentLabel}
+                    onClick={() => setActivePanel("content")}
+                  />
+
+                  <PanelTabButton
+                    active={activePanel === "settings"}
+                    label={settingsLabel}
+                    onClick={() => setActivePanel("settings")}
+                  />
+                </div>
+
+                <button
+                  className="border-border bg-background text-muted hover:text-foreground flex h-9 w-9 items-center justify-center rounded-xl border"
+                  onClick={() => setPanelOpen(false)}
+                  type="button"
+                  aria-label="Collapse editor panel"
+                >
+                  <PanelLeftClose className="h-4 w-4" />
+                </button>
+              </div>
+
+              <div className="min-h-0 flex-1 overflow-y-auto pr-1">
+                {activePanel === "content" ? contentPanel : settingsPanel}
+              </div>
+            </Card>
+          </div>
+        ) : (
+          <div className={activeTab === "preview" ? "hidden min-h-0 md:block" : "block min-h-0"}>
+            <Card className="space-y-3 p-3">
+              <p className="text-muted px-1 text-xs font-semibold tracking-[0.2em] uppercase">
+                Panels
+              </p>
+
+              <Button
+                className="w-full justify-start"
+                variant={activePanel === "content" ? "primary" : "secondary"}
+                size="sm"
+                onClick={() => {
+                  setActivePanel("content");
+                  setPanelOpen(true);
+                }}
+              >
+                <PanelLeftOpen className="mr-2 h-4 w-4" />
+                Open {contentLabel.toLowerCase()}
+              </Button>
+
+              <Button
+                className="w-full justify-start"
+                variant={activePanel === "settings" ? "primary" : "secondary"}
+                size="sm"
+                onClick={() => {
+                  setActivePanel("settings");
+                  setPanelOpen(true);
+                }}
+              >
+                <PanelLeftOpen className="mr-2 h-4 w-4" />
+                Open {settingsLabel.toLowerCase()}
+              </Button>
+            </Card>
+          </div>
+        )}
+
+        <Card
+          className={cn(
+            "h-full min-h-0 flex-col overflow-hidden p-0",
+            activeTab === "editor" ? "hidden md:flex" : "flex",
+          )}
+        >
+          <div className="from-background via-card to-background relative flex min-h-0 flex-1 flex-col bg-linear-to-br">
+            <div className="border-border/80 bg-card/80 shrink-0 border-b px-4 py-3 backdrop-blur md:px-6">
+              <p className="text-muted text-[11px] font-semibold tracking-[0.22em] uppercase">
+                Live Preview
+              </p>
+              <p className="text-foreground text-sm font-medium">{previewTitle}</p>
+            </div>
+
+            <div className="relative h-full min-h-0 flex-1 overflow-y-auto p-4 md:p-8">
+              <div
+                className={cn(
+                  "relative flex min-h-[70vh] justify-center rounded-3xl border border-dashed border-[color-mix(in_oklab,var(--border)_70%,transparent)] bg-[color-mix(in_oklab,var(--background)_92%,white)]",
+                  previewStageClassName,
+                )}
+              >
+                <div className="w-full max-w-212.5" id={previewId}>
+                  {preview}
+                </div>
+              </div>
+            </div>
+          </div>
+        </Card>
+      </div>
+    </div>
+  );
+}
+
+function PanelTabButton({
+  active,
+  label,
+  onClick,
+}: {
+  active: boolean;
+  label: string;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      className={cn(
+        "rounded-xl px-3 py-2 text-sm font-medium",
+        active ? "bg-accent text-accent-foreground" : "text-muted",
+      )}
+      onClick={onClick}
+      type="button"
+    >
+      {label}
+    </button>
+  );
+}
diff --git a/apps/studio/app/(main)/editor/components/content/editor-options.ts b/apps/studio/features/documents/editor/link-options.ts
similarity index 57%
rename from apps/studio/app/(main)/editor/components/content/editor-options.ts
rename to apps/studio/features/documents/editor/link-options.ts
index ceba053..8b07011 100644
--- a/apps/studio/app/(main)/editor/components/content/editor-options.ts
+++ b/apps/studio/features/documents/editor/link-options.ts
@@ -1,11 +1,3 @@
-export const proficiencyOptions = [
-  "Beginner",
-  "Intermediate",
-  "Advanced",
-  "Fluent",
-  "Native",
-] as const;
-
 export const linkTypeOptions = [
   "github",
   "linkedin",
diff --git a/apps/studio/app/(main)/editor/components/toolbar/ToolbarActionsMenu.tsx b/apps/studio/features/documents/editor/toolbar/ToolbarActionsMenu.tsx
similarity index 95%
rename from apps/studio/app/(main)/editor/components/toolbar/ToolbarActionsMenu.tsx
rename to apps/studio/features/documents/editor/toolbar/ToolbarActionsMenu.tsx
index 4e589ee..9e0fd15 100644
--- a/apps/studio/app/(main)/editor/components/toolbar/ToolbarActionsMenu.tsx
+++ b/apps/studio/features/documents/editor/toolbar/ToolbarActionsMenu.tsx
@@ -10,8 +10,7 @@ import {
   FolderInput,
 } from "lucide-react";
 
-import { Button } from "@veriworkly/ui";
-import { Menu, MenuItem, MenuSeparator } from "@veriworkly/ui";
+import { Button, Menu, MenuItem, MenuSeparator } from "@veriworkly/ui";
 
 interface ToolbarActionsMenuProps {
   onDelete: () => void;
diff --git a/apps/studio/app/(main)/editor/components/toolbar/ToolbarDownloadMenu.tsx b/apps/studio/features/documents/editor/toolbar/ToolbarDownloadMenu.tsx
similarity index 97%
rename from apps/studio/app/(main)/editor/components/toolbar/ToolbarDownloadMenu.tsx
rename to apps/studio/features/documents/editor/toolbar/ToolbarDownloadMenu.tsx
index 2410799..4ac2f96 100644
--- a/apps/studio/app/(main)/editor/components/toolbar/ToolbarDownloadMenu.tsx
+++ b/apps/studio/features/documents/editor/toolbar/ToolbarDownloadMenu.tsx
@@ -6,13 +6,12 @@ import {
   FileText,
   FileJson,
   Download,
+  FileDown,
   FileCode2,
   ChevronDown,
-  FileDown,
 } from "lucide-react";
 
-import { Button } from "@veriworkly/ui";
-import { Menu, MenuItem } from "@veriworkly/ui";
+import { Button, Menu, MenuItem } from "@veriworkly/ui";
 
 interface ToolbarDownloadMenuProps {
   activeDownload: string | null;
diff --git a/apps/studio/app/(main)/editor/components/toolbar/ToolbarHeader.tsx b/apps/studio/features/documents/editor/toolbar/ToolbarHeader.tsx
similarity index 87%
rename from apps/studio/app/(main)/editor/components/toolbar/ToolbarHeader.tsx
rename to apps/studio/features/documents/editor/toolbar/ToolbarHeader.tsx
index c707711..67dacbb 100644
--- a/apps/studio/app/(main)/editor/components/toolbar/ToolbarHeader.tsx
+++ b/apps/studio/features/documents/editor/toolbar/ToolbarHeader.tsx
@@ -10,7 +10,7 @@ interface ToolbarHeaderProps {
   onBack: () => void;
 }
 
-const ToolbarHeader = ({ message, title = "Resume Editor", onBack }: ToolbarHeaderProps) => {
+const ToolbarHeader = ({ message, title = "Document Editor", onBack }: ToolbarHeaderProps) => {
   return (
     <div className="flex items-start gap-2">
       <Button
diff --git a/apps/studio/features/documents/services/document-workspace-service.ts b/apps/studio/features/documents/services/document-workspace-service.ts
index 665d21e..a368ff8 100644
--- a/apps/studio/features/documents/services/document-workspace-service.ts
+++ b/apps/studio/features/documents/services/document-workspace-service.ts
@@ -2,20 +2,24 @@
 
 import type { DocumentType } from "@/features/documents/core/document-types";
 import type { BaseDocument, DocumentMeta } from "@/features/documents/core/types";
+import type { SaveDocumentOptions, SaveDocumentResult } from "./local-storage-service";
 
 import { getDocumentDefinition } from "@/features/documents/core/registry";
 import { DOCUMENT_STORAGE_UPDATED_EVENT } from "@/features/documents/services/document-sync";
 import { safeSetLocalStorageItem } from "@/features/documents/services/storage/safe-local-storage";
-import type { SaveDocumentOptions, SaveDocumentResult } from "./local-storage-service";
 
 const VERSION = "v2";
 const ACTIVE_KEY = `veriworkly:docs:${VERSION}:active`;
-const pendingSaves = new Map<DocumentType, { document: BaseDocument; timer: number | null }>();
+const pendingSaves = new Map<string, { document: BaseDocument; timer: number | null }>();
 
 function collectionKey(type: DocumentType) {
   return `veriworkly:docs:${VERSION}:${type.toLowerCase()}`;
 }
 
+function pendingSaveKey(type: DocumentType, id: string) {
+  return `${type}:${id}`;
+}
+
 function buildId(type: DocumentType): string {
   return `${type.toLowerCase()}-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
 }
@@ -61,14 +65,17 @@ function saveCollection(
   return { ok: true, queued: false };
 }
 
-function clearPendingSave(type: DocumentType) {
+function clearPendingSave(type: DocumentType, id: string) {
   if (typeof window === "undefined") return;
 
-  const pending = pendingSaves.get(type);
-  if (!pending?.timer) return;
+  const key = pendingSaveKey(type, id);
+  const pending = pendingSaves.get(key);
+  if (!pending) return;
 
-  window.clearTimeout(pending.timer);
-  pendingSaves.delete(type);
+  if (pending.timer !== null) {
+    window.clearTimeout(pending.timer);
+  }
+  pendingSaves.delete(key);
 }
 
 export function listDocuments(type?: DocumentType): DocumentMeta[] {
@@ -108,20 +115,25 @@ export function saveDocument(
   if (typeof window === "undefined") return { ok: true, queued: false };
 
   if (options?.flush) {
-    clearPendingSave(document.type);
+    clearPendingSave(document.type, document.id);
     return persistDocument(document);
   }
 
   const debounceMs = Math.max(0, options?.debounceMs ?? 0);
+
   if (debounceMs > 0) {
-    clearPendingSave(document.type);
+    const key = pendingSaveKey(document.type, document.id);
+
+    clearPendingSave(document.type, document.id);
+
     const timer = window.setTimeout(() => {
-      const pending = pendingSaves.get(document.type);
-      pendingSaves.delete(document.type);
+      const pending = pendingSaves.get(key);
+      pendingSaves.delete(key);
+
       if (pending) persistDocument(pending.document);
     }, debounceMs);
 
-    pendingSaves.set(document.type, { document, timer });
+    pendingSaves.set(key, { document, timer });
     return { ok: true, queued: true };
   }
 
@@ -131,14 +143,19 @@ export function saveDocument(
 export function createDocument(type: DocumentType) {
   const id = buildId(type);
   const doc = getDocumentDefinition(type).createDefault(id);
+
   saveDocument(doc);
   setActiveDocument(type, id);
+
   return doc;
 }
 
 export function deleteDocument(type: DocumentType, id: string) {
+  clearPendingSave(type, id);
+
   const items = loadCollection(type);
   delete items[id];
+
   saveCollection(type, items);
 }
 
diff --git a/apps/studio/features/resume/editor/EditorContentPanel.tsx b/apps/studio/features/resume/editor/EditorContentPanel.tsx
new file mode 100644
index 0000000..7584de3
--- /dev/null
+++ b/apps/studio/features/resume/editor/EditorContentPanel.tsx
@@ -0,0 +1,172 @@
+"use client";
+
+import type { DragEvent } from "react";
+
+import { memo, useCallback, useMemo, useRef, useState } from "react";
+
+import type { ResumeSectionId } from "@/types/resume";
+
+import { useResumeStore } from "@/features/resume/store/resume-store";
+
+import LinksSection from "./content/sections/LinksSection";
+import AwardsSection from "./content/sections/AwardsSection";
+import BasicsSection from "./content/sections/BasicsSection";
+import CustomSection from "./content/sections/CustomSection";
+import SkillsSection from "./content/sections/SkillsSection";
+import SummarySection from "./content/sections/SummarySection";
+import ProjectsSection from "./content/sections/ProjectsSection";
+import LanguagesSection from "./content/sections/LanguagesSection";
+import InterestsSection from "./content/sections/InterestsSection";
+import VolunteerSection from "./content/sections/VolunteerSection";
+import EducationSection from "./content/sections/EducationSection";
+import ReferencesSection from "./content/sections/ReferencesSection";
+import ExperienceSection from "./content/sections/ExperienceSection";
+import AchievementsSection from "./content/sections/AchievementsSection";
+import PublicationsSection from "./content/sections/PublicationsSection";
+import CertificationsSection from "./content/sections/CertificationsSection";
+
+const EditorContentPanel = () => {
+  const sections = useResumeStore((state) => state.resume.sections);
+  const reorderSections = useResumeStore((state) => state.reorderSections);
+
+  const draggedSectionIdRef = useRef<ResumeSectionId | null>(null);
+  const [openSectionId, setOpenSectionId] = useState<ResumeSectionId | null>("basics");
+
+  const sortedSections = useMemo(
+    () => sections.slice().sort((left, right) => left.order - right.order),
+    [sections],
+  );
+
+  const handleToggleSection = useCallback((sectionId: ResumeSectionId) => {
+    setOpenSectionId((currentSectionId) => (currentSectionId === sectionId ? null : sectionId));
+  }, []);
+
+  const handleDragStart = useCallback((sectionId: ResumeSectionId) => {
+    draggedSectionIdRef.current = sectionId;
+  }, []);
+
+  const handleDrop = useCallback(
+    (sectionId: ResumeSectionId, sectionIndex: number) => {
+      const draggedSectionId = draggedSectionIdRef.current;
+
+      if (draggedSectionId && draggedSectionId !== sectionId) {
+        const draggedIndex = sections.findIndex((item) => item.id === draggedSectionId);
+
+        if (draggedIndex !== -1) {
+          reorderSections(draggedIndex, sectionIndex);
+        }
+      }
+
+      draggedSectionIdRef.current = null;
+    },
+    [reorderSections, sections],
+  );
+
+  const handleDragEnd = useCallback(() => {
+    draggedSectionIdRef.current = null;
+  }, []);
+
+  return (
+    <div className="space-y-6">
+      <div className="space-y-1">
+        <p className="text-muted text-xs font-semibold tracking-[0.22em] uppercase">
+          Resume Content
+        </p>
+
+        <h2 className="text-foreground text-xl font-semibold">Content editor</h2>
+      </div>
+
+      <div className="space-y-3">
+        {sortedSections.map((section, sectionIndex) => (
+          <EditorSectionItem
+            key={section.id}
+            id={section.id}
+            index={sectionIndex}
+            isOpen={openSectionId === section.id}
+            onDragEnd={handleDragEnd}
+            onDragStart={handleDragStart}
+            onDrop={handleDrop}
+            onToggle={handleToggleSection}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+interface EditorSectionItemProps {
+  id: ResumeSectionId;
+  index: number;
+  isOpen: boolean;
+  onDragEnd: () => void;
+  onDragStart: (sectionId: ResumeSectionId) => void;
+  onDrop: (sectionId: ResumeSectionId, sectionIndex: number) => void;
+  onToggle: (sectionId: ResumeSectionId) => void;
+}
+
+const EditorSectionItem = memo(function EditorSectionItem({
+  id,
+  index,
+  isOpen,
+  onDragEnd,
+  onDragStart,
+  onDrop,
+  onToggle,
+}: EditorSectionItemProps) {
+  const handleDragStart = useCallback(
+    (event: DragEvent<HTMLSpanElement>) => {
+      onDragStart(id);
+
+      if (event.dataTransfer) {
+        event.dataTransfer.effectAllowed = "move";
+      }
+    },
+    [id, onDragStart],
+  );
+
+  const handleDragOver = useCallback((event: DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+
+    if (event.dataTransfer) {
+      event.dataTransfer.dropEffect = "move";
+    }
+  }, []);
+
+  const handleDrop = useCallback(
+    (event: DragEvent<HTMLDivElement>) => {
+      event.preventDefault();
+      onDrop(id, index);
+    },
+    [id, index, onDrop],
+  );
+
+  const sectionProps = {
+    isOpen,
+    onDragEnd,
+    onDragOver: handleDragOver,
+    onDragStart: handleDragStart,
+    onDrop: handleDrop,
+    onToggle,
+  };
+
+  if (id === "basics") return <BasicsSection {...sectionProps} />;
+  if (id === "links") return <LinksSection {...sectionProps} />;
+  if (id === "summary") return <SummarySection {...sectionProps} />;
+  if (id === "experience") return <ExperienceSection {...sectionProps} />;
+  if (id === "education") return <EducationSection {...sectionProps} />;
+  if (id === "projects") return <ProjectsSection {...sectionProps} />;
+  if (id === "skills") return <SkillsSection {...sectionProps} />;
+  if (id === "certifications") return <CertificationsSection {...sectionProps} />;
+  if (id === "awards") return <AwardsSection {...sectionProps} />;
+  if (id === "publications") return <PublicationsSection {...sectionProps} />;
+  if (id === "languages") return <LanguagesSection {...sectionProps} />;
+  if (id === "interests") return <InterestsSection {...sectionProps} />;
+  if (id === "volunteer") return <VolunteerSection {...sectionProps} />;
+  if (id === "references") return <ReferencesSection {...sectionProps} />;
+  if (id === "achievements") return <AchievementsSection {...sectionProps} />;
+  if (id === "custom") return <CustomSection {...sectionProps} />;
+
+  return null;
+});
+
+export default EditorContentPanel;
diff --git a/apps/studio/app/(main)/editor/components/EditorSettingsPanel.tsx b/apps/studio/features/resume/editor/EditorSettingsPanel.tsx
similarity index 100%
rename from apps/studio/app/(main)/editor/components/EditorSettingsPanel.tsx
rename to apps/studio/features/resume/editor/EditorSettingsPanel.tsx
diff --git a/apps/studio/features/resume/editor/ResumeEditor.tsx b/apps/studio/features/resume/editor/ResumeEditor.tsx
new file mode 100644
index 0000000..b1d6b09
--- /dev/null
+++ b/apps/studio/features/resume/editor/ResumeEditor.tsx
@@ -0,0 +1,184 @@
+"use client";
+
+import { useRouter, useSearchParams } from "next/navigation";
+import { useDeferredValue, useEffect, useRef, useState } from "react";
+
+import type { TemplateComponent } from "@/types/template";
+
+import { useResume } from "@/features/resume/hooks/use-resume";
+
+import {
+  loadResumeById,
+  createResumeWithTemplate,
+} from "@/features/resume/services/resume-service";
+import {
+  startDocumentSyncWorker,
+  hydrateCloudDocumentByIdToLocalStorage,
+} from "@/features/documents/services/document-sync";
+import { getDocumentEditorPath } from "@/features/documents/core/routes";
+import { DocumentEditorShell } from "@/features/documents/editor/DocumentEditorShell";
+import { loadWorkspaceSettingsFromLocalStorage } from "@/features/documents/services/workspace-settings";
+
+import { loadTemplateComponentById } from "@/templates";
+
+import ResumeToolbar from "./ResumeToolbar";
+import ResumeEditorModals from "./ResumeEditorModals";
+import EditorContentPanel from "./EditorContentPanel";
+import EditorSettingsPanel from "./EditorSettingsPanel";
+
+import { useUserStore } from "@/store/useUserStore";
+
+interface ResumeEditorProps {
+  documentId: string;
+}
+
+const ResumeEditor = ({ documentId }: ResumeEditorProps) => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const hasHydratedRef = useRef(false);
+
+  const isLoggedIn = useUserStore((state) => state.isLoggedIn);
+
+  const { hydrateFromStorage, resume, saveToStorage, setResume } = useResume();
+
+  const [templateComponent, setTemplateComponent] = useState<TemplateComponent | null>(null);
+
+  const [shareModalOpen, setShareModalOpen] = useState(false);
+  const [deleteModalOpen, setDeleteModalOpen] = useState(false);
+
+  const deferredResume = useDeferredValue(resume);
+
+  const resumePreviewId = `resume-preview-${resume.id}`;
+
+  const stagePaddingClass = resume.customization.pagePadding === 0 ? "p-0" : "p-3 md:p-6";
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const hydrate = async () => {
+      if (documentId === "new") {
+        const template = searchParams.get("template") || "executive-clarity";
+        const newResume = createResumeWithTemplate(template);
+
+        router.replace(getDocumentEditorPath("RESUME", newResume.id));
+
+        return;
+      }
+
+      if (documentId) {
+        const routeResume = loadResumeById(documentId);
+
+        if (routeResume) {
+          setResume(routeResume);
+          hasHydratedRef.current = true;
+
+          return;
+        }
+
+        const cloudResult = await hydrateCloudDocumentByIdToLocalStorage("RESUME", documentId);
+
+        if (!cancelled && cloudResult.ok) {
+          const hydratedResume = loadResumeById(documentId);
+
+          if (hydratedResume) {
+            setResume(hydratedResume);
+            hasHydratedRef.current = true;
+            return;
+          }
+        }
+      }
+
+      if (!cancelled) {
+        hydrateFromStorage();
+        hasHydratedRef.current = true;
+      }
+    };
+
+    void hydrate();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [hydrateFromStorage, documentId, router, searchParams, setResume]);
+
+  useEffect(() => {
+    if (!hasHydratedRef.current) {
+      return;
+    }
+
+    saveToStorage({ debounceMs: 300 });
+  }, [resume, saveToStorage]);
+
+  useEffect(() => {
+    if (!hasHydratedRef.current) {
+      return;
+    }
+
+    if (!isLoggedIn) {
+      return;
+    }
+
+    const workspaceSettings = loadWorkspaceSettingsFromLocalStorage();
+
+    startDocumentSyncWorker("RESUME", {
+      enabled: isLoggedIn && workspaceSettings.autoSyncEnabled,
+      idleDelayMs: 12_000,
+    });
+  }, [isLoggedIn, resume.updatedAt]);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const loadTemplate = async () => {
+      const nextTemplate = await loadTemplateComponentById(deferredResume.templateId);
+
+      if (!cancelled) {
+        setTemplateComponent(() => nextTemplate);
+      }
+    };
+
+    void loadTemplate();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [deferredResume.templateId]);
+
+  const preview = templateComponent
+    ? (() => {
+        const TemplateComponent = templateComponent;
+        return <TemplateComponent resume={deferredResume} />;
+      })()
+    : null;
+
+  return (
+    <DocumentEditorShell
+      toolbar={
+        <ResumeToolbar
+          resumeId={documentId}
+          resumePreviewId={resumePreviewId}
+          onOpenShare={() => setShareModalOpen(true)}
+          onOpenDelete={() => setDeleteModalOpen(true)}
+        />
+      }
+      modals={
+        <ResumeEditorModals
+          shareModalOpen={shareModalOpen}
+          onShareModalClose={() => setShareModalOpen(false)}
+          deleteModalOpen={deleteModalOpen}
+          onDeleteModalClose={() => setDeleteModalOpen(false)}
+        />
+      }
+      contentPanel={<EditorContentPanel />}
+      settingsPanel={<EditorSettingsPanel />}
+      preview={preview}
+      previewId={resumePreviewId}
+      previewTitle={deferredResume.basics.fullName || "Untitled Resume"}
+      previewStageClassName={stagePaddingClass}
+      settingsLabel="Style settings"
+    />
+  );
+};
+
+export default ResumeEditor;
diff --git a/apps/studio/app/(main)/editor/components/EditorModals.tsx b/apps/studio/features/resume/editor/ResumeEditorModals.tsx
similarity index 91%
rename from apps/studio/app/(main)/editor/components/EditorModals.tsx
rename to apps/studio/features/resume/editor/ResumeEditorModals.tsx
index 2181033..2293501 100644
--- a/apps/studio/app/(main)/editor/components/EditorModals.tsx
+++ b/apps/studio/features/resume/editor/ResumeEditorModals.tsx
@@ -5,6 +5,7 @@ import { useState } from "react";
 import { useRouter } from "next/navigation";
 
 import { useResume } from "@/features/resume/hooks/use-resume";
+import { getDocumentEditorPath } from "@/features/documents/core/routes";
 import { DocumentApi } from "@/features/documents/services/document-api";
 import { trackUsageEvent } from "@/features/analytics/services/usage-metrics";
 import { deleteResume, createResume } from "@/features/resume/services/resume-service";
@@ -42,10 +43,10 @@ const EditorModals = ({
       if (!nextResume) {
         const fallback = createResume();
         setResume(fallback);
-        router.push(`/editor/resume/${fallback.id}`);
+        router.push(getDocumentEditorPath("RESUME", fallback.id));
       } else {
         setResume(nextResume);
-        router.push(`/editor/resume/${nextResume.id}`);
+        router.push(getDocumentEditorPath("RESUME", nextResume.id));
       }
 
       trackUsageEvent({ event: "resume_deleted" });
diff --git a/apps/studio/app/(main)/editor/components/Toolbar.tsx b/apps/studio/features/resume/editor/ResumeToolbar.tsx
similarity index 80%
rename from apps/studio/app/(main)/editor/components/Toolbar.tsx
rename to apps/studio/features/resume/editor/ResumeToolbar.tsx
index 77bf20d..944820a 100644
--- a/apps/studio/app/(main)/editor/components/Toolbar.tsx
+++ b/apps/studio/features/resume/editor/ResumeToolbar.tsx
@@ -1,18 +1,20 @@
 "use client";
 
-import { useRef, useState } from "react";
 import Link from "next/link";
-import { useRouter } from "next/navigation";
+import { useRef, useState } from "react";
 import { FileSearch } from "lucide-react";
+import { useRouter } from "next/navigation";
 
 import { Button } from "@veriworkly/ui";
-import ToolbarHeader from "@/app/(main)/editor/components/toolbar/ToolbarHeader";
-import ToolbarActionsMenu from "@/app/(main)/editor/components/toolbar/ToolbarActionsMenu";
-import ToolbarDownloadMenu from "@/app/(main)/editor/components/toolbar/ToolbarDownloadMenu";
-import { useToolbarDownloads } from "@/app/(main)/editor/components/toolbar/useToolbarDownloads";
-import ToolbarSecondaryActions from "@/app/(main)/editor/components/toolbar/ToolbarSecondaryActions";
+
+import ToolbarHeader from "@/features/documents/editor/toolbar/ToolbarHeader";
+import ToolbarActionsMenu from "@/features/documents/editor/toolbar/ToolbarActionsMenu";
+import ToolbarDownloadMenu from "@/features/documents/editor/toolbar/ToolbarDownloadMenu";
+import { useToolbarDownloads } from "@/features/resume/editor/toolbar/useToolbarDownloads";
+import ToolbarSecondaryActions from "@/features/resume/editor/toolbar/ToolbarSecondaryActions";
 
 import { useResume } from "@/features/resume/hooks/use-resume";
+import { getDocumentEditorPath } from "@/features/documents/core/routes";
 import { saveResume, importResumeFromFile } from "@/features/resume/services/resume-service";
 
 interface ToolbarProps {
@@ -22,7 +24,7 @@ interface ToolbarProps {
   onOpenDelete: () => void;
 }
 
-const Toolbar = ({ resumeId, resumePreviewId, onOpenShare, onOpenDelete }: ToolbarProps) => {
+const ResumeToolbar = ({ resumeId, resumePreviewId, onOpenShare, onOpenDelete }: ToolbarProps) => {
   const router = useRouter();
 
   const fileInputRef = useRef<HTMLInputElement>(null);
@@ -61,7 +63,7 @@ const Toolbar = ({ resumeId, resumePreviewId, onOpenShare, onOpenDelete }: Toolb
       }
 
       setResume(importedResume);
-      router.push(`/editor/resume/${importedResume.id}`);
+      router.push(getDocumentEditorPath("RESUME", importedResume.id));
       setMessage("JSON imported successfully");
     } catch {
       setMessage("Import failed. Please use a valid JSON file");
@@ -70,7 +72,7 @@ const Toolbar = ({ resumeId, resumePreviewId, onOpenShare, onOpenDelete }: Toolb
 
   return (
     <div className="border-border bg-card/95 flex flex-wrap items-center justify-between gap-3 rounded-3xl border p-4 shadow-sm backdrop-blur">
-      <ToolbarHeader message={message} onBack={() => router.push("/")} />
+      <ToolbarHeader title="Resume Editor" message={message} onBack={() => router.push("/")} />
 
       <div className="flex items-center gap-2">
         {process.env.NODE_ENV === "development" ? (
@@ -125,4 +127,4 @@ const Toolbar = ({ resumeId, resumePreviewId, onOpenShare, onOpenDelete }: Toolb
   );
 };
 
-export default Toolbar;
+export default ResumeToolbar;
diff --git a/apps/studio/app/(main)/editor/components/Sidebar.tsx b/apps/studio/features/resume/editor/Sidebar.tsx
similarity index 100%
rename from apps/studio/app/(main)/editor/components/Sidebar.tsx
rename to apps/studio/features/resume/editor/Sidebar.tsx
diff --git a/apps/studio/app/(main)/editor/components/content/EditorFormPrimitives.tsx b/apps/studio/features/resume/editor/content/EditorFormPrimitives.tsx
similarity index 99%
rename from apps/studio/app/(main)/editor/components/content/EditorFormPrimitives.tsx
rename to apps/studio/features/resume/editor/content/EditorFormPrimitives.tsx
index 265cc78..e6cf01b 100644
--- a/apps/studio/app/(main)/editor/components/content/EditorFormPrimitives.tsx
+++ b/apps/studio/features/resume/editor/content/EditorFormPrimitives.tsx
@@ -1,8 +1,9 @@
 "use client";
 
-import { useState } from "react";
 import type { ReactNode } from "react";
 
+import { useState } from "react";
+
 import { Input } from "@veriworkly/ui";
 
 import { cn } from "@/lib/utils";
diff --git a/apps/studio/app/(main)/editor/components/content/SectionAccordion.tsx b/apps/studio/features/resume/editor/content/SectionAccordion.tsx
similarity index 100%
rename from apps/studio/app/(main)/editor/components/content/SectionAccordion.tsx
rename to apps/studio/features/resume/editor/content/SectionAccordion.tsx
diff --git a/apps/studio/features/resume/editor/content/editor-options.ts b/apps/studio/features/resume/editor/content/editor-options.ts
new file mode 100644
index 0000000..8aaedfe
--- /dev/null
+++ b/apps/studio/features/resume/editor/content/editor-options.ts
@@ -0,0 +1,7 @@
+export const proficiencyOptions = [
+  "Beginner",
+  "Intermediate",
+  "Advanced",
+  "Fluent",
+  "Native",
+] as const;
diff --git a/apps/studio/app/(main)/editor/components/content/sections/AchievementsSection.tsx b/apps/studio/features/resume/editor/content/sections/AchievementsSection.tsx
similarity index 86%
rename from apps/studio/app/(main)/editor/components/content/sections/AchievementsSection.tsx
rename to apps/studio/features/resume/editor/content/sections/AchievementsSection.tsx
index 969fbf4..060baa6 100644
--- a/apps/studio/app/(main)/editor/components/content/sections/AchievementsSection.tsx
+++ b/apps/studio/features/resume/editor/content/sections/AchievementsSection.tsx
@@ -10,7 +10,7 @@ import { Button } from "@veriworkly/ui";
 import DraggableSection from "./DraggableSection";
 import { Field, TextArea } from "../EditorFormPrimitives";
 
-import { useResume } from "@/features/resume/hooks/use-resume";
+import { useResumeStore } from "@/features/resume/store/resume-store";
 
 const AchievementsSection = ({
   isOpen,
@@ -20,14 +20,16 @@ const AchievementsSection = ({
   onDrop,
   onToggle,
 }: BaseSectionProps) => {
-  const { resume, addCustomSectionItem, removeCustomSectionItem, updateCustomSectionItem } =
-    useResume();
+  const achievementsSection =
+    useResumeStore((state) =>
+      state.resume.customSections.find((section) => section.kind === "achievements"),
+    ) ?? null;
+  const addCustomSectionItem = useResumeStore((state) => state.addCustomSectionItem);
+  const removeCustomSectionItem = useResumeStore((state) => state.removeCustomSectionItem);
+  const updateCustomSectionItem = useResumeStore((state) => state.updateCustomSectionItem);
 
   const [achievementIndex, setAchievementIndex] = useState(0);
 
-  const achievementsSection =
-    resume.customSections.find((section) => section.kind === "achievements") ?? null;
-
   if (!achievementsSection) {
     return null;
   }
diff --git a/apps/studio/app/(main)/editor/components/content/sections/AwardsSection.tsx b/apps/studio/features/resume/editor/content/sections/AwardsSection.tsx
similarity index 89%
rename from apps/studio/app/(main)/editor/components/content/sections/AwardsSection.tsx
rename to apps/studio/features/resume/editor/content/sections/AwardsSection.tsx
index d871dad..6ae5207 100644
--- a/apps/studio/app/(main)/editor/components/content/sections/AwardsSection.tsx
+++ b/apps/studio/features/resume/editor/content/sections/AwardsSection.tsx
@@ -7,7 +7,7 @@ import type { BaseSectionProps } from "./section-types";
 import { Input } from "@veriworkly/ui";
 import { Button } from "@veriworkly/ui";
 
-import { useResume } from "@/features/resume/hooks/use-resume";
+import { useResumeStore } from "@/features/resume/store/resume-store";
 
 import DraggableSection from "./DraggableSection";
 import { Field, TextArea } from "../EditorFormPrimitives";
@@ -20,13 +20,16 @@ const AwardsSection = ({
   onDrop,
   onToggle,
 }: BaseSectionProps) => {
-  const { resume, addCustomSectionItem, removeCustomSectionItem, updateCustomSectionItem } =
-    useResume();
+  const awardsSection =
+    useResumeStore((state) =>
+      state.resume.customSections.find((section) => section.kind === "awards"),
+    ) ?? null;
+  const addCustomSectionItem = useResumeStore((state) => state.addCustomSectionItem);
+  const removeCustomSectionItem = useResumeStore((state) => state.removeCustomSectionItem);
+  const updateCustomSectionItem = useResumeStore((state) => state.updateCustomSectionItem);
 
   const [awardIndex, setAwardIndex] = useState(0);
 
-  const awardsSection = resume.customSections.find((section) => section.kind === "awards") ?? null;
-
   if (!awardsSection) {
     return null;
   }
diff --git a/apps/studio/app/(main)/editor/components/content/sections/BasicsSection.tsx b/apps/studio/features/resume/editor/content/sections/BasicsSection.tsx
similarity index 81%
rename from apps/studio/app/(main)/editor/components/content/sections/BasicsSection.tsx
rename to apps/studio/features/resume/editor/content/sections/BasicsSection.tsx
index 1d27f5e..755e665 100644
--- a/apps/studio/app/(main)/editor/components/content/sections/BasicsSection.tsx
+++ b/apps/studio/features/resume/editor/content/sections/BasicsSection.tsx
@@ -2,7 +2,7 @@
 
 import type { BaseSectionProps } from "./section-types";
 
-import { useResume } from "@/features/resume/hooks/use-resume";
+import { useResumeStore } from "@/features/resume/store/resume-store";
 import { validateBasics } from "@/features/resume/utils/validation";
 
 import DraggableSection from "./DraggableSection";
@@ -16,8 +16,9 @@ const BasicsSection = ({
   onDrop,
   onToggle,
 }: BaseSectionProps) => {
-  const { resume, updateBasics } = useResume();
-  const basicErrors = validateBasics(resume.basics);
+  const basics = useResumeStore((state) => state.resume.basics);
+  const updateBasics = useResumeStore((state) => state.updateBasics);
+  const basicErrors = validateBasics(basics);
 
   return (
     <DraggableSection
@@ -35,21 +36,21 @@ const BasicsSection = ({
           error={basicErrors.fullName}
           label="Full name"
           onValueChange={(fullName) => updateBasics({ fullName })}
-          value={resume.basics.fullName}
+          value={basics.fullName}
         />
 
         <TextInputField
           error={basicErrors.role}
           label="Role"
           onValueChange={(role) => updateBasics({ role })}
-          value={resume.basics.role}
+          value={basics.role}
         />
 
         <TextInputField
           error={basicErrors.headline}
           label="Headline"
           onValueChange={(headline) => updateBasics({ headline })}
-          value={resume.basics.headline}
+          value={basics.headline}
         />
 
         <TextInputField
@@ -57,7 +58,7 @@ const BasicsSection = ({
           label="Email"
           onValueChange={(email) => updateBasics({ email })}
           type="email"
-          value={resume.basics.email}
+          value={basics.email}
         />
 
         <TextInputField
@@ -68,32 +69,32 @@ const BasicsSection = ({
           onValueChange={(phone) => updateBasics({ phone: phone.replace(/\D/g, "").slice(0, 10) })}
           pattern="[0-9]*"
           placeholder="1234567890"
-          value={resume.basics.phone}
+          value={basics.phone}
         />
 
         <TextInputField
           error={basicErrors.location}
           label="Location"
           onValueChange={(location) => updateBasics({ location })}
-          value={resume.basics.location}
+          value={basics.location}
         />
 
         <CheckboxField
-          checked={resume.basics.linkEmail}
+          checked={basics.linkEmail}
           onCheckedChange={(linkEmail) => updateBasics({ linkEmail })}
         >
           Email opens mail app
         </CheckboxField>
 
         <CheckboxField
-          checked={resume.basics.linkPhone}
+          checked={basics.linkPhone}
           onCheckedChange={(linkPhone) => updateBasics({ linkPhone })}
         >
           Phone opens call
         </CheckboxField>
 
         <CheckboxField
-          checked={resume.basics.linkLocation}
+          checked={basics.linkLocation}
           className="md:col-span-2"
           onCheckedChange={(linkLocation) => updateBasics({ linkLocation })}
         >
diff --git a/apps/studio/app/(main)/editor/components/content/sections/CertificationsSection.tsx b/apps/studio/features/resume/editor/content/sections/CertificationsSection.tsx
similarity index 89%
rename from apps/studio/app/(main)/editor/components/content/sections/CertificationsSection.tsx
rename to apps/studio/features/resume/editor/content/sections/CertificationsSection.tsx
index fc03b90..e100de4 100644
--- a/apps/studio/app/(main)/editor/components/content/sections/CertificationsSection.tsx
+++ b/apps/studio/features/resume/editor/content/sections/CertificationsSection.tsx
@@ -5,7 +5,7 @@ import { useState } from "react";
 import { Input } from "@veriworkly/ui";
 import { Button } from "@veriworkly/ui";
 
-import { useResume } from "@/features/resume/hooks/use-resume";
+import { useResumeStore } from "@/features/resume/store/resume-store";
 
 import { Field } from "../EditorFormPrimitives";
 import DraggableSection from "./DraggableSection";
@@ -19,14 +19,16 @@ const CertificationsSection = ({
   onDrop,
   onToggle,
 }: BaseSectionProps) => {
-  const { resume, addCustomSectionItem, removeCustomSectionItem, updateCustomSectionItem } =
-    useResume();
+  const certificationsSection =
+    useResumeStore((state) =>
+      state.resume.customSections.find((section) => section.kind === "certifications"),
+    ) ?? null;
+  const addCustomSectionItem = useResumeStore((state) => state.addCustomSectionItem);
+  const removeCustomSectionItem = useResumeStore((state) => state.removeCustomSectionItem);
+  const updateCustomSectionItem = useResumeStore((state) => state.updateCustomSectionItem);
 
   const [certificationIndex, setCertificationIndex] = useState(0);
 
-  const certificationsSection =
-    resume.customSections.find((section) => section.kind === "certifications") ?? null;
-
   if (!certificationsSection) {
     return null;
   }
diff --git a/apps/studio/app/(main)/editor/components/content/sections/CustomSection.tsx b/apps/studio/features/resume/editor/content/sections/CustomSection.tsx
similarity index 86%
rename from apps/studio/app/(main)/editor/components/content/sections/CustomSection.tsx
rename to apps/studio/features/resume/editor/content/sections/CustomSection.tsx
index b55ee03..80322f4 100644
--- a/apps/studio/app/(main)/editor/components/content/sections/CustomSection.tsx
+++ b/apps/studio/features/resume/editor/content/sections/CustomSection.tsx
@@ -7,7 +7,7 @@ import type { BaseSectionProps } from "./section-types";
 import { Input } from "@veriworkly/ui";
 import { Button } from "@veriworkly/ui";
 
-import { useResume } from "@/features/resume/hooks/use-resume";
+import { useResumeStore } from "@/features/resume/store/resume-store";
 
 import DraggableSection from "./DraggableSection";
 import { Field, TextArea } from "../EditorFormPrimitives";
@@ -20,17 +20,16 @@ const CustomSection = ({
   onDrop,
   onToggle,
 }: BaseSectionProps) => {
-  const {
-    addCustomSectionItem,
-    removeCustomSectionItem,
-    resume,
-    updateCustomSection,
-    updateCustomSectionItem,
-  } = useResume();
+  const customSection =
+    useResumeStore((state) =>
+      state.resume.customSections.find((section) => section.kind === "custom"),
+    ) ?? null;
+  const addCustomSectionItem = useResumeStore((state) => state.addCustomSectionItem);
+  const removeCustomSectionItem = useResumeStore((state) => state.removeCustomSectionItem);
+  const updateCustomSection = useResumeStore((state) => state.updateCustomSection);
+  const updateCustomSectionItem = useResumeStore((state) => state.updateCustomSectionItem);
   const [customSectionIndex, setCustomSectionIndex] = useState(0);
 
-  const customSection = resume.customSections.find((section) => section.kind === "custom") ?? null;
-
   if (!customSection) {
     return null;
   }
diff --git a/apps/studio/app/(main)/editor/components/content/sections/DraggableSection.tsx b/apps/studio/features/resume/editor/content/sections/DraggableSection.tsx
similarity index 100%
rename from apps/studio/app/(main)/editor/components/content/sections/DraggableSection.tsx
rename to apps/studio/features/resume/editor/content/sections/DraggableSection.tsx
diff --git a/apps/studio/features/resume/editor/content/sections/EducationSection.tsx b/apps/studio/features/resume/editor/content/sections/EducationSection.tsx
new file mode 100644
index 0000000..5405607
--- /dev/null
+++ b/apps/studio/features/resume/editor/content/sections/EducationSection.tsx
@@ -0,0 +1,188 @@
+"use client";
+
+import { useMemo, useState } from "react";
+
+import type { BaseSectionProps } from "./section-types";
+
+import { Input } from "@veriworkly/ui";
+import { Button } from "@veriworkly/ui";
+
+import { useResumeStore } from "@/features/resume/store/resume-store";
+import { validateEducation } from "@/features/resume/utils/validation";
+
+import DraggableSection from "./DraggableSection";
+import { Field, invalidClass, TextArea } from "../EditorFormPrimitives";
+
+const EducationSection = ({
+  isOpen,
+  onDragEnd,
+  onDragOver,
+  onDragStart,
+  onDrop,
+  onToggle,
+}: BaseSectionProps) => {
+  const education = useResumeStore((state) => state.resume.education);
+  const addEducation = useResumeStore((state) => state.addEducation);
+  const removeEducation = useResumeStore((state) => state.removeEducation);
+  const updateEducation = useResumeStore((state) => state.updateEducation);
+
+  const [educationIndex, setEducationIndex] = useState(0);
+
+  const safeEducationIndex = Math.min(educationIndex, Math.max(0, education.length - 1));
+
+  const activeEducation = education[safeEducationIndex];
+
+  const educationErrors = useMemo(
+    () => (activeEducation ? validateEducation(activeEducation) : {}),
+    [activeEducation],
+  );
+
+  return (
+    <DraggableSection
+      id="education"
+      isOpen={isOpen}
+      onDrop={onDrop}
+      label="Education"
+      onToggle={onToggle}
+      onDragEnd={onDragEnd}
+      onDragOver={onDragOver}
+      onDragStart={onDragStart}
+    >
+      <div className="mb-3 flex flex-wrap gap-2">
+        {education.length ? (
+          <select
+            className="border-border bg-background h-10 rounded-xl border px-3 text-sm"
+            onChange={(event) => setEducationIndex(Number(event.target.value))}
+            value={safeEducationIndex}
+          >
+            {education.map((_, index) => (
+              <option key={index} value={index}>
+                Education {index + 1}
+              </option>
+            ))}
+          </select>
+        ) : null}
+
+        <Button onClick={addEducation} size="sm" variant="secondary">
+          Add
+        </Button>
+
+        <Button
+          disabled={education.length === 0}
+          onClick={() => removeEducation(safeEducationIndex)}
+          size="sm"
+          variant="ghost"
+        >
+          Remove
+        </Button>
+      </div>
+
+      {activeEducation ? (
+        <>
+          <div className="grid gap-4 md:grid-cols-2">
+            <Field error={educationErrors.school} label="School">
+              <Input
+                className={invalidClass(educationErrors.school)}
+                onChange={(event) =>
+                  updateEducation(safeEducationIndex, {
+                    school: event.target.value,
+                  })
+                }
+                value={activeEducation.school}
+              />
+            </Field>
+
+            <Field error={educationErrors.degree} label="Degree">
+              <Input
+                className={invalidClass(educationErrors.degree)}
+                onChange={(event) =>
+                  updateEducation(safeEducationIndex, {
+                    degree: event.target.value,
+                  })
+                }
+                value={activeEducation.degree}
+              />
+            </Field>
+
+            <Field error={educationErrors.field} label="Field of study">
+              <Input
+                className={invalidClass(educationErrors.field)}
+                onChange={(event) =>
+                  updateEducation(safeEducationIndex, {
+                    field: event.target.value,
+                  })
+                }
+                value={activeEducation.field}
+              />
+            </Field>
+
+            <Field error={educationErrors.startDate} label="Start year">
+              <Input
+                className={invalidClass(educationErrors.startDate)}
+                inputMode="numeric"
+                maxLength={4}
+                onChange={(event) =>
+                  updateEducation(safeEducationIndex, {
+                    startDate: event.target.value.replace(/\D/g, "").slice(0, 4),
+                  })
+                }
+                pattern="[0-9]*"
+                placeholder="2019"
+                value={activeEducation.startDate}
+              />
+            </Field>
+
+            <Field error={educationErrors.endDate} label="End year">
+              <Input
+                className={invalidClass(educationErrors.endDate)}
+                disabled={activeEducation.current}
+                inputMode="numeric"
+                maxLength={4}
+                onChange={(event) =>
+                  updateEducation(safeEducationIndex, {
+                    endDate: event.target.value.replace(/\D/g, "").slice(0, 4),
+                  })
+                }
+                pattern="[0-9]*"
+                placeholder="2023"
+                value={activeEducation.endDate}
+              />
+            </Field>
+
+            <label className="text-foreground border-border flex items-center gap-3 rounded-2xl border px-4 py-3 text-sm font-medium">
+              <input
+                checked={activeEducation.current}
+                className="accent-accent h-4 w-4"
+                onChange={(event) =>
+                  updateEducation(safeEducationIndex, {
+                    current: event.target.checked,
+                    endDate: event.target.checked ? "" : activeEducation.endDate,
+                  })
+                }
+                type="checkbox"
+              />
+              I currently study here
+            </label>
+          </div>
+
+          <div className="mt-4">
+            <Field label="Summary">
+              <TextArea
+                onChange={(event) =>
+                  updateEducation(safeEducationIndex, {
+                    summary: event.target.value,
+                  })
+                }
+                value={activeEducation.summary}
+              />
+            </Field>
+          </div>
+        </>
+      ) : (
+        <p className="text-muted text-sm">No education entries yet. Click Add to create one.</p>
+      )}
+    </DraggableSection>
+  );
+};
+
+export default EducationSection;
diff --git a/apps/studio/app/(main)/editor/components/content/sections/ExperienceSection.tsx b/apps/studio/features/resume/editor/content/sections/ExperienceSection.tsx
similarity index 91%
rename from apps/studio/app/(main)/editor/components/content/sections/ExperienceSection.tsx
rename to apps/studio/features/resume/editor/content/sections/ExperienceSection.tsx
index 88afae8..5b7afac 100644
--- a/apps/studio/app/(main)/editor/components/content/sections/ExperienceSection.tsx
+++ b/apps/studio/features/resume/editor/content/sections/ExperienceSection.tsx
@@ -5,7 +5,7 @@ import { useMemo, useState } from "react";
 import { Input } from "@veriworkly/ui";
 import { Button } from "@veriworkly/ui";
 
-import { useResume } from "@/features/resume/hooks/use-resume";
+import { useResumeStore } from "@/features/resume/store/resume-store";
 import { validateExperience } from "@/features/resume/utils/validation";
 
 import { Field, TextArea, invalidClass, DelimitedTextArea } from "../EditorFormPrimitives";
@@ -20,13 +20,16 @@ const ExperienceSection = ({
   onDrop,
   onToggle,
 }: BaseSectionProps) => {
-  const { addExperience, removeExperience, resume, updateExperience } = useResume();
+  const experience = useResumeStore((state) => state.resume.experience);
+  const addExperience = useResumeStore((state) => state.addExperience);
+  const removeExperience = useResumeStore((state) => state.removeExperience);
+  const updateExperience = useResumeStore((state) => state.updateExperience);
 
   const [experienceIndex, setExperienceIndex] = useState(0);
 
-  const safeExperienceIndex = Math.min(experienceIndex, Math.max(0, resume.experience.length - 1));
+  const safeExperienceIndex = Math.min(experienceIndex, Math.max(0, experience.length - 1));
 
-  const activeExperience = resume.experience[safeExperienceIndex];
+  const activeExperience = experience[safeExperienceIndex];
 
   const experienceErrors = useMemo(
     () => (activeExperience ? validateExperience(activeExperience) : {}),
@@ -45,13 +48,13 @@ const ExperienceSection = ({
       onDragStart={onDragStart}
     >
       <div className="mb-3 flex flex-wrap gap-2">
-        {resume.experience.length ? (
+        {experience.length ? (
           <select
             className="border-border bg-background h-10 rounded-xl border px-3 text-sm"
             onChange={(event) => setExperienceIndex(Number(event.target.value))}
             value={safeExperienceIndex}
           >
-            {resume.experience.map((_, index) => (
+            {experience.map((_, index) => (
               <option key={index} value={index}>
                 Experience {index + 1}
               </option>
@@ -66,7 +69,7 @@ const ExperienceSection = ({
         <Button
           size="sm"
           variant="ghost"
-          disabled={resume.experience.length === 0}
+          disabled={experience.length === 0}
           onClick={() => removeExperience(safeExperienceIndex)}
         >
           Remove
diff --git a/apps/studio/app/(main)/editor/components/content/sections/InterestsSection.tsx b/apps/studio/features/resume/editor/content/sections/InterestsSection.tsx
similarity index 86%
rename from apps/studio/app/(main)/editor/components/content/sections/InterestsSection.tsx
rename to apps/studio/features/resume/editor/content/sections/InterestsSection.tsx
index 46483bb..e40bbdb 100644
--- a/apps/studio/app/(main)/editor/components/content/sections/InterestsSection.tsx
+++ b/apps/studio/features/resume/editor/content/sections/InterestsSection.tsx
@@ -10,7 +10,7 @@ import { Button } from "@veriworkly/ui";
 import { Field } from "../EditorFormPrimitives";
 import DraggableSection from "./DraggableSection";
 
-import { useResume } from "@/features/resume/hooks/use-resume";
+import { useResumeStore } from "@/features/resume/store/resume-store";
 
 const InterestsSection = ({
   isOpen,
@@ -20,14 +20,16 @@ const InterestsSection = ({
   onDrop,
   onToggle,
 }: BaseSectionProps) => {
-  const { resume, addCustomSectionItem, removeCustomSectionItem, updateCustomSectionItem } =
-    useResume();
+  const interestsSection =
+    useResumeStore((state) =>
+      state.resume.customSections.find((section) => section.kind === "interests"),
+    ) ?? null;
+  const addCustomSectionItem = useResumeStore((state) => state.addCustomSectionItem);
+  const removeCustomSectionItem = useResumeStore((state) => state.removeCustomSectionItem);
+  const updateCustomSectionItem = useResumeStore((state) => state.updateCustomSectionItem);
 
   const [interestIndex, setInterestIndex] = useState(0);
 
-  const interestsSection =
-    resume.customSections.find((section) => section.kind === "interests") ?? null;
-
   if (!interestsSection) {
     return null;
   }
diff --git a/apps/studio/app/(main)/editor/components/content/sections/LanguagesSection.tsx b/apps/studio/features/resume/editor/content/sections/LanguagesSection.tsx
similarity index 87%
rename from apps/studio/app/(main)/editor/components/content/sections/LanguagesSection.tsx
rename to apps/studio/features/resume/editor/content/sections/LanguagesSection.tsx
index 291e2e1..62a4118 100644
--- a/apps/studio/app/(main)/editor/components/content/sections/LanguagesSection.tsx
+++ b/apps/studio/features/resume/editor/content/sections/LanguagesSection.tsx
@@ -7,7 +7,7 @@ import type { BaseSectionProps } from "./section-types";
 import { Input } from "@veriworkly/ui";
 import { Button } from "@veriworkly/ui";
 
-import { useResume } from "@/features/resume/hooks/use-resume";
+import { useResumeStore } from "@/features/resume/store/resume-store";
 
 import { Field } from "../EditorFormPrimitives";
 import DraggableSection from "./DraggableSection";
@@ -21,14 +21,16 @@ const LanguagesSection = ({
   onDrop,
   onToggle,
 }: BaseSectionProps) => {
-  const { resume, addCustomSectionItem, removeCustomSectionItem, updateCustomSectionItem } =
-    useResume();
+  const languagesSection =
+    useResumeStore((state) =>
+      state.resume.customSections.find((section) => section.kind === "languages"),
+    ) ?? null;
+  const addCustomSectionItem = useResumeStore((state) => state.addCustomSectionItem);
+  const removeCustomSectionItem = useResumeStore((state) => state.removeCustomSectionItem);
+  const updateCustomSectionItem = useResumeStore((state) => state.updateCustomSectionItem);
 
   const [languageIndex, setLanguageIndex] = useState(0);
 
-  const languagesSection =
-    resume.customSections.find((section) => section.kind === "languages") ?? null;
-
   if (!languagesSection) {
     return null;
   }
diff --git a/apps/studio/app/(main)/editor/components/content/sections/LinksSection.tsx b/apps/studio/features/resume/editor/content/sections/LinksSection.tsx
similarity index 82%
rename from apps/studio/app/(main)/editor/components/content/sections/LinksSection.tsx
rename to apps/studio/features/resume/editor/content/sections/LinksSection.tsx
index 6c7eb26..176bd5e 100644
--- a/apps/studio/app/(main)/editor/components/content/sections/LinksSection.tsx
+++ b/apps/studio/features/resume/editor/content/sections/LinksSection.tsx
@@ -5,13 +5,13 @@ import { useState } from "react";
 import { Input } from "@veriworkly/ui";
 import { Button } from "@veriworkly/ui";
 
-import { useResume } from "@/features/resume/hooks/use-resume";
+import { useResumeStore } from "@/features/resume/store/resume-store";
 import { validateLinkItem } from "@/features/resume/utils/validation";
 
 import { Field, invalidClass } from "../EditorFormPrimitives";
 import DraggableSection from "./DraggableSection";
-import { linkTypeOptions } from "../editor-options";
 import type { BaseSectionProps } from "./section-types";
+import { linkTypeOptions } from "@/features/documents/editor/link-options";
 
 const LinksSection = ({
   isOpen,
@@ -21,13 +21,16 @@ const LinksSection = ({
   onDrop,
   onToggle,
 }: BaseSectionProps) => {
-  const { resume, addLinkItem, removeLinkItem, updateLinkItem, updateLinkDisplayMode } =
-    useResume();
+  const links = useResumeStore((state) => state.resume.links);
+  const addLinkItem = useResumeStore((state) => state.addLinkItem);
+  const removeLinkItem = useResumeStore((state) => state.removeLinkItem);
+  const updateLinkItem = useResumeStore((state) => state.updateLinkItem);
+  const updateLinkDisplayMode = useResumeStore((state) => state.updateLinkDisplayMode);
   const [linkIndex, setLinkIndex] = useState(0);
 
-  const safeLinkIndex = Math.min(linkIndex, Math.max(0, resume.links.items.length - 1));
+  const safeLinkIndex = Math.min(linkIndex, Math.max(0, links.items.length - 1));
 
-  const activeLink = resume.links.items[safeLinkIndex];
+  const activeLink = links.items[safeLinkIndex];
   const linkErrors = activeLink ? validateLinkItem(activeLink) : {};
 
   return (
@@ -42,13 +45,13 @@ const LinksSection = ({
       onDragStart={onDragStart}
     >
       <div className="mb-3 flex flex-wrap gap-2">
-        {resume.links.items.length ? (
+        {links.items.length ? (
           <select
             className="border-border bg-background h-10 rounded-xl border px-3 text-sm"
             onChange={(event) => setLinkIndex(Number(event.target.value))}
             value={safeLinkIndex}
           >
-            {resume.links.items.map((item, index) => (
+            {links.items.map((item, index) => (
               <option key={item.id} value={index}>
                 {item.type || `Link ${index + 1}`}
               </option>
@@ -61,7 +64,7 @@ const LinksSection = ({
         </Button>
 
         <Button
-          disabled={!resume.links.items.length}
+          disabled={!links.items.length}
           onClick={() => removeLinkItem(safeLinkIndex)}
           size="sm"
           variant="ghost"
@@ -76,7 +79,7 @@ const LinksSection = ({
           onChange={(event) =>
             updateLinkDisplayMode(event.target.value as "icon" | "url" | "icon-username")
           }
-          value={resume.links.displayMode}
+          value={links.displayMode}
         >
           <option value="icon">Icons only</option>
           <option value="url">URL only</option>
diff --git a/apps/studio/app/(main)/editor/components/content/sections/ProjectsSection.tsx b/apps/studio/features/resume/editor/content/sections/ProjectsSection.tsx
similarity index 90%
rename from apps/studio/app/(main)/editor/components/content/sections/ProjectsSection.tsx
rename to apps/studio/features/resume/editor/content/sections/ProjectsSection.tsx
index 408b785..a3d53f3 100644
--- a/apps/studio/app/(main)/editor/components/content/sections/ProjectsSection.tsx
+++ b/apps/studio/features/resume/editor/content/sections/ProjectsSection.tsx
@@ -5,7 +5,7 @@ import { useMemo, useState } from "react";
 import { Button } from "@veriworkly/ui";
 import { Input } from "@veriworkly/ui";
 
-import { useResume } from "@/features/resume/hooks/use-resume";
+import { useResumeStore } from "@/features/resume/store/resume-store";
 import { validateProject } from "@/features/resume/utils/validation";
 
 import { Field, TextArea, invalidClass, DelimitedTextArea } from "../EditorFormPrimitives";
@@ -20,13 +20,16 @@ const ProjectsSection = ({
   onDrop,
   onToggle,
 }: BaseSectionProps) => {
-  const { addProject, removeProject, resume, updateProject } = useResume();
+  const projects = useResumeStore((state) => state.resume.projects);
+  const addProject = useResumeStore((state) => state.addProject);
+  const removeProject = useResumeStore((state) => state.removeProject);
+  const updateProject = useResumeStore((state) => state.updateProject);
 
   const [projectIndex, setProjectIndex] = useState(0);
 
-  const safeProjectIndex = Math.min(projectIndex, Math.max(0, resume.projects.length - 1));
+  const safeProjectIndex = Math.min(projectIndex, Math.max(0, projects.length - 1));
 
-  const activeProject = resume.projects[safeProjectIndex];
+  const activeProject = projects[safeProjectIndex];
 
   const projectErrors = useMemo(
     () => (activeProject ? validateProject(activeProject) : {}),
@@ -45,13 +48,13 @@ const ProjectsSection = ({
       onDragStart={onDragStart}
     >
       <div className="mb-3 flex flex-wrap gap-2">
-        {resume.projects.length ? (
+        {projects.length ? (
           <select
             className="border-border bg-background h-10 rounded-xl border px-3 text-sm"
             onChange={(event) => setProjectIndex(Number(event.target.value))}
             value={safeProjectIndex}
           >
-            {resume.projects.map((_, index) => (
+            {projects.map((_, index) => (
               <option key={index} value={index}>
                 Project {index + 1}
               </option>
@@ -64,7 +67,7 @@ const ProjectsSection = ({
         </Button>
 
         <Button
-          disabled={resume.projects.length === 0}
+          disabled={projects.length === 0}
           onClick={() => removeProject(safeProjectIndex)}
           size="sm"
           variant="ghost"
diff --git a/apps/studio/app/(main)/editor/components/content/sections/PublicationsSection.tsx b/apps/studio/features/resume/editor/content/sections/PublicationsSection.tsx
similarity index 88%
rename from apps/studio/app/(main)/editor/components/content/sections/PublicationsSection.tsx
rename to apps/studio/features/resume/editor/content/sections/PublicationsSection.tsx
index 165a9cc..7a44deb 100644
--- a/apps/studio/app/(main)/editor/components/content/sections/PublicationsSection.tsx
+++ b/apps/studio/features/resume/editor/content/sections/PublicationsSection.tsx
@@ -5,7 +5,7 @@ import { useState } from "react";
 import { Input } from "@veriworkly/ui";
 import { Button } from "@veriworkly/ui";
 
-import { useResume } from "@/features/resume/hooks/use-resume";
+import { useResumeStore } from "@/features/resume/store/resume-store";
 
 import { Field } from "../EditorFormPrimitives";
 import DraggableSection from "./DraggableSection";
@@ -19,14 +19,16 @@ const PublicationsSection = ({
   onDrop,
   onToggle,
 }: BaseSectionProps) => {
-  const { resume, addCustomSectionItem, removeCustomSectionItem, updateCustomSectionItem } =
-    useResume();
+  const publicationsSection =
+    useResumeStore((state) =>
+      state.resume.customSections.find((section) => section.kind === "publications"),
+    ) ?? null;
+  const addCustomSectionItem = useResumeStore((state) => state.addCustomSectionItem);
+  const removeCustomSectionItem = useResumeStore((state) => state.removeCustomSectionItem);
+  const updateCustomSectionItem = useResumeStore((state) => state.updateCustomSectionItem);
 
   const [publicationIndex, setPublicationIndex] = useState(0);
 
-  const publicationsSection =
-    resume.customSections.find((section) => section.kind === "publications") ?? null;
-
   if (!publicationsSection) {
     return null;
   }
diff --git a/apps/studio/app/(main)/editor/components/content/sections/ReferencesSection.tsx b/apps/studio/features/resume/editor/content/sections/ReferencesSection.tsx
similarity index 90%
rename from apps/studio/app/(main)/editor/components/content/sections/ReferencesSection.tsx
rename to apps/studio/features/resume/editor/content/sections/ReferencesSection.tsx
index 2a63ae3..3e72134 100644
--- a/apps/studio/app/(main)/editor/components/content/sections/ReferencesSection.tsx
+++ b/apps/studio/features/resume/editor/content/sections/ReferencesSection.tsx
@@ -10,7 +10,7 @@ import { Button } from "@veriworkly/ui";
 import { Field } from "../EditorFormPrimitives";
 import DraggableSection from "./DraggableSection";
 
-import { useResume } from "@/features/resume/hooks/use-resume";
+import { useResumeStore } from "@/features/resume/store/resume-store";
 
 const ReferencesSection = ({
   isOpen,
@@ -20,14 +20,16 @@ const ReferencesSection = ({
   onDrop,
   onToggle,
 }: BaseSectionProps) => {
-  const { resume, addCustomSectionItem, removeCustomSectionItem, updateCustomSectionItem } =
-    useResume();
+  const referencesSection =
+    useResumeStore((state) =>
+      state.resume.customSections.find((section) => section.kind === "references"),
+    ) ?? null;
+  const addCustomSectionItem = useResumeStore((state) => state.addCustomSectionItem);
+  const removeCustomSectionItem = useResumeStore((state) => state.removeCustomSectionItem);
+  const updateCustomSectionItem = useResumeStore((state) => state.updateCustomSectionItem);
 
   const [referenceIndex, setReferenceIndex] = useState(0);
 
-  const referencesSection =
-    resume.customSections.find((section) => section.kind === "references") ?? null;
-
   if (!referencesSection) {
     return null;
   }
diff --git a/apps/studio/features/resume/editor/content/sections/SkillsSection.tsx b/apps/studio/features/resume/editor/content/sections/SkillsSection.tsx
new file mode 100644
index 0000000..308ea80
--- /dev/null
+++ b/apps/studio/features/resume/editor/content/sections/SkillsSection.tsx
@@ -0,0 +1,128 @@
+"use client";
+
+import { useMemo, useState } from "react";
+
+import type { BaseSectionProps } from "./section-types";
+
+import { Input } from "@veriworkly/ui";
+import { Button } from "@veriworkly/ui";
+
+import { Field, invalidClass, DelimitedTextArea } from "../EditorFormPrimitives";
+
+import { useResumeStore } from "@/features/resume/store/resume-store";
+import { validateSkillGroup } from "@/features/resume/utils/validation";
+
+import DraggableSection from "./DraggableSection";
+
+const SkillsSection = ({
+  isOpen,
+  onDragEnd,
+  onDragOver,
+  onDragStart,
+  onDrop,
+  onToggle,
+}: BaseSectionProps) => {
+  const skills = useResumeStore((state) => state.resume.skills);
+  const addSkillGroup = useResumeStore((state) => state.addSkillGroup);
+  const removeSkillGroup = useResumeStore((state) => state.removeSkillGroup);
+  const updateSkillGroup = useResumeStore((state) => state.updateSkillGroup);
+
+  const [skillIndex, setSkillIndex] = useState(0);
+
+  const safeSkillIndex = Math.min(skillIndex, Math.max(0, skills.length - 1));
+
+  const activeSkillGroup = skills[safeSkillIndex];
+
+  const skillErrors = useMemo(
+    () => (activeSkillGroup ? validateSkillGroup(activeSkillGroup) : {}),
+    [activeSkillGroup],
+  );
+
+  return (
+    <DraggableSection
+      id="skills"
+      label="Skills"
+      isOpen={isOpen}
+      onDrop={onDrop}
+      onToggle={onToggle}
+      onDragEnd={onDragEnd}
+      onDragOver={onDragOver}
+      onDragStart={onDragStart}
+    >
+      <div className="mb-3 flex flex-wrap gap-2">
+        {skills.length ? (
+          <select
+            className="border-border bg-background h-10 rounded-xl border px-3 text-sm"
+            onChange={(event) => setSkillIndex(Number(event.target.value))}
+            value={safeSkillIndex}
+          >
+            {skills.map((item, index) => (
+              <option key={item.id} value={index}>
+                {item.name || `Group ${index + 1}`}
+              </option>
+            ))}
+          </select>
+        ) : null}
+
+        <Button onClick={addSkillGroup} size="sm" variant="secondary">
+          Add
+        </Button>
+
+        <Button
+          disabled={skills.length === 0}
+          onClick={() => removeSkillGroup(safeSkillIndex)}
+          size="sm"
+          variant="ghost"
+        >
+          Remove
+        </Button>
+      </div>
+
+      {activeSkillGroup ? (
+        <>
+          <Field error={skillErrors.name} label="Group name">
+            <Input
+              className={invalidClass(skillErrors.name)}
+              onChange={(event) =>
+                updateSkillGroup(safeSkillIndex, {
+                  name: event.target.value,
+                })
+              }
+              value={activeSkillGroup.name}
+            />
+          </Field>
+
+          <Field error={skillErrors.keywords} label="Keywords (comma separated)">
+            <DelimitedTextArea
+              key={activeSkillGroup.id}
+              value={activeSkillGroup.keywords}
+              className={invalidClass(skillErrors.keywords)}
+              onChange={(nextKeywords) =>
+                updateSkillGroup(safeSkillIndex, {
+                  keywords: nextKeywords,
+                })
+              }
+            />
+          </Field>
+
+          {activeSkillGroup.keywords.length ? (
+            <div className="flex flex-wrap gap-2">
+              {activeSkillGroup.keywords.map((keyword) => (
+                <span
+                  className="border-border bg-background text-muted rounded-full border px-3 py-1 text-xs font-medium"
+                  key={keyword}
+                >
+                  {keyword}
+                </span>
+              ))}
+            </div>
+          ) : null}
+        </>
+      ) : (
+        <p className="text-muted text-sm">No skill groups yet. Click Add to create one.</p>
+      )}
+    </DraggableSection>
+  );
+};
+
+export default SkillsSection;
diff --git a/apps/studio/app/(main)/editor/components/content/sections/SummarySection.tsx b/apps/studio/features/resume/editor/content/sections/SummarySection.tsx
similarity index 77%
rename from apps/studio/app/(main)/editor/components/content/sections/SummarySection.tsx
rename to apps/studio/features/resume/editor/content/sections/SummarySection.tsx
index 4aca85c..18d93a5 100644
--- a/apps/studio/app/(main)/editor/components/content/sections/SummarySection.tsx
+++ b/apps/studio/features/resume/editor/content/sections/SummarySection.tsx
@@ -4,7 +4,7 @@ import type { BaseSectionProps } from "./section-types";
 
 import { cn } from "@/lib/utils";
 
-import { useResume } from "@/features/resume/hooks/use-resume";
+import { useResumeStore } from "@/features/resume/store/resume-store";
 import { validateSummary } from "@/features/resume/utils/validation";
 
 import DraggableSection from "./DraggableSection";
@@ -18,9 +18,10 @@ const SummarySection = ({
   onDrop,
   onToggle,
 }: BaseSectionProps) => {
-  const { resume, updateSummary } = useResume();
+  const summary = useResumeStore((state) => state.resume.summary);
+  const updateSummary = useResumeStore((state) => state.updateSummary);
 
-  const summaryErrors = validateSummary(resume.summary);
+  const summaryErrors = validateSummary(summary);
 
   return (
     <DraggableSection
@@ -37,7 +38,7 @@ const SummarySection = ({
         <TextArea
           className={cn("min-h-40", invalidClass(summaryErrors.summary))}
           onChange={(event) => updateSummary(event.target.value)}
-          value={resume.summary}
+          value={summary}
         />
       </Field>
     </DraggableSection>
diff --git a/apps/studio/app/(main)/editor/components/content/sections/VolunteerSection.tsx b/apps/studio/features/resume/editor/content/sections/VolunteerSection.tsx
similarity index 89%
rename from apps/studio/app/(main)/editor/components/content/sections/VolunteerSection.tsx
rename to apps/studio/features/resume/editor/content/sections/VolunteerSection.tsx
index 999a865..4ea4262 100644
--- a/apps/studio/app/(main)/editor/components/content/sections/VolunteerSection.tsx
+++ b/apps/studio/features/resume/editor/content/sections/VolunteerSection.tsx
@@ -10,7 +10,7 @@ import { Button } from "@veriworkly/ui";
 import DraggableSection from "./DraggableSection";
 import { Field, TextArea } from "../EditorFormPrimitives";
 
-import { useResume } from "@/features/resume/hooks/use-resume";
+import { useResumeStore } from "@/features/resume/store/resume-store";
 
 const VolunteerSection = ({
   isOpen,
@@ -20,14 +20,16 @@ const VolunteerSection = ({
   onDrop,
   onToggle,
 }: BaseSectionProps) => {
-  const { resume, addCustomSectionItem, removeCustomSectionItem, updateCustomSectionItem } =
-    useResume();
+  const volunteerSection =
+    useResumeStore((state) =>
+      state.resume.customSections.find((section) => section.kind === "volunteer"),
+    ) ?? null;
+  const addCustomSectionItem = useResumeStore((state) => state.addCustomSectionItem);
+  const removeCustomSectionItem = useResumeStore((state) => state.removeCustomSectionItem);
+  const updateCustomSectionItem = useResumeStore((state) => state.updateCustomSectionItem);
 
   const [volunteerIndex, setVolunteerIndex] = useState(0);
 
-  const volunteerSection =
-    resume.customSections.find((section) => section.kind === "volunteer") ?? null;
-
   if (!volunteerSection) {
     return null;
   }
diff --git a/apps/studio/app/(main)/editor/components/content/sections/section-types.ts b/apps/studio/features/resume/editor/content/sections/section-types.ts
similarity index 100%
rename from apps/studio/app/(main)/editor/components/content/sections/section-types.ts
rename to apps/studio/features/resume/editor/content/sections/section-types.ts
diff --git a/apps/studio/app/(main)/editor/components/settings/AdvancedThemeSettings.tsx b/apps/studio/features/resume/editor/settings/AdvancedThemeSettings.tsx
similarity index 100%
rename from apps/studio/app/(main)/editor/components/settings/AdvancedThemeSettings.tsx
rename to apps/studio/features/resume/editor/settings/AdvancedThemeSettings.tsx
diff --git a/apps/studio/app/(main)/editor/components/settings/SectionVisibilitySettings.tsx b/apps/studio/features/resume/editor/settings/SectionVisibilitySettings.tsx
similarity index 100%
rename from apps/studio/app/(main)/editor/components/settings/SectionVisibilitySettings.tsx
rename to apps/studio/features/resume/editor/settings/SectionVisibilitySettings.tsx
diff --git a/apps/studio/app/(main)/editor/components/settings/SettingControls.tsx b/apps/studio/features/resume/editor/settings/SettingControls.tsx
similarity index 100%
rename from apps/studio/app/(main)/editor/components/settings/SettingControls.tsx
rename to apps/studio/features/resume/editor/settings/SettingControls.tsx
diff --git a/apps/studio/app/(main)/editor/components/toolbar/ToolbarSecondaryActions.tsx b/apps/studio/features/resume/editor/toolbar/ToolbarSecondaryActions.tsx
similarity index 87%
rename from apps/studio/app/(main)/editor/components/toolbar/ToolbarSecondaryActions.tsx
rename to apps/studio/features/resume/editor/toolbar/ToolbarSecondaryActions.tsx
index 6aac1dd..88e2031 100644
--- a/apps/studio/app/(main)/editor/components/toolbar/ToolbarSecondaryActions.tsx
+++ b/apps/studio/features/resume/editor/toolbar/ToolbarSecondaryActions.tsx
@@ -5,6 +5,7 @@ import { useRouter } from "next/navigation";
 import { Button } from "@veriworkly/ui";
 
 import { useResume } from "@/features/resume/hooks/use-resume";
+import { getDocumentPreviewPath } from "@/features/documents/core/routes";
 
 interface ToolbarSecondaryActionsProps {
   resumeId: string;
@@ -26,7 +27,7 @@ const ToolbarSecondaryActions = ({
       <Button
         size="sm"
         variant="secondary"
-        onClick={() => router.push(`/editor/resume/${resumeId}/preview`)}
+        onClick={() => router.push(getDocumentPreviewPath("RESUME", resumeId))}
       >
         Full Preview
       </Button>
diff --git a/apps/studio/app/(main)/editor/components/toolbar/useToolbarDownloads.ts b/apps/studio/features/resume/editor/toolbar/useToolbarDownloads.ts
similarity index 100%
rename from apps/studio/app/(main)/editor/components/toolbar/useToolbarDownloads.ts
rename to apps/studio/features/resume/editor/toolbar/useToolbarDownloads.ts
diff --git a/apps/studio/features/resume/store/resume-store.ts b/apps/studio/features/resume/store/resume-store.ts
index 0dad859..b97f7da 100644
--- a/apps/studio/features/resume/store/resume-store.ts
+++ b/apps/studio/features/resume/store/resume-store.ts
@@ -256,7 +256,7 @@ export const useResumeStore = create<ResumeStoreState>((set, get) => ({
 
   removeSkillGroup: (index) =>
     set((state) => {
-      if (state.resume.skills.length <= 1) {
+      if (state.resume.skills.length === 0) {
         return state;
       }
 
@@ -401,7 +401,7 @@ export const useResumeStore = create<ResumeStoreState>((set, get) => ({
 
   removeEducation: (index) =>
     set((state) => {
-      if (state.resume.education.length <= 1) {
+      if (state.resume.education.length === 0) {
         return state;
       }
 
diff --git a/apps/studio/tests/contracts/document-workspace-service.contract.test.ts b/apps/studio/tests/contracts/document-workspace-service.contract.test.ts
new file mode 100644
index 0000000..cc81c42
--- /dev/null
+++ b/apps/studio/tests/contracts/document-workspace-service.contract.test.ts
@@ -0,0 +1,98 @@
+import { beforeEach, afterEach, describe, expect, it, vi } from "vitest";
+
+import type { BaseDocument } from "@/features/documents/core/types";
+import { defaultResume } from "@/features/resume/constants/default-resume";
+import {
+  saveDocument,
+  deleteDocument,
+  loadDocumentById,
+} from "@/features/documents/services/document-workspace-service";
+
+function createLocalStorageMock() {
+  const store = new Map<string, string>();
+
+  return {
+    getItem: vi.fn((key: string) => store.get(key) ?? null),
+    setItem: vi.fn((key: string, value: string) => {
+      store.set(key, value);
+    }),
+    removeItem: vi.fn((key: string) => {
+      store.delete(key);
+    }),
+    clear: vi.fn(() => {
+      store.clear();
+    }),
+  };
+}
+
+function createResumeDocument(id: string): BaseDocument {
+  const now = new Date().toISOString();
+  const title = `Resume ${id}`;
+  const resume = {
+    ...structuredClone(defaultResume),
+    id,
+    updatedAt: now,
+    basics: {
+      ...defaultResume.basics,
+      fullName: title,
+    },
+  };
+
+  return {
+    id,
+    type: "RESUME",
+    title,
+    templateId: resume.templateId,
+    content: resume,
+    updatedAt: now,
+    sync: resume.sync,
+  };
+}
+
+describe("document workspace service", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+
+    const localStorageMock = createLocalStorageMock();
+
+    vi.stubGlobal("localStorage", localStorageMock);
+    vi.stubGlobal("window", {
+      localStorage: localStorageMock,
+      setTimeout: globalThis.setTimeout,
+      clearTimeout: globalThis.clearTimeout,
+      dispatchEvent: vi.fn(),
+    });
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.unstubAllGlobals();
+  });
+
+  it("keeps debounced saves isolated by document id", () => {
+    const first = createResumeDocument("resume-a");
+    const second = createResumeDocument("resume-b");
+
+    expect(saveDocument(first, { debounceMs: 300 })).toEqual({ ok: true, queued: true });
+    expect(saveDocument(second, { debounceMs: 300 })).toEqual({ ok: true, queued: true });
+
+    vi.advanceTimersByTime(300);
+
+    expect(loadDocumentById("RESUME", first.id)?.title).toBe(first.title);
+    expect(loadDocumentById("RESUME", second.id)?.title).toBe(second.title);
+  });
+
+  it("only clears the deleted document's pending save", () => {
+    const first = createResumeDocument("resume-delete");
+    const second = createResumeDocument("resume-keep");
+
+    saveDocument(first, { debounceMs: 300 });
+    saveDocument(second, { debounceMs: 300 });
+    deleteDocument("RESUME", first.id);
+
+    vi.advanceTimersByTime(300);
+
+    expect(loadDocumentById("RESUME", first.id)).toBeNull();
+    expect(loadDocumentById("RESUME", second.id)?.title).toBe(second.title);
+  });
+});
diff --git a/apps/studio/tests/contracts/resume-store.contract.test.ts b/apps/studio/tests/contracts/resume-store.contract.test.ts
new file mode 100644
index 0000000..8c0e625
--- /dev/null
+++ b/apps/studio/tests/contracts/resume-store.contract.test.ts
@@ -0,0 +1,47 @@
+import { describe, expect, it, beforeEach } from "vitest";
+
+import { defaultResume } from "@/features/resume/constants/default-resume";
+import { useResumeStore } from "@/features/resume/store/resume-store";
+import type { ResumeData } from "@/types/resume";
+
+function cloneResume(resume: ResumeData): ResumeData {
+  return JSON.parse(JSON.stringify(resume)) as ResumeData;
+}
+
+describe("resume store", () => {
+  beforeEach(() => {
+    useResumeStore.getState().setResume(cloneResume(defaultResume));
+  });
+
+  it("allows education entries to be cleared completely", () => {
+    const { education } = useResumeStore.getState().resume;
+
+    expect(education.length).toBeGreaterThan(0);
+
+    for (let index = education.length - 1; index >= 0; index -= 1) {
+      useResumeStore.getState().removeEducation(index);
+    }
+
+    expect(useResumeStore.getState().resume.education).toEqual([]);
+
+    useResumeStore.getState().removeEducation(0);
+
+    expect(useResumeStore.getState().resume.education).toEqual([]);
+  });
+
+  it("allows skill groups to be cleared completely", () => {
+    const { skills } = useResumeStore.getState().resume;
+
+    expect(skills.length).toBeGreaterThan(0);
+
+    for (let index = skills.length - 1; index >= 0; index -= 1) {
+      useResumeStore.getState().removeSkillGroup(index);
+    }
+
+    expect(useResumeStore.getState().resume.skills).toEqual([]);
+
+    useResumeStore.getState().removeSkillGroup(0);
+
+    expect(useResumeStore.getState().resume.skills).toEqual([]);
+  });
+});