diff --git a/apps/site/app/sitemap.ts b/apps/site/app/sitemap.ts
index 73305cc..789502c 100644
--- a/apps/site/app/sitemap.ts
+++ b/apps/site/app/sitemap.ts
@@ -1,6 +1,7 @@
 import type { MetadataRoute } from "next";
 
 import { siteConfig } from "@/config/site";
+import { documentTypeSummaries, templateSummaries } from "@/config/templates";
 
 export const revalidate = 86400;
 
@@ -83,8 +84,21 @@ const publicRoutes = [
 
 export default function sitemap(): MetadataRoute.Sitemap {
   const lastModified = new Date();
+  const templateRoutes = documentTypeSummaries
+    .filter((docType) => docType.status === "available")
+    .map((docType) => ({
+      url: `${siteConfig.url}${docType.href}`,
+      changeFrequency: "weekly" as const,
+      priority: 0.85,
+    }));
 
-  return publicRoutes.map((route) => ({
+  const templateDetailRoutes = templateSummaries.map((template) => ({
+    url: `${siteConfig.url}/templates/${template.documentType}/${template.id}`,
+    changeFrequency: "monthly" as const,
+    priority: 0.75,
+  }));
+
+  return [...publicRoutes, ...templateRoutes, ...templateDetailRoutes].map((route) => ({
     ...route,
     lastModified,
   }));
diff --git a/apps/site/app/templates/[docType]/[templateId]/page.tsx b/apps/site/app/templates/[docType]/[templateId]/page.tsx
new file mode 100644
index 0000000..53fa9a8
--- /dev/null
+++ b/apps/site/app/templates/[docType]/[templateId]/page.tsx
@@ -0,0 +1,236 @@
+import Link from "next/link";
+import Image from "next/image";
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { ArrowRight, CheckCircle2 } from "lucide-react";
+
+import {
+  templateSummaries,
+  getDocumentTypeSummary,
+  getTemplateByDocumentTypeAndId,
+} from "@/config/templates";
+import { siteConfig } from "@/config/site";
+
+import { Button, Container } from "@veriworkly/ui";
+
+import { buildEditorUrl } from "../../components/utils";
+import { TemplateDetailHeader } from "../../components/TemplateHeader";
+
+type PageProps = {
+  params: Promise<{ docType: string; templateId: string }>;
+};
+
+export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+  const { docType, templateId } = await params;
+
+  const template = getTemplateByDocumentTypeAndId(docType, templateId);
+
+  if (!template) {
+    return {
+      title: "Template Not Found | VeriWorkly",
+    };
+  }
+
+  return {
+    title: template.seo.title,
+    description: template.seo.description,
+    alternates: {
+      canonical: `${siteConfig.url}/templates/${docType}/${templateId}`,
+    },
+    openGraph: {
+      title: template.seo.title,
+      description: template.seo.description,
+      url: `${siteConfig.url}/templates/${docType}/${templateId}`,
+      siteName: siteConfig.name,
+      images: [
+        {
+          url: template.previewImage,
+          width: 1200,
+          height: 1600,
+          alt: `${template.name} ${template.documentTypeLabel.toLowerCase()} template preview`,
+        },
+      ],
+      type: "website",
+    },
+  };
+}
+
+export function generateStaticParams() {
+  return templateSummaries.map((template) => ({
+    docType: template.documentType,
+    templateId: template.id,
+  }));
+}
+
+const TemplateDetailPage = async ({ params }: PageProps) => {
+  const { docType, templateId } = await params;
+
+  const docTypeData = getDocumentTypeSummary(docType);
+  const template = getTemplateByDocumentTypeAndId(docType, templateId);
+
+  if (!docTypeData || !template) notFound();
+
+  const editorUrl = buildEditorUrl(template);
+
+  return (
+    <Container className="space-y-14 pt-28 pb-16 lg:pt-36">
+      <TemplateDetailHeader template={template} />
+
+      <section className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_minmax(320px,420px)] lg:items-start">
+        <div className="border-border bg-card/70 overflow-hidden rounded-3xl border shadow-[0_34px_110px_-80px_rgba(15,23,42,0.85)]">
+          <div className="border-border flex flex-wrap items-center justify-between gap-3 border-b px-5 py-4">
+            <div>
+              <p className="text-foreground text-sm font-semibold">Full document preview</p>
+              <p className="text-muted text-xs">Rendered from the production template asset</p>
+            </div>
+
+            <span
+              className="h-3 w-16 rounded-full"
+              style={{ backgroundColor: template.accentColor }}
+              aria-hidden="true"
+            />
+          </div>
+
+          <div className="relative flex min-h-168 items-center justify-center overflow-hidden bg-[linear-gradient(135deg,var(--background),color-mix(in_srgb,var(--accent)_10%,var(--background)))] p-5 sm:p-8">
+            <div
+              className="absolute top-10 right-10 h-32 w-32 rounded-full opacity-15 blur-3xl"
+              style={{ backgroundColor: template.accentColor }}
+              aria-hidden="true"
+            />
+
+            <div className="border-border relative aspect-8.5/11 h-152 max-h-[78vh] overflow-hidden rounded-sm border bg-white shadow-[0_34px_90px_-48px_rgba(15,23,42,0.9)]">
+              <Image
+                fill
+                priority
+                src={template.previewImage}
+                alt={`${template.name} ${template.documentTypeLabel.toLowerCase()} template preview`}
+                sizes="(min-width: 1024px) 620px, 92vw"
+                className="object-contain object-top"
+              />
+            </div>
+          </div>
+        </div>
+
+        <aside className="space-y-5 lg:sticky lg:top-24">
+          <div className="border-border bg-card/80 rounded-3xl border p-6">
+            <p className="text-muted text-xs font-semibold tracking-[0.18em] uppercase">
+              Fit report
+            </p>
+
+            <h2 className="text-foreground mt-3 text-2xl font-semibold tracking-tight">
+              Why this one works
+            </h2>
+
+            <p className="text-muted mt-3 text-sm leading-6">{template.designVision}</p>
+
+            <ul className="mt-6 space-y-3">
+              {template.proofPoints.map((point) => (
+                <li key={point} className="text-muted flex gap-3 text-sm leading-6">
+                  <CheckCircle2
+                    className="text-accent mt-0.5 h-4 w-4 shrink-0"
+                    aria-hidden="true"
+                  />
+                  <span>{point}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          <div className="border-border bg-card/80 rounded-3xl border p-6">
+            <p className="text-foreground text-sm font-semibold">Target audience</p>
+
+            <div className="mt-4 flex flex-wrap gap-2">
+              {template.audience.map((audience) => (
+                <span
+                  key={audience}
+                  className="border-border bg-background text-muted rounded-full border px-3 py-1.5 text-sm"
+                >
+                  {audience}
+                </span>
+              ))}
+            </div>
+          </div>
+
+          <Button asChild size="lg" variant="primary" className="h-13 w-full rounded-full px-6">
+            <Link href={editorUrl}>
+              Use This Template
+              <ArrowRight className="h-4 w-4" aria-hidden="true" />
+            </Link>
+          </Button>
+        </aside>
+      </section>
+
+      <section className="grid gap-4 lg:grid-cols-3" aria-label="Template decision points">
+        {template.bestFor.map((item) => (
+          <div key={item} className="border-border bg-card/70 rounded-2xl border p-5">
+            <CheckCircle2 className="text-accent h-5 w-5" aria-hidden="true" />
+            <p className="text-muted mt-4 text-sm leading-6">{item}</p>
+          </div>
+        ))}
+      </section>
+
+      <section className="space-y-5" aria-label="Template system">
+        <div className="flex flex-wrap items-end justify-between gap-4">
+          <div>
+            <h2 className="text-foreground text-3xl font-semibold tracking-tight">
+              Template system
+            </h2>
+
+            <p className="text-muted mt-2 max-w-2xl text-sm leading-6">
+              The layout is not just a skin. These choices decide what recruiters see first and how
+              the exported document scans.
+            </p>
+          </div>
+        </div>
+
+        <div className="border-border bg-border grid overflow-hidden rounded-2xl border lg:grid-cols-3">
+          {template.typography.map((choice) => (
+            <div key={choice} className="bg-card p-5">
+              <p className="text-muted text-xs font-semibold tracking-[0.18em] uppercase">
+                Typography
+              </p>
+
+              <p className="text-muted mt-4 text-sm leading-6">{choice}</p>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      <section className="space-y-5" aria-label="Template structure">
+        <h2 className="text-foreground text-3xl font-semibold tracking-tight">
+          Structure walkthrough
+        </h2>
+
+        <div className="divide-border border-border bg-card/75 divide-y overflow-hidden rounded-2xl border">
+          {template.structure.map((section, index) => (
+            <div key={section.title} className="grid gap-5 p-5 md:grid-cols-[90px_minmax(0,1fr)]">
+              <div className="text-accent text-3xl font-semibold">
+                {(index + 1).toString().padStart(2, "0")}
+              </div>
+
+              <div className="space-y-4">
+                <div>
+                  <h3 className="text-foreground text-xl font-semibold">{section.title}</h3>
+                  <p className="text-muted mt-1 text-sm leading-6">{section.description}</p>
+                </div>
+
+                <div className="flex flex-wrap gap-2">
+                  {section.items.map((item) => (
+                    <span
+                      key={item}
+                      className="border-border bg-background text-muted rounded-full border px-3 py-1.5 text-sm"
+                    >
+                      {item}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </section>
+    </Container>
+  );
+};
+
+export default TemplateDetailPage;
diff --git a/apps/site/app/templates/[docType]/page.tsx b/apps/site/app/templates/[docType]/page.tsx
new file mode 100644
index 0000000..e0900f7
--- /dev/null
+++ b/apps/site/app/templates/[docType]/page.tsx
@@ -0,0 +1,166 @@
+import Link from "next/link";
+import type { Metadata } from "next";
+import { notFound, permanentRedirect } from "next/navigation";
+
+import {
+  documentTypeSummaries,
+  getTemplateByLegacyId,
+  getDocumentTypeSummary,
+  getTemplatesByDocumentType,
+} from "@/config/templates";
+import { siteConfig } from "@/config/site";
+
+import { Container } from "@veriworkly/ui";
+
+import EmptyState from "../components/EmptyState";
+import TemplateGroup from "../components/TemplateGroup";
+import TemplatesHeader from "../components/TemplatesHeader";
+import { getSingleParam, getTemplateHref } from "../components/utils";
+
+type PageProps = {
+  params: Promise<{ docType: string }>;
+  searchParams?: Promise<{
+    family?: string;
+    layout?: string;
+  }>;
+};
+
+export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+  const { docType } = await params;
+
+  const docTypeData = getDocumentTypeSummary(docType);
+
+  if (!docTypeData || docTypeData.status !== "available") {
+    return {
+      title: "Templates Not Found | VeriWorkly",
+    };
+  }
+
+  return {
+    title: docTypeData.seoTitle,
+    description: docTypeData.seoDescription,
+    alternates: {
+      canonical: `${siteConfig.url}/templates/${docType}`,
+    },
+    openGraph: {
+      title: docTypeData.seoTitle,
+      description: docTypeData.seoDescription,
+      url: `${siteConfig.url}/templates/${docType}`,
+      siteName: siteConfig.name,
+      type: "website",
+    },
+  };
+}
+
+export function generateStaticParams() {
+  return documentTypeSummaries
+    .filter((docType) => docType.status === "available")
+    .map((docType) => ({ docType: docType.id }));
+}
+
+const TemplatesByDocumentTypePage = async ({ params, searchParams }: PageProps) => {
+  const [{ docType }, resolvedSearchParams] = await Promise.all([params, searchParams]);
+
+  const legacyTemplate = getTemplateByLegacyId(docType);
+  if (legacyTemplate) permanentRedirect(getTemplateHref(legacyTemplate));
+
+  const docTypeData = getDocumentTypeSummary(docType);
+  if (!docTypeData || docTypeData.status !== "available") notFound();
+
+  const templates = getTemplatesByDocumentType(docType);
+  const selectedFamily = getSingleParam(resolvedSearchParams?.family, "All");
+  const selectedLayout = getSingleParam(resolvedSearchParams?.layout, "All");
+
+  const visibleTemplates = templates.filter((template) => {
+    const familyMatch = selectedFamily === "All" || template.family === selectedFamily;
+    const layoutMatch = selectedLayout === "All" || template.layout === selectedLayout;
+
+    return familyMatch && layoutMatch;
+  });
+
+  const familyGroups = Array.from(new Set(templates.map((template) => template.family))).map(
+    (family) => ({
+      title: family,
+      description:
+        family === "Compact Core"
+          ? "High-density layouts for applications where parsing, keywords, and page control matter."
+          : family === "Modern Core"
+            ? "Polished application layouts with contemporary spacing and calm hierarchy."
+            : family === "Classic Letter"
+              ? "Formal letter systems for conservative, high-trust application moments."
+              : "Distinctive letter systems for modern applicants who still need a credible PDF.",
+      items: visibleTemplates.filter((template) => template.family === family),
+    }),
+  );
+
+  return (
+    <Container className="space-y-14 pt-28 pb-16 lg:pt-36">
+      <TemplatesHeader
+        docType={docTypeData}
+        templates={templates}
+        selectedFamily={selectedFamily}
+        selectedLayout={selectedLayout}
+      />
+
+      <section
+        className="border-border bg-card/65 overflow-hidden rounded-2xl border"
+        aria-label={`${docTypeData.label} template quick comparison`}
+      >
+        <div className="bg-border grid gap-px lg:grid-cols-2">
+          {templates.map((template) => (
+            <Link
+              key={template.id}
+              href={getTemplateHref(template)}
+              className="group bg-card hover:bg-background/70 focus-visible:ring-accent p-5 transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
+            >
+              <div className="flex items-start justify-between gap-4">
+                <div className="min-w-0 space-y-2">
+                  <p className="text-muted text-xs font-semibold tracking-[0.18em] uppercase">
+                    {template.family}
+                  </p>
+
+                  <h2 className="text-foreground text-xl font-semibold tracking-tight">
+                    {template.name}
+                  </h2>
+
+                  <p className="text-muted line-clamp-2 text-sm leading-6">
+                    {template.shortDescription}
+                  </p>
+                </div>
+
+                <span
+                  className="mt-1 h-3 w-12 shrink-0 rounded-full"
+                  style={{ backgroundColor: template.accentColor }}
+                  aria-hidden="true"
+                />
+              </div>
+
+              <div className="mt-5 flex flex-wrap gap-2">
+                {[template.layout, ...template.audience.slice(0, 2)].map((item) => (
+                  <span
+                    key={item}
+                    className="border-border bg-background text-muted rounded-full border px-3 py-1 text-xs"
+                  >
+                    {item}
+                  </span>
+                ))}
+              </div>
+            </Link>
+          ))}
+        </div>
+      </section>
+
+      {visibleTemplates.length ? (
+        <div className="space-y-12">
+          {familyGroups.map(
+            (group) => group.items.length > 0 && <TemplateGroup key={group.title} group={group} />,
+          )}
+        </div>
+      ) : (
+        <EmptyState resetHref={`/templates/${docType}`} />
+      )}
+    </Container>
+  );
+};
+
+export default TemplatesByDocumentTypePage;
diff --git a/apps/site/app/templates/[template]/error.tsx b/apps/site/app/templates/[template]/error.tsx
deleted file mode 100644
index a3f0c6d..0000000
--- a/apps/site/app/templates/[template]/error.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-"use client";
-
-import Link from "next/link";
-
-import { Button } from "@veriworkly/ui";
-
-export default function TemplateError({
-  reset,
-}: {
-  error: Error & { digest?: string };
-  reset: () => void;
-}) {
-  return (
-    <div className="space-y-10 py-10">
-      <header className="space-y-4 text-center">
-        <p className="text-destructive text-xs font-semibold tracking-[0.24em] uppercase">
-          Preview Error
-        </p>
-
-        <h1 className="text-foreground text-4xl font-semibold tracking-tight sm:text-5xl">
-          Something went wrong
-        </h1>
-
-        <p className="text-muted mx-auto max-w-2xl text-base leading-7">
-          We encountered an error while trying to load the template preview.
-        </p>
-      </header>
-
-      <section className="space-y-8">
-        <div className="border-border/50 bg-destructive/5 relative mx-auto flex aspect-3/4 w-full max-w-4xl flex-col items-center justify-center overflow-hidden rounded-2xl border p-12 text-center">
-          <div className="bg-destructive/10 text-destructive mb-6 flex h-20 w-20 items-center justify-center rounded-full">
-            <svg className="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={1.5}
-                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-              />
-            </svg>
-          </div>
-          <h2 className="text-foreground text-2xl font-bold">Loading Failed</h2>
-          <p className="text-muted mt-2 max-w-sm">
-            This might be due to a network error or a temporary service disruption.
-          </p>
-        </div>
-
-        <div className="flex flex-wrap items-center justify-center gap-4 pt-4">
-          <Button size="lg" variant="primary" className="rounded-full px-8" onClick={() => reset()}>
-            Retry Loading
-          </Button>
-
-          <Button asChild size="lg" variant="ghost" className="rounded-full px-8">
-            <Link href="/templates">Back to Templates</Link>
-          </Button>
-        </div>
-      </section>
-    </div>
-  );
-}
diff --git a/apps/site/app/templates/[template]/loading.tsx b/apps/site/app/templates/[template]/loading.tsx
deleted file mode 100644
index cb17cf2..0000000
--- a/apps/site/app/templates/[template]/loading.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-export default function TemplatePreviewLoading() {
-  return (
-    <div className="space-y-10 py-10">
-      <div className="space-y-4">
-        <div className="bg-accent/10 h-3 w-36 animate-pulse rounded-full" />
-        <div className="bg-border h-12 w-full max-w-2xl animate-pulse rounded-2xl" />
-        <div className="bg-border h-4 w-full max-w-xl animate-pulse rounded-full" />
-      </div>
-
-      <section aria-label="Template Preview Loading" className="space-y-8">
-        <div className="border-border/50 bg-accent/5 relative mx-auto aspect-3/4 w-full max-w-4xl animate-pulse overflow-hidden rounded-2xl border">
-          <div className="absolute inset-0 flex items-center justify-center">
-            <div className="border-accent/20 border-t-accent h-12 w-12 animate-spin rounded-full border-4" />
-          </div>
-        </div>
-
-        <div className="flex justify-center pt-4">
-          <div className="bg-border h-14 w-64 animate-pulse rounded-full" />
-        </div>
-      </section>
-    </div>
-  );
-}
diff --git a/apps/site/app/templates/[template]/not-found.tsx b/apps/site/app/templates/[template]/not-found.tsx
deleted file mode 100644
index 5879ef0..0000000
--- a/apps/site/app/templates/[template]/not-found.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import Link from "next/link";
-
-import { Button } from "@veriworkly/ui";
-import { siteConfig } from "@/config/site";
-
-const TemplateNotFound = () => {
-  return (
-    <div className="space-y-10 py-10">
-      <header className="space-y-4 text-center">
-        <p className="text-accent text-xs font-semibold tracking-[0.24em] uppercase">
-          Template Preview
-        </p>
-
-        <h1 className="text-foreground text-4xl font-semibold tracking-tight sm:text-5xl">
-          Template not found
-        </h1>
-
-        <p className="text-muted mx-auto max-w-2xl text-base leading-7">
-          The template you requested does not exist or has been removed from our collection.
-        </p>
-      </header>
-
-      <section className="space-y-8">
-        <div className="border-border bg-accent/5 relative mx-auto flex aspect-3/4 w-full max-w-4xl flex-col items-center justify-center overflow-hidden rounded-2xl border border-dashed p-12 text-center">
-          <div className="bg-accent/10 text-accent mb-6 flex h-20 w-20 items-center justify-center rounded-full">
-            <svg className="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={1.5}
-                d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
-              />
-            </svg>
-          </div>
-
-          <h2 className="text-foreground text-2xl font-bold">Missing Layout</h2>
-
-          <p className="text-muted mt-2 max-w-sm">
-            We couldn&apos;t locate this specific resume format. Try browsing our other modern
-            templates.
-          </p>
-        </div>
-
-        <div className="flex flex-wrap items-center justify-center gap-4 pt-4">
-          <Button asChild size="lg" variant="primary" className="rounded-full px-8">
-            <Link href="/templates">Browse Templates</Link>
-          </Button>
-
-          <Button asChild size="lg" variant="ghost" className="rounded-full px-8">
-            <Link href={`${siteConfig.links.app}`}>Create Document</Link>
-          </Button>
-        </div>
-      </section>
-    </div>
-  );
-};
-
-export default TemplateNotFound;
diff --git a/apps/site/app/templates/[template]/page.tsx b/apps/site/app/templates/[template]/page.tsx
deleted file mode 100644
index 3bd2588..0000000
--- a/apps/site/app/templates/[template]/page.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import Link from "next/link";
-import Image from "next/image";
-import { Metadata } from "next";
-import { notFound } from "next/navigation";
-
-import { getTemplateById, templateSummaries } from "@/config/templates";
-
-import { Card, Button, Container } from "@veriworkly/ui";
-
-import { buildEditorUrl } from "../components/utils";
-import { TemplateDetailHeader } from "../components/TemplateHeader";
-
-interface Props {
-  params: Promise<{ template: string }>;
-}
-
-export async function generateMetadata({ params }: Props): Promise<Metadata> {
-  const { template } = await params;
-
-  const data = getTemplateById(template);
-
-  if (!data) return { title: "Template Not Found" };
-
-  return {
-    title: `${data.name} Template | VeriWorkly`,
-    description: data.description,
-  };
-}
-
-export function generateStaticParams() {
-  return templateSummaries.map((t) => ({ template: t.id }));
-}
-
-export default async function TemplatePreviewPage({ params }: Props) {
-  const { template } = await params;
-
-  const templateDefinition = getTemplateById(template);
-
-  if (!templateDefinition) {
-    notFound();
-  }
-
-  const editorUrl = buildEditorUrl(templateDefinition.id, templateDefinition.documentType);
-
-  return (
-    <Container className="space-y-16 pt-28 pb-12 lg:pt-36">
-      <TemplateDetailHeader template={templateDefinition} />
-
-      <section aria-label="Template Preview" className="space-y-8">
-        <Card className="overflow-hidden border-none bg-transparent p-0 shadow-none md:p-0">
-          <div className="border-border bg-card relative mx-auto aspect-3/4 w-full max-w-4xl overflow-hidden rounded-xl border shadow-2xl">
-            {templateDefinition.previewImage ? (
-              <Image
-                fill
-                priority
-                className="object-cover object-top"
-                src={templateDefinition.previewImage}
-                alt={`${templateDefinition.name} preview`}
-              />
-            ) : (
-              <div className="text-muted flex h-full items-center justify-center">
-                Preview not available
-              </div>
-            )}
-
-            <div className="absolute inset-0 flex items-end justify-center bg-linear-to-t from-black/60 via-transparent to-transparent pb-12 opacity-0 transition-opacity duration-300 hover:opacity-100">
-              <Button asChild size="lg" variant="primary">
-                <Link href={editorUrl}>Use this template</Link>
-              </Button>
-            </div>
-          </div>
-        </Card>
-
-        <div className="flex justify-center pt-4">
-          <Button
-            asChild
-            size="lg"
-            variant="primary"
-            className="h-14 rounded-full px-10 text-lg shadow-lg transition-all hover:shadow-xl"
-          >
-            <Link href={editorUrl}>Start Building with {templateDefinition.name}</Link>
-          </Button>
-        </div>
-      </section>
-    </Container>
-  );
-}
diff --git a/apps/site/app/templates/components/EmptyState.tsx b/apps/site/app/templates/components/EmptyState.tsx
index f860e27..17124a2 100644
--- a/apps/site/app/templates/components/EmptyState.tsx
+++ b/apps/site/app/templates/components/EmptyState.tsx
@@ -1,13 +1,13 @@
 import Link from "next/link";
 
-const EmptyState = () => {
+const EmptyState = ({ resetHref = "/templates" }: { resetHref?: string }) => {
   return (
     <div className="border-border bg-card rounded-xl border p-6">
       <p className="text-foreground text-base font-medium">No templates match these filters.</p>
 
       <p className="text-muted mt-1 text-sm">Try switching family or layout to see more options.</p>
 
-      <Link href="/templates" className="text-accent mt-3 inline-block text-sm font-medium">
+      <Link href={resetHref} className="text-accent mt-3 inline-block text-sm font-medium">
         Reset filters
       </Link>
     </div>
diff --git a/apps/site/app/templates/components/TemplateCard.tsx b/apps/site/app/templates/components/TemplateCard.tsx
index 8c16570..be39b61 100644
--- a/apps/site/app/templates/components/TemplateCard.tsx
+++ b/apps/site/app/templates/components/TemplateCard.tsx
@@ -1,110 +1,127 @@
-import Link from "next/link";
 import Image from "next/image";
+import Link from "next/link";
+import { ArrowRight, CheckCircle2, FileText } from "lucide-react";
+
+import type { TemplateSummary } from "@/config/templates";
+
+import { Badge } from "@veriworkly/ui";
 
-import { Card, Badge } from "@veriworkly/ui";
-
-interface TemplateCardProps {
-  template: {
-    id: string;
-    name: string;
-    description: string;
-    accentColor: string;
-    previewImage: string;
-    family: string;
-    layout: string;
-    tags: string[];
-  };
-}
+import { getTemplateHref } from "./utils";
+
+type TemplateCardProps = {
+  template: TemplateSummary;
+};
 
 const TemplateCard = ({ template }: TemplateCardProps) => {
-  const topTags = template.tags.filter((tag) => tag !== "One column" && tag !== "Two column");
+  const previewAlt = `${template.name} ${template.documentTypeLabel.toLowerCase()} template preview`;
 
   return (
-    <Card className="group hover:border-accent/40 relative flex flex-col justify-between space-y-6 overflow-visible p-6 transition-colors">
-      <div className="pointer-events-none absolute top-4 right-4 z-30 hidden w-95 translate-y-2 opacity-0 transition-all duration-200 ease-out xl:block xl:group-hover:translate-y-0 xl:group-hover:opacity-100">
-        <div className="border-border bg-card overflow-hidden rounded-xl border shadow-[0_24px_80px_-40px_rgba(15,23,42,0.6)]">
-          <div className="h-1 w-full" style={{ backgroundColor: template.accentColor }} />
-
-          <div className="relative h-56 bg-slate-100">
-            {template.previewImage ? (
-              <Image
-                fill
-                alt=""
-                aria-hidden="true"
-                src={template.previewImage}
-                sizes="(min-width: 1280px) 380px, 100vw"
-                className="h-full w-full object-cover object-top"
-              />
-            ) : null}
-
-            <div className="absolute inset-0 bg-linear-to-b from-black/0 via-black/0 to-black/45" />
-
-            <p className="absolute right-3 bottom-3 rounded-full border border-white/30 bg-black/45 px-2.5 py-1 text-[10px] font-semibold tracking-wide text-white/95 uppercase backdrop-blur-sm">
-              Quick Preview
-            </p>
-          </div>
+    <article className="group border-border/70 bg-card/70 hover:border-accent/45 grid overflow-hidden rounded-2xl border shadow-[0_28px_80px_-60px_rgba(15,23,42,0.7)] transition-all duration-200 hover:-translate-y-1 lg:grid-cols-[minmax(260px,0.75fr)_minmax(0,1fr)_minmax(220px,0.52fr)]">
+      <Link
+        href={getTemplateHref(template)}
+        className="border-border/60 relative min-h-96 overflow-hidden border-b bg-[linear-gradient(135deg,var(--background),color-mix(in_srgb,var(--accent)_10%,var(--background)))] p-5 lg:border-r lg:border-b-0"
+        aria-label={`Open ${template.name} template details`}
+      >
+        <div
+          className="absolute top-8 right-8 h-24 w-24 rounded-full opacity-15 blur-2xl"
+          style={{ backgroundColor: template.accentColor }}
+          aria-hidden="true"
+        />
+
+        <div className="border-border/70 bg-card/90 text-muted absolute top-4 left-4 z-10 flex items-center gap-2 rounded-full border px-3 py-1 text-xs font-medium shadow-sm backdrop-blur">
+          <FileText className="h-3.5 w-3.5" aria-hidden="true" />
+          {template.layout}
         </div>
-      </div>
 
-      <div className="space-y-5">
-        <div
-          className="border-border relative h-32 overflow-hidden rounded-lg border"
-          style={{
-            background:
-              "linear-gradient(145deg, color-mix(in oklab, var(--resume-page-bg) 92%, transparent), color-mix(in oklab, var(--resume-page-bg) 72%, black 4%))",
-          }}
-        >
-          {template.previewImage ? (
-            <Image
-              fill
-              alt=""
+        <div className="border-border absolute right-5 bottom-5 aspect-8.5/11 h-82 max-h-[calc(100%-3rem)] overflow-hidden rounded-sm border bg-white shadow-[0_28px_70px_-38px_rgba(15,23,42,0.85)] transition-transform duration-200 group-hover:-translate-y-1 group-hover:rotate-1">
+          <Image
+            fill
+            src={template.previewImage}
+            alt={previewAlt}
+            sizes="(min-width: 1024px) 260px, 80vw"
+            className="object-contain object-top"
+          />
+        </div>
+
+        <div className="border-border/50 absolute right-16 bottom-1 h-8 w-36 rounded-[50%] border bg-black/10 blur-xl" />
+      </Link>
+
+      <div className="flex min-w-0 flex-col justify-between gap-8 p-6 lg:p-7">
+        <div className="space-y-5">
+          <div className="flex flex-wrap items-center gap-3">
+            <span
+              className="h-2.5 w-10 rounded-full"
+              style={{ backgroundColor: template.accentColor }}
               aria-hidden="true"
-              src={template.previewImage}
-              sizes="(min-width: 1280px) 320px, 100vw"
-              className="absolute inset-0 h-full w-full object-cover object-top opacity-70"
             />
-          ) : null}
 
-          <div
-            className="absolute inset-x-0 top-0 h-1"
-            style={{ backgroundColor: template.accentColor }}
-          />
+            <span className="text-muted text-xs font-semibold tracking-[0.18em] uppercase">
+              {template.documentTypeLabel}
+            </span>
+          </div>
 
-          <div className="absolute inset-0 bg-linear-to-b from-black/0 via-black/0 to-black/40" />
+          <div className="space-y-3">
+            <h2 className="text-foreground text-3xl font-semibold tracking-tight">
+              {template.name}
+            </h2>
 
-          <div className="absolute right-3 bottom-3 rounded-full border border-white/25 bg-black/45 px-2.5 py-1 text-[10px] font-medium text-white/90 backdrop-blur-sm">
-            {template.layout}
+            <p className="text-muted max-w-2xl text-sm leading-6">{template.shortDescription}</p>
           </div>
 
-          <p className="absolute bottom-3 left-3 hidden rounded-full border-white/25 bg-black/40 px-2.5 py-1 text-[10px] font-medium text-white xl:block">
-            Hover card for larger preview
-          </p>
-
-          <span className="sr-only">Preview for {template.name}</span>
+          <div className="flex flex-wrap gap-2">
+            <Badge>{template.family}</Badge>
+            {template.tags.slice(0, 3).map((tag) => (
+              <Badge key={tag}>{tag}</Badge>
+            ))}
+          </div>
         </div>
 
-        <div className="space-y-2">
-          <h2 className="text-foreground text-2xl font-semibold tracking-tight">{template.name}</h2>
-
-          <p className="text-muted text-sm leading-relaxed">{template.description}</p>
+        <div className="space-y-5">
+          <ul className="text-muted grid gap-3 text-sm leading-6 sm:grid-cols-2">
+            {template.bestFor.slice(0, 2).map((item) => (
+              <li key={item} className="flex gap-2">
+                <CheckCircle2 className="text-accent mt-0.5 h-4 w-4 shrink-0" aria-hidden="true" />
+                <span>{item}</span>
+              </li>
+            ))}
+          </ul>
+
+          <Link
+            className="text-accent hover:text-accent/80 focus-visible:ring-accent inline-flex w-fit items-center gap-2 text-sm font-semibold transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
+            href={getTemplateHref(template)}
+          >
+            Review template
+            <ArrowRight className="h-4 w-4" aria-hidden="true" />
+          </Link>
         </div>
+      </div>
 
-        <div className="flex flex-wrap gap-2">
-          <Badge>{template.layout}</Badge>
-          <Badge>{template.family}</Badge>
-          {topTags.slice(0, 3).map((tag) => (
-            <Badge key={tag}>{tag}</Badge>
-          ))}
+      <aside className="border-border/60 bg-background/70 flex flex-col justify-between gap-6 border-t p-6 lg:border-t-0 lg:border-l">
+        <div className="space-y-3">
+          <p className="text-muted text-xs font-semibold tracking-[0.18em] uppercase">Best match</p>
+
+          <div className="space-y-2">
+            {template.audience.slice(0, 3).map((audience) => (
+              <div
+                key={audience}
+                className="border-border/70 bg-card flex items-center justify-between gap-3 rounded-full border px-3 py-2 text-sm"
+              >
+                <span className="text-foreground truncate">{audience}</span>
+                <span className="bg-accent h-1.5 w-1.5 shrink-0 rounded-full" />
+              </div>
+            ))}
+          </div>
         </div>
-      </div>
 
-      <Link
-        className="text-accent hover:text-accent/80 w-fit text-sm font-medium transition-colors"
-        href={`/templates/${template.id}`}
-      >
-        Open preview →
-      </Link>
-    </Card>
+        <Link
+          href={getTemplateHref(template)}
+          className="border-border bg-card hover:border-accent/40 focus-visible:ring-accent text-foreground inline-flex items-center justify-between gap-3 rounded-full border px-4 py-3 text-sm font-semibold transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
+        >
+          Open dossier
+          <ArrowRight className="text-accent h-4 w-4" aria-hidden="true" />
+        </Link>
+      </aside>
+    </article>
   );
 };
 
diff --git a/apps/site/app/templates/components/TemplateFilters.tsx b/apps/site/app/templates/components/TemplateFilters.tsx
index 51cda09..49a43f7 100644
--- a/apps/site/app/templates/components/TemplateFilters.tsx
+++ b/apps/site/app/templates/components/TemplateFilters.tsx
@@ -1,18 +1,29 @@
 import Link from "next/link";
 
-import { hrefWithFilters } from "./utils";
+import type { TemplateSummary } from "@/config/templates";
 
-const familyOptions = ["All", "Modern Core", "Compact Core"];
-const layoutOptions = ["All", "One column", "Two column", "Other"];
+import { hrefWithFilters } from "./utils";
 
 type Props = {
+  docType: string;
+  templates: TemplateSummary[];
   selectedFamily: string;
   selectedLayout: string;
 };
 
-const TemplateFilters = ({ selectedFamily, selectedLayout }: Props) => {
+function unique(values: string[]) {
+  return ["All", ...Array.from(new Set(values))];
+}
+
+const TemplateFilters = ({ docType, templates, selectedFamily, selectedLayout }: Props) => {
+  const familyOptions = unique(templates.map((template) => template.family));
+  const layoutOptions = unique(templates.map((template) => template.layout));
+
   return (
-    <div className="space-y-3 pt-2">
+    <div
+      className="border-border bg-card/70 flex flex-col gap-3 rounded-2xl border p-3 sm:flex-row sm:items-center sm:justify-between"
+      aria-label="Template filters"
+    >
       <div className="flex flex-wrap gap-2">
         {familyOptions.map((family) => {
           const active = selectedFamily === family;
@@ -20,12 +31,12 @@ const TemplateFilters = ({ selectedFamily, selectedLayout }: Props) => {
           return (
             <Link
               key={family}
-              href={hrefWithFilters(family, selectedLayout)}
+              href={hrefWithFilters(docType, family, selectedLayout)}
               className={[
-                "rounded-full border px-3 py-1.5 text-sm transition-colors",
+                "focus-visible:ring-accent rounded-full border px-3 py-2 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
                 active
-                  ? "border-accent bg-accent/10 text-foreground"
-                  : "border-border text-muted hover:text-foreground",
+                  ? "border-accent bg-accent text-accent-foreground"
+                  : "border-border bg-background text-muted hover:text-foreground",
               ].join(" ")}
             >
               {family}
@@ -41,12 +52,12 @@ const TemplateFilters = ({ selectedFamily, selectedLayout }: Props) => {
           return (
             <Link
               key={layout}
-              href={hrefWithFilters(selectedFamily, layout)}
+              href={hrefWithFilters(docType, selectedFamily, layout)}
               className={[
-                "rounded-full border px-3 py-1.5 text-sm transition-colors",
+                "focus-visible:ring-accent rounded-full border px-3 py-2 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
                 active
-                  ? "border-accent bg-accent/10 text-foreground"
-                  : "border-border text-muted hover:text-foreground",
+                  ? "border-foreground bg-foreground text-background"
+                  : "border-border bg-background text-muted hover:text-foreground",
               ].join(" ")}
             >
               {layout}
diff --git a/apps/site/app/templates/components/TemplateGroup.tsx b/apps/site/app/templates/components/TemplateGroup.tsx
index 78303bf..056aad8 100644
--- a/apps/site/app/templates/components/TemplateGroup.tsx
+++ b/apps/site/app/templates/components/TemplateGroup.tsx
@@ -1,29 +1,30 @@
-import TemplateCard from "../components/TemplateCard";
+import type { TemplateSummary } from "@/config/templates";
 
-interface TemplateItem {
-  id: string;
-  name: string;
-  description: string;
-  accentColor: string;
-  previewImage: string;
-  family: string;
-  layout: string;
-  tags: string[];
-}
+import TemplateCard from "./TemplateCard";
 
-interface TemplateGroupProps {
+type TemplateGroupProps = {
   group: {
     title: string;
-    items: TemplateItem[];
+    description: string;
+    items: TemplateSummary[];
   };
-}
+};
 
 const TemplateGroup = ({ group }: TemplateGroupProps) => {
   return (
-    <section className="space-y-5">
-      <h2 className="text-foreground text-2xl font-semibold tracking-tight">{group.title}</h2>
+    <section className="space-y-6">
+      <div className="border-border flex flex-wrap items-end justify-between gap-4 border-b pb-4">
+        <div className="space-y-1">
+          <h2 className="text-foreground text-3xl font-semibold tracking-tight">{group.title}</h2>
+          <p className="text-muted text-sm leading-6">{group.description}</p>
+        </div>
+
+        <p className="text-muted border-border bg-card rounded-full border px-3 py-1.5 text-sm font-medium">
+          {group.items.length} available
+        </p>
+      </div>
 
-      <div className="grid gap-6 md:grid-cols-2">
+      <div className="grid gap-6">
         {group.items.map((template) => (
           <TemplateCard key={template.id} template={template} />
         ))}
diff --git a/apps/site/app/templates/components/TemplateHeader.tsx b/apps/site/app/templates/components/TemplateHeader.tsx
index 86b7bb9..bb54628 100644
--- a/apps/site/app/templates/components/TemplateHeader.tsx
+++ b/apps/site/app/templates/components/TemplateHeader.tsx
@@ -1,41 +1,67 @@
 import Link from "next/link";
+import { ArrowLeft, ArrowRight } from "lucide-react";
 
-import { Badge } from "@veriworkly/ui";
+import type { TemplateSummary } from "@/config/templates";
 
-import { TemplateDefinition } from "@/types/template";
+import { Badge, Button } from "@veriworkly/ui";
 
 import { buildEditorUrl } from "./utils";
 
-export function TemplateDetailHeader({ template }: { template: TemplateDefinition }) {
-  const editorUrl = buildEditorUrl(template.id, template.documentType);
+export function TemplateDetailHeader({ template }: { template: TemplateSummary }) {
+  const editorUrl = buildEditorUrl(template);
 
   return (
-    <header className="space-y-6">
-      <div className="space-y-3">
-        <p className="text-muted text-xs font-semibold tracking-[0.24em] uppercase">
-          Template Detail
-        </p>
+    <header className="border-border bg-card/60 grid gap-8 rounded-3xl border p-6 lg:grid-cols-[minmax(0,1fr)_minmax(260px,360px)] lg:items-end">
+      <div className="space-y-5">
+        <Link
+          href={`/templates/${template.documentType}`}
+          className="text-muted hover:text-foreground focus-visible:ring-accent inline-flex items-center gap-2 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
+        >
+          <ArrowLeft className="h-4 w-4" aria-hidden="true" />
+          Back to {template.documentTypeLabel.toLowerCase()} templates
+        </Link>
+
+        <div className="space-y-4">
+          <div className="flex flex-wrap items-center gap-2">
+            <Badge>{template.documentTypeLabel}</Badge>
+            <Badge>{template.family}</Badge>
+            <Badge>{template.layout}</Badge>
+          </div>
 
-        <h1 className="text-foreground text-4xl font-semibold tracking-tight">{template.name}</h1>
+          <h1 className="text-foreground max-w-4xl text-4xl font-semibold tracking-tight text-balance sm:text-6xl">
+            {template.name}
+          </h1>
 
-        <p className="text-muted max-w-2xl text-base leading-7">{template.description}</p>
+          <p className="text-muted max-w-2xl text-base leading-7">{template.description}</p>
+        </div>
 
         <div className="flex flex-wrap gap-2">
           {template.tags.map((tag) => (
-            <Badge key={tag}>{tag}</Badge>
+            <span
+              key={tag}
+              className="border-border bg-background text-muted rounded-full border px-3 py-1.5 text-sm"
+            >
+              {tag}
+            </span>
           ))}
         </div>
       </div>
 
-      <nav className="border-border/40 flex items-center gap-6 border-b pb-6 text-sm font-medium">
-        <Link href={editorUrl} className="text-accent hover:underline">
-          Use in editor
-        </Link>
+      <div className="space-y-4">
+        <div className="border-border bg-background rounded-2xl border p-4">
+          <p className="text-muted text-xs font-semibold tracking-[0.18em] uppercase">
+            Primary fit
+          </p>
+          <p className="text-muted mt-3 text-sm leading-6">{template.bestFor[0]}</p>
+        </div>
 
-        <Link href="/templates" className="text-muted hover:text-foreground transition-colors">
-          Back to templates
-        </Link>
-      </nav>
+        <Button asChild size="lg" variant="primary" className="h-12 w-full rounded-full px-6">
+          <Link href={editorUrl}>
+            Use This Template
+            <ArrowRight className="h-4 w-4" aria-hidden="true" />
+          </Link>
+        </Button>
+      </div>
     </header>
   );
 }
diff --git a/apps/site/app/templates/components/TemplatesHeader.tsx b/apps/site/app/templates/components/TemplatesHeader.tsx
index cc88e72..9d6de08 100644
--- a/apps/site/app/templates/components/TemplatesHeader.tsx
+++ b/apps/site/app/templates/components/TemplatesHeader.tsx
@@ -1,27 +1,81 @@
+import { Badge } from "@veriworkly/ui";
+import type { DocumentTypeSummary, TemplateSummary } from "@/config/templates";
+
 import TemplateFilters from "./TemplateFilters";
 
 type Props = {
+  docType: DocumentTypeSummary;
+  templates: TemplateSummary[];
   selectedFamily: string;
   selectedLayout: string;
 };
 
-const TemplatesHeader = ({ selectedFamily, selectedLayout }: Props) => {
+const TemplatesHeader = ({ docType, templates, selectedFamily, selectedLayout }: Props) => {
+  const layouts = Array.from(new Set(templates.map((template) => template.layout)));
+  const families = Array.from(new Set(templates.map((template) => template.family)));
+
   return (
-    <header className="space-y-4">
-      <p className="text-muted text-xs font-semibold tracking-[0.24em] uppercase">
-        Template Gallery
-      </p>
+    <header className="space-y-8">
+      <div className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_minmax(320px,420px)] lg:items-end">
+        <div className="space-y-5">
+          <div className="flex flex-wrap items-center gap-2">
+            <Badge>{templates.length} live templates</Badge>
+            <Badge>{layouts.join(" + ")}</Badge>
+          </div>
+
+          <div className="space-y-4">
+            <h1 className="text-foreground max-w-4xl text-4xl font-semibold tracking-tight text-balance sm:text-6xl">
+              Choose by job-to-be-done, then by taste.
+            </h1>
+
+            <p className="text-muted max-w-2xl text-base leading-7">
+              {docType.description} Each option below is shown as a working document, with enough
+              context to decide before opening the editor.
+            </p>
+          </div>
+        </div>
+
+        <div className="border-border bg-card/75 overflow-hidden rounded-2xl border">
+          <div className="divide-border grid grid-cols-3 divide-x">
+            <div className="p-4">
+              <p className="text-foreground text-2xl font-semibold">{templates.length}</p>
+              <p className="text-muted text-xs leading-5">ready to use</p>
+            </div>
+
+            <div className="p-4">
+              <p className="text-foreground text-2xl font-semibold">{families.length}</p>
+              <p className="text-muted text-xs leading-5">style systems</p>
+            </div>
+
+            <div className="p-4">
+              <p className="text-foreground text-2xl font-semibold">{layouts.length}</p>
+              <p className="text-muted text-xs leading-5">layout modes</p>
+            </div>
+          </div>
 
-      <h1 className="text-foreground text-4xl font-semibold tracking-tight sm:text-5xl">
-        Free Resume Templates (ATS-Friendly & Modern)
-      </h1>
+          <div className="border-border border-t p-5">
+            <p className="text-foreground text-sm font-semibold">Optimized for</p>
 
-      <p className="text-muted max-w-2xl text-base leading-7">
-        Browse our collection of free resume templates designed to pass ATS systems. Choose from
-        modern, professional, and simple layouts - no login required.
-      </p>
+            <div className="mt-3 flex flex-wrap gap-2">
+              {docType.highlights.map((highlight) => (
+                <span
+                  key={highlight}
+                  className="border-border bg-background text-muted rounded-full border px-3 py-1.5 text-sm"
+                >
+                  {highlight}
+                </span>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
 
-      <TemplateFilters selectedFamily={selectedFamily} selectedLayout={selectedLayout} />
+      <TemplateFilters
+        docType={docType.id}
+        templates={templates}
+        selectedFamily={selectedFamily}
+        selectedLayout={selectedLayout}
+      />
     </header>
   );
 };
diff --git a/apps/site/app/templates/components/utils.ts b/apps/site/app/templates/components/utils.ts
index 653fc54..6f16eeb 100644
--- a/apps/site/app/templates/components/utils.ts
+++ b/apps/site/app/templates/components/utils.ts
@@ -1,32 +1,36 @@
-import { siteConfig } from "@/config/site";
+import type { TemplateSummary } from "@/config/templates";
 
-export const familyByTemplateId: Record<string, "Compact Core" | "Modern Core"> = {
-  "executive-clarity": "Modern Core",
-  "precision-ats": "Compact Core",
-};
+import { siteConfig } from "@/config/site";
 
 export function getSingleParam(value: string | string[] | undefined, fallback: string) {
   if (!value) return fallback;
   return Array.isArray(value) ? (value[0] ?? fallback) : value;
 }
 
-export function getLayout(tags: string[]) {
-  if (tags.includes("Two column")) return "Two column";
-  if (tags.includes("One column")) return "One column";
-  return "Other";
+export function getTemplateHref(template: Pick<TemplateSummary, "documentType" | "id">) {
+  return `/templates/${template.documentType}/${template.id}`;
 }
 
-export function hrefWithFilters(family: string, layout: string) {
+export function hrefWithFilters(docType: string, family: string, layout: string) {
   const params = new URLSearchParams();
 
   if (family !== "All") params.set("family", family);
   if (layout !== "All") params.set("layout", layout);
 
-  return params.toString() ? `/templates?${params.toString()}` : "/templates";
+  return params.toString() ? `/templates/${docType}?${params.toString()}` : `/templates/${docType}`;
 }
 
-export function buildEditorUrl(templateId: string, documentType: string): string {
+export function buildEditorUrl(
+  template: Pick<TemplateSummary, "editorTemplateId" | "documentType">,
+) {
   const base = siteConfig.links.app;
 
-  return `${base}/editor?template=${encodeURIComponent(templateId)}&type=${encodeURIComponent(documentType)}`;
+  return `${base}/editor?template=${encodeURIComponent(template.editorTemplateId)}&type=${encodeURIComponent(template.documentType)}`;
+}
+
+export function toTitle(value: string) {
+  return value
+    .split("-")
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(" ");
 }
diff --git a/apps/site/app/templates/page.tsx b/apps/site/app/templates/page.tsx
index cb76c69..1329640 100644
--- a/apps/site/app/templates/page.tsx
+++ b/apps/site/app/templates/page.tsx
@@ -1,35 +1,28 @@
+import Link from "next/link";
+import Image from "next/image";
 import type { Metadata } from "next";
+import { ArrowRight, Clock, FileText, Layers } from "lucide-react";
 
-import { siteConfig } from "@/config/site";
-import { templateSummaries } from "@/config/templates";
-
-import { Container } from "@veriworkly/ui";
-
-import EmptyState from "./components/EmptyState";
-import TemplateGroup from "./components/TemplateGroup";
-import TemplatesHeader from "./components/TemplatesHeader";
-import TemplatesSEOContent from "./components/TemplatesSEOContent";
+import { Badge, Container } from "@veriworkly/ui";
 
-import { getLayout, getSingleParam, familyByTemplateId } from "./components/utils";
+import { siteConfig } from "@/config/site";
+import { documentTypeSummaries, templateSummaries } from "@/config/templates";
 
 export const metadata: Metadata = {
-  title: `Free Resume Templates (ATS Friendly) `,
-
+  title: "Document Template Directory | VeriWorkly",
   description:
-    "Browse free ATS-friendly resume templates. No login required. Choose from modern, professional, and simple resume designs and build your resume instantly.",
-
+    "Explore VeriWorkly templates by document type, including resumes and cover letters with production-ready previews and editor-ready layouts.",
   keywords: [
+    "document templates",
     "resume templates",
-    "free resume templates",
+    "cover letter templates",
     "ATS resume templates",
-    "professional resume formats",
-    "modern resume templates",
-    "resume builder templates",
+    "professional document templates",
   ],
-
   openGraph: {
-    title: "Free Resume Templates (ATS Friendly) | VeriWorkly",
-    description: "Explore modern and ATS-friendly resume templates. 100% free, no signup required.",
+    title: "Document Template Directory | VeriWorkly",
+    description:
+      "Browse resume and cover letter templates by document type, compare design intent, and start from the right layout.",
     url: `${siteConfig.url}/templates`,
     siteName: siteConfig.name,
     images: [
@@ -37,80 +30,178 @@ export const metadata: Metadata = {
         url: "/og/template-page-og.png",
         width: 1200,
         height: 630,
-        alt: "Resume Templates Gallery - VeriWorkly",
+        alt: "VeriWorkly template directory",
       },
     ],
     type: "website",
   },
-
   twitter: {
     card: "summary_large_image",
-    title: "Free Resume Templates | VeriWorkly",
-    description: "Modern, ATS-friendly resume templates. Free & no login required.",
+    title: "Document Template Directory | VeriWorkly",
+    description: "Resume and cover letter templates, organized by document type.",
     images: ["/og/template-page-og.png"],
   },
-
   alternates: {
     canonical: `${siteConfig.url}/templates`,
   },
 };
 
-type PageProps = {
-  searchParams?: Promise<{
-    family?: string;
-    layout?: string;
-  }>;
-};
-
-const TemplatesPage = async ({ searchParams }: PageProps) => {
-  const resolvedSearchParams = await searchParams;
-
-  const selectedFamily = getSingleParam(resolvedSearchParams?.family, "All");
-  const selectedLayout = getSingleParam(resolvedSearchParams?.layout, "All");
-
-  const enrichedTemplates = templateSummaries.map((template) => ({
-    ...template,
-    family: familyByTemplateId[template.id] ?? "Compact Core",
-    layout: getLayout(template.tags),
-  }));
-
-  const visibleTemplates = enrichedTemplates.filter((template) => {
-    const familyMatch = selectedFamily === "All" || template.family === selectedFamily;
-    const layoutMatch = selectedLayout === "All" || template.layout === selectedLayout;
+const TemplatesPortalPage = () => {
+  const availableDocTypes = documentTypeSummaries.filter(
+    (docType) => docType.status === "available",
+  );
+  const plannedDocTypes = documentTypeSummaries.filter((docType) => docType.status === "planned");
 
-    return familyMatch && layoutMatch;
-  });
+  return (
+    <Container className="space-y-16 pt-28 pb-16 lg:pt-36">
+      <header className="grid gap-10 lg:grid-cols-[minmax(0,0.95fr)_minmax(360px,0.7fr)] lg:items-end">
+        <div className="space-y-7">
+          <div className="flex flex-wrap gap-2">
+            <Badge>Document-first templates</Badge>
+            <Badge>{templateSummaries.length} live layouts</Badge>
+          </div>
 
-  const templateGroups = [
-    {
-      title: "Modern Core",
-      items: visibleTemplates.filter((t) => t.family === "Modern Core"),
-    },
-    {
-      title: "Compact Core",
-      items: visibleTemplates.filter((t) => t.family === "Compact Core"),
-    },
-  ];
+          <div className="space-y-5">
+            <h1 className="text-foreground max-w-4xl text-4xl font-semibold tracking-tight text-balance sm:text-6xl">
+              Pick the artifact. The right layout follows.
+            </h1>
 
-  return (
-    <>
-      <Container className="space-y-16 pt-28 pb-12 lg:pt-36">
-        <TemplatesHeader selectedFamily={selectedFamily} selectedLayout={selectedLayout} />
-
-        {visibleTemplates.length ? (
-          <div className="space-y-12">
-            {templateGroups.map(
-              (group) => group.items.length && <TemplateGroup key={group.title} group={group} />,
-            )}
+            <p className="text-muted max-w-2xl text-base leading-7">
+              A resume and a cover letter do different jobs. This directory separates them from the
+              start, then shows real document previews, fit signals, and the exact editor path for
+              each template.
+            </p>
+          </div>
+        </div>
+
+        <div className="border-border bg-card/70 overflow-hidden rounded-2xl border">
+          <div className="divide-border grid grid-cols-3 divide-x">
+            <div className="p-4">
+              <p className="text-foreground text-2xl font-semibold">{availableDocTypes.length}</p>
+              <p className="text-muted text-xs leading-5">live types</p>
+            </div>
+
+            <div className="p-4">
+              <p className="text-foreground text-2xl font-semibold">{templateSummaries.length}</p>
+              <p className="text-muted text-xs leading-5">templates</p>
+            </div>
+
+            <div className="p-4">
+              <p className="text-foreground text-2xl font-semibold">{plannedDocTypes.length}</p>
+              <p className="text-muted text-xs leading-5">coming soon</p>
+            </div>
           </div>
-        ) : (
-          <EmptyState />
-        )}
-      </Container>
 
-      <TemplatesSEOContent />
-    </>
+          <div className="border-border border-t p-5">
+            <p className="text-foreground text-sm font-semibold">Designed for choosing fast</p>
+            <p className="text-muted mt-1 text-sm leading-6">
+              Compare the document type first, then inspect individual layouts only when the fit is
+              obvious.
+            </p>
+          </div>
+        </div>
+      </header>
+
+      <section className="grid gap-6 lg:grid-cols-2" aria-label="Available document types">
+        {availableDocTypes.map((docType) => {
+          const templatesForType = templateSummaries.filter(
+            (template) => template.documentType === docType.id,
+          );
+
+          return (
+            <Link
+              key={docType.id}
+              href={docType.href}
+              className="group focus-visible:ring-accent rounded-3xl focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
+            >
+              <article className="border-border bg-card/75 group-hover:border-accent/45 grid min-h-136 overflow-hidden rounded-3xl border shadow-[0_34px_90px_-70px_rgba(15,23,42,0.75)] transition-all duration-200 group-hover:-translate-y-1">
+                <div className="border-border relative min-h-80 overflow-hidden border-b bg-[linear-gradient(135deg,var(--background),color-mix(in_srgb,var(--accent)_12%,var(--background)))] p-6">
+                  <div className="border-border bg-card/90 text-muted absolute top-5 left-5 z-10 flex items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-semibold backdrop-blur">
+                    <FileText className="h-3.5 w-3.5" aria-hidden="true" />
+                    {templatesForType.length} templates
+                  </div>
+
+                  {templatesForType.slice(0, 2).map((template, index) => (
+                    <div
+                      key={template.id}
+                      className={[
+                        "border-border absolute top-6 aspect-8.5/11 h-88 overflow-hidden rounded-sm border bg-white shadow-[0_24px_70px_-38px_rgba(15,23,42,0.8)] transition-transform duration-200",
+                        index === 0
+                          ? "right-[22%] -rotate-3 group-hover:-translate-y-1.5"
+                          : "right-8 rotate-[4deg] group-hover:-translate-y-3",
+                      ].join(" ")}
+                    >
+                      <Image
+                        fill
+                        alt=""
+                        aria-hidden="true"
+                        src={template.previewImage}
+                        className="object-contain object-top"
+                        sizes="(min-width: 1024px) 260px, 70vw"
+                      />
+                    </div>
+                  ))}
+                </div>
+
+                <div className="flex min-h-0 flex-col justify-between gap-8 p-6">
+                  <div className="space-y-4">
+                    <div className="flex items-start justify-between gap-4">
+                      <h2 className="text-foreground text-3xl font-semibold tracking-tight">
+                        {docType.pluralLabel}
+                      </h2>
+
+                      <ArrowRight
+                        className="text-accent mt-1 h-5 w-5 shrink-0 transition-transform group-hover:translate-x-1"
+                        aria-hidden="true"
+                      />
+                    </div>
+
+                    <p className="text-muted text-sm leading-6">{docType.description}</p>
+                  </div>
+
+                  <div className="flex flex-wrap gap-2">
+                    {docType.highlights.map((highlight) => (
+                      <span
+                        key={highlight}
+                        className="border-border bg-background text-muted rounded-full border px-3 py-1.5 text-sm"
+                      >
+                        {highlight}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              </article>
+            </Link>
+          );
+        })}
+      </section>
+
+      <section
+        className="border-border bg-card/60 overflow-hidden rounded-2xl border"
+        aria-label="Coming soon document types"
+      >
+        <div className="bg-border grid gap-px md:grid-cols-3">
+          {plannedDocTypes.map((docType) => (
+            <div key={docType.id} className="bg-card p-5">
+              <div className="flex items-center justify-between gap-3">
+                <div className="flex items-center gap-3">
+                  <span className="bg-background text-muted flex h-9 w-9 items-center justify-center rounded-full">
+                    <Clock className="h-4 w-4" aria-hidden="true" />
+                  </span>
+
+                  <h2 className="text-foreground text-base font-semibold">{docType.pluralLabel}</h2>
+                </div>
+
+                <Layers className="text-muted h-4 w-4" aria-hidden="true" />
+              </div>
+
+              <p className="text-muted mt-4 text-sm leading-6">{docType.description}</p>
+            </div>
+          ))}
+        </div>
+      </section>
+    </Container>
   );
 };
 
-export default TemplatesPage;
+export default TemplatesPortalPage;
diff --git a/apps/site/config/templates.ts b/apps/site/config/templates.ts
index 1e48692..9ae7fd5 100644
--- a/apps/site/config/templates.ts
+++ b/apps/site/config/templates.ts
@@ -1,37 +1,411 @@
+export type TemplateDocumentType = "resume" | "cover-letter";
+
+export type TemplateStatus = "available" | "planned";
+
+export type TemplateDetailSection = {
+  title: string;
+  description: string;
+  items: string[];
+};
+
 export type TemplateSummary = {
   id: string;
+  editorTemplateId: string;
+  legacyIds: string[];
   name: string;
-  documentType: "resume" | "cover-letter";
+  documentType: TemplateDocumentType;
+  documentTypeLabel: string;
   description: string;
+  shortDescription: string;
   accentColor: string;
   previewImage: string;
   tags: string[];
+  family: string;
+  layout: string;
+  audience: string[];
+  bestFor: string[];
+  designVision: string;
+  typography: string[];
+  structure: TemplateDetailSection[];
+  proofPoints: string[];
+  seo: {
+    title: string;
+    description: string;
+  };
+};
+
+export type DocumentTypeSummary = {
+  id: TemplateDocumentType | "formal-letter" | "invoice" | "portfolio-website";
+  label: string;
+  pluralLabel: string;
+  description: string;
+  href: string;
+  status: TemplateStatus;
+  cta: string;
+  seoTitle: string;
+  seoDescription: string;
+  highlights: string[];
 };
 
+export const documentTypeSummaries: DocumentTypeSummary[] = [
+  {
+    id: "resume",
+    label: "Resume",
+    pluralLabel: "Resume Templates",
+    description:
+      "ATS-safe resume systems with real PDF exports, recruiter-friendly hierarchy, and strong first-page scanning.",
+    href: "/templates/resume",
+    status: "available",
+    cta: "Explore Resume Templates",
+    seoTitle: "Free Resume Templates | ATS-Friendly Resume Designs",
+    seoDescription:
+      "Browse free, ATS-friendly resume templates for modern job applications. Compare structure, typography, layout, and target use cases.",
+    highlights: ["ATS-aware layouts", "PDF-ready previews", "Recruiter scan paths"],
+  },
+
+  {
+    id: "cover-letter",
+    label: "Cover Letter",
+    pluralLabel: "Cover Letter Templates",
+    description:
+      "Cover letter formats built for polished applications, clear intent, and consistent branding beside your resume.",
+    href: "/templates/cover-letter",
+    status: "available",
+    cta: "Explore Cover Letters",
+    seoTitle: "Free Cover Letter Templates | Professional Letter Designs",
+    seoDescription:
+      "Browse free cover letter templates with professional structure, letterhead treatments, and editor-ready layouts.",
+    highlights: ["Letterhead systems", "Formal spacing", "Resume pairing"],
+  },
+
+  {
+    id: "formal-letter",
+    label: "Formal Letter",
+    pluralLabel: "Formal Letter Templates",
+    description:
+      "Business letters, recommendations, notices, and structured correspondence templates are planned next.",
+    href: "/templates/formal-letter",
+    status: "planned",
+    cta: "Planned",
+    seoTitle: "Formal Letter Templates | VeriWorkly",
+    seoDescription: "Formal letter templates are planned for VeriWorkly.",
+    highlights: ["Business correspondence", "Printable formats", "Reusable identity blocks"],
+  },
+
+  {
+    id: "invoice",
+    label: "Invoice",
+    pluralLabel: "Invoice Templates",
+    description:
+      "Clean invoice templates for freelancers and operators are planned for future document workflows.",
+    href: "/templates/invoice",
+    status: "planned",
+    cta: "Planned",
+    seoTitle: "Invoice Templates | VeriWorkly",
+    seoDescription: "Invoice templates are planned for VeriWorkly.",
+    highlights: ["Line items", "Payment details", "Client-ready export"],
+  },
+
+  {
+    id: "portfolio-website",
+    label: "Portfolio Website",
+    pluralLabel: "Portfolio Website Templates",
+    description:
+      "Website templates for personal portfolios are coming soon. Fill information, publish portfolio site, and share it.",
+    href: "/templates/portfolio-website",
+    status: "planned",
+    cta: "Coming soon",
+    seoTitle: "Portfolio Website Templates | VeriWorkly",
+    seoDescription:
+      "Portfolio website templates are coming soon for VeriWorkly, with hosted subdomain publishing.",
+    highlights: ["Hosted subdomain", "Project sections", "Public website"],
+  },
+];
+
 export const templateSummaries: TemplateSummary[] = [
   {
-    id: "executive-clarity",
+    id: "resume-executive-clarity",
+    editorTemplateId: "executive-clarity",
+    legacyIds: ["executive-clarity"],
     name: "Executive Clarity",
     documentType: "resume",
+    documentTypeLabel: "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.",
+      "A polished single-column resume with refined spacing, strong section rhythm, and ATS-safe structure. Ideal for experienced professionals who need authority without visual noise.",
+    shortDescription:
+      "Executive-grade spacing and hierarchy for a calm, senior resume presentation.",
     accentColor: "#0ea5e9",
-    previewImage: "/templates/executive-clarity.png",
+    previewImage: "/templates/resume/executive-clarity.png",
     tags: ["One column", "ATS-friendly", "Modern", "Professional"],
+    family: "Modern Core",
+    layout: "One column",
+    audience: ["Senior individual contributors", "Managers", "Consultants", "Operators"],
+    bestFor: [
+      "Career stories where judgment and scope matter more than visual flash.",
+      "Applications where the first page needs to feel composed, current, and easy to skim.",
+      "Professionals who want a modern resume without risky columns or decorative parsing traps.",
+    ],
+    designVision:
+      "Executive Clarity treats the resume like a high-trust business document: measured whitespace, a confident name block, and section rhythm that lets senior accomplishments breathe.",
+    typography: [
+      "Large identity block for immediate name recognition.",
+      "Quiet section labels that create rhythm without shouting.",
+      "Comfortable body measure for accomplishment bullets and leadership context.",
+    ],
+    structure: [
+      {
+        title: "Opening Scan",
+        description:
+          "The top band prioritizes identity, contact context, and a concise professional summary.",
+        items: [
+          "Name-led hierarchy",
+          "Contact line kept readable",
+          "Summary placed before dense history",
+        ],
+      },
+      {
+        title: "Experience Core",
+        description:
+          "Role entries use steady spacing so outcomes, ownership, and business scope can be compared quickly.",
+        items: [
+          "Single-column flow",
+          "Clear date alignment",
+          "Bullet rhythm for measurable outcomes",
+        ],
+      },
+      {
+        title: "Supporting Proof",
+        description:
+          "Education and skills stay compact, letting the strongest work history carry the document.",
+        items: ["Compact skill groups", "ATS-readable text", "No fragile graphical meters"],
+      },
+    ],
+    proofPoints: [
+      "Best when your resume needs to feel senior, calm, and editorially controlled.",
+      "Keeps every important section in a predictable order for recruiters and parsers.",
+      "Pairs well with the Professional cover letter template for conservative applications.",
+    ],
+    seo: {
+      title: "Executive Clarity Resume Template | ATS-Friendly Senior Resume",
+      description:
+        "Use the Executive Clarity resume template for senior, management, consulting, and professional resumes that need a polished ATS-safe layout.",
+    },
   },
 
   {
-    id: "precision-ats",
+    id: "resume-precision-ats",
+    editorTemplateId: "precision-ats",
+    legacyIds: ["precision-ats"],
     name: "Precision ATS",
     documentType: "resume",
+    documentTypeLabel: "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.",
+      "A dense, recruiter-friendly layout for longer resumes that still exports as a real matching PDF. Built for clarity, parsing accuracy, and fast comparison.",
+    shortDescription: "A compact ATS-first resume for detailed histories and high-signal bullets.",
     accentColor: "#10b981",
-    previewImage: "/templates/precision-ats.png",
+    previewImage: "/templates/resume/precision-ats.png",
     tags: ["One column", "ATS-friendly", "Compact", "Simple"],
+    family: "Compact Core",
+    layout: "One column",
+    audience: ["Engineers", "Analysts", "Technical specialists", "Multi-role professionals"],
+    bestFor: [
+      "Longer work histories that still need to fit into a controlled page count.",
+      "Keyword-sensitive applications where parsing accuracy matters.",
+      "Candidates who want structure and density without a visually crowded result.",
+    ],
+    designVision:
+      "Precision ATS is built like a disciplined index of evidence: tight vertical rhythm, clear headings, and very little ornamentation between the recruiter and the facts.",
+    typography: [
+      "Compact heading scale to preserve vertical space.",
+      "Readable bullet density for technical achievements.",
+      "Minimal accent usage so keywords and outcomes remain the focus.",
+    ],
+    structure: [
+      {
+        title: "Dense Header",
+        description:
+          "Contact and identity details stay compact so the work history starts quickly.",
+        items: [
+          "Space-efficient contact line",
+          "Small accent surface",
+          "No image or sidebar dependency",
+        ],
+      },
+      {
+        title: "ATS Work History",
+        description:
+          "The body is optimized for readable chronology, strong keyword placement, and clean export text.",
+        items: ["Chronological role blocks", "Parser-safe bullets", "Consistent date treatment"],
+      },
+      {
+        title: "Skill Compression",
+        description:
+          "Skills and education remain compact enough to support longer experience sections.",
+        items: ["Grouped skills", "Short education rows", "Simple section dividers"],
+      },
+    ],
+    proofPoints: [
+      "Best when every line needs to earn its place.",
+      "Keeps formatting conservative for applicant tracking systems.",
+      "Strong fit for technical resumes with many tools, projects, and measurable results.",
+    ],
+    seo: {
+      title: "Precision ATS Resume Template | Compact ATS Resume Format",
+      description:
+        "Use the Precision ATS resume template for compact, keyword-friendly resumes that prioritize clean parsing and recruiter readability.",
+    },
+  },
+
+  {
+    id: "cover-letter-professional",
+    editorTemplateId: "professional",
+    legacyIds: ["professional"],
+    name: "Professional",
+    documentType: "cover-letter",
+    documentTypeLabel: "Cover Letter",
+    description:
+      "A formal cover letter with a strong letterhead, conservative spacing, and a recruiter-safe structure for direct, polished applications.",
+    shortDescription: "A formal letterhead layout for conservative, high-trust applications.",
+    accentColor: "#0ea5e9",
+    previewImage: "/templates/cover-letter/professional.png",
+    tags: ["Formal", "Professional", "Conservative", "Recruiter-friendly"],
+    family: "Classic Letter",
+    layout: "One column",
+    audience: [
+      "Corporate applicants",
+      "Graduate candidates",
+      "Operations roles",
+      "Public-sector roles",
+    ],
+    bestFor: [
+      "Applications where tone, clarity, and restraint matter.",
+      "Pairing with an ATS-friendly resume without changing visual language.",
+      "Cover letters that need to look credible when exported as a standalone PDF.",
+    ],
+    designVision:
+      "Professional keeps the letter unmistakably formal while giving the sender identity enough presence to feel intentional rather than generic.",
+    typography: [
+      "Clear sender block for letterhead authority.",
+      "Readable paragraph spacing for hiring-manager review.",
+      "Conservative heading weight that avoids over-branding.",
+    ],
+    structure: [
+      {
+        title: "Letterhead",
+        description: "The top block frames the sender and recipient before the letter begins.",
+        items: ["Sender identity", "Recipient context", "Date and subject treatment"],
+      },
+      {
+        title: "Body Flow",
+        description: "Paragraph spacing keeps motivation, fit, and proof points easy to follow.",
+        items: ["Formal greeting", "Readable body paragraphs", "Controlled closing block"],
+      },
+      {
+        title: "Export Shape",
+        description:
+          "The design stays printable and professional across PDF export and browser preview.",
+        items: ["No fragile overlays", "Letter-sized composition", "Recruiter-safe contrast"],
+      },
+    ],
+    proofPoints: [
+      "Best when the letter should feel established and serious.",
+      "Useful for applications where a highly designed letter would feel out of place.",
+      "Pairs well with Precision ATS for a clean, conservative application set.",
+    ],
+    seo: {
+      title: "Professional Cover Letter Template | Formal Letterhead Design",
+      description:
+        "Use the Professional cover letter template for formal applications with a clean letterhead, readable body structure, and PDF-ready layout.",
+    },
+  },
+
+  {
+    id: "cover-letter-veriworkly-special",
+    editorTemplateId: "veriworkly-special",
+    legacyIds: ["veriworkly-special"],
+    name: "VeriWorkly Special",
+    documentType: "cover-letter",
+    documentTypeLabel: "Cover Letter",
+    description:
+      "A branded two-column cover letter with an identity rail and numbered proof points for applicants who want a more distinctive application page.",
+    shortDescription: "A branded cover letter with an identity rail and structured proof points.",
+    accentColor: "#2563eb",
+    previewImage: "/templates/cover-letter/veriworkly-special.png",
+    tags: ["Branded", "Two-column", "Identity rail", "Distinctive"],
+    family: "Branded Letter",
+    layout: "Two column",
+    audience: [
+      "Product builders",
+      "Design-minded candidates",
+      "Startup applicants",
+      "Portfolio-led roles",
+    ],
+    bestFor: [
+      "Applications where tasteful distinctiveness is an advantage.",
+      "Candidates who want a letter that visually aligns with a modern resume.",
+      "Cover letters that benefit from highlighted proof points beside the main narrative.",
+    ],
+    designVision:
+      "VeriWorkly Special turns the cover letter into a composed application page: identity on the rail, narrative in the body, and proof points placed where they can be scanned.",
+    typography: [
+      "Prominent sender identity for a strong first impression.",
+      "Balanced paragraph width for human reading.",
+      "Numbered proof markers that add structure without becoming decorative clutter.",
+    ],
+    structure: [
+      {
+        title: "Identity Rail",
+        description:
+          "A side rail keeps contact details and applicant identity visible without crowding the body.",
+        items: ["Name and role rail", "Contact grouping", "Accent-led section rhythm"],
+      },
+      {
+        title: "Narrative Column",
+        description:
+          "The main column gives the letter a conventional reading path with a modern page feel.",
+        items: ["Subject emphasis", "Readable paragraphs", "Clear closing and signature"],
+      },
+      {
+        title: "Proof Points",
+        description:
+          "Highlights are shaped for scanning, helping the letter carry evidence as well as intent.",
+        items: ["Numbered highlights", "Visual separation", "PDF-ready composition"],
+      },
+    ],
+    proofPoints: [
+      "Best when you want the cover letter to feel crafted, not default.",
+      "Helps product, design, and startup candidates show taste without sacrificing readability.",
+      "Pairs well with Executive Clarity for a polished modern application set.",
+    ],
+    seo: {
+      title: "VeriWorkly Special Cover Letter Template | Branded Application Letter",
+      description:
+        "Use the VeriWorkly Special cover letter template for a branded two-column application letter with identity rail and structured proof points.",
+    },
   },
 ];
 
+export function getDocumentTypeSummary(docType: string): DocumentTypeSummary | undefined {
+  return documentTypeSummaries.find((type) => type.id === docType);
+}
+
+export function getTemplatesByDocumentType(docType: string): TemplateSummary[] {
+  return templateSummaries.filter((template) => template.documentType === docType);
+}
+
 export function getTemplateById(id: string): TemplateSummary | undefined {
-  return templateSummaries.find((t) => t.id === id);
+  return templateSummaries.find((template) => template.id === id);
+}
+
+export function getTemplateByDocumentTypeAndId(
+  docType: string,
+  id: string,
+): TemplateSummary | undefined {
+  return templateSummaries.find(
+    (template) => template.documentType === docType && template.id === id,
+  );
+}
+
+export function getTemplateByLegacyId(id: string): TemplateSummary | undefined {
+  return templateSummaries.find((template) => template.legacyIds.includes(id));
 }
diff --git a/apps/site/features/landing/components/TemplatesPreview.tsx b/apps/site/features/landing/components/TemplatesPreview.tsx
index 4cc5e51..adf0297 100644
--- a/apps/site/features/landing/components/TemplatesPreview.tsx
+++ b/apps/site/features/landing/components/TemplatesPreview.tsx
@@ -68,7 +68,7 @@ const TemplatesPreview = () => {
             </div>
 
             <Link
-              href={`/templates/${template.id}`}
+              href={`/templates/${template.documentType}/${template.id}`}
               className="text-accent text-sm font-medium"
               aria-label={`Preview ${template.name} resume template`}
             >
diff --git a/apps/site/public/templates/cover-letter/professional.png b/apps/site/public/templates/cover-letter/professional.png
new file mode 100644
index 0000000..b2488f4
Binary files /dev/null and b/apps/site/public/templates/cover-letter/professional.png differ
diff --git a/apps/site/public/templates/cover-letter/veriworkly-special.png b/apps/site/public/templates/cover-letter/veriworkly-special.png
new file mode 100644
index 0000000..10d242e
Binary files /dev/null and b/apps/site/public/templates/cover-letter/veriworkly-special.png differ
diff --git a/apps/site/public/templates/resume/executive-clarity.png b/apps/site/public/templates/resume/executive-clarity.png
new file mode 100644
index 0000000..99a01ae
Binary files /dev/null and b/apps/site/public/templates/resume/executive-clarity.png differ
diff --git a/apps/site/public/templates/resume/precision-ats.png b/apps/site/public/templates/resume/precision-ats.png
new file mode 100644
index 0000000..bbc2cc7
Binary files /dev/null and b/apps/site/public/templates/resume/precision-ats.png differ