diff --git a/README.md b/README.md
index afc14d5..1b1eb1a 100644
--- a/README.md
+++ b/README.md
@@ -42,19 +42,36 @@ All while maintaining **100% open-source transparency** and enabling self-hostin
 
 ## Templates
 
+### Resume Templates
+
 <table>
   <tr>
     <td align="center">
-      <img src="apps/studio/public/templates/precision-ats.png" alt="Precision ATS" width="300" />
+      <img src="apps/studio/public/templates/resume/precision-ats.png" alt="Precision ATS" width="300" />
       <br /><sub><b>Precision ATS</b></sub>
     </td>
     <td align="center">
-      <img src="apps/studio/public/templates/executive-clarity.png" alt="Executive Clarity" width="300" />
+      <img src="apps/studio/public/templates/resume/executive-clarity.png" alt="Executive Clarity" width="300" />
       <br /><sub><b>Executive Clarity</b></sub>
     </td>
   </tr>
 </table>
 
+### Cover Letter Templates
+
+<table>
+  <tr>
+    <td align="center">
+      <img src="apps/studio/public/templates/cover-letter/professional.png" alt="Professional" width="300" />
+      <br /><sub><b>Professional</b></sub>
+    </td>
+    <td align="center">
+      <img src="apps/studio/public/templates/cover-letter/veriworkly-special.png" alt="Veriworkly Special" width="300" />
+      <br /><sub><b>Veriworkly Special</b></sub>
+    </td>
+  </tr>
+</table>
+
 ## Architecture and Technology Stack
 
 VeriWorkly utilizes a modern, type-safe monorepo architecture to ensure service isolation and scalability.
diff --git a/apps/studio/components/dashboard/StudioShell.tsx b/apps/studio/components/dashboard/StudioShell.tsx
index 569dc4c..db761e8 100644
--- a/apps/studio/components/dashboard/StudioShell.tsx
+++ b/apps/studio/components/dashboard/StudioShell.tsx
@@ -17,11 +17,13 @@ import {
 } from "@/components/dashboard/StudioNavigation";
 import { ThemeToggle } from "@/components/dashboard/ThemeToggle";
 import { AccountMenu } from "@/components/dashboard/AccountMenu";
-import { NewDocumentButton } from "@/components/dashboard/NewDocumentModal";
+import { NewDocumentButton, NewDocumentModal } from "@/components/dashboard/NewDocumentModal";
 import { WorkspaceSearchModal } from "@/components/dashboard/WorkspaceSearchModal";
 
 import { createResume } from "@/features/resume/services/resume-service";
 import { signOutCurrentUser } from "@/features/auth/services/current-user";
+import { createDocument } from "@/features/documents/services/document-workspace-service";
+import type { DocumentType } from "@/features/documents/core/document-types";
 
 import { cn } from "@/lib/utils";
 
@@ -43,13 +45,21 @@ const StudioShell = ({ children, mainClassName }: StudioShellProps) => {
   const [collapsed, setCollapsed] = useState(false);
   const [searchOpen, setSearchOpen] = useState(false);
   const [mobileNavOpen, setMobileNavOpen] = useState(false);
+  const [newDocumentOpen, setNewDocumentOpen] = useState(false);
 
   const email = user?.email || "No account connected";
   const displayName = user?.name || user?.email?.split("@")[0] || "Local builder";
 
-  const createNewResume = () => {
-    const resume = createResume();
-    router.push(`/editor/resume/${resume.id}`);
+  const createNewDocument = (type: DocumentType) => {
+    if (type === "RESUME") {
+      const resume = createResume();
+      router.push(`/editor/resume/${resume.id}`);
+
+      return;
+    }
+
+    const document = createDocument(type);
+    router.push(`/editor/${type.toLowerCase()}/${document.id}`);
   };
 
   const handleLogout = async () => {
@@ -126,7 +136,7 @@ const StudioShell = ({ children, mainClassName }: StudioShellProps) => {
         </div>
 
         <div className="px-2">
-          <NewDocumentButton collapsed={collapsed} onClick={createNewResume} />
+          <NewDocumentButton collapsed={collapsed} onClick={() => setNewDocumentOpen(true)} />
         </div>
 
         {!collapsed ? (
@@ -187,7 +197,7 @@ const StudioShell = ({ children, mainClassName }: StudioShellProps) => {
           </Link>
 
           <div className="flex items-center gap-2">
-            <NewDocumentButton compact onClick={createNewResume} />
+            <NewDocumentButton compact onClick={() => setNewDocumentOpen(true)} />
 
             <button
               type="button"
@@ -231,6 +241,12 @@ const StudioShell = ({ children, mainClassName }: StudioShellProps) => {
           onOpenDocument={(id) => router.push(`/editor/resume/${id}`)}
         />
 
+        <NewDocumentModal
+          open={newDocumentOpen}
+          onCreate={createNewDocument}
+          onClose={() => setNewDocumentOpen(false)}
+        />
+
         <div
           className={cn(
             "relative min-w-0 flex-1 bg-[radial-gradient(circle_at_top_left,color-mix(in_oklab,var(--accent)_13%,transparent),transparent_28rem),linear-gradient(180deg,color-mix(in_oklab,var(--card)_62%,var(--background)),var(--background)_18rem)] p-4 sm:p-6 xl:p-8",
diff --git a/apps/studio/features/cover-letter/defaults.ts b/apps/studio/features/cover-letter/defaults.ts
index d0180d7..5fecb3d 100644
--- a/apps/studio/features/cover-letter/defaults.ts
+++ b/apps/studio/features/cover-letter/defaults.ts
@@ -2,16 +2,18 @@ import type { BaseDocument } from "@/features/documents/core/types";
 
 import type { CoverLetterContent } from "./types";
 
-export const COVER_LETTER_TEMPLATE_ID = "cover-letter-classic";
+export const COVER_LETTER_TEMPLATE_ID = "professional";
 
 export function createDefaultCoverLetter(id: string): BaseDocument<CoverLetterContent> {
   const now = new Date().toISOString();
   return {
     id,
     type: "COVER_LETTER",
-    title: "Cover Letter",
+    title: "Product Engineer - Veriworkly",
     templateId: COVER_LETTER_TEMPLATE_ID,
+
     updatedAt: now,
+
     sync: {
       enabled: false,
       status: "local-only",
@@ -19,16 +21,62 @@ export function createDefaultCoverLetter(id: string): BaseDocument<CoverLetterCo
       lastSyncedAt: null,
       revision: 1,
     },
+
     content: {
-      recipientName: "",
-      recipientTitle: "",
-      companyName: "",
-      subject: "",
-      greeting: "Dear Hiring Manager,",
-      opening: "",
-      body: "",
+      senderName: "Veriworkly User",
+      senderTitle: "Product Engineer",
+      senderEmail: "user@veriworkly.com",
+      senderPhone: "+1 (555) 010-2026",
+      senderLocation: "Remote",
+      senderWebsite: "veriworkly.com",
+      senderLinks: "",
+
+      links: {
+        displayMode: "icon-username",
+        items: [],
+      },
+
+      date: new Intl.DateTimeFormat("en", {
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+      }).format(new Date()),
+
+      recipientName: "Veriworkly Hiring Team",
+      recipientTitle: "Product and Engineering",
+
+      companyName: "Veriworkly",
+      companyLocation: "Remote",
+
+      jobTitle: "Product Engineer",
+      subject: "Application for Product Engineer at Veriworkly",
+
+      greeting: "Dear Veriworkly Hiring Team,",
+
+      opening:
+        "I am excited to apply for the Product Engineer role at Veriworkly. The product mission is close to the work I care about: helping people present credible professional documents, move faster through career workflows, and keep their materials consistent across resume, cover letter, and document experiences.",
+
+      body: "I would bring a practical product engineering mindset to Veriworkly. I enjoy building polished document editors, export flows, cloud sync, sharing, and preview experiences that feel dependable for real users. I care about details like autosave behavior, hydration-safe rendering, reusable document actions, and templates that help users start with strong defaults instead of a blank page.\n\nVeriworkly stands out because it combines user-facing craft with systems that need to be trustworthy: local drafts, public links, document exports, and collaboration between dashboard and editor surfaces. I would be excited to help make those workflows sharper, faster, and easier to maintain.",
+
+      highlights:
+        "- Built React and TypeScript document workflows with live preview, export, and autosave behavior\n- Improved shared UI actions so resumes, cover letters, and other documents behave consistently\n- Debugged hydration, routing, and local-storage edge cases in Next.js applications",
+
       closing: "Sincerely,",
-      signature: "",
+      signature: "Veriworkly User",
+
+      postscript:
+        "I would welcome the chance to help Veriworkly make professional document creation feel faster, clearer, and more reliable.",
+
+      appearance: {
+        fontFamily: "geist",
+        pageMargin: 40,
+        paragraphSpacing: 10,
+        lineHeight: 1.5,
+        accentColor: "#2563eb",
+        sidebarColor: "#f8fafc",
+        pageColor: "#ffffff",
+        textColor: "#18181b",
+      },
     },
   };
 }
diff --git a/apps/studio/features/cover-letter/editor/CoverLetterEditor.tsx b/apps/studio/features/cover-letter/editor/CoverLetterEditor.tsx
index d9e9927..6593fb2 100644
--- a/apps/studio/features/cover-letter/editor/CoverLetterEditor.tsx
+++ b/apps/studio/features/cover-letter/editor/CoverLetterEditor.tsx
@@ -1,44 +1,790 @@
 "use client";
 
-import { useMemo } from "react";
+import { useEffect, useRef, useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { FileSearch, PanelLeftClose, PanelLeftOpen } from "lucide-react";
+import { toast } from "sonner";
+
+import { Button, Card, Input, Select, TextArea } from "@veriworkly/ui";
 
 import {
+  deleteDocument,
   loadDocumentById,
   saveDocument,
 } from "@/features/documents/services/document-workspace-service";
-import type { CoverLetterContent } from "@/features/cover-letter/types";
+import { exportDocumentByType } from "@/features/documents/export/export-dispatcher";
+import type { BaseDocument, ExportFormat } from "@/features/documents/core/types";
+import { templateCatalogByType } from "@/features/documents/core/template-catalog";
+import { fontOptions, type FontFamilyId } from "@/features/documents/constants/fonts";
+import type { CoverLetterAppearance, CoverLetterContent } from "@/features/cover-letter/types";
+import { CoverLetterPreview } from "@/templates/cover-letter/web";
+import { createDefaultCoverLetter } from "@/features/cover-letter/defaults";
+import ShareDocumentModal from "@/components/modals/ShareDocumentModal";
+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 { linkTypeOptions } from "@/app/(main)/editor/components/content/editor-options";
+import { cn } from "@/lib/utils";
+import type { ResumeLinkDisplayMode, ResumeLinkItem, ResumeLinkType } from "@/types/resume";
 
 interface Props {
   documentId: string;
 }
 
-export default function CoverLetterEditor({ documentId }: Props) {
-  const doc = useMemo(() => loadDocumentById("COVER_LETTER", documentId), [documentId]);
+type EditorPanel = "content" | "settings";
 
-  if (!doc) return <p className="text-muted-foreground text-sm">Cover letter not found.</p>;
+function getInitialDocument(documentId: string) {
+  return loadDocumentById("COVER_LETTER", documentId) as BaseDocument<CoverLetterContent> | null;
+}
 
-  const content = doc.content as CoverLetterContent;
+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 (
-    <div className="mx-auto max-w-3xl space-y-4 py-8">
-      <h1 className="text-2xl font-semibold">{doc.title}</h1>
-      <textarea
-        className="min-h-96 w-full rounded-md border p-4"
-        value={[content.greeting, content.opening, content.body, content.closing, content.signature]
-          .filter(Boolean)
-          .join("\n\n")}
-        onChange={(event) => {
-          const value = event.target.value;
-          saveDocument({
-            ...doc,
-            updatedAt: new Date().toISOString(),
-            content: {
-              ...content,
-              body: value,
-            },
-          });
-        }}
+    <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 default function CoverLetterEditor({ documentId }: Props) {
+  const router = useRouter();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [doc, setDoc] = useState<BaseDocument<CoverLetterContent> | null>(null);
+  const [hydrated, setHydrated] = useState(false);
+  const [panelOpen, setPanelOpen] = useState(true);
+  const [activePanel, setActivePanel] = useState<EditorPanel>("content");
+  const [activeTab, setActiveTab] = useState<"editor" | "preview">("editor");
+  const [activeDownload, setActiveDownload] = useState<ExportFormat | null>(null);
+  const [message, setMessage] = useState("Autosave ready");
+  const [shareModalOpen, setShareModalOpen] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    queueMicrotask(() => {
+      if (cancelled) return;
+      setDoc(getInitialDocument(documentId));
+      setHydrated(true);
+    });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [documentId]);
+
+  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>
+    );
+  }
+
+  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>
+    );
+  }
+
+  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 =
+        typeof parsed === "object" && parsed && "content" in parsed
+          ? (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(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}
+
+          <Button
+            size="sm"
+            variant="secondary"
+            onClick={() => router.push(`/editor/cover_letter/${currentDoc.id}/preview`)}
+          >
+            Full Preview
+          </Button>
+
+          <Button size="sm" variant="secondary" onClick={saveCurrentDocument}>
+            Save
+          </Button>
+
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept="application/json"
+            className="hidden"
+            onChange={(event) => void importJson(event.target.files?.[0])}
+          />
+
+          <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={() => 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");
+            }}
+          />
+        </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>
+
+      {shareModalOpen ? (
+        <ShareDocumentModal
+          documentId={null}
+          document={{
+            source: "document",
+            id: currentDoc.id,
+            type: "COVER_LETTER",
+            title: currentDoc.title,
+            description: content.subject || content.jobTitle || "Cover letter",
+            templateId: currentDoc.templateId,
+            templateName: "Cover Letter",
+            templateDescription: "Cover letter",
+            previewImage: "",
+            updatedAt: currentDoc.updatedAt,
+            sync: currentDoc.sync,
+          }}
+          onClose={() => setShareModalOpen(false)}
+        />
+      ) : null}
     </div>
   );
 }
+
+function EditorBlock({ children, title }: { children: React.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/render/pdf.tsx b/apps/studio/features/cover-letter/render/pdf.tsx
deleted file mode 100644
index 88c3dcb..0000000
--- a/apps/studio/features/cover-letter/render/pdf.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Page, Text, View, Document, StyleSheet } from "@react-pdf/renderer";
-
-import type { CoverLetterContent } from "@/features/cover-letter/types";
-
-const styles = StyleSheet.create({
-  page: { padding: 40, fontSize: 11, lineHeight: 1.5 },
-  paragraph: { marginBottom: 10 },
-});
-
-export function CoverLetterPdf({ content }: { content: CoverLetterContent }) {
-  return (
-    <Document>
-      <Page size="A4" style={styles.page}>
-        <View>
-          {[content.greeting, content.opening, content.body, content.closing, content.signature]
-            .filter(Boolean)
-            .map((line, index) => (
-              <Text key={index} style={styles.paragraph}>
-                {line}
-              </Text>
-            ))}
-        </View>
-      </Page>
-    </Document>
-  );
-}
diff --git a/apps/studio/features/cover-letter/render/web.tsx b/apps/studio/features/cover-letter/render/web.tsx
deleted file mode 100644
index 5373714..0000000
--- a/apps/studio/features/cover-letter/render/web.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import type { CoverLetterContent } from "@/features/cover-letter/types";
-
-export function renderCoverLetterWeb(content: CoverLetterContent) {
-  return [content.greeting, content.opening, content.body, content.closing, content.signature]
-    .filter(Boolean)
-    .join("\n\n");
-}
diff --git a/apps/studio/features/cover-letter/schema.ts b/apps/studio/features/cover-letter/schema.ts
index 1954ac9..af80d82 100644
--- a/apps/studio/features/cover-letter/schema.ts
+++ b/apps/studio/features/cover-letter/schema.ts
@@ -1,6 +1,9 @@
+import type { CoverLetterContent } from "./types";
+import type { ResumeLinkDisplayMode, ResumeLinkItem, ResumeLinkType } from "@/types/resume";
+
 import type { BaseDocument } from "@/features/documents/core/types";
 
-import type { CoverLetterContent } from "./types";
+import { normalizeFontFamilyId } from "@/features/documents/constants/fonts";
 
 function isRecord(value: unknown): value is Record<string, unknown> {
   return typeof value === "object" && value !== null;
@@ -10,11 +13,57 @@ function asText(value: unknown): string {
   return typeof value === "string" ? value : "";
 }
 
+function asNumber(value: unknown, fallback: number): number {
+  return typeof value === "number" && Number.isFinite(value) ? value : fallback;
+}
+
+const LINK_TYPES: ResumeLinkType[] = [
+  "github",
+  "linkedin",
+  "dribbble",
+  "twitter",
+  "portfolio",
+  "behance",
+  "medium",
+  "youtube",
+  "custom",
+];
+
+function parseLinks(value: unknown): CoverLetterContent["links"] {
+  if (!isRecord(value)) return { displayMode: "icon-username", items: [] };
+  const displayMode =
+    value.displayMode === "icon" ||
+    value.displayMode === "url" ||
+    value.displayMode === "icon-username"
+      ? (value.displayMode as ResumeLinkDisplayMode)
+      : "icon-username";
+
+  const items = Array.isArray(value.items)
+    ? value.items
+        .filter(isRecord)
+        .map(
+          (item, index): ResumeLinkItem => ({
+            id: asText(item.id) || `cover-letter-link-${index + 1}`,
+            type: LINK_TYPES.includes(item.type as ResumeLinkType)
+              ? (item.type as ResumeLinkType)
+              : "custom",
+            label: asText(item.label),
+            url: asText(item.url),
+          }),
+        )
+        .filter((item) => item.url)
+    : [];
+
+  return { displayMode, items };
+}
+
 export function parseCoverLetterDocument(input: unknown): BaseDocument<CoverLetterContent> | null {
   if (!isRecord(input) || input.type !== "COVER_LETTER") return null;
   if (typeof input.id !== "string" || typeof input.templateId !== "string") return null;
 
   const contentRaw = isRecord(input.content) ? input.content : {};
+  const appearanceRaw = isRecord(contentRaw.appearance) ? contentRaw.appearance : {};
+
   return {
     id: input.id,
     type: "COVER_LETTER",
@@ -39,15 +88,43 @@ export function parseCoverLetterDocument(input: unknown): BaseDocument<CoverLett
           revision: 1,
         },
     content: {
+      senderName: asText(contentRaw.senderName),
+      senderTitle: asText(contentRaw.senderTitle),
+      senderEmail: asText(contentRaw.senderEmail),
+      senderPhone: asText(contentRaw.senderPhone),
+      senderLocation: asText(contentRaw.senderLocation),
+      senderWebsite: asText(contentRaw.senderWebsite),
+      senderLinks: asText(contentRaw.senderLinks),
+
+      links: parseLinks(contentRaw.links),
+      date: asText(contentRaw.date),
+
       recipientName: asText(contentRaw.recipientName),
       recipientTitle: asText(contentRaw.recipientTitle),
+
       companyName: asText(contentRaw.companyName),
+      companyLocation: asText(contentRaw.companyLocation),
+
+      jobTitle: asText(contentRaw.jobTitle),
       subject: asText(contentRaw.subject),
       greeting: asText(contentRaw.greeting),
       opening: asText(contentRaw.opening),
       body: asText(contentRaw.body),
+      highlights: asText(contentRaw.highlights),
       closing: asText(contentRaw.closing),
       signature: asText(contentRaw.signature),
+      postscript: asText(contentRaw.postscript),
+
+      appearance: {
+        fontFamily: normalizeFontFamilyId(asText(appearanceRaw.fontFamily)),
+        pageMargin: asNumber(appearanceRaw.pageMargin, 44),
+        paragraphSpacing: asNumber(appearanceRaw.paragraphSpacing, 12),
+        lineHeight: asNumber(appearanceRaw.lineHeight, 1.55),
+        accentColor: asText(appearanceRaw.accentColor) || "#2563eb",
+        sidebarColor: asText(appearanceRaw.sidebarColor) || "#111827",
+        pageColor: asText(appearanceRaw.pageColor) || "#ffffff",
+        textColor: asText(appearanceRaw.textColor) || "#18181b",
+      },
     },
   };
 }
diff --git a/apps/studio/features/cover-letter/types.ts b/apps/studio/features/cover-letter/types.ts
index ff5e34d..08d9b09 100644
--- a/apps/studio/features/cover-letter/types.ts
+++ b/apps/studio/features/cover-letter/types.ts
@@ -1,11 +1,50 @@
+import type { ResumeLinkDisplayMode, ResumeLinkItem } from "@/types/resume";
+import type { FontFamilyId } from "@/features/documents/constants/fonts";
+
 export interface CoverLetterContent {
+  senderName: string;
+  senderTitle: string;
+  senderEmail: string;
+  senderPhone: string;
+  senderLinks: string;
+  senderWebsite: string;
+  senderLocation: string;
+
+  links: {
+    displayMode: ResumeLinkDisplayMode;
+    items: ResumeLinkItem[];
+  };
+
+  date: string;
+
   recipientName: string;
   recipientTitle: string;
+
   companyName: string;
+  companyLocation: string;
+
+  jobTitle: string;
   subject: string;
   greeting: string;
   opening: string;
   body: string;
+  highlights: string;
   closing: string;
   signature: string;
+  postscript: string;
+
+  appearance: CoverLetterAppearance;
+}
+
+export type CoverLetterTemplateId = "professional" | "veriworkly-special";
+
+export interface CoverLetterAppearance {
+  fontFamily: FontFamilyId;
+  pageMargin: number;
+  paragraphSpacing: number;
+  lineHeight: number;
+  accentColor: string;
+  sidebarColor: string;
+  pageColor: string;
+  textColor: string;
 }
diff --git a/apps/studio/features/documents/core/registry.tsx b/apps/studio/features/documents/core/registry.tsx
index 4095a5b..3f8e292 100644
--- a/apps/studio/features/documents/core/registry.tsx
+++ b/apps/studio/features/documents/core/registry.tsx
@@ -85,7 +85,7 @@ export const documentRegistry: Record<DocumentType, DocumentDefinition> = {
     label: "Cover Letter",
     icon: "Mail",
     defaultTemplateId: COVER_LETTER_TEMPLATE_ID,
-    exportFormats: ["pdf", "docx", "markdown", "txt", "json"],
+    exportFormats: ["pdf", "docx", "html", "markdown", "txt", "json"],
     templates: templateCatalogByType.COVER_LETTER,
     createDefault: createDefaultCoverLetter,
     parse: parseCoverLetterDocument,
diff --git a/apps/studio/features/documents/core/template-catalog.ts b/apps/studio/features/documents/core/template-catalog.ts
index 149f610..7407a2b 100644
--- a/apps/studio/features/documents/core/template-catalog.ts
+++ b/apps/studio/features/documents/core/template-catalog.ts
@@ -1,6 +1,11 @@
 import type { TemplateMeta } from "./types";
 import type { DocumentType } from "./document-types";
 
+import { precisionAtsMeta } from "@/templates/resume/precision-ats/meta";
+import { executiveClarityMeta } from "@/templates/resume/executive-clarity/meta";
+import { veriworklyCoverLetterMeta } from "@/templates/cover-letter/veriworkly/meta";
+import { professionalCoverLetterMeta } from "@/templates/cover-letter/professional/meta";
+
 /**
  * Template catalog per document type.
  *
@@ -12,45 +17,31 @@ import type { DocumentType } from "./document-types";
  */
 
 export const templateCatalogByType: Record<DocumentType, TemplateMeta[]> = {
-  RESUME: [
-    {
-      id: "executive-clarity",
-      label: "Executive Clarity",
-      type: "RESUME",
-      description: "A polished single-column resume with refined spacing and ATS-safe structure.",
-    },
-    {
-      id: "precision-ats",
-      label: "Precision ATS",
-      type: "RESUME",
-      description: "A dense, recruiter-friendly layout that exports as a perfectly matching PDF.",
-    },
-  ],
+  RESUME: [executiveClarityMeta, precisionAtsMeta],
 
-  COVER_LETTER: [
-    {
-      id: "cover-letter-classic",
-      label: "Classic Cover Letter",
-      type: "COVER_LETTER",
-      description: "Traditional business format.",
-    },
-  ],
+  COVER_LETTER: [professionalCoverLetterMeta, veriworklyCoverLetterMeta],
 
   FORMAL_LETTER: [
     {
       id: "formal-letter-modern",
-      label: "Modern Formal Letter",
-      type: "FORMAL_LETTER",
+      name: "Modern Formal Letter",
+      documentType: "FORMAL_LETTER",
       description: "Structured formal correspondence format.",
+      accentColor: "#0ea5e9",
+      previewImage: "",
+      tags: ["Formal", "Letter"],
     },
   ],
 
   INVOICE: [
     {
       id: "invoice-clean",
-      label: "Clean Invoice",
-      type: "INVOICE",
+      name: "Clean Invoice",
+      documentType: "INVOICE",
       description: "Deterministic line-item invoice layout.",
+      accentColor: "#10b981",
+      previewImage: "",
+      tags: ["Invoice", "Clean"],
     },
   ],
 };
diff --git a/apps/studio/features/documents/core/types.ts b/apps/studio/features/documents/core/types.ts
index a2d5f45..05f8b30 100644
--- a/apps/studio/features/documents/core/types.ts
+++ b/apps/studio/features/documents/core/types.ts
@@ -24,9 +24,12 @@ export interface BaseDocument<TContent = unknown> {
 
 export interface TemplateMeta {
   id: string;
-  label: string;
-  type: DocumentType;
+  name: string;
+  documentType: DocumentType;
   description: string;
+  accentColor: string;
+  previewImage: string;
+  tags: string[];
 }
 
 export interface DocumentMeta {
diff --git a/apps/studio/public/templates/cover-letter/professional.png b/apps/studio/public/templates/cover-letter/professional.png
new file mode 100644
index 0000000..b2488f4
Binary files /dev/null and b/apps/studio/public/templates/cover-letter/professional.png differ
diff --git a/apps/studio/public/templates/cover-letter/veriworkly-special.png b/apps/studio/public/templates/cover-letter/veriworkly-special.png
new file mode 100644
index 0000000..10d242e
Binary files /dev/null and b/apps/studio/public/templates/cover-letter/veriworkly-special.png differ
diff --git a/apps/studio/public/templates/executive-clarity.png b/apps/studio/public/templates/executive-clarity.png
deleted file mode 100644
index c478ccd..0000000
Binary files a/apps/studio/public/templates/executive-clarity.png and /dev/null differ
diff --git a/apps/studio/public/templates/precision-ats.png b/apps/studio/public/templates/precision-ats.png
deleted file mode 100644
index 5759b73..0000000
Binary files a/apps/studio/public/templates/precision-ats.png and /dev/null differ
diff --git a/apps/studio/public/templates/resume/executive-clarity.png b/apps/studio/public/templates/resume/executive-clarity.png
new file mode 100644
index 0000000..99a01ae
Binary files /dev/null and b/apps/studio/public/templates/resume/executive-clarity.png differ
diff --git a/apps/studio/public/templates/resume/precision-ats.png b/apps/studio/public/templates/resume/precision-ats.png
new file mode 100644
index 0000000..bbc2cc7
Binary files /dev/null and b/apps/studio/public/templates/resume/precision-ats.png differ
diff --git a/apps/studio/templates/cover-letter/pdf.tsx b/apps/studio/templates/cover-letter/pdf.tsx
new file mode 100644
index 0000000..9a9dd13
--- /dev/null
+++ b/apps/studio/templates/cover-letter/pdf.tsx
@@ -0,0 +1,19 @@
+import type { CoverLetterContent } from "@/features/cover-letter/types";
+
+import { COVER_LETTER_VERIWORKLY_ID } from "./shared";
+import { VeriworklyCoverLetterPdf } from "./veriworkly/pdf";
+import { ProfessionalCoverLetterPdf } from "./professional/pdf";
+
+export function CoverLetterPdf({
+  content,
+  templateId,
+}: {
+  content: CoverLetterContent;
+  templateId?: string;
+}) {
+  if (templateId === COVER_LETTER_VERIWORKLY_ID) {
+    return <VeriworklyCoverLetterPdf content={content} />;
+  }
+
+  return <ProfessionalCoverLetterPdf content={content} />;
+}
diff --git a/apps/studio/templates/cover-letter/professional/meta.ts b/apps/studio/templates/cover-letter/professional/meta.ts
new file mode 100644
index 0000000..7c913a5
--- /dev/null
+++ b/apps/studio/templates/cover-letter/professional/meta.ts
@@ -0,0 +1,12 @@
+import type { TemplateMeta } from "@/features/documents/core/types";
+
+export const professionalCoverLetterMeta: TemplateMeta = {
+  id: "professional",
+  name: "Professional",
+  documentType: "COVER_LETTER",
+  description:
+    "Formal letterhead, strong subject treatment, and conservative recruiter-safe spacing.",
+  accentColor: "#0ea5e9",
+  previewImage: "/templates/cover-letter/professional.png",
+  tags: ["Formal", "Professional", "Conservative", "Recruiter-friendly"],
+};
diff --git a/apps/studio/templates/cover-letter/professional/pdf.tsx b/apps/studio/templates/cover-letter/professional/pdf.tsx
new file mode 100644
index 0000000..8bdd256
--- /dev/null
+++ b/apps/studio/templates/cover-letter/professional/pdf.tsx
@@ -0,0 +1,326 @@
+import { Document, Link, Page, StyleSheet, Text, View, Svg, Circle } from "@react-pdf/renderer";
+
+import type { CoverLetterContent } from "@/features/cover-letter/types";
+import { FONT_REGISTRY, normalizeFontFamilyId } from "@/features/documents/constants/fonts";
+
+import {
+  pt,
+  PX_TO_PT,
+  splitParagraphs,
+  splitMarkdownLines,
+  getCoverLetterLinks,
+  splitRichTextBlocks,
+  getCoverLetterLinkDisplayMode,
+} from "../shared";
+
+import {
+  getLinkDisplayText,
+  normalizeLinkHref,
+} from "@/features/documents/rendering/resume-rendering";
+import { PdfSocialIcon } from "@/templates/pdf/SocialIcon";
+
+const styles = StyleSheet.create({
+  page: {
+    padding: pt(44),
+    fontSize: pt(15),
+    lineHeight: 1.55,
+    color: "#18181b",
+  },
+
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    borderBottomWidth: 2,
+    borderBottomColor: "#e4e4e7",
+    paddingBottom: pt(28),
+  },
+
+  headerIdentity: { flex: 1 },
+
+  headerContact: { width: pt(230), marginLeft: pt(32), alignItems: "flex-end" },
+
+  name: { fontSize: pt(34), lineHeight: 1.25, fontWeight: 600, color: "#09090b" },
+
+  title: { marginTop: pt(8), fontSize: pt(14), color: "#52525b", fontWeight: 600 },
+
+  contact: { marginBottom: pt(6), fontSize: pt(14), lineHeight: 1.25, color: "#52525b" },
+
+  link: {
+    color: "#09090b",
+    marginBottom: pt(6),
+    fontSize: pt(14),
+    lineHeight: 1.25,
+    fontWeight: 700,
+    textDecoration: "underline",
+  },
+
+  linkRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    marginBottom: pt(6),
+  },
+
+  linkIcon: { marginRight: pt(3), width: pt(11), height: pt(11) },
+
+  linkText: {
+    color: "#09090b",
+    fontSize: pt(14),
+    lineHeight: 1.1,
+    fontWeight: 700,
+  },
+
+  meta: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    marginTop: pt(36),
+    color: "#3f3f46",
+  },
+
+  metaLeft: { flex: 1, fontSize: pt(14), lineHeight: 1.25 },
+
+  metaLeftText: { marginBottom: pt(4) },
+
+  metaDate: {
+    width: pt(180),
+    marginLeft: pt(32),
+    textAlign: "right",
+    fontSize: pt(14),
+    lineHeight: 1.25,
+    fontWeight: 600,
+    fontColor: "#71717b",
+  },
+
+  subject: {
+    borderTopWidth: 1,
+    borderBottomWidth: 1,
+    borderColor: "#e4e4e7",
+    marginTop: pt(32),
+    paddingVertical: pt(16),
+  },
+
+  label: {
+    fontSize: pt(10),
+    letterSpacing: 1.25,
+    color: "#71717a",
+    textTransform: "uppercase",
+    fontWeight: 700,
+  },
+
+  subjectText: {
+    marginTop: pt(8),
+    fontSize: pt(20),
+    lineHeight: 1.375,
+    fontWeight: 600,
+    color: "#09090b",
+  },
+
+  body: { marginTop: pt(28), fontSize: pt(15), color: "#27272a" },
+
+  paragraph: {},
+
+  bullets: { backgroundColor: "#fafafa", paddingHorizontal: pt(20), paddingVertical: pt(16) },
+
+  bullet: { marginBottom: pt(8) },
+
+  bulletRow: { flexDirection: "row", marginBottom: pt(8) },
+
+  bulletDot: { width: pt(22), paddingTop: pt(3) },
+
+  bulletText: { flex: 1 },
+
+  closing: { color: "#09090b", marginTop: pt(16) },
+
+  signature: { paddingTop: pt(4), fontWeight: 600, color: "#09090b" },
+
+  postscript: {
+    marginTop: pt(20),
+    paddingTop: pt(12),
+    fontSize: pt(14),
+    borderTopWidth: 1,
+    borderTopColor: "#e4e4e7",
+    lineHeight: 1.5,
+    color: "#52525c",
+  },
+});
+
+export function ProfessionalCoverLetterPdf({ content }: { content: CoverLetterContent }) {
+  const bodyFontSize = pt(15);
+
+  const appearance = content.appearance;
+  const font = FONT_REGISTRY[normalizeFontFamilyId(appearance.fontFamily)];
+  const bodyLineHeight = appearance.lineHeight;
+
+  const paragraphStyle = {
+    fontSize: bodyFontSize,
+    lineHeight: bodyLineHeight,
+    marginBottom: appearance.paragraphSpacing * PX_TO_PT,
+  };
+
+  const listStyle = {
+    fontSize: bodyFontSize,
+    lineHeight: bodyLineHeight,
+    marginTop: appearance.paragraphSpacing * PX_TO_PT,
+    marginBottom: appearance.paragraphSpacing * PX_TO_PT,
+  };
+
+  const senderName = content.senderName || content.signature || "Your Name";
+
+  const contact = [
+    content.senderEmail,
+    content.senderPhone,
+    content.senderLocation,
+    content.senderWebsite,
+  ].filter(Boolean);
+
+  const links = getCoverLetterLinks(content);
+  const linkDisplayMode = getCoverLetterLinkDisplayMode(content);
+
+  const recipient = [
+    content.recipientName,
+    content.recipientTitle,
+    content.companyName,
+    content.companyLocation,
+  ].filter(Boolean);
+
+  const bodyBlocks = [
+    ...splitParagraphs(content.opening).map((text) => ({ type: "paragraph" as const, text })),
+    ...splitRichTextBlocks(content.body),
+  ];
+
+  const highlights = splitMarkdownLines(content.highlights);
+
+  return (
+    <Document>
+      <Page
+        size="A4"
+        style={[
+          styles.page,
+          {
+            color: appearance.textColor,
+            backgroundColor: appearance.pageColor,
+            padding: appearance.pageMargin * PX_TO_PT,
+            fontFamily: font.primaryFamily,
+          },
+        ]}
+      >
+        <View style={styles.header}>
+          <View style={styles.headerIdentity}>
+            <Text style={styles.name}>{senderName}</Text>
+
+            {content.senderTitle ? <Text style={styles.title}>{content.senderTitle}</Text> : null}
+          </View>
+
+          {contact.length > 0 || links.length > 0 ? (
+            <View style={styles.headerContact}>
+              {contact.map((item) => (
+                <Text key={item} style={styles.contact}>
+                  {item}
+                </Text>
+              ))}
+
+              {links.map((link) => (
+                <View key={link.id} style={styles.linkRow}>
+                  {linkDisplayMode !== "url" ? (
+                    <Link src={normalizeLinkHref(link.url)} style={styles.linkIcon}>
+                      <PdfSocialIcon color="#09090b" size={pt(12)} type={link.type} />
+                    </Link>
+                  ) : null}
+
+                  {linkDisplayMode !== "icon" ? (
+                    <Link src={normalizeLinkHref(link.url)} style={styles.linkText}>
+                      {getLinkDisplayText(link, linkDisplayMode)}
+                    </Link>
+                  ) : null}
+                </View>
+              ))}
+            </View>
+          ) : null}
+        </View>
+
+        <View style={styles.meta}>
+          <View style={styles.metaLeft}>
+            {recipient.map((line) => (
+              <Text style={styles.metaLeftText} key={line}>
+                {line}
+              </Text>
+            ))}
+          </View>
+
+          {content.date ? <Text style={styles.metaDate}>{content.date}</Text> : null}
+        </View>
+
+        {content.subject || content.jobTitle ? (
+          <View style={styles.subject}>
+            <Text style={[styles.label, { color: appearance.accentColor }]}>Re</Text>
+
+            <Text style={styles.subjectText}>{content.subject || content.jobTitle}</Text>
+          </View>
+        ) : null}
+
+        <View style={[styles.body, { fontSize: bodyFontSize, lineHeight: bodyLineHeight }]}>
+          {content.greeting ? (
+            <Text style={[styles.paragraph, paragraphStyle, { fontWeight: 600, color: "#09090b" }]}>
+              {content.greeting}
+            </Text>
+          ) : null}
+
+          {bodyBlocks.map((block, index) =>
+            block.type === "list" ? (
+              <View key={`list-${index}`} style={[styles.bullets, listStyle]}>
+                {block.items.map((item, i) => (
+                  <View
+                    key={i}
+                    style={[
+                      styles.bulletRow,
+                      i === block.items.length - 1 ? { marginBottom: 0 } : {},
+                    ]}
+                  >
+                    <View style={styles.bulletDot}>
+                      <Svg width={pt(8)} height={pt(8)} viewBox="0 0 8 8">
+                        <Circle cx="4" cy="4" r="3.5" fill={appearance.accentColor} />
+                      </Svg>
+                    </View>
+
+                    <Text style={styles.bulletText}>{item}</Text>
+                  </View>
+                ))}
+              </View>
+            ) : (
+              <Text key={`paragraph-${index}`} style={[styles.paragraph, paragraphStyle]}>
+                {block.text}
+              </Text>
+            ),
+          )}
+
+          {highlights.length > 0 ? (
+            <View style={[styles.bullets, listStyle]}>
+              {highlights.map((highlight, i) => (
+                <View
+                  key={i}
+                  style={[styles.bulletRow, i === highlights.length - 1 ? { marginBottom: 0 } : {}]}
+                >
+                  <View style={styles.bulletDot}>
+                    <Svg width={pt(8)} height={pt(8)} viewBox="0 0 8 8">
+                      <Circle cx="4" cy="4" r="3.5" fill="#09090b" />
+                    </Svg>
+                  </View>
+
+                  <Text style={styles.bulletText}>{highlight}</Text>
+                </View>
+              ))}
+            </View>
+          ) : null}
+
+          {content.closing ? <Text style={styles.closing}>{content.closing}</Text> : null}
+
+          <Text style={styles.signature}>{content.signature || senderName}</Text>
+
+          {content.postscript ? (
+            <Text style={styles.postscript}>P.S. {content.postscript}</Text>
+          ) : null}
+        </View>
+      </Page>
+    </Document>
+  );
+}
diff --git a/apps/studio/templates/cover-letter/professional/web.tsx b/apps/studio/templates/cover-letter/professional/web.tsx
new file mode 100644
index 0000000..a7213d7
--- /dev/null
+++ b/apps/studio/templates/cover-letter/professional/web.tsx
@@ -0,0 +1,547 @@
+/* eslint-disable @next/next/no-img-element */
+
+import { useLayoutEffect, useMemo, useRef, useState } from "react";
+
+import type { RichTextBlock } from "../shared";
+import type { CoverLetterContent } from "@/features/cover-letter/types";
+
+import {
+  getCoverLetterState,
+  splitMarkdownLines,
+  splitParagraphs,
+  splitRichTextBlocks,
+} from "../shared";
+
+import {
+  normalizeLinkHref,
+  getLinkDisplayText,
+} from "@/features/documents/rendering/resume-rendering";
+import { FONT_FAMILY_MAP, getFontStylesheetHref } from "@/features/documents/constants/fonts";
+import { escapeHtml } from "@/features/resume/services/resume-formatters";
+
+import { SOCIAL_ICON_SRC_BY_TYPE } from "@/templates/shared/social-icons";
+
+const PAGE_HEIGHT = 1123;
+const BODY_TOP_GAP = 28;
+const PARAGRAPH_CHUNK_WORDS = 70;
+
+type ProfessionalFlowItem =
+  | { id: string; type: "greeting"; text: string }
+  | { id: string; type: "paragraph"; text: string }
+  | { id: string; type: "body-list"; items: string[] }
+  | { id: string; type: "proof-list"; items: string[] }
+  | { id: string; type: "closing"; text: string }
+  | { id: string; type: "signature"; text: string }
+  | { id: string; type: "postscript"; text: string };
+
+type CoverLetterFlowContent = Pick<
+  CoverLetterContent,
+  "body" | "closing" | "greeting" | "highlights" | "opening" | "postscript" | "signature"
+>;
+
+function splitTextIntoChunks(text: string, wordsPerChunk = PARAGRAPH_CHUNK_WORDS) {
+  const words = text.trim().split(/\s+/).filter(Boolean);
+
+  if (words.length <= wordsPerChunk) return [text];
+
+  const chunks: string[] = [];
+
+  for (let index = 0; index < words.length; index += wordsPerChunk) {
+    chunks.push(words.slice(index, index + wordsPerChunk).join(" "));
+  }
+
+  return chunks;
+}
+
+function buildProfessionalFlowItems(content: CoverLetterFlowContent, senderName: string) {
+  const items: ProfessionalFlowItem[] = [];
+
+  if (content.greeting) items.push({ id: "greeting", type: "greeting", text: content.greeting });
+
+  const bodyBlocks: RichTextBlock[] = [
+    ...splitParagraphs(content.opening).map((text) => ({ type: "paragraph" as const, text })),
+    ...splitRichTextBlocks(content.body),
+  ];
+
+  bodyBlocks.forEach((block, blockIndex) => {
+    if (block.type === "paragraph") {
+      splitTextIntoChunks(block.text).forEach((text, chunkIndex) => {
+        items.push({
+          id: `body-${blockIndex}-${chunkIndex}`,
+          type: "paragraph",
+          text,
+        });
+      });
+      return;
+    }
+
+    items.push({
+      id: `body-list-${blockIndex}`,
+      type: "body-list",
+      items: block.items,
+    });
+  });
+
+  const highlights = splitMarkdownLines(content.highlights);
+
+  if (highlights.length > 0) {
+    items.push({ id: "proof-list", type: "proof-list", items: highlights });
+  }
+
+  if (content.closing) items.push({ id: "closing", type: "closing", text: content.closing });
+
+  items.push({ id: "signature", type: "signature", text: content.signature || senderName });
+
+  if (content.postscript) {
+    splitTextIntoChunks(content.postscript, 55).forEach((text, index) => {
+      items.push({ id: `postscript-${index}`, type: "postscript", text });
+    });
+  }
+
+  return items;
+}
+
+function renderFlowItem(item: ProfessionalFlowItem, accentColor: string) {
+  if (item.type === "greeting") return <p className="font-medium text-zinc-950">{item.text}</p>;
+
+  if (item.type === "paragraph") return <p className="mt-(--paragraph-gap)">{item.text}</p>;
+
+  if (item.type === "body-list")
+    return (
+      <ul className="mt-(--paragraph-gap) grid gap-2 bg-zinc-50 px-5 py-4">
+        {item.items.map((listItem) => (
+          <li key={listItem} className="grid grid-cols-[0.65rem_1fr] gap-3">
+            <span
+              className="mt-2.5 h-1.5 w-1.5 rounded-full"
+              style={{ backgroundColor: accentColor }}
+            />
+
+            <span>{listItem}</span>
+          </li>
+        ))}
+      </ul>
+    );
+
+  if (item.type === "proof-list")
+    return (
+      <ul className="my-6 grid gap-2 bg-zinc-50 px-5 py-4">
+        {item.items.map((proof) => (
+          <li key={proof} className="grid grid-cols-[0.65rem_1fr] gap-3">
+            <span className="mt-2.5 h-1.5 w-1.5 rounded-full bg-zinc-950" />
+            <span>{proof}</span>
+          </li>
+        ))}
+      </ul>
+    );
+
+  if (item.type === "closing") return <p>{item.text}</p>;
+
+  if (item.type === "signature")
+    return <p className="pt-1 font-semibold text-zinc-950">{item.text}</p>;
+
+  return (
+    <p className="mt-5 border-t border-zinc-200 pt-3 text-sm leading-6 text-zinc-600">
+      P.S. {item.text}
+    </p>
+  );
+}
+
+function renderGroupedFlowItems(items: ProfessionalFlowItem[], accentColor: string) {
+  const nodes: React.ReactNode[] = [];
+  let index = 0;
+
+  while (index < items.length) {
+    const item = items[index];
+
+    nodes.push(
+      <div key={item.id} className="flow-root">
+        {renderFlowItem(item, accentColor)}
+      </div>,
+    );
+    index += 1;
+  }
+
+  return nodes;
+}
+
+function paginateMeasuredItems<T extends { id: string }>(
+  items: T[],
+  heights: Map<string, number>,
+  firstLimit: number,
+  nextLimit: number,
+) {
+  const pages: T[][] = [[]];
+  let pageIndex = 0;
+  let used = 0;
+
+  for (const item of items) {
+    const height = Math.ceil(heights.get(item.id) ?? 0);
+    const limit = pageIndex === 0 ? firstLimit : nextLimit;
+
+    if (pages[pageIndex].length > 0 && used + height > limit) {
+      pages.push([]);
+      pageIndex += 1;
+      used = 0;
+    }
+
+    pages[pageIndex].push(item);
+    used += height;
+  }
+
+  return pages.filter((page) => page.length > 0);
+}
+
+function getProfessionalHtmlItemWeight(item: ProfessionalFlowItem) {
+  if (item.type === "body-list" || item.type === "proof-list") {
+    return 2 + item.items.reduce((total, listItem) => total + Math.ceil(listItem.length / 78), 0);
+  }
+
+  if (item.type === "postscript") return 2 + Math.ceil(item.text.length / 110);
+  if (item.type === "closing" || item.type === "signature" || item.type === "greeting") return 1;
+
+  return Math.max(1, Math.ceil(item.text.length / 92));
+}
+
+function paginateProfessionalHtmlItems(items: ProfessionalFlowItem[]) {
+  const pages: ProfessionalFlowItem[][] = [[]];
+  let pageIndex = 0;
+  let used = 0;
+
+  for (const item of items) {
+    const limit = pageIndex === 0 ? 17 : 26;
+    const weight = getProfessionalHtmlItemWeight(item);
+
+    if (pages[pageIndex].length > 0 && used + weight > limit) {
+      pages.push([]);
+      pageIndex += 1;
+      used = 0;
+    }
+
+    pages[pageIndex].push(item);
+    used += weight;
+  }
+
+  return pages.filter((page) => page.length > 0);
+}
+
+function renderProfessionalHtmlItem(item: ProfessionalFlowItem) {
+  if (item.type === "greeting") return `<p class="greeting">${escapeHtml(item.text)}</p>`;
+  if (item.type === "paragraph") return `<p>${escapeHtml(item.text)}</p>`;
+  if (item.type === "body-list") {
+    return `<ul class="body-list">${item.items.map((listItem) => `<li>${escapeHtml(listItem)}</li>`).join("")}</ul>`;
+  }
+  if (item.type === "proof-list") {
+    return `<ul class="proof">${item.items.map((proof) => `<li>${escapeHtml(proof)}</li>`).join("")}</ul>`;
+  }
+  if (item.type === "closing") return `<p>${escapeHtml(item.text)}</p>`;
+  if (item.type === "signature") return `<p class="signature">${escapeHtml(item.text)}</p>`;
+
+  return `<p class="postscript">P.S. ${escapeHtml(item.text)}</p>`;
+}
+
+export function ProfessionalCoverLetterPreview({ content }: { content: CoverLetterContent }) {
+  const state = getCoverLetterState(content, { firstPage: 18, nextPage: 27 });
+  const {
+    appearance,
+    senderName,
+    senderTitle,
+    contact,
+    linkDisplayMode,
+    renderedLinks,
+    recipient,
+  } = state;
+  const fontFamily = FONT_FAMILY_MAP[appearance.fontFamily];
+  const flowSenderName = content.senderName || content.signature || "Your Name";
+  const flowContent = useMemo(
+    () => ({
+      body: content.body,
+      closing: content.closing,
+      greeting: content.greeting,
+      highlights: content.highlights,
+      opening: content.opening,
+      postscript: content.postscript,
+      signature: content.signature,
+    }),
+    [
+      content.body,
+      content.closing,
+      content.greeting,
+      content.highlights,
+      content.opening,
+      content.postscript,
+      content.signature,
+    ],
+  );
+  const flowItems = useMemo(
+    () => buildProfessionalFlowItems(flowContent, flowSenderName),
+    [flowContent, flowSenderName],
+  );
+  const [pages, setPages] = useState<ProfessionalFlowItem[][]>(() => [flowItems]);
+  const firstPrefixRef = useRef<HTMLDivElement | null>(null);
+  const nextPrefixRef = useRef<HTMLParagraphElement | null>(null);
+  const itemRefs = useRef(new Map<string, HTMLDivElement>());
+
+  useLayoutEffect(() => {
+    const frame = window.requestAnimationFrame(() => {
+      const firstPrefixHeight = firstPrefixRef.current?.getBoundingClientRect().height ?? 0;
+      const nextPrefixHeight = nextPrefixRef.current?.getBoundingClientRect().height ?? 0;
+      const firstLimit = PAGE_HEIGHT - appearance.pageMargin * 2 - firstPrefixHeight - BODY_TOP_GAP;
+      const nextLimit = PAGE_HEIGHT - appearance.pageMargin * 2 - nextPrefixHeight - BODY_TOP_GAP;
+      const heights = new Map<string, number>();
+
+      flowItems.forEach((item) => {
+        const node = itemRefs.current.get(item.id);
+        heights.set(item.id, node?.getBoundingClientRect().height ?? 0);
+      });
+
+      const nextPages = paginateMeasuredItems(flowItems, heights, firstLimit, nextLimit);
+      const nextKey = nextPages.map((page) => page.map((item) => item.id).join(",")).join("|");
+
+      setPages((current) => {
+        const currentKey = current.map((page) => page.map((item) => item.id).join(",")).join("|");
+        return currentKey === nextKey ? current : nextPages;
+      });
+    });
+
+    return () => window.cancelAnimationFrame(frame);
+  }, [appearance.lineHeight, appearance.pageMargin, appearance.paragraphSpacing, flowItems]);
+
+  return (
+    <div className="grid gap-6">
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute opacity-0"
+        style={{ left: -10000, top: 0, width: 794 }}
+      >
+        <article
+          className="h-280.75 w-198.5 overflow-hidden"
+          style={{
+            color: appearance.textColor,
+            fontFamily,
+            padding: appearance.pageMargin,
+            backgroundColor: appearance.pageColor,
+          }}
+        >
+          <div ref={firstPrefixRef}>
+            <header className="grid gap-8 border-b-2 pb-7 sm:grid-cols-[1fr_230px]">
+              <div>
+                <h1 className="text-[34px] leading-tight font-semibold tracking-normal text-zinc-950">
+                  {senderName}
+                </h1>
+
+                <p className="mt-2 text-sm font-medium text-zinc-600">{senderTitle}</p>
+              </div>
+
+              <div className="space-y-1.5 text-sm leading-5 text-zinc-600 sm:text-right">
+                {contact.map((item) => (
+                  <p key={item}>{item}</p>
+                ))}
+
+                {renderedLinks.map((link) => (
+                  <a
+                    key={link.id}
+                    className="flex items-center justify-end gap-1 font-medium text-zinc-950 underline decoration-zinc-300 underline-offset-4"
+                    href={normalizeLinkHref(link.url)}
+                  >
+                    {linkDisplayMode !== "url" && (
+                      <img
+                        alt=""
+                        aria-hidden="true"
+                        className="size-3 shrink-0"
+                        src={SOCIAL_ICON_SRC_BY_TYPE[link.type] || SOCIAL_ICON_SRC_BY_TYPE.custom}
+                      />
+                    )}
+
+                    {linkDisplayMode !== "icon" && getLinkDisplayText(link, linkDisplayMode)}
+                  </a>
+                ))}
+              </div>
+            </header>
+
+            <section className="mt-9 grid gap-8 text-sm leading-5 text-zinc-700 sm:grid-cols-[1fr_180px]">
+              <div className="space-y-1">
+                {recipient.map((line) => (
+                  <p key={line}>{line}</p>
+                ))}
+              </div>
+
+              {content.date ? (
+                <p className="font-medium text-zinc-500 sm:text-right">{content.date}</p>
+              ) : null}
+            </section>
+
+            {content.subject || content.jobTitle ? (
+              <section className="mt-8 border-y border-zinc-200 py-4">
+                <p
+                  className="text-[10px] font-bold tracking-[0.22em] uppercase"
+                  style={{ color: appearance.accentColor }}
+                >
+                  Re
+                </p>
+
+                <h2 className="mt-2 text-xl leading-snug font-semibold tracking-normal text-zinc-950">
+                  {content.subject || content.jobTitle}
+                </h2>
+              </section>
+            ) : null}
+          </div>
+
+          <p
+            ref={nextPrefixRef}
+            className="border-b border-zinc-200 pb-5 text-[10px] font-bold tracking-[0.22em] text-zinc-500 uppercase"
+          >
+            Cover Letter Continued
+          </p>
+
+          <main
+            className="mt-7 text-[15px] text-zinc-800"
+            style={{
+              lineHeight: appearance.lineHeight,
+              ["--paragraph-gap" as string]: `${appearance.paragraphSpacing}px`,
+            }}
+          >
+            {flowItems.map((item) => (
+              <div
+                key={item.id}
+                ref={(node) => {
+                  if (node) itemRefs.current.set(item.id, node);
+                  else itemRefs.current.delete(item.id);
+                }}
+                className="flow-root"
+              >
+                {renderFlowItem(item, appearance.accentColor)}
+              </div>
+            ))}
+          </main>
+        </article>
+      </div>
+
+      {pages.map((pageBlocks, pageIndex) => (
+        <article
+          key={pageIndex}
+          className="mx-auto h-280.75 w-198.5 max-w-full overflow-hidden shadow-sm ring-1 ring-zinc-200"
+          style={{
+            color: appearance.textColor,
+            fontFamily,
+            padding: appearance.pageMargin,
+            backgroundColor: appearance.pageColor,
+          }}
+        >
+          {pageIndex === 0 ? (
+            <>
+              <header className="grid gap-8 border-b-2 pb-7 sm:grid-cols-[1fr_230px]">
+                <div>
+                  <h1 className="text-[34px] leading-tight font-semibold tracking-normal text-zinc-950">
+                    {senderName}
+                  </h1>
+
+                  <p className="mt-2 text-sm font-medium text-zinc-600">{senderTitle}</p>
+                </div>
+
+                {contact.length > 0 || renderedLinks.length > 0 ? (
+                  <div className="space-y-1.5 text-sm leading-5 text-zinc-600 sm:text-right">
+                    {contact.map((item) => (
+                      <p key={item}>{item}</p>
+                    ))}
+
+                    {renderedLinks.map((link) => (
+                      <a
+                        key={link.id}
+                        className="flex items-center justify-end gap-1 font-medium text-zinc-950 underline decoration-zinc-300 underline-offset-4"
+                        href={normalizeLinkHref(link.url)}
+                      >
+                        {linkDisplayMode !== "url" && (
+                          <img
+                            alt=""
+                            aria-hidden="true"
+                            className="size-3 shrink-0"
+                            src={
+                              SOCIAL_ICON_SRC_BY_TYPE[link.type] || SOCIAL_ICON_SRC_BY_TYPE.custom
+                            }
+                          />
+                        )}
+
+                        {linkDisplayMode !== "icon" && getLinkDisplayText(link, linkDisplayMode)}
+                      </a>
+                    ))}
+                  </div>
+                ) : null}
+              </header>
+
+              <section className="mt-9 grid gap-8 text-sm leading-5 text-zinc-700 sm:grid-cols-[1fr_180px]">
+                <div className="space-y-1">
+                  {recipient.map((line) => (
+                    <p key={line}>{line}</p>
+                  ))}
+                </div>
+
+                {content.date ? (
+                  <p className="font-medium text-zinc-500 sm:text-right">{content.date}</p>
+                ) : null}
+              </section>
+
+              {content.subject || content.jobTitle ? (
+                <section className="mt-8 border-y border-zinc-200 py-4">
+                  <p
+                    className="text-[10px] font-bold tracking-[0.22em] uppercase"
+                    style={{ color: appearance.accentColor }}
+                  >
+                    Re
+                  </p>
+
+                  <h2 className="mt-2 text-xl leading-snug font-semibold tracking-normal text-zinc-950">
+                    {content.subject || content.jobTitle}
+                  </h2>
+                </section>
+              ) : null}
+            </>
+          ) : (
+            <p className="border-b border-zinc-200 pb-5 text-[10px] font-bold tracking-[0.22em] text-zinc-500 uppercase">
+              Cover Letter Continued
+            </p>
+          )}
+
+          <main
+            className="mt-7 text-[15px] text-zinc-800"
+            style={{
+              lineHeight: appearance.lineHeight,
+              ["--paragraph-gap" as string]: `${appearance.paragraphSpacing}px`,
+            }}
+          >
+            {renderGroupedFlowItems(pageBlocks, appearance.accentColor)}
+          </main>
+        </article>
+      ))}
+    </div>
+  );
+}
+
+export function buildProfessionalCoverLetterHtml(content: CoverLetterContent): string {
+  const state = getCoverLetterState(content, { firstPage: 18, nextPage: 27 });
+
+  const {
+    appearance,
+    senderName,
+    senderTitle,
+    contact,
+    linkDisplayMode,
+    renderedLinks,
+    recipient,
+  } = state;
+  const subject = escapeHtml(content.subject || content.jobTitle || "Application");
+  const fontFamily = FONT_FAMILY_MAP[appearance.fontFamily];
+  const fontHref = getFontStylesheetHref(appearance.fontFamily);
+  const flowItems = buildProfessionalFlowItems(content, senderName);
+  const pages = paginateProfessionalHtmlItems(flowItems);
+
+  return `<!doctype html><html lang="en"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><title>${escapeHtml(content.senderName || "Cover Letter")}</title><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link rel="stylesheet" href="${escapeHtml(fontHref)}"><style>
+*{box-sizing:border-box}body{margin:0;padding:32px 16px;background:#f4f4f5;color:${appearance.textColor};font-family:${fontFamily}}.page{width:794px;height:1123px;margin:0 auto 24px;overflow:hidden;background:${appearance.pageColor};color:${appearance.textColor};box-shadow:0 0 0 1px #e4e4e7;page-break-after:always}.page:last-child{page-break-after:auto}p{margin:0 0 ${appearance.paragraphSpacing}px;line-height:${appearance.lineHeight}}.label{color:${appearance.accentColor};font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase}.body{margin-top:28px;font-size:15px}.body-list,.proof{background:#f4f4f5;margin:16px 0;padding:14px 18px 14px 28px;line-height:${appearance.lineHeight}}.proof li::marker{color:${appearance.accentColor}}.signature{font-weight:700}.postscript{border-top:1px solid #e4e4e7;padding-top:14px;color:#52525b}.continued{border-bottom:1px solid #dbe4f0;padding-bottom:20px;color:#64748b;font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase}.professional-page{padding:${appearance.pageMargin}px}.professional-page header{display:grid;grid-template-columns:1fr 230px;gap:32px;border-bottom:2px solid #09090b;padding-bottom:28px}.professional-page h1{margin:0;font-size:34px;line-height:1.1}.professional-page .contact{text-align:right;color:#52525b}.professional-page .contact a{display:block;color:#09090b;font-weight:600;text-underline-offset:4px}.professional-page .meta{display:grid;grid-template-columns:1fr 180px;gap:32px;margin-top:36px;color:#3f3f46}.professional-page .subject{border-top:1px solid #e4e4e7;border-bottom:1px solid #e4e4e7;margin-top:32px;padding:16px 0}.professional-page h2{margin:8px 0 0;font-size:20px}@media print{body{padding:0;background:white}.page{box-shadow:none;margin:0}}</style></head><body>${pages
+    .map((blocks, pageIndex) => {
+      const first = pageIndex === 0;
+      const body = blocks
+        .map((item) => renderProfessionalHtmlItem(item))
+        .join("");
+      return `<article class="page professional-page">${first ? `<header><div><h1>${escapeHtml(senderName)}</h1><p>${escapeHtml(senderTitle)}</p></div><div class="contact">${contact.map((item) => `<p>${escapeHtml(item)}</p>`).join("")}${renderedLinks.map((link) => `<a href="${escapeHtml(normalizeLinkHref(link.url))}">${escapeHtml(getLinkDisplayText(link, linkDisplayMode))}</a>`).join("")}</div></header><section class="meta"><div>${recipient.map((line) => `<p>${escapeHtml(line)}</p>`).join("")}</div><p>${escapeHtml(content.date)}</p></section><section class="subject"><p class="label">Re</p><h2>${subject}</h2></section>` : `<p class="continued">Cover Letter Continued</p>`}<main class="body">${body}</main></article>`;
+    })
+    .join("")}</body></html>`;
+}
diff --git a/apps/studio/templates/cover-letter/shared.ts b/apps/studio/templates/cover-letter/shared.ts
new file mode 100644
index 0000000..5fa194f
--- /dev/null
+++ b/apps/studio/templates/cover-letter/shared.ts
@@ -0,0 +1,274 @@
+import type { ResumeLinkDisplayMode, ResumeLinkItem } from "@/types/resume";
+import type { CoverLetterContent, CoverLetterTemplateId } from "@/features/cover-letter/types";
+import { normalizeFontFamilyId } from "@/features/documents/constants/fonts";
+
+import {
+  normalizeLinkHref,
+  getLinkDisplayText,
+} from "@/features/documents/rendering/resume-rendering";
+
+export type RichTextBlock = { type: "paragraph"; text: string } | { type: "list"; items: string[] };
+
+type ContactLink = {
+  label: string;
+  url: string;
+};
+
+export const COVER_LETTER_PROFESSIONAL_ID = "professional" satisfies CoverLetterTemplateId;
+export const COVER_LETTER_VERIWORKLY_ID = "veriworkly-special" satisfies CoverLetterTemplateId;
+
+export const PX_TO_PT = 0.75;
+export const pt = (value: number) => value * PX_TO_PT;
+
+export function getCoverLetterExportLineHeight(lineHeight: number): number {
+  return Math.max(1.15, lineHeight - 0.3);
+}
+
+export function splitParagraphs(value: string): string[] {
+  return value
+    .split(/\n{2,}/)
+    .map((part) => part.trim())
+    .filter(Boolean);
+}
+
+export function splitRichTextBlocks(value: string): RichTextBlock[] {
+  const blocks: RichTextBlock[] = [];
+  const lines = value.split(/\r?\n/);
+
+  let list: string[] = [];
+  let paragraph: string[] = [];
+
+  function flushParagraph() {
+    const text = paragraph.join(" ").trim();
+
+    if (text) blocks.push({ type: "paragraph", text });
+
+    paragraph = [];
+  }
+
+  function flushList() {
+    if (list.length > 0) blocks.push({ type: "list", items: list });
+
+    list = [];
+  }
+
+  for (const rawLine of lines) {
+    const line = rawLine.trim();
+
+    if (!line) {
+      flushParagraph();
+      flushList();
+      continue;
+    }
+
+    const bullet = line.match(/^[-*]\s+(.+)$/);
+
+    if (bullet) {
+      flushParagraph();
+      list.push(bullet[1].trim());
+      continue;
+    }
+
+    flushList();
+    paragraph.push(line);
+  }
+
+  flushParagraph();
+  flushList();
+
+  return blocks;
+}
+
+export function splitMarkdownLines(value: string) {
+  return value
+    .split(/\r?\n/)
+    .map((line) => line.trim())
+    .filter(Boolean)
+    .map((line) => line.replace(/^[-*]\s+/, ""));
+}
+
+export function splitContactLinks(value: string): ContactLink[] {
+  return value
+    .split(/\r?\n/)
+    .map((line) => line.trim())
+    .filter(Boolean)
+    .map((line) => {
+      const [rawLabel, rawUrl] = line.includes("|")
+        ? line.split("|").map((part) => part.trim())
+        : ["", line];
+
+      const url = rawUrl || rawLabel;
+
+      return {
+        label: rawLabel || url.replace(/^https?:\/\//, "").replace(/^www\./, ""),
+        url,
+      };
+    });
+}
+
+export function getCoverLetterLinks(content: CoverLetterContent): ResumeLinkItem[] {
+  const storedLinks = content.links?.items?.filter((link) => normalizeLinkHref(link.url)) ?? [];
+
+  const legacyLinks: ResumeLinkItem[] = splitContactLinks(content.senderLinks).map(
+    (link, index) => ({
+      id: `legacy-cover-link-${index}`,
+      type: "custom",
+      label: link.label,
+      url: link.url,
+    }),
+  );
+
+  return storedLinks.length > 0 ? storedLinks : legacyLinks;
+}
+
+export function getCoverLetterLinkDisplayMode(content: CoverLetterContent): ResumeLinkDisplayMode {
+  return content.links?.displayMode ?? "icon-username";
+}
+
+function blockWeight(block: RichTextBlock) {
+  if (block.type === "list")
+    return 1 + block.items.reduce((total, item) => total + Math.ceil(item.length / 86), 0);
+
+  return Math.max(1, Math.ceil(block.text.length / 92));
+}
+
+export function paginateBlocks(
+  blocks: RichTextBlock[],
+  firstPageLimit: number,
+  nextPageLimit: number,
+) {
+  const pages: RichTextBlock[][] = [[]];
+
+  let used = 0;
+  let limit = firstPageLimit;
+
+  for (const block of blocks) {
+    const weight = blockWeight(block);
+
+    if (pages[pages.length - 1].length > 0 && used + weight > limit) {
+      pages.push([]);
+      limit = nextPageLimit;
+      used = 0;
+    }
+
+    pages[pages.length - 1].push(block);
+    used += weight;
+  }
+
+  return pages;
+}
+
+export function getCoverLetterState(
+  content: CoverLetterContent,
+  limits: { firstPage: number; nextPage: number },
+) {
+  const appearance = content.appearance ?? {
+    fontFamily: "geist",
+    pageMargin: 40,
+    lineHeight: 1.5,
+    paragraphSpacing: 10,
+    pageColor: "#ffffff",
+    textColor: "#18181b",
+    accentColor: "#2563eb",
+    sidebarColor: "#111827",
+  };
+
+  const normalizedAppearance = {
+    ...appearance,
+    fontFamily: normalizeFontFamilyId(appearance.fontFamily),
+  };
+
+  const senderName = content.senderName || content.signature || "Your Name";
+  const senderTitle = content.senderTitle || "Role or professional title";
+
+  const contact = [
+    content.senderEmail,
+    content.senderPhone,
+    content.senderLocation,
+    content.senderWebsite,
+  ].filter(Boolean);
+
+  const renderedLinks = getCoverLetterLinks(content);
+  const linkDisplayMode = getCoverLetterLinkDisplayMode(content);
+
+  const recipient = [
+    content.recipientName,
+    content.recipientTitle,
+    content.companyName,
+    content.companyLocation,
+  ].filter(Boolean);
+
+  const highlights = splitMarkdownLines(content.highlights);
+
+  const bodyBlocks: RichTextBlock[] = [
+    ...splitParagraphs(content.opening).map((text) => ({ type: "paragraph" as const, text })),
+    ...splitRichTextBlocks(content.body),
+  ];
+
+  const pages = paginateBlocks(bodyBlocks, limits.firstPage, limits.nextPage);
+
+  return {
+    appearance: normalizedAppearance,
+    senderName,
+    senderTitle,
+    contact,
+    linkDisplayMode,
+    renderedLinks,
+    recipient,
+    highlights,
+    pages,
+  };
+}
+
+export function buildCoverLetterMarkdown(content: CoverLetterContent): string {
+  const links = getCoverLetterLinks(content);
+  const linkDisplayMode = getCoverLetterLinkDisplayMode(content);
+
+  const contact = [
+    content.senderTitle,
+    content.senderEmail,
+    content.senderPhone,
+    content.senderLocation,
+    content.senderWebsite,
+    ...links.map((link) => getLinkDisplayText(link, linkDisplayMode)),
+  ].filter(Boolean);
+
+  const recipient = [
+    content.recipientName,
+    content.recipientTitle,
+    content.companyName,
+    content.companyLocation,
+  ].filter(Boolean);
+
+  const body = splitRichTextBlocks(content.body)
+    .map((block) =>
+      block.type === "list" ? block.items.map((item) => `- ${item}`).join("\n") : block.text,
+    )
+    .join("\n\n");
+
+  const parts = [
+    `# ${content.senderName || "Your Name"}`,
+    contact.length ? contact.join(" | ") : "",
+    content.date,
+    recipient.length ? recipient.join("\n") : "",
+    content.subject ? `**Subject:** ${content.subject}` : "",
+    content.greeting,
+    content.opening,
+    body,
+    splitMarkdownLines(content.highlights)
+      .map((line) => `- ${line}`)
+      .join("\n"),
+    content.closing,
+    content.signature || content.senderName,
+    content.postscript ? `P.S. ${content.postscript}` : "",
+  ];
+
+  return parts.filter(Boolean).join("\n\n").trim();
+}
+
+export function buildCoverLetterText(content: CoverLetterContent): string {
+  return buildCoverLetterMarkdown(content)
+    .replaceAll(/^#{1,6}\s?/gm, "")
+    .replaceAll(/\*\*(.*?)\*\*/g, "$1")
+    .trim();
+}
diff --git a/apps/studio/templates/cover-letter/veriworkly/meta.ts b/apps/studio/templates/cover-letter/veriworkly/meta.ts
new file mode 100644
index 0000000..cd8a0ee
--- /dev/null
+++ b/apps/studio/templates/cover-letter/veriworkly/meta.ts
@@ -0,0 +1,11 @@
+import type { TemplateMeta } from "@/features/documents/core/types";
+
+export const veriworklyCoverLetterMeta: TemplateMeta = {
+  id: "veriworkly-special",
+  name: "VeriWorkly Special",
+  documentType: "COVER_LETTER",
+  description: "A branded two-column layout with an identity rail and numbered proof points.",
+  accentColor: "#2563eb",
+  previewImage: "/templates/cover-letter/veriworkly-special.png",
+  tags: ["Branded", "Two-column", "Identity rail"],
+};
diff --git a/apps/studio/templates/cover-letter/veriworkly/pdf.tsx b/apps/studio/templates/cover-letter/veriworkly/pdf.tsx
new file mode 100644
index 0000000..c8b15f6
--- /dev/null
+++ b/apps/studio/templates/cover-letter/veriworkly/pdf.tsx
@@ -0,0 +1,374 @@
+import { Document, Link, Page, StyleSheet, Text, View } from "@react-pdf/renderer";
+
+import type { CoverLetterContent } from "@/features/cover-letter/types";
+import { FONT_REGISTRY, normalizeFontFamilyId } from "@/features/documents/constants/fonts";
+
+import {
+  pt,
+  PX_TO_PT,
+  splitParagraphs,
+  splitMarkdownLines,
+  getCoverLetterLinks,
+  splitRichTextBlocks,
+  getCoverLetterLinkDisplayMode,
+} from "../shared";
+
+import {
+  normalizeLinkHref,
+  getLinkDisplayText,
+} from "@/features/documents/rendering/resume-rendering";
+import { PdfSocialIcon } from "@/templates/pdf/SocialIcon";
+
+const styles = StyleSheet.create({
+  page: { padding: 0, fontSize: pt(14.5), lineHeight: 1.55, color: "#111827" },
+
+  shell: { flexDirection: "row", minHeight: "100%" },
+
+  sidebar: {
+    width: pt(214),
+    paddingHorizontal: pt(24),
+    paddingVertical: pt(36),
+    backgroundColor: "#111827",
+    color: "#020618",
+    borderRightWidth: 1,
+    borderRightColor: "#e2e8f0",
+  },
+
+  main: { flex: 1, padding: pt(44), backgroundColor: "#ffffff" },
+
+  railLabel: {
+    fontSize: pt(10),
+    letterSpacing: 1.5,
+    textTransform: "uppercase",
+    fontWeight: 700,
+    marginBottom: pt(12),
+  },
+
+  name: { fontSize: pt(26), fontWeight: 600, lineHeight: 1.08, color: "#0f172a" },
+
+  title: { marginTop: pt(8), fontSize: pt(14), color: "#45556c", lineHeight: 1.5 },
+
+  rule: { width: pt(48), height: 1, marginTop: pt(32), marginBottom: pt(32) },
+
+  railBlock: { marginTop: 0 },
+
+  railText: { color: "#45556c", marginBottom: pt(8), fontSize: pt(12), lineHeight: 1.5 },
+
+  contactLinkDivider: {
+    width: pt(48),
+    height: 1,
+    marginTop: pt(16),
+    marginBottom: pt(16),
+  },
+
+  railLinkRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    fontWeight: 500,
+    marginTop: pt(8),
+    marginBottom: pt(6),
+  },
+
+  railLink: {
+    color: "#0f766e",
+    paddingBottom: pt(2),
+    fontSize: pt(12),
+    lineHeight: 1.6,
+  },
+
+  railLinkIcon: { marginRight: pt(4), width: pt(14), height: pt(14) },
+  railLinkText: { color: "#0f766e", fontSize: pt(12), lineHeight: 1.2 },
+
+  targetBlock: {
+    marginTop: "auto",
+    paddingTop: pt(28),
+    borderTopWidth: 1,
+    borderTopColor: "#e2e8f0",
+  },
+
+  targetLabel: {
+    fontSize: pt(10),
+    letterSpacing: 1.5,
+    textTransform: "uppercase",
+    fontWeight: 700,
+  },
+
+  targetJobTitle: {
+    fontWeight: 600,
+    fontSize: pt(14),
+    lineHeight: 1.25,
+    color: "#0f172a",
+    marginTop: pt(8),
+    marginBottom: pt(4),
+  },
+
+  meta: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    borderBottomWidth: 1,
+    borderBottomColor: "#e2e8f0",
+    paddingBottom: pt(24),
+    marginBottom: pt(32),
+  },
+
+  metaLeft: { flex: 1, fontSize: pt(14), lineHeight: 1.5, color: "#475569", marginBottom: pt(4) },
+
+  metaDate: {
+    marginLeft: pt(24),
+    fontSize: pt(12),
+    fontWeight: 600,
+    letterSpacing: 1.2,
+    color: "#62748e",
+    textTransform: "uppercase",
+  },
+
+  subject: {
+    borderLeftWidth: 2,
+    paddingLeft: pt(20),
+    paddingVertical: pt(4),
+    marginBottom: pt(32),
+  },
+
+  label: { fontSize: pt(10), letterSpacing: 1.4, fontWeight: 700, textTransform: "uppercase" },
+
+  subjectText: {
+    fontSize: pt(22),
+    fontWeight: 600,
+    color: "#0f172a",
+  },
+
+  body: { fontSize: pt(15), color: "#27272a", marginBottom: pt(24) },
+
+  greeting: { fontWeight: 600, color: "#020618" },
+
+  paragraph: { color: "#314158", marginBottom: pt(16) },
+
+  proofLabel: {
+    fontSize: pt(10),
+    fontweight: 700,
+    color: "#62748e",
+    letterSpacing: 1.5,
+    borderTopWidth: 1,
+    borderTopColor: "#e2e8f0",
+    textTransform: "uppercase",
+    paddingTop: pt(24),
+    marginBottom: pt(8),
+  },
+
+  proofItem: {
+    flexDirection: "row",
+    borderBottomWidth: 1,
+    borderBottomColor: "#f1f5f9",
+    paddingBottom: pt(8),
+    marginBottom: pt(8),
+  },
+
+  proofIndex: { width: pt(48), fontSize: pt(12), fontWeight: 700 },
+
+  proofText: { flex: 1, color: "#314158" },
+
+  bullets: { backgroundColor: "#f4f4f5", paddingHorizontal: pt(20), paddingVertical: pt(16) },
+  bulletRow: { flexDirection: "row", marginBottom: pt(8) },
+  bulletDot: { width: pt(14) },
+  bulletText: { flex: 1 },
+
+  closingSection: { marginTop: pt(16) },
+
+  closing: { color: "#314158", marginBottom: pt(4), letterSpacing: 0.4 },
+
+  signature: { paddingTop: pt(4), fontWeight: 600, color: "#020618", fontSize: pt(16) },
+
+  postscript: {
+    marginTop: pt(16),
+    paddingTop: pt(12),
+    borderTopWidth: 1,
+    borderTopColor: "#e4e4e7",
+    color: "#52525c",
+  },
+});
+
+export function VeriworklyCoverLetterPdf({ content }: { content: CoverLetterContent }) {
+  const appearance = content.appearance;
+  const font = FONT_REGISTRY[normalizeFontFamilyId(appearance.fontFamily)];
+  const bodyFontSize = pt(14.5);
+  const bodyLineHeight = appearance.lineHeight;
+  const paragraphStyle = {
+    fontSize: bodyFontSize,
+    lineHeight: bodyLineHeight,
+    marginBottom: appearance.paragraphSpacing * PX_TO_PT,
+  };
+  const listStyle = {
+    lineHeight: bodyLineHeight,
+    marginTop: appearance.paragraphSpacing * PX_TO_PT,
+    marginBottom: appearance.paragraphSpacing * PX_TO_PT,
+    fontSize: bodyFontSize,
+  };
+  const senderName = content.senderName || content.signature || "Your Name";
+  const contact = [
+    content.senderEmail,
+    content.senderPhone,
+    content.senderLocation,
+    content.senderWebsite,
+  ].filter(Boolean);
+  const links = getCoverLetterLinks(content);
+  const linkDisplayMode = getCoverLetterLinkDisplayMode(content);
+  const recipient = [
+    content.recipientName,
+    content.recipientTitle,
+    content.companyName,
+    content.companyLocation,
+  ].filter(Boolean);
+  const bodyBlocks = [
+    ...splitParagraphs(content.opening).map((text) => ({ type: "paragraph" as const, text })),
+    ...splitRichTextBlocks(content.body),
+  ];
+  const highlights = splitMarkdownLines(content.highlights);
+
+  return (
+    <Document>
+      <Page
+        size="A4"
+        style={[
+          styles.page,
+          {
+            backgroundColor: appearance.pageColor,
+            color: appearance.textColor,
+            fontFamily: font.primaryFamily,
+          },
+        ]}
+      >
+        <View style={styles.shell}>
+          <View style={[styles.sidebar, { backgroundColor: appearance.sidebarColor }]}>
+            <Text style={[styles.railLabel, { color: appearance.accentColor }]}>Candidate</Text>
+
+            <Text style={styles.name}>{senderName}</Text>
+
+            {content.senderTitle ? <Text style={styles.title}>{content.senderTitle}</Text> : null}
+
+            <View style={[styles.rule, { backgroundColor: appearance.accentColor }]} />
+
+            <View style={styles.railBlock}>
+              {contact.map((item) => (
+                <Text key={item} style={styles.railText}>
+                  {item}
+                </Text>
+              ))}
+
+              {links.length > 0 && (
+                <View
+                  style={[styles.contactLinkDivider, { backgroundColor: appearance.accentColor }]}
+                />
+              )}
+
+              {links.map((link) => (
+                <View key={link.id} style={styles.railLinkRow}>
+                  {linkDisplayMode !== "url" ? (
+                    <Link src={normalizeLinkHref(link.url)} style={styles.railLinkIcon}>
+                      <PdfSocialIcon size={pt(14)} type={link.type} color="#000" />
+                    </Link>
+                  ) : null}
+
+                  {linkDisplayMode !== "icon" ? (
+                    <Link
+                      src={normalizeLinkHref(link.url)}
+                      style={[styles.railLinkText, { color: appearance.accentColor }]}
+                    >
+                      {getLinkDisplayText(link, linkDisplayMode)}
+                    </Link>
+                  ) : null}
+                </View>
+              ))}
+            </View>
+
+            <View style={styles.targetBlock}>
+              <Text style={[styles.targetLabel, { color: appearance.accentColor }]}>Target</Text>
+
+              <Text style={styles.targetJobTitle}>
+                {content.jobTitle || content.subject || "Open role"}
+              </Text>
+
+              {content.companyName ? (
+                <Text style={styles.railText}>{content.companyName}</Text>
+              ) : null}
+            </View>
+          </View>
+
+          <View style={[styles.main, { padding: appearance.pageMargin * PX_TO_PT }]}>
+            <View style={styles.meta}>
+              <View style={styles.metaLeft}>
+                {recipient.map((line) => (
+                  <Text key={line}>{line}</Text>
+                ))}
+              </View>
+
+              {content.date ? <Text style={styles.metaDate}>{content.date}</Text> : null}
+            </View>
+
+            <View style={[styles.subject, { borderLeftColor: appearance.accentColor }]}>
+              <Text style={[styles.label, { color: appearance.accentColor }]}>Cover Letter</Text>
+
+              <Text style={styles.subjectText}>
+                {content.subject || content.jobTitle || "Application"}
+              </Text>
+            </View>
+
+            <View style={[styles.body, { fontSize: bodyFontSize, lineHeight: bodyLineHeight }]}>
+              {content.greeting ? (
+                <Text style={[styles.greeting, paragraphStyle]}>{content.greeting}</Text>
+              ) : null}
+
+              {bodyBlocks.map((block, index) =>
+                block.type === "list" ? (
+                  <View key={`list-${index}`} style={[styles.bullets, listStyle]}>
+                    {block.items.map((item) => (
+                      <View key={item} style={styles.bulletRow}>
+                        <Text style={styles.bulletDot}>-</Text>
+                        <Text style={styles.bulletText}>{item}</Text>
+                      </View>
+                    ))}
+                  </View>
+                ) : (
+                  <Text key={`paragraph-${index}`} style={[styles.paragraph, paragraphStyle]}>
+                    {block.text}
+                  </Text>
+                ),
+              )}
+            </View>
+
+            {highlights.length > 0 ? (
+              <View>
+                <Text style={styles.proofLabel}>Selected Proof</Text>
+
+                {highlights.map((highlight, index) => (
+                  <View
+                    key={highlight}
+                    style={[
+                      styles.proofItem,
+                      ...(index === highlights.length - 1 ? [{ borderBottomWidth: 0 }] : []),
+                    ]}
+                  >
+                    <Text style={[styles.proofIndex, { color: appearance.accentColor }]}>
+                      {String(index + 1).padStart(2, "0")}
+                    </Text>
+
+                    <Text style={styles.proofText}>{highlight}</Text>
+                  </View>
+                ))}
+              </View>
+            ) : null}
+
+            <View style={styles.closingSection}>
+              {content.closing ? <Text style={styles.closing}>{content.closing}</Text> : null}
+
+              <Text style={styles.signature}>{content.signature || senderName}</Text>
+            </View>
+
+            {content.postscript ? (
+              <Text style={styles.postscript}>P.S. {content.postscript}</Text>
+            ) : null}
+          </View>
+        </View>
+      </Page>
+    </Document>
+  );
+}
diff --git a/apps/studio/templates/cover-letter/veriworkly/web.tsx b/apps/studio/templates/cover-letter/veriworkly/web.tsx
new file mode 100644
index 0000000..0c321c7
--- /dev/null
+++ b/apps/studio/templates/cover-letter/veriworkly/web.tsx
@@ -0,0 +1,631 @@
+/* eslint-disable @next/next/no-img-element */
+
+import { useLayoutEffect, useMemo, useRef, useState } from "react";
+
+import type { RichTextBlock } from "../shared";
+import type { CoverLetterContent } from "@/features/cover-letter/types";
+
+import {
+  getCoverLetterState,
+  splitMarkdownLines,
+  splitParagraphs,
+  splitRichTextBlocks,
+} from "../shared";
+
+import {
+  normalizeLinkHref,
+  getLinkDisplayText,
+} from "@/features/documents/rendering/resume-rendering";
+import { FONT_FAMILY_MAP, getFontStylesheetHref } from "@/features/documents/constants/fonts";
+import { escapeHtml } from "@/features/resume/services/resume-formatters";
+
+import { SOCIAL_ICON_SRC_BY_TYPE } from "@/templates/shared/social-icons";
+
+const PAGE_HEIGHT = 1123;
+const BODY_TOP_GAP = 32;
+const PARAGRAPH_CHUNK_WORDS = 62;
+
+type VeriworklyFlowItem =
+  | { id: string; type: "greeting"; text: string }
+  | { id: string; type: "paragraph"; text: string }
+  | { id: string; type: "body-list"; items: string[] }
+  | { id: string; type: "proof-list"; items: string[] }
+  | { id: string; type: "closing"; text: string }
+  | { id: string; type: "signature"; text: string }
+  | { id: string; type: "postscript"; text: string };
+
+type CoverLetterFlowContent = Pick<
+  CoverLetterContent,
+  "body" | "closing" | "greeting" | "highlights" | "opening" | "postscript" | "signature"
+>;
+
+function splitTextIntoChunks(text: string, wordsPerChunk = PARAGRAPH_CHUNK_WORDS) {
+  const words = text.trim().split(/\s+/).filter(Boolean);
+
+  if (words.length <= wordsPerChunk) return [text];
+
+  const chunks: string[] = [];
+
+  for (let index = 0; index < words.length; index += wordsPerChunk) {
+    chunks.push(words.slice(index, index + wordsPerChunk).join(" "));
+  }
+
+  return chunks;
+}
+
+function buildVeriworklyFlowItems(content: CoverLetterFlowContent, senderName: string) {
+  const items: VeriworklyFlowItem[] = [];
+
+  if (content.greeting) items.push({ id: "greeting", type: "greeting", text: content.greeting });
+
+  const bodyBlocks: RichTextBlock[] = [
+    ...splitParagraphs(content.opening).map((text) => ({ type: "paragraph" as const, text })),
+    ...splitRichTextBlocks(content.body),
+  ];
+
+  bodyBlocks.forEach((block, blockIndex) => {
+    if (block.type === "paragraph") {
+      splitTextIntoChunks(block.text).forEach((text, chunkIndex) => {
+        items.push({
+          id: `body-${blockIndex}-${chunkIndex}`,
+          type: "paragraph",
+          text,
+        });
+      });
+      return;
+    }
+
+    items.push({
+      id: `body-list-${blockIndex}`,
+      type: "body-list",
+      items: block.items,
+    });
+  });
+
+  const highlights = splitMarkdownLines(content.highlights);
+
+  if (highlights.length > 0) {
+    items.push({ id: "proof-list", type: "proof-list", items: highlights });
+  }
+
+  if (content.closing) items.push({ id: "closing", type: "closing", text: content.closing });
+
+  items.push({ id: "signature", type: "signature", text: content.signature || senderName });
+
+  if (content.postscript) {
+    splitTextIntoChunks(content.postscript, 50).forEach((text, index) => {
+      items.push({ id: `postscript-${index}`, type: "postscript", text });
+    });
+  }
+
+  return items;
+}
+
+function renderFlowItem(item: VeriworklyFlowItem, accentColor: string) {
+  if (item.type === "greeting") return <p className="font-medium text-slate-950">{item.text}</p>;
+
+  if (item.type === "paragraph") return <p className="mt-(--paragraph-gap)">{item.text}</p>;
+
+  if (item.type === "body-list")
+    return (
+      <ul className="mt-(--paragraph-gap) grid gap-2 bg-zinc-50 px-5 py-4">
+        {item.items.map((listItem) => (
+          <li key={listItem} className="grid grid-cols-[0.65rem_1fr] gap-3">
+            <span
+              className="mt-2.5 h-1.5 w-1.5 rounded-full"
+              style={{ backgroundColor: accentColor }}
+            />
+
+            <span>{listItem}</span>
+          </li>
+        ))}
+      </ul>
+    );
+
+  if (item.type === "proof-list")
+    return (
+      <section className="mt-8 border-t border-slate-200 pt-6">
+        <p className="text-[10px] font-bold tracking-[0.2em] text-slate-500 uppercase">
+          Selected Proof
+        </p>
+
+        <div className="mt-4 grid gap-2">
+          {item.items.map((proof, proofIndex) => (
+            <div
+              key={`${proofIndex}-${proof}`}
+              className="grid grid-cols-[1.75rem_1fr] gap-3 border-b border-slate-100 pb-2 last:border-b-0"
+            >
+              <span className="text-xs leading-5 font-bold" style={{ color: accentColor }}>
+                {String(proofIndex + 1).padStart(2, "0")}
+              </span>
+
+              <p className="text-sm leading-5 text-slate-700">{proof}</p>
+            </div>
+          ))}
+        </div>
+      </section>
+    );
+
+  if (item.type === "closing") return <p>{item.text}</p>;
+
+  if (item.type === "signature")
+    return <p className="text-base font-semibold text-slate-950">{item.text}</p>;
+
+  return (
+    <p className="mt-5 border-t border-zinc-200 pt-3 text-sm leading-6 text-zinc-600">
+      P.S. {item.text}
+    </p>
+  );
+}
+
+function renderGroupedFlowItems(items: VeriworklyFlowItem[], accentColor: string) {
+  const nodes: React.ReactNode[] = [];
+  let index = 0;
+
+  while (index < items.length) {
+    const item = items[index];
+
+    if (item.type === "closing" || item.type === "signature") {
+      const group: VeriworklyFlowItem[] = [];
+
+      while (items[index]?.type === "closing" || items[index]?.type === "signature") {
+        group.push(items[index]);
+        index += 1;
+      }
+
+      nodes.push(
+        <section
+          key={`signoff-${group[0].id}`}
+          className="mt-8 space-y-2 text-[14px] text-slate-700"
+        >
+          {group.map((entry) => (
+            <div key={entry.id} className="flow-root">
+              {renderFlowItem(entry, accentColor)}
+            </div>
+          ))}
+        </section>,
+      );
+      continue;
+    }
+
+    nodes.push(
+      <div key={item.id} className="flow-root">
+        {renderFlowItem(item, accentColor)}
+      </div>,
+    );
+    index += 1;
+  }
+
+  return nodes;
+}
+
+function paginateMeasuredItems<T extends { id: string }>(
+  items: T[],
+  heights: Map<string, number>,
+  firstLimit: number,
+  nextLimit: number,
+) {
+  const pages: T[][] = [[]];
+  let pageIndex = 0;
+  let used = 0;
+
+  for (const item of items) {
+    const height = Math.ceil(heights.get(item.id) ?? 0);
+    const limit = pageIndex === 0 ? firstLimit : nextLimit;
+
+    if (pages[pageIndex].length > 0 && used + height > limit) {
+      pages.push([]);
+      pageIndex += 1;
+      used = 0;
+    }
+
+    pages[pageIndex].push(item);
+    used += height;
+  }
+
+  return pages.filter((page) => page.length > 0);
+}
+
+function getVeriworklyHtmlItemWeight(item: VeriworklyFlowItem) {
+  if (item.type === "body-list" || item.type === "proof-list") {
+    return 2 + item.items.reduce((total, listItem) => total + Math.ceil(listItem.length / 70), 0);
+  }
+
+  if (item.type === "postscript") return 2 + Math.ceil(item.text.length / 100);
+  if (item.type === "closing" || item.type === "signature" || item.type === "greeting") return 1;
+
+  return Math.max(1, Math.ceil(item.text.length / 82));
+}
+
+function paginateVeriworklyHtmlItems(items: VeriworklyFlowItem[]) {
+  const pages: VeriworklyFlowItem[][] = [[]];
+  let pageIndex = 0;
+  let used = 0;
+
+  for (const item of items) {
+    const limit = pageIndex === 0 ? 14 : 22;
+    const weight = getVeriworklyHtmlItemWeight(item);
+
+    if (pages[pageIndex].length > 0 && used + weight > limit) {
+      pages.push([]);
+      pageIndex += 1;
+      used = 0;
+    }
+
+    pages[pageIndex].push(item);
+    used += weight;
+  }
+
+  return pages.filter((page) => page.length > 0);
+}
+
+function renderVeriworklyHtmlItem(item: VeriworklyFlowItem, accentColor: string) {
+  if (item.type === "greeting") return `<p class="greeting">${escapeHtml(item.text)}</p>`;
+  if (item.type === "paragraph") return `<p>${escapeHtml(item.text)}</p>`;
+  if (item.type === "body-list") {
+    return `<ul class="body-list">${item.items.map((listItem) => `<li>${escapeHtml(listItem)}</li>`).join("")}</ul>`;
+  }
+  if (item.type === "proof-list") {
+    return `<section class="proof"><p class="proof-label">Selected Proof</p>${item.items
+      .map(
+        (proof, proofIndex) =>
+          `<div class="proof-item"><span style="color:${accentColor}">${String(proofIndex + 1).padStart(2, "0")}</span><p>${escapeHtml(proof)}</p></div>`,
+      )
+      .join("")}</section>`;
+  }
+  if (item.type === "closing") return `<p>${escapeHtml(item.text)}</p>`;
+  if (item.type === "signature") return `<p class="signature">${escapeHtml(item.text)}</p>`;
+
+  return `<p class="postscript">P.S. ${escapeHtml(item.text)}</p>`;
+}
+
+export function VeriworklyCoverLetterPreview({ content }: { content: CoverLetterContent }) {
+  const state = getCoverLetterState(content, { firstPage: 15, nextPage: 23 });
+
+  const {
+    appearance,
+    senderName,
+    senderTitle,
+    contact,
+    linkDisplayMode,
+    renderedLinks,
+    recipient,
+  } = state;
+  const fontFamily = FONT_FAMILY_MAP[appearance.fontFamily];
+  const flowSenderName = content.senderName || content.signature || "Your Name";
+  const flowContent = useMemo(
+    () => ({
+      body: content.body,
+      closing: content.closing,
+      greeting: content.greeting,
+      highlights: content.highlights,
+      opening: content.opening,
+      postscript: content.postscript,
+      signature: content.signature,
+    }),
+    [
+      content.body,
+      content.closing,
+      content.greeting,
+      content.highlights,
+      content.opening,
+      content.postscript,
+      content.signature,
+    ],
+  );
+  const flowItems = useMemo(
+    () => buildVeriworklyFlowItems(flowContent, flowSenderName),
+    [flowContent, flowSenderName],
+  );
+  const [pages, setPages] = useState<VeriworklyFlowItem[][]>(() => [flowItems]);
+  const firstPrefixRef = useRef<HTMLDivElement | null>(null);
+  const nextPrefixRef = useRef<HTMLDivElement | null>(null);
+  const itemRefs = useRef(new Map<string, HTMLDivElement>());
+
+  useLayoutEffect(() => {
+    const frame = window.requestAnimationFrame(() => {
+      const firstPrefixHeight = firstPrefixRef.current?.getBoundingClientRect().height ?? 0;
+      const nextPrefixHeight = nextPrefixRef.current?.getBoundingClientRect().height ?? 0;
+      const firstLimit = PAGE_HEIGHT - appearance.pageMargin * 2 - firstPrefixHeight - BODY_TOP_GAP;
+      const nextLimit = PAGE_HEIGHT - appearance.pageMargin * 2 - nextPrefixHeight - BODY_TOP_GAP;
+      const heights = new Map<string, number>();
+
+      flowItems.forEach((item) => {
+        const node = itemRefs.current.get(item.id);
+        heights.set(item.id, node?.getBoundingClientRect().height ?? 0);
+      });
+
+      const nextPages = paginateMeasuredItems(flowItems, heights, firstLimit, nextLimit);
+      const nextKey = nextPages.map((page) => page.map((item) => item.id).join(",")).join("|");
+
+      setPages((current) => {
+        const currentKey = current.map((page) => page.map((item) => item.id).join(",")).join("|");
+        return currentKey === nextKey ? current : nextPages;
+      });
+    });
+
+    return () => window.cancelAnimationFrame(frame);
+  }, [appearance.lineHeight, appearance.pageMargin, appearance.paragraphSpacing, flowItems]);
+
+  function renderSidebar() {
+    return (
+      <aside
+        className="flex h-280.75 flex-col border-r border-slate-200 px-6 py-9 text-slate-950"
+        style={{ backgroundColor: appearance.sidebarColor }}
+      >
+        <div>
+          <p
+            style={{ color: appearance.accentColor }}
+            className="text-[10px] font-bold tracking-[0.2em] uppercase"
+          >
+            Candidate
+          </p>
+
+          <h1 className="mt-4 text-[26px] leading-[1.08] font-semibold tracking-normal text-slate-950">
+            {senderName}
+          </h1>
+
+          <p className="mt-2 text-sm leading-6 text-slate-600">{senderTitle}</p>
+        </div>
+
+        <div className="my-8 h-px w-12" style={{ backgroundColor: appearance.accentColor }} />
+
+        <div className="space-y-2 text-xs leading-5 text-slate-600">
+          {contact.map((item) => (
+            <p key={item}>{item}</p>
+          ))}
+
+          {renderedLinks && renderedLinks.length > 0 && (
+            <div className="my-6 h-px w-12" style={{ backgroundColor: appearance.accentColor }} />
+          )}
+
+          {renderedLinks.map((link) => (
+            <a
+              key={link.id}
+              href={normalizeLinkHref(link.url)}
+              style={{ color: appearance.accentColor }}
+              className="flex items-center gap-1 font-medium underline decoration-slate-300"
+            >
+              {linkDisplayMode !== "url" && (
+                <img
+                  alt=""
+                  aria-hidden="true"
+                  className="size-3.5 shrink-0"
+                  src={SOCIAL_ICON_SRC_BY_TYPE[link.type] || SOCIAL_ICON_SRC_BY_TYPE.custom}
+                />
+              )}
+
+              {linkDisplayMode !== "icon" && getLinkDisplayText(link, linkDisplayMode)}
+            </a>
+          ))}
+        </div>
+
+        <div className="mt-auto border-t border-slate-200 pt-7">
+          <p
+            style={{ color: appearance.accentColor }}
+            className="text-[10px] font-bold tracking-[0.2em] uppercase"
+          >
+            Target
+          </p>
+
+          <p className="mt-2 text-sm leading-5 font-semibold text-slate-950">
+            {content.jobTitle || content.subject || "Open role"}
+          </p>
+
+          {content.companyName ? (
+            <p className="mt-1 text-xs leading-5 text-slate-600">{content.companyName}</p>
+          ) : null}
+        </div>
+      </aside>
+    );
+  }
+
+  return (
+    <div className="grid gap-6">
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute opacity-0"
+        style={{ left: -10000, top: 0, width: 794 }}
+      >
+        <article
+          className="grid h-280.75 w-198.5 grid-cols-[214px_1fr] overflow-hidden text-[#111827]"
+          style={{
+            backgroundColor: appearance.pageColor,
+            color: appearance.textColor,
+            fontFamily,
+          }}
+        >
+          {renderSidebar()}
+
+          <main className="h-280.75 bg-white" style={{ padding: appearance.pageMargin }}>
+            <div ref={firstPrefixRef}>
+              <div className="flex items-start justify-between gap-6 border-b border-slate-200 pb-7">
+                <div className="space-y-1 text-sm leading-5 text-slate-600">
+                  {recipient.map((line) => (
+                    <p key={line}>{line}</p>
+                  ))}
+                </div>
+
+                {content.date ? (
+                  <p className="shrink-0 text-right text-xs font-semibold tracking-[0.16em] text-slate-500 uppercase">
+                    {content.date}
+                  </p>
+                ) : null}
+              </div>
+
+              <section
+                className="mt-8 border-l-2 pl-5"
+                style={{ borderLeftColor: appearance.accentColor }}
+              >
+                <p
+                  className="text-[10px] font-bold tracking-[0.2em] uppercase"
+                  style={{ color: appearance.accentColor }}
+                >
+                  Cover Letter
+                </p>
+
+                <h2 className="mt-2 text-[22px] leading-snug font-semibold tracking-normal text-[#0f172a]">
+                  {content.subject || content.jobTitle || "Application"}
+                </h2>
+              </section>
+            </div>
+
+            <div ref={nextPrefixRef}>
+              <p className="border-b border-slate-200 pb-5 text-[10px] font-bold tracking-[0.2em] text-slate-500 uppercase">
+                Cover Letter Continued
+              </p>
+
+              <section
+                className="mt-8 border-l-2 pl-5"
+                style={{ borderLeftColor: appearance.accentColor }}
+              >
+                <p
+                  className="text-[10px] font-bold tracking-[0.2em] uppercase"
+                  style={{ color: appearance.accentColor }}
+                >
+                  Cover Letter
+                </p>
+
+                <h2 className="mt-2 text-[22px] leading-snug font-semibold tracking-normal text-[#0f172a]">
+                  {content.subject || content.jobTitle || "Application"}
+                </h2>
+              </section>
+            </div>
+
+            <section
+              className="mt-8 text-[14.5px] text-slate-700"
+              style={{
+                lineHeight: appearance.lineHeight,
+                ["--paragraph-gap" as string]: `${appearance.paragraphSpacing}px`,
+              }}
+            >
+              {flowItems.map((item) => (
+                <div
+                  key={item.id}
+                  ref={(node) => {
+                    if (node) itemRefs.current.set(item.id, node);
+                    else itemRefs.current.delete(item.id);
+                  }}
+                  className="flow-root"
+                >
+                  {renderFlowItem(item, appearance.accentColor)}
+                </div>
+              ))}
+            </section>
+          </main>
+        </article>
+      </div>
+
+      {pages.map((pageBlocks, pageIndex) => (
+        <article
+          key={pageIndex}
+          style={{
+            backgroundColor: appearance.pageColor,
+            color: appearance.textColor,
+            fontFamily,
+          }}
+          className="mx-auto grid h-280.75 w-198.5 max-w-full grid-cols-[214px_1fr] overflow-hidden text-[#111827] shadow-sm ring-1 ring-zinc-200"
+        >
+          {renderSidebar()}
+
+          <main className="h-280.75 bg-white" style={{ padding: appearance.pageMargin }}>
+            {pageIndex === 0 ? (
+              <>
+                <div className="flex items-start justify-between gap-6 border-b border-slate-200 pb-7">
+                  <div className="space-y-1 text-sm leading-5 text-slate-600">
+                    {recipient.map((line) => (
+                      <p key={line}>{line}</p>
+                    ))}
+                  </div>
+
+                  {content.date ? (
+                    <p className="shrink-0 text-right text-xs font-semibold tracking-[0.16em] text-slate-500 uppercase">
+                      {content.date}
+                    </p>
+                  ) : null}
+                </div>
+
+                <section
+                  className="mt-8 border-l-2 pl-5"
+                  style={{ borderLeftColor: appearance.accentColor }}
+                >
+                  <p
+                    className="text-[10px] font-bold tracking-[0.2em] uppercase"
+                    style={{ color: appearance.accentColor }}
+                  >
+                    Cover Letter
+                  </p>
+
+                  <h2 className="mt-2 text-[22px] leading-snug font-semibold tracking-normal text-[#0f172a]">
+                    {content.subject || content.jobTitle || "Application"}
+                  </h2>
+                </section>
+              </>
+            ) : (
+              <>
+                <p className="border-b border-slate-200 pb-5 text-[10px] font-bold tracking-[0.2em] text-slate-500 uppercase">
+                  Cover Letter Continued
+                </p>
+
+                <section
+                  className="mt-8 border-l-2 pl-5"
+                  style={{ borderLeftColor: appearance.accentColor }}
+                >
+                  <p
+                    className="text-[10px] font-bold tracking-[0.2em] uppercase"
+                    style={{ color: appearance.accentColor }}
+                  >
+                    Cover Letter
+                  </p>
+
+                  <h2 className="mt-2 text-[22px] leading-snug font-semibold tracking-normal text-[#0f172a]">
+                    {content.subject || content.jobTitle || "Application"}
+                  </h2>
+                </section>
+              </>
+            )}
+
+            <section
+              className="mt-8 text-[14.5px] text-slate-700"
+              style={{
+                lineHeight: appearance.lineHeight,
+                ["--paragraph-gap" as string]: `${appearance.paragraphSpacing}px`,
+              }}
+            >
+              {renderGroupedFlowItems(pageBlocks, appearance.accentColor)}
+            </section>
+          </main>
+        </article>
+      ))}
+    </div>
+  );
+}
+
+export function buildVeriworklyCoverLetterHtml(content: CoverLetterContent): string {
+  const state = getCoverLetterState(content, { firstPage: 15, nextPage: 23 });
+  const {
+    appearance,
+    senderName,
+    senderTitle,
+    contact,
+    linkDisplayMode,
+    renderedLinks,
+    recipient,
+  } = state;
+  const subject = escapeHtml(content.subject || content.jobTitle || "Application");
+  const fontFamily = FONT_FAMILY_MAP[appearance.fontFamily];
+  const fontHref = getFontStylesheetHref(appearance.fontFamily);
+  const flowItems = buildVeriworklyFlowItems(content, senderName);
+  const pages = paginateVeriworklyHtmlItems(flowItems);
+
+  return `<!doctype html><html lang="en"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><title>${escapeHtml(content.senderName || "Cover Letter")}</title><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link rel="stylesheet" href="${escapeHtml(fontHref)}"><style>
+*{box-sizing:border-box}body{margin:0;padding:32px 16px;background:#f4f4f5;color:${appearance.textColor};font-family:${fontFamily}}.page{width:794px;height:1123px;margin:0 auto 24px;overflow:hidden;background:${appearance.pageColor};color:${appearance.textColor};box-shadow:0 0 0 1px #e4e4e7;page-break-after:always}.page:last-child{page-break-after:auto}p{margin:0 0 ${appearance.paragraphSpacing}px;line-height:${appearance.lineHeight}}.label{color:${appearance.accentColor};font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase}.body{margin-top:32px;font-size:14.5px}.body-list{background:#f4f4f5;margin:16px 0;padding:14px 18px 14px 28px;line-height:${appearance.lineHeight}}.proof{border-top:1px solid #e2e8f0;margin-top:32px;padding-top:24px}.proof-label{color:#64748b;font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}.proof-item{display:grid;grid-template-columns:28px 1fr;gap:12px;border-bottom:1px solid #f1f5f9;padding:0 0 8px;margin-bottom:8px}.proof-item span{font-size:12px;font-weight:700;line-height:20px}.proof-item p{font-size:14px;color:#334155;line-height:1.45}.signature{font-size:16px;font-weight:700;color:#0f172a}.postscript{border-top:1px solid #e4e4e7;padding-top:14px;color:#52525b}.continued{border-bottom:1px solid #dbe4f0;padding-bottom:20px;color:#64748b;font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase}.veri-page{display:grid;grid-template-columns:214px 1fr}.veri-page aside{background:${appearance.sidebarColor};color:#0f172a;border-right:1px solid #e2e8f0;padding:36px 28px;display:flex;flex-direction:column}.veri-page h1{margin:16px 0 0;font-size:26px;line-height:1.08}.veri-page .muted,.veri-page .rail,.veri-page .target p{color:#475569}.veri-page .rule{width:48px;height:1px;background:${appearance.accentColor};margin-top:40px}.veri-page .rail{margin-top:32px;font-size:12px}.veri-page .rail a{display:block;color:${appearance.accentColor};font-weight:600;text-underline-offset:4px}.veri-page .target{border-top:1px solid #e2e8f0;margin-top:auto;padding-top:28px}.veri-page main{padding:${appearance.pageMargin}px;background:#fff}.veri-page .meta{display:flex;justify-content:space-between;gap:24px;border-bottom:1px solid #e2e8f0;padding-bottom:28px;color:#475569}.veri-page .subject{border-left:2px solid ${appearance.accentColor};margin-top:32px;padding:4px 0 4px 20px}.veri-page h2{margin:8px 0 0;font-size:22px}@media print{body{padding:0;background:white}.page{box-shadow:none;margin:0}}</style></head><body>${pages
+    .map((blocks, pageIndex) => {
+      const first = pageIndex === 0;
+      const body = blocks
+        .map((item) => renderVeriworklyHtmlItem(item, appearance.accentColor))
+        .join("");
+      return `<article class="page veri-page"><aside><p class="label">Candidate</p><h1>${escapeHtml(senderName)}</h1><p class="muted">${escapeHtml(senderTitle)}</p><div class="rule"></div><div class="rail">${contact.map((item) => `<p>${escapeHtml(item)}</p>`).join("")}${renderedLinks.map((link) => `<a href="${escapeHtml(normalizeLinkHref(link.url))}">${escapeHtml(getLinkDisplayText(link, linkDisplayMode))}</a>`).join("")}</div><div class="target"><p class="label">Target</p><strong>${subject}</strong><p>${escapeHtml(content.companyName)}</p></div></aside><main>${first ? `<div class="meta"><div>${recipient.map((line) => `<p>${escapeHtml(line)}</p>`).join("")}</div><p>${escapeHtml(content.date)}</p></div><section class="subject"><p class="label">Cover Letter</p><h2>${subject}</h2></section>` : `<p class="continued">Cover Letter Continued</p><section class="subject"><p class="label">Cover Letter</p><h2>${subject}</h2></section>`}<section class="body">${body}</section></main></article>`;
+    })
+    .join("")}</body></html>`;
+}
diff --git a/apps/studio/templates/cover-letter/web.tsx b/apps/studio/templates/cover-letter/web.tsx
new file mode 100644
index 0000000..e90a2ef
--- /dev/null
+++ b/apps/studio/templates/cover-letter/web.tsx
@@ -0,0 +1,53 @@
+import type { CoverLetterContent } from "@/features/cover-letter/types";
+import { DocumentFontLoader } from "@/features/documents/components/DocumentFontLoader";
+
+import {
+  buildCoverLetterText,
+  buildCoverLetterMarkdown,
+  COVER_LETTER_VERIWORKLY_ID,
+} from "./shared";
+import {
+  ProfessionalCoverLetterPreview,
+  buildProfessionalCoverLetterHtml,
+} from "./professional/web";
+import { VeriworklyCoverLetterPreview, buildVeriworklyCoverLetterHtml } from "./veriworkly/web";
+
+export { buildCoverLetterMarkdown, buildCoverLetterText };
+export { splitContactLinks, splitMarkdownLines, splitRichTextBlocks } from "./shared";
+
+interface CoverLetterPreviewProps {
+  content: CoverLetterContent;
+  templateId: string;
+}
+
+export function renderCoverLetterWeb(content: CoverLetterContent) {
+  return buildCoverLetterText(content);
+}
+
+export function CoverLetterPreview({ content, templateId }: CoverLetterPreviewProps) {
+  const fontFamily = content.appearance?.fontFamily;
+
+  if (templateId === COVER_LETTER_VERIWORKLY_ID) {
+    return (
+      <>
+        <DocumentFontLoader fontFamily={fontFamily} />
+        <VeriworklyCoverLetterPreview content={content} />
+      </>
+    );
+  }
+
+  return (
+    <>
+      <DocumentFontLoader fontFamily={fontFamily} />
+      <ProfessionalCoverLetterPreview content={content} />
+    </>
+  );
+}
+
+export function buildCoverLetterHtml(content: CoverLetterContent, templateId: string): string {
+  if (templateId === COVER_LETTER_VERIWORKLY_ID) {
+    return buildVeriworklyCoverLetterHtml(content);
+  }
+
+  return buildProfessionalCoverLetterHtml(content);
+}
diff --git a/apps/studio/templates/index.ts b/apps/studio/templates/index.ts
index a12be5b..0ce54e6 100644
--- a/apps/studio/templates/index.ts
+++ b/apps/studio/templates/index.ts
@@ -1,17 +1,13 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import React from "react";
 
-import type { ResumeTemplateMeta } from "./resume/types";
+import type { TemplateMeta } from "@/features/documents/core/types";
 
 import { precisionAtsMeta } from "./resume/precision-ats/meta";
 import { executiveClarityMeta } from "./resume/executive-clarity/meta";
 
-// Re-export the meta type so consumers can use it without importing from the
-// deeply-nested resume/types path.
-export type { ResumeTemplateMeta };
-
 /** A renderable template record used by the web editor. */
-export interface TemplateDefinition extends ResumeTemplateMeta {
+export interface TemplateDefinition extends TemplateMeta {
   renderWeb: (props: any) => React.ReactNode;
 }
 
@@ -51,4 +47,4 @@ export const getTemplateById = (id: string | undefined): TemplateDefinition | un
   templateRegistry.find((t) => t.id === id);
 
 /** Convenience list of all template metas (no render function). */
-export const resumeTemplateMetas: ResumeTemplateMeta[] = [executiveClarityMeta, precisionAtsMeta];
+export const resumeTemplateMetas: TemplateMeta[] = [executiveClarityMeta, precisionAtsMeta];
diff --git a/apps/studio/templates/pdf/fonts.ts b/apps/studio/templates/pdf/fonts.ts
index 265d174..1934e39 100644
--- a/apps/studio/templates/pdf/fonts.ts
+++ b/apps/studio/templates/pdf/fonts.ts
@@ -2,8 +2,8 @@ import { Font } from "@react-pdf/renderer";
 
 import type { ResumeData } from "@/types/resume";
 
-import { FONT_REGISTRY } from "@/features/documents/constants/fonts";
 import { getResumeRenderStyle } from "@/features/documents/rendering/resume-rendering";
+import { FONT_REGISTRY, normalizeFontFamilyId } from "@/features/documents/constants/fonts";
 
 const registeredFonts = new Set<string>();
 let hasRegisteredHyphenation = false;
@@ -23,9 +23,16 @@ function registerLongWordBreaking() {
 export function registerPdfFont(resume: ResumeData) {
   if (typeof window === "undefined") return;
 
+  const fontId = getResumeRenderStyle(resume).fontFamily;
+  registerPdfFontById(fontId);
+}
+
+export function registerPdfFontById(fontFamily: string | null | undefined) {
+  if (typeof window === "undefined") return;
+
   registerLongWordBreaking();
 
-  const fontId = getResumeRenderStyle(resume).fontFamily;
+  const fontId = normalizeFontFamilyId(fontFamily);
   const font = FONT_REGISTRY[fontId];
 
   if (!font || registeredFonts.has(font.id)) return;
diff --git a/apps/studio/templates/resume/executive-clarity/meta.ts b/apps/studio/templates/resume/executive-clarity/meta.ts
index fb2b955..73a33be 100644
--- a/apps/studio/templates/resume/executive-clarity/meta.ts
+++ b/apps/studio/templates/resume/executive-clarity/meta.ts
@@ -1,17 +1,12 @@
-import type { ResumeTemplateMeta } from "../types";
+import type { TemplateMeta } from "@/features/documents/core/types";
 
-/**
- * Executive Clarity – single source of truth.
- * The `id` doubles as the URL slug on veriworkly.com/templates/<id>
- * and the `templateId` stored in every resume document.
- */
-export const executiveClarityMeta: ResumeTemplateMeta = {
+export const executiveClarityMeta = {
   id: "executive-clarity",
   name: "Executive Clarity",
-  documentType: "resume",
+  documentType: "RESUME",
   description:
     "A polished single-column resume with refined spacing, strong section rhythm, and ATS-safe structure. Ideal for professionals who want a sophisticated, modern look.",
   accentColor: "#0ea5e9",
-  previewImage: "/templates/executive-clarity.png",
+  previewImage: "/templates/resume/executive-clarity.png",
   tags: ["One column", "ATS-friendly", "Modern", "Professional"],
-};
+} satisfies TemplateMeta;
diff --git a/apps/studio/templates/resume/precision-ats/meta.ts b/apps/studio/templates/resume/precision-ats/meta.ts
index d3bc99d..d90ce36 100644
--- a/apps/studio/templates/resume/precision-ats/meta.ts
+++ b/apps/studio/templates/resume/precision-ats/meta.ts
@@ -1,17 +1,12 @@
-import type { ResumeTemplateMeta } from "../types";
+import type { TemplateMeta } from "@/features/documents/core/types";
 
-/**
- * Precision ATS – single source of truth.
- * The `id` doubles as the URL slug on veriworkly.com/templates/<id>
- * and the `templateId` stored in every resume document.
- */
-export const precisionAtsMeta: ResumeTemplateMeta = {
+export const precisionAtsMeta = {
   id: "precision-ats",
   name: "Precision ATS",
-  documentType: "resume",
+  documentType: "RESUME",
   description:
     "A dense, recruiter-friendly layout for longer resumes that still exports as a real matching PDF. Built for clarity and parsing accuracy above all else.",
   accentColor: "#10b981",
-  previewImage: "/templates/precision-ats.png",
+  previewImage: "/templates/resume/precision-ats.png",
   tags: ["One column", "ATS-friendly", "Compact", "Simple"],
-};
+} satisfies TemplateMeta;
diff --git a/apps/studio/templates/resume/types.ts b/apps/studio/templates/resume/types.ts
deleted file mode 100644
index 7e742a8..0000000
--- a/apps/studio/templates/resume/types.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Metadata type for resume templates.
- * Each template folder has a `meta.ts` that exports an object conforming to this type.
- * The `id` is the canonical slug used in URLs and stored as `templateId` in resume documents.
- */
-export interface ResumeTemplateMeta {
-  /** Slug-friendly ID. Used in URLs and as `templateId` in resume documents. */
-  id: string;
-  /** Human-readable display name shown in the UI. */
-  name: string;
-  /** Always "resume" for templates in this folder. */
-  documentType: "resume";
-  /** Short description shown in template cards and SEO meta. */
-  description: string;
-  /** Primary accent color (hex) used for template-picker UI. */
-  accentColor: string;
-  /** Path to the preview image served from the site's public directory. */
-  previewImage: string;
-  /** Filter/discovery tags shown in the template gallery. */
-  tags: string[];
-}