From c40be6381e5f12331d4fc640b04fffc831a774b6 Mon Sep 17 00:00:00 2001
From: cade <git@cade.me>
Date: Thu, 29 Aug 2024 14:57:04 -0600
Subject: [PATCH] add training plan templates

---
 .../training-plans/create/page.tsx            |  18 +-
 .../templates/sessions/[templateId]/page.tsx  |   2 +-
 .../create/from-session/[sessionId]/page.tsx  |   2 +-
 .../templates/sessions/create/page.tsx        |   2 +-
 .../training-plans/[templateId]/loading.tsx   |   5 +
 .../training-plans/[templateId]/page.tsx      |  55 ++++
 .../[trainingPlanId]/loading.tsx              |   5 +
 .../[trainingPlanId]/page.tsx                 |  69 ++++
 .../training-plans/create/loading.tsx         |   5 +
 .../templates/training-plans/create/page.tsx  |  44 +++
 app/_components/event-menu.tsx                |   2 +-
 app/_components/event-type-menu.tsx           |   4 +-
 app/_components/event-types.tsx               |   5 +-
 app/_components/filterable-inputs.tsx         |   5 +-
 app/_components/filterable-templates.tsx      |   5 +-
 app/_components/input-menu.tsx                |   4 +-
 app/_components/insight-menu.tsx              |   4 +-
 app/_components/module-form-section.tsx       | 111 ++++---
 app/_components/session-form-section.tsx      | 242 ++++++++++++++
 app/_components/session-form.tsx              | 188 +----------
 app/_components/session-menu.tsx              |  21 +-
 app/_components/session-template-form.tsx     |  84 ++---
 app/_components/sessions-page.tsx             |   2 +-
 .../sortable-session-form-section.tsx         | 310 ++++++++++++++++++
 app/_components/subject-list.tsx              |   5 +-
 app/_components/subject-menu.tsx              |   4 +-
 app/_components/template-menu.tsx             |   2 +-
 app/_components/training-plan-menu.tsx        |   4 +-
 .../training-plan-template-form.tsx           | 209 ++++++++++++
 .../training-plan-use-template-modal.tsx      | 115 ++++---
 app/_components/training-plans.tsx            |   5 +-
 .../create-training-plan-from-template.ts     |  60 ++++
 .../upsert-training-plan-template.ts          |  39 +++
 app/_queries/get-template.ts                  |   2 +-
 .../get-training-plan-for-template.ts         |  27 ++
 app/_queries/list-templates.ts                |  15 +-
 .../training-plan-template-data-json.ts       |  10 +
 app/_utilities/get-form-cache-key.ts          |   5 +
 38 files changed, 1324 insertions(+), 372 deletions(-)
 create mode 100644 app/(pages)/@modal/(layout)/templates/training-plans/[templateId]/loading.tsx
 create mode 100644 app/(pages)/@modal/(layout)/templates/training-plans/[templateId]/page.tsx
 create mode 100644 app/(pages)/@modal/(layout)/templates/training-plans/create/from-training-plan/[trainingPlanId]/loading.tsx
 create mode 100644 app/(pages)/@modal/(layout)/templates/training-plans/create/from-training-plan/[trainingPlanId]/page.tsx
 create mode 100644 app/(pages)/@modal/(layout)/templates/training-plans/create/loading.tsx
 create mode 100644 app/(pages)/@modal/(layout)/templates/training-plans/create/page.tsx
 create mode 100644 app/_components/session-form-section.tsx
 create mode 100644 app/_components/sortable-session-form-section.tsx
 create mode 100644 app/_components/training-plan-template-form.tsx
 create mode 100644 app/_mutations/create-training-plan-from-template.ts
 create mode 100644 app/_mutations/upsert-training-plan-template.ts
 create mode 100644 app/_queries/get-training-plan-for-template.ts
 create mode 100644 app/_types/training-plan-template-data-json.ts

diff --git a/app/(pages)/@modal/(layout)/subjects/[subjectId]/training-plans/create/page.tsx b/app/(pages)/@modal/(layout)/subjects/[subjectId]/training-plans/create/page.tsx
index 039caab5..53ffa02b 100644
--- a/app/(pages)/@modal/(layout)/subjects/[subjectId]/training-plans/create/page.tsx
+++ b/app/(pages)/@modal/(layout)/subjects/[subjectId]/training-plans/create/page.tsx
@@ -2,7 +2,9 @@ import * as Modal from '@/_components/modal';
 import PageModalHeader from '@/_components/page-modal-header';
 import TrainingPlanForm from '@/_components/training-plan-form';
 import TrainingPlanUseTemplateModal from '@/_components/training-plan-use-template-modal';
+import TemplateType from '@/_constants/enum-template-type';
 import getSubject from '@/_queries/get-subject';
+import listTemplates from '@/_queries/list-templates';
 
 interface PageProps {
   params: {
@@ -11,13 +13,23 @@ interface PageProps {
 }
 
 const Page = async ({ params: { subjectId } }: PageProps) => {
-  const { data: subject } = await getSubject(subjectId);
-  if (!subject) return null;
+  const [{ data: availableTrainingPlanTemplates }, { data: subject }] =
+    await Promise.all([
+      listTemplates({ type: TemplateType.TrainingPlan }),
+      getSubject(subjectId),
+    ]);
+
+  if (!availableTrainingPlanTemplates || !subject) return null;
 
   return (
     <Modal.Content>
       <PageModalHeader
-        right={<TrainingPlanUseTemplateModal />}
+        right={
+          <TrainingPlanUseTemplateModal
+            availableTrainingPlanTemplates={availableTrainingPlanTemplates}
+            subjectId={subjectId}
+          />
+        }
         title="New training plan"
       />
       <TrainingPlanForm subjectId={subjectId} />
diff --git a/app/(pages)/@modal/(layout)/templates/sessions/[templateId]/page.tsx b/app/(pages)/@modal/(layout)/templates/sessions/[templateId]/page.tsx
index 842e3d89..cbfd69c5 100644
--- a/app/(pages)/@modal/(layout)/templates/sessions/[templateId]/page.tsx
+++ b/app/(pages)/@modal/(layout)/templates/sessions/[templateId]/page.tsx
@@ -35,7 +35,7 @@ const Page = async ({ params: { templateId } }: PageProps) => {
       <PageModalHeader title="Edit session template" />
       <SessionTemplateForm
         availableInputs={availableInputs}
-        availableTemplates={availableTemplates}
+        availableModuleTemplates={availableTemplates}
         subjects={subjects}
         template={template}
       />
diff --git a/app/(pages)/@modal/(layout)/templates/sessions/create/from-session/[sessionId]/page.tsx b/app/(pages)/@modal/(layout)/templates/sessions/create/from-session/[sessionId]/page.tsx
index 07ea9101..9e8e2298 100644
--- a/app/(pages)/@modal/(layout)/templates/sessions/create/from-session/[sessionId]/page.tsx
+++ b/app/(pages)/@modal/(layout)/templates/sessions/create/from-session/[sessionId]/page.tsx
@@ -35,7 +35,7 @@ const Page = async ({ params: { sessionId } }: PageProps) => {
       <PageModalHeader title="New session template" />
       <SessionTemplateForm
         availableInputs={availableInputs}
-        availableTemplates={availableTemplates}
+        availableModuleTemplates={availableTemplates}
         disableCache
         isDuplicate
         subjects={subjects}
diff --git a/app/(pages)/@modal/(layout)/templates/sessions/create/page.tsx b/app/(pages)/@modal/(layout)/templates/sessions/create/page.tsx
index 8b74a82c..f5de36d7 100644
--- a/app/(pages)/@modal/(layout)/templates/sessions/create/page.tsx
+++ b/app/(pages)/@modal/(layout)/templates/sessions/create/page.tsx
@@ -24,7 +24,7 @@ const Page = async () => {
       <PageModalHeader title="New session template" />
       <SessionTemplateForm
         availableInputs={availableInputs}
-        availableTemplates={availableTemplates}
+        availableModuleTemplates={availableTemplates}
         subjects={subjects}
       />
     </Modal.Content>
diff --git a/app/(pages)/@modal/(layout)/templates/training-plans/[templateId]/loading.tsx b/app/(pages)/@modal/(layout)/templates/training-plans/[templateId]/loading.tsx
new file mode 100644
index 00000000..e3d948d8
--- /dev/null
+++ b/app/(pages)/@modal/(layout)/templates/training-plans/[templateId]/loading.tsx
@@ -0,0 +1,5 @@
+import PageModalLoading from '@/_components/page-modal-loading';
+
+const Loading = PageModalLoading;
+
+export default Loading;
diff --git a/app/(pages)/@modal/(layout)/templates/training-plans/[templateId]/page.tsx b/app/(pages)/@modal/(layout)/templates/training-plans/[templateId]/page.tsx
new file mode 100644
index 00000000..6228f0b0
--- /dev/null
+++ b/app/(pages)/@modal/(layout)/templates/training-plans/[templateId]/page.tsx
@@ -0,0 +1,55 @@
+import * as Modal from '@/_components/modal';
+import PageModalHeader from '@/_components/page-modal-header';
+import TrainingPlanTemplateForm from '@/_components/training-plan-template-form';
+import TemplateType from '@/_constants/enum-template-type';
+import getTemplate from '@/_queries/get-template';
+import listInputs from '@/_queries/list-inputs';
+import listSubjectsByTeamId from '@/_queries/list-subjects-by-team-id';
+import listTemplatesWithData from '@/_queries/list-templates-with-data';
+
+interface PageProps {
+  params: {
+    templateId: string;
+  };
+}
+
+const Page = async ({ params: { templateId } }: PageProps) => {
+  const [
+    { data: availableInputs },
+    { data: availableModuleTemplates },
+    { data: availableSessionTemplates },
+    { data: subjects },
+    { data: template },
+  ] = await Promise.all([
+    listInputs(),
+    listTemplatesWithData({ type: TemplateType.Module }),
+    listTemplatesWithData({ type: TemplateType.Session }),
+    listSubjectsByTeamId(),
+    getTemplate(templateId),
+  ]);
+
+  if (
+    !availableInputs ||
+    !availableModuleTemplates ||
+    !availableSessionTemplates ||
+    !subjects ||
+    !template
+  ) {
+    return null;
+  }
+
+  return (
+    <Modal.Content>
+      <PageModalHeader title="Edit training plan template" />
+      <TrainingPlanTemplateForm
+        availableInputs={availableInputs}
+        availableModuleTemplates={availableModuleTemplates}
+        availableSessionTemplates={availableSessionTemplates}
+        subjects={subjects}
+        template={template}
+      />
+    </Modal.Content>
+  );
+};
+
+export default Page;
diff --git a/app/(pages)/@modal/(layout)/templates/training-plans/create/from-training-plan/[trainingPlanId]/loading.tsx b/app/(pages)/@modal/(layout)/templates/training-plans/create/from-training-plan/[trainingPlanId]/loading.tsx
new file mode 100644
index 00000000..e3d948d8
--- /dev/null
+++ b/app/(pages)/@modal/(layout)/templates/training-plans/create/from-training-plan/[trainingPlanId]/loading.tsx
@@ -0,0 +1,5 @@
+import PageModalLoading from '@/_components/page-modal-loading';
+
+const Loading = PageModalLoading;
+
+export default Loading;
diff --git a/app/(pages)/@modal/(layout)/templates/training-plans/create/from-training-plan/[trainingPlanId]/page.tsx b/app/(pages)/@modal/(layout)/templates/training-plans/create/from-training-plan/[trainingPlanId]/page.tsx
new file mode 100644
index 00000000..87a3d476
--- /dev/null
+++ b/app/(pages)/@modal/(layout)/templates/training-plans/create/from-training-plan/[trainingPlanId]/page.tsx
@@ -0,0 +1,69 @@
+import * as Modal from '@/_components/modal';
+import PageModalHeader from '@/_components/page-modal-header';
+import TrainingPlanTemplateForm from '@/_components/training-plan-template-form';
+import TemplateType from '@/_constants/enum-template-type';
+import getTrainingPlanForTemplate from '@/_queries/get-training-plan-for-template';
+import listInputs from '@/_queries/list-inputs';
+import listSubjectsByTeamId from '@/_queries/list-subjects-by-team-id';
+import listTemplatesWithData from '@/_queries/list-templates-with-data';
+
+interface PageProps {
+  params: {
+    trainingPlanId: string;
+  };
+}
+
+const Page = async ({ params: { trainingPlanId } }: PageProps) => {
+  const [
+    { data: availableInputs },
+    { data: availableModuleTemplates },
+    { data: availableSessionTemplates },
+    { data: subjects },
+    { data: trainingPlan },
+  ] = await Promise.all([
+    listInputs(),
+    listTemplatesWithData({ type: TemplateType.Module }),
+    listTemplatesWithData({ type: TemplateType.Session }),
+    listSubjectsByTeamId(),
+    getTrainingPlanForTemplate(trainingPlanId),
+  ]);
+
+  if (
+    !availableInputs ||
+    !availableModuleTemplates ||
+    !availableSessionTemplates ||
+    !subjects ||
+    !trainingPlan
+  ) {
+    return null;
+  }
+
+  return (
+    <Modal.Content>
+      <PageModalHeader title="New training plan template" />
+      <TrainingPlanTemplateForm
+        availableInputs={availableInputs}
+        availableModuleTemplates={availableModuleTemplates}
+        availableSessionTemplates={availableSessionTemplates}
+        disableCache
+        isDuplicate
+        subjects={subjects}
+        template={{
+          data: {
+            sessions: trainingPlan.sessions.map((session) => ({
+              modules: session.modules.map((module) => ({
+                content: module.content,
+                inputIds: module.inputs.map((input) => input.id),
+                name: module.name,
+              })),
+              title: session.title,
+            })),
+          },
+          name: trainingPlan.name ?? '',
+        }}
+      />
+    </Modal.Content>
+  );
+};
+
+export default Page;
diff --git a/app/(pages)/@modal/(layout)/templates/training-plans/create/loading.tsx b/app/(pages)/@modal/(layout)/templates/training-plans/create/loading.tsx
new file mode 100644
index 00000000..e3d948d8
--- /dev/null
+++ b/app/(pages)/@modal/(layout)/templates/training-plans/create/loading.tsx
@@ -0,0 +1,5 @@
+import PageModalLoading from '@/_components/page-modal-loading';
+
+const Loading = PageModalLoading;
+
+export default Loading;
diff --git a/app/(pages)/@modal/(layout)/templates/training-plans/create/page.tsx b/app/(pages)/@modal/(layout)/templates/training-plans/create/page.tsx
new file mode 100644
index 00000000..dd2ee5dc
--- /dev/null
+++ b/app/(pages)/@modal/(layout)/templates/training-plans/create/page.tsx
@@ -0,0 +1,44 @@
+import * as Modal from '@/_components/modal';
+import PageModalHeader from '@/_components/page-modal-header';
+import TrainingPlanTemplateForm from '@/_components/training-plan-template-form';
+import TemplateType from '@/_constants/enum-template-type';
+import listInputs from '@/_queries/list-inputs';
+import listSubjectsByTeamId from '@/_queries/list-subjects-by-team-id';
+import listTemplatesWithData from '@/_queries/list-templates-with-data';
+
+const Page = async () => {
+  const [
+    { data: availableInputs },
+    { data: availableModuleTemplates },
+    { data: availableSessionTemplates },
+    { data: subjects },
+  ] = await Promise.all([
+    listInputs(),
+    listTemplatesWithData({ type: TemplateType.Module }),
+    listTemplatesWithData({ type: TemplateType.Session }),
+    listSubjectsByTeamId(),
+  ]);
+
+  if (
+    !availableInputs ||
+    !availableModuleTemplates ||
+    !availableSessionTemplates ||
+    !subjects
+  ) {
+    return null;
+  }
+
+  return (
+    <Modal.Content>
+      <PageModalHeader title="New training plan template" />
+      <TrainingPlanTemplateForm
+        availableInputs={availableInputs}
+        availableModuleTemplates={availableModuleTemplates}
+        availableSessionTemplates={availableSessionTemplates}
+        subjects={subjects}
+      />
+    </Modal.Content>
+  );
+};
+
+export default Page;
diff --git a/app/_components/event-menu.tsx b/app/_components/event-menu.tsx
index 24fe3530..ec3b4d90 100644
--- a/app/_components/event-menu.tsx
+++ b/app/_components/event-menu.tsx
@@ -29,7 +29,7 @@ const EventMenu = ({ className, eventId, isModal }: EventMenuProps) => {
               className,
             )}
           >
-            <div className="rounded-full p-2 group-hover:bg-alpha-1">
+            <div className="rounded-full p-2 transition-colors group-hover:bg-alpha-1">
               <EllipsisVerticalIcon className="w-5" />
             </div>
           </div>
diff --git a/app/_components/event-type-menu.tsx b/app/_components/event-type-menu.tsx
index 7daf0898..b86e0234 100644
--- a/app/_components/event-type-menu.tsx
+++ b/app/_components/event-type-menu.tsx
@@ -28,8 +28,8 @@ const EventTypeMenu = ({
         {isModal ? (
           <IconButton icon={<EllipsisVerticalIcon className="w-7" />} />
         ) : (
-          <div className="group flex items-center justify-center px-2 text-fg-3 hover:text-fg-2">
-            <div className="rounded-full p-2 group-hover:bg-alpha-1">
+          <div className="group flex items-center justify-center px-2 text-fg-3 transition-colors hover:text-fg-2">
+            <div className="rounded-full p-2 transition-colors group-hover:bg-alpha-1">
               <EllipsisVerticalIcon className="w-5" />
             </div>
           </div>
diff --git a/app/_components/event-types.tsx b/app/_components/event-types.tsx
index 65150a92..64a92f7b 100644
--- a/app/_components/event-types.tsx
+++ b/app/_components/event-types.tsx
@@ -16,7 +16,10 @@ const EventTypes = async ({ isTeamMember, subjectId }: EventTypesProps) => {
   return (
     <ul className="overflow-hidden rounded border border-alpha-1 bg-bg-2 py-1">
       {eventTypes.map((eventType) => (
-        <li className="flex items-stretch hover:bg-alpha-1" key={eventType.id}>
+        <li
+          className="flex items-stretch transition-colors hover:bg-alpha-1"
+          key={eventType.id}
+        >
           <Button
             className={twMerge(
               'm-0 flex w-full gap-4 px-4 py-3 leading-snug',
diff --git a/app/_components/filterable-inputs.tsx b/app/_components/filterable-inputs.tsx
index 3d784df7..2f69b066 100644
--- a/app/_components/filterable-inputs.tsx
+++ b/app/_components/filterable-inputs.tsx
@@ -72,7 +72,10 @@ const FilterableInputs = ({ inputs }: FilterableInputsProps) => {
       </div>
       <ul className="mx-4 overflow-hidden rounded border border-alpha-1 bg-bg-2 py-1 empty:hidden">
         {filteredInputs.map((input) => (
-          <li className="flex items-stretch hover:bg-alpha-1" key={input.id}>
+          <li
+            className="flex items-stretch transition-colors hover:bg-alpha-1"
+            key={input.id}
+          >
             <Button
               className="m-0 w-full min-w-0 gap-6 px-4 py-3 pr-0 leading-snug"
               href={`/inputs/${input.id}`}
diff --git a/app/_components/filterable-templates.tsx b/app/_components/filterable-templates.tsx
index 5a83d8e3..ec8f0c78 100644
--- a/app/_components/filterable-templates.tsx
+++ b/app/_components/filterable-templates.tsx
@@ -65,7 +65,10 @@ const FilterableInputs = ({ templates }: FilterableTemplatesProps) => {
       </div>
       <ul className="mx-4 overflow-hidden rounded border border-alpha-1 bg-bg-2 py-1 empty:hidden">
         {filteredTemplates.map((template) => (
-          <li className="flex items-stretch hover:bg-alpha-1" key={template.id}>
+          <li
+            className="flex items-stretch transition-colors hover:bg-alpha-1"
+            key={template.id}
+          >
             <Button
               className="m-0 w-full min-w-0 gap-6 px-4 py-3 pr-0 leading-snug"
               href={`/templates/${TEMPLATE_TYPE_SLUGS[template.type]}/${template.id}`}
diff --git a/app/_components/input-menu.tsx b/app/_components/input-menu.tsx
index 6353282e..917c5f7e 100644
--- a/app/_components/input-menu.tsx
+++ b/app/_components/input-menu.tsx
@@ -13,8 +13,8 @@ interface InputMenuProps {
 const InputMenu = ({ inputId }: InputMenuProps) => (
   <DropdownMenu.Root>
     <DropdownMenu.Trigger>
-      <div className="group flex items-center justify-center px-2 text-fg-3 hover:text-fg-2">
-        <div className="rounded-full p-2 group-hover:bg-alpha-1">
+      <div className="group flex items-center justify-center px-2 text-fg-3 transition-colors hover:text-fg-2">
+        <div className="rounded-full p-2 transition-colors group-hover:bg-alpha-1">
           <EllipsisVerticalIcon className="w-5" />
         </div>
       </div>
diff --git a/app/_components/insight-menu.tsx b/app/_components/insight-menu.tsx
index 51c4c9ec..f9382df6 100644
--- a/app/_components/insight-menu.tsx
+++ b/app/_components/insight-menu.tsx
@@ -14,8 +14,8 @@ interface InsightMenuProps {
 const InsightMenu = ({ insightId, subjectId }: InsightMenuProps) => (
   <DropdownMenu.Root>
     <DropdownMenu.Trigger>
-      <div className="group flex items-center justify-center px-1.5 text-fg-3 hover:text-fg-2">
-        <div className="rounded-full p-2 group-hover:bg-alpha-1">
+      <div className="group flex items-center justify-center px-1.5 text-fg-3 transition-colors hover:text-fg-2">
+        <div className="rounded-full p-2 transition-colors group-hover:bg-alpha-1">
           <EllipsisVerticalIcon className="w-5" />
         </div>
       </div>
diff --git a/app/_components/module-form-section.tsx b/app/_components/module-form-section.tsx
index 396c971b..27251eb1 100644
--- a/app/_components/module-form-section.tsx
+++ b/app/_components/module-form-section.tsx
@@ -11,6 +11,7 @@ import ModuleTemplateForm from '@/_components/module-template-form';
 import PageModalHeader from '@/_components/page-modal-header';
 import RichTextarea from '@/_components/rich-textarea';
 import Select, { IOption } from '@/_components/select';
+import { SessionFormValues } from '@/_components/session-form';
 import { GetInputData } from '@/_queries/get-input';
 import { GetTemplateData } from '@/_queries/get-template';
 import { ListInputsBySubjectIdData } from '@/_queries/list-inputs-by-subject-id';
@@ -23,7 +24,7 @@ import ArrowDownIcon from '@heroicons/react/24/outline/ArrowDownIcon';
 import ArrowUpIcon from '@heroicons/react/24/outline/ArrowUpIcon';
 import Bars2Icon from '@heroicons/react/24/outline/Bars2Icon';
 import DocumentTextIcon from '@heroicons/react/24/outline/DocumentTextIcon';
-import EllipsisHorizontalIcon from '@heroicons/react/24/outline/EllipsisHorizontalIcon';
+import EllipsisVerticalIcon from '@heroicons/react/24/outline/EllipsisVerticalIcon';
 import PlusIcon from '@heroicons/react/24/outline/PlusIcon';
 import { useToggle } from '@uidotdev/usehooks';
 import { useRouter } from 'next/navigation';
@@ -37,11 +38,12 @@ interface ModuleFormSectionProps<
 > {
   availableInputs: NonNullable<ListInputsBySubjectIdData>;
   availableTemplates: NonNullable<ListTemplatesWithDataData>;
-  eventTypeArray: Form.UseFieldArrayReturn<T, U, 'key'>;
-  eventTypeIndex: number;
-  eventTypeKey: string;
+  fieldPath: Form.FieldPath<T>;
   form: Form.UseFormReturn<T>;
   hasOnlyOne?: boolean;
+  moduleArray: Form.UseFieldArrayReturn<T, U, 'key'>;
+  moduleIndex: number;
+  moduleKey: string;
   subjectId?: string;
   subjects: NonNullable<ListSubjectsByTeamIdData>;
 }
@@ -52,11 +54,12 @@ const ModuleFormSection = <
 >({
   availableInputs,
   availableTemplates,
-  eventTypeArray,
-  eventTypeIndex,
-  eventTypeKey,
+  fieldPath,
   form,
   hasOnlyOne,
+  moduleArray,
+  moduleIndex,
+  moduleKey,
   subjectId,
   subjects,
 }: ModuleFormSectionProps<T, U>) => {
@@ -67,7 +70,7 @@ const ModuleFormSection = <
     setNodeRef,
     transform,
     transition,
-  } = useSortable({ id: eventTypeKey });
+  } = useSortable({ id: moduleKey });
 
   const [createInputModal, setCreateInputModal] =
     useState<Partial<GetInputData>>(null);
@@ -79,7 +82,7 @@ const ModuleFormSection = <
 
   const inputsArray = Form.useFieldArray({
     control: form.control,
-    name: `modules[${eventTypeIndex}].inputs` as Form.ArrayPath<T>,
+    name: `${fieldPath}.inputs` as Form.ArrayPath<T>,
   });
 
   const router = useRouter();
@@ -107,17 +110,44 @@ const ModuleFormSection = <
           {...attributes}
           {...listeners}
         />
-        <div className="smallcaps text-fg-4">Module {eventTypeIndex + 1}</div>
+        <div className="smallcaps pr-1.5 text-fg-4">
+          Module {moduleIndex + 1}
+        </div>
         <DropdownMenu.Root>
           <DropdownMenu.Trigger>
-            <div className="group flex items-center justify-center px-2 text-fg-3 hover:text-fg-2">
-              <div className="rounded-full p-2 group-hover:bg-alpha-1">
-                <EllipsisHorizontalIcon className="w-5" />
+            <div className="group -mr-1 flex items-center justify-center p-1 text-fg-3 transition-colors hover:text-fg-2">
+              <div className="rounded-full p-2">
+                <EllipsisVerticalIcon className="w-5" />
               </div>
             </div>
           </DropdownMenu.Trigger>
           <DropdownMenu.Portal>
             <DropdownMenu.Content className="mx-2">
+              <DropdownMenu.Button
+                onClick={() =>
+                  moduleArray.insert(moduleIndex, {
+                    content: '',
+                    inputs: [],
+                    name: '',
+                  } as Form.FieldValue<T>)
+                }
+              >
+                <ArrowUpIcon className="w-5 text-fg-4" />
+                Add module above
+              </DropdownMenu.Button>
+              <DropdownMenu.Button
+                onClick={() =>
+                  moduleArray.insert(moduleIndex + 1, {
+                    content: '',
+                    inputs: [],
+                    name: '',
+                  } as Form.FieldValue<T>)
+                }
+              >
+                <ArrowDownIcon className="w-5 text-fg-4" />
+                Add module below
+              </DropdownMenu.Button>
+              <DropdownMenu.Separator />
               <Modal.Root
                 onOpenChange={toggleUseTemplateModal}
                 open={useTemplateModal}
@@ -153,19 +183,19 @@ const ModuleFormSection = <
                             ) as Form.PathValue<T, T[string]>;
 
                             form.setValue(
-                              `modules[${eventTypeIndex}].name` as Form.Path<T>,
+                              `${fieldPath}.name` as Form.Path<T>,
                               template?.name as Form.PathValue<T, Form.Path<T>>,
                               { shouldDirty: true },
                             );
 
                             form.setValue(
-                              `modules[${eventTypeIndex}].content` as Form.Path<T>,
+                              `${fieldPath}.content` as Form.Path<T>,
                               data?.content as Form.PathValue<T, Form.Path<T>>,
                               { shouldDirty: true },
                             );
 
                             form.setValue(
-                              `modules[${eventTypeIndex}].inputs` as Form.Path<T>,
+                              `${fieldPath}.inputs` as Form.Path<T>,
                               inputs as Form.PathValue<T, Form.Path<T>>,
                               { shouldDirty: true },
                             );
@@ -198,15 +228,15 @@ const ModuleFormSection = <
                   <DropdownMenu.Button
                     onClick={() => {
                       const { content, inputs, name } = form.getValues(
-                        `modules[${eventTypeIndex}]` as Form.Path<T>,
-                      );
+                        fieldPath,
+                      ) as SessionFormValues['modules'][0];
 
                       setCreateTemplateModal({
                         data: {
                           content,
-                          inputIds: inputs.map(({ id }: { id: string }) => id),
+                          inputIds: inputs.map(({ id }) => id),
                         },
-                        name,
+                        name: name ?? '',
                       });
                     }}
                   >
@@ -236,35 +266,14 @@ const ModuleFormSection = <
                   </Modal.Overlay>
                 </Modal.Portal>
               </Modal.Root>
-              <DropdownMenu.Button
-                onClick={() =>
-                  eventTypeArray.insert(eventTypeIndex, {
-                    content: '',
-                    inputs: [],
-                    name: '',
-                  } as Form.FieldValue<T>)
-                }
-              >
-                <ArrowUpIcon className="w-5 text-fg-4" />
-                Add module above
-              </DropdownMenu.Button>
-              <DropdownMenu.Button
-                onClick={() =>
-                  eventTypeArray.insert(eventTypeIndex + 1, {
-                    content: '',
-                    inputs: [],
-                    name: '',
-                  } as Form.FieldValue<T>)
-                }
-              >
-                <ArrowDownIcon className="w-5 text-fg-4" />
-                Add module below
-              </DropdownMenu.Button>
               {!hasOnlyOne && (
-                <DropdownMenuDeleteItem
-                  confirmText="Delete module"
-                  onConfirm={() => eventTypeArray.remove(eventTypeIndex)}
-                />
+                <>
+                  <DropdownMenu.Separator />
+                  <DropdownMenuDeleteItem
+                    confirmText="Delete module"
+                    onConfirm={() => moduleArray.remove(moduleIndex)}
+                  />
+                </>
               )}
             </DropdownMenu.Content>
           </DropdownMenu.Portal>
@@ -274,11 +283,11 @@ const ModuleFormSection = <
         className="rounded-none border-t-0"
         maxLength={49}
         placeholder="Title"
-        {...form.register(`modules[${eventTypeIndex}].name` as Form.Path<T>)}
+        {...form.register(`${fieldPath}.name` as Form.Path<T>)}
       />
       <Form.Controller
         control={form.control}
-        name={`modules[${eventTypeIndex}].content` as T[string]}
+        name={`${fieldPath}.content` as T[string]}
         render={({ field }) => (
           <RichTextarea
             className="rounded-none border-t-0"
@@ -294,7 +303,7 @@ const ModuleFormSection = <
       >
         <Form.Controller
           control={form.control}
-          name={`modules[${eventTypeIndex}].inputs` as T[string]}
+          name={`${fieldPath}.inputs` as T[string]}
           render={({ field }) => (
             <Select
               className="rounded-t-none border-t-0"
diff --git a/app/_components/session-form-section.tsx b/app/_components/session-form-section.tsx
new file mode 100644
index 00000000..d1b61423
--- /dev/null
+++ b/app/_components/session-form-section.tsx
@@ -0,0 +1,242 @@
+'use client';
+
+import Button from '@/_components/button';
+import DateTime from '@/_components/date-time';
+import Input from '@/_components/input';
+import * as Modal from '@/_components/modal';
+import ModuleFormSection from '@/_components/module-form-section';
+import Tip from '@/_components/tip';
+import { ListInputsBySubjectIdData } from '@/_queries/list-inputs-by-subject-id';
+import { ListSubjectsByTeamIdData } from '@/_queries/list-subjects-by-team-id';
+import { ListTemplatesWithDataData } from '@/_queries/list-templates-with-data';
+import formatDatetimeLocal from '@/_utilities/format-datetime-local';
+import * as DndCore from '@dnd-kit/core';
+import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
+import * as DndSortable from '@dnd-kit/sortable';
+import ClockIcon from '@heroicons/react/24/outline/ClockIcon';
+import PlusIcon from '@heroicons/react/24/outline/PlusIcon';
+import { useToggle } from '@uidotdev/usehooks';
+import { useState } from 'react';
+import * as Form from 'react-hook-form';
+
+export interface SessionFormSectionProps<T extends Form.FieldValues> {
+  availableInputs: NonNullable<ListInputsBySubjectIdData>;
+  availableModuleTemplates: NonNullable<ListTemplatesWithDataData>;
+  fieldPath?: Form.FieldPath<T>;
+  form: Form.UseFormReturn<T>;
+  includeScheduledFor?: boolean;
+  includeTitle?: boolean;
+  subjectId?: string;
+  subjects: NonNullable<ListSubjectsByTeamIdData>;
+}
+
+const SessionFormSection = <T extends Form.FieldValues>({
+  availableInputs,
+  availableModuleTemplates,
+  fieldPath,
+  includeScheduledFor,
+  includeTitle,
+  form,
+  subjects,
+}: SessionFormSectionProps<T>) => {
+  const [ogScheduledFor, setOgScheduledFor] = useState<string | null>(null);
+  const [scheduleModal, toggleScheduleModal] = useToggle(false);
+  const sensors = DndCore.useSensors(DndCore.useSensor(DndCore.PointerSensor));
+
+  const titleFieldPath = (
+    fieldPath ? `${fieldPath}.title` : 'title'
+  ) as Form.FieldPath<T>;
+
+  const scheduledForFieldPath = (
+    fieldPath ? `${fieldPath}.scheduledFor` : 'scheduledFor'
+  ) as Form.FieldPath<T>;
+
+  const modulesFieldPath = (
+    fieldPath ? `${fieldPath}.modules` : 'modules'
+  ) as Form.ArrayPath<T>;
+
+  const modulesArray = Form.useFieldArray({
+    control: form.control,
+    keyName: 'key',
+    name: modulesFieldPath,
+  });
+
+  const scheduledFor = form.watch(scheduledForFieldPath);
+
+  const cancelScheduleModal = () => {
+    form.setValue(
+      scheduledForFieldPath,
+      (ogScheduledFor ?? null) as Form.PathValue<T, Form.FieldPath<T>>,
+      { shouldDirty: true },
+    );
+
+    setOgScheduledFor(null);
+    toggleScheduleModal(false);
+  };
+
+  const openScheduleModal = () => {
+    setOgScheduledFor(scheduledFor);
+    toggleScheduleModal(true);
+  };
+
+  return (
+    <>
+      {(includeTitle || includeScheduledFor) && (
+        <div>
+          {includeTitle && (
+            <Input
+              label="Title"
+              maxLength={49}
+              {...form.register(titleFieldPath)}
+            />
+          )}
+          {includeScheduledFor && (
+            <Modal.Root onOpenChange={cancelScheduleModal} open={scheduleModal}>
+              <Modal.Trigger asChild onClick={(e) => e.preventDefault()}>
+                <Button
+                  className="mt-4 w-full"
+                  colorScheme="transparent"
+                  onClick={openScheduleModal}
+                >
+                  <ClockIcon className="-ml-1 w-5" />
+                  {scheduledFor ? (
+                    <span>
+                      Scheduled for{' '}
+                      <DateTime date={scheduledFor} formatter="date-time" />
+                    </span>
+                  ) : (
+                    'Schedule'
+                  )}
+                </Button>
+              </Modal.Trigger>
+              <Modal.Portal>
+                <Modal.Overlay>
+                  <Modal.Content className="max-w-sm p-8 text-center">
+                    <Modal.Title className="text-2xl">
+                      Schedule session
+                    </Modal.Title>
+                    <Modal.Description className="mt-4 px-4 text-fg-4">
+                      Scheduled sessions are not visible to clients until the
+                      specified time.
+                    </Modal.Description>
+                    <div className="mt-16 flex flex-col gap-4">
+                      <Input
+                        // hack to keep height on ios when input is empty
+                        className="h-[2.625em]"
+                        min={formatDatetimeLocal(new Date(), {
+                          seconds: false,
+                        })}
+                        onKeyDown={(e) => {
+                          if (e.key !== 'Enter') return;
+                          e.preventDefault();
+                          toggleScheduleModal(false);
+                        }}
+                        step={60}
+                        type="datetime-local"
+                        {...form.register(scheduledForFieldPath)}
+                      />
+                      <div className="flex gap-4">
+                        <Button
+                          className="w-full"
+                          colorScheme="transparent"
+                          disabled={!scheduledFor}
+                          onClick={() => {
+                            form.setValue(
+                              scheduledForFieldPath,
+                              null as Form.PathValue<T, Form.Path<T>>,
+                              { shouldDirty: true },
+                            );
+
+                            toggleScheduleModal(false);
+                          }}
+                        >
+                          Clear
+                        </Button>
+                        <Button
+                          className="w-full"
+                          disabled={!scheduledFor}
+                          onClick={() => toggleScheduleModal(false)}
+                        >
+                          Schedule
+                        </Button>
+                      </div>
+                      <Modal.Close asChild onClick={(e) => e.preventDefault()}>
+                        <Button
+                          className="m-0 -mb-3 w-full justify-center p-0 py-3"
+                          onClick={cancelScheduleModal}
+                          variant="link"
+                        >
+                          Close
+                        </Button>
+                      </Modal.Close>
+                    </div>
+                  </Modal.Content>
+                </Modal.Overlay>
+              </Modal.Portal>
+            </Modal.Root>
+          )}
+        </div>
+      )}
+      <div>
+        <ul className="space-y-4">
+          <DndCore.DndContext
+            collisionDetection={DndCore.closestCenter}
+            id="modules"
+            modifiers={[restrictToVerticalAxis]}
+            onDragEnd={({ active, over }: DndCore.DragEndEvent) => {
+              if (!over || active.id === over.id) return;
+
+              modulesArray.move(
+                modulesArray.fields.findIndex((f) => f.key === active.id),
+                modulesArray.fields.findIndex((f) => f.key === over.id),
+              );
+            }}
+            sensors={sensors}
+          >
+            <DndSortable.SortableContext
+              items={modulesArray.fields.map((eventType) => eventType.key)}
+              strategy={DndSortable.verticalListSortingStrategy}
+            >
+              {modulesArray.fields.map((module, i) => (
+                <ModuleFormSection<T, Form.ArrayPath<T>>
+                  availableInputs={availableInputs}
+                  availableTemplates={availableModuleTemplates}
+                  fieldPath={`${modulesFieldPath}[${i}]` as Form.FieldPath<T>}
+                  moduleArray={modulesArray}
+                  moduleIndex={i}
+                  moduleKey={module.key}
+                  form={form}
+                  hasOnlyOne={modulesArray.fields.length === 1}
+                  key={module.key}
+                  subjects={subjects}
+                />
+              ))}
+            </DndSortable.SortableContext>
+          </DndCore.DndContext>
+        </ul>
+      </div>
+      <div className="flex items-center gap-4">
+        <Tip side="right">
+          Modules break up your sessions into sections with inputs. You can add
+          as many modules as you need.
+        </Tip>
+        <Button
+          className="w-full"
+          colorScheme="transparent"
+          onClick={() =>
+            modulesArray.append({
+              content: '',
+              inputs: [],
+              name: '',
+            } as Form.FieldArray<T, Form.ArrayPath<T>>)
+          }
+        >
+          <PlusIcon className="w-5" />
+          Add module
+        </Button>
+      </div>
+    </>
+  );
+};
+
+export default SessionFormSection;
diff --git a/app/_components/session-form.tsx b/app/_components/session-form.tsx
index 4e05f1bd..d4ee6145 100644
--- a/app/_components/session-form.tsx
+++ b/app/_components/session-form.tsx
@@ -1,14 +1,11 @@
 'use client';
 
 import Button from '@/_components/button';
-import DateTime from '@/_components/date-time';
-import Input from '@/_components/input';
 import * as Modal from '@/_components/modal';
-import ModuleFormSection from '@/_components/module-form-section';
 import PageModalBackButton from '@/_components/page-modal-back-button';
 import PageModalHeader from '@/_components/page-modal-header';
 import Select from '@/_components/select';
-import Tip from '@/_components/tip';
+import SessionFormSection from '@/_components/session-form-section';
 import UnsavedChangesBanner from '@/_components/unsaved-changes-banner';
 import useCachedForm from '@/_hooks/use-cached-form';
 import upsertSession from '@/_mutations/upsert-session';
@@ -22,16 +19,10 @@ import forceArray from '@/_utilities/force-array';
 import formatDatetimeLocal from '@/_utilities/format-datetime-local';
 import getFormCacheKey from '@/_utilities/get-form-cache-key';
 import parseSessions from '@/_utilities/parse-sessions';
-import * as DndCore from '@dnd-kit/core';
-import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
-import * as DndSortable from '@dnd-kit/sortable';
-import ClockIcon from '@heroicons/react/24/outline/ClockIcon';
 import DocumentTextIcon from '@heroicons/react/24/outline/DocumentTextIcon';
-import PlusIcon from '@heroicons/react/24/outline/PlusIcon';
 import { useToggle } from '@uidotdev/usehooks';
 import { useRouter } from 'next/navigation';
-import { useState, useTransition } from 'react';
-import { useFieldArray } from 'react-hook-form';
+import { useTransition } from 'react';
 
 interface SessionFormProps {
   availableInputs: NonNullable<ListInputsBySubjectIdData>;
@@ -50,7 +41,7 @@ export type SessionFormValues = {
   modules: Array<{
     content: string;
     id?: string;
-    inputs: NonNullable<ListInputsBySubjectIdData>;
+    inputs: Array<{ id: string }>;
     name?: string | null;
   }>;
   scheduledFor: string | null;
@@ -69,12 +60,9 @@ const SessionForm = ({
   subjectId,
 }: SessionFormProps) => {
   const [isTransitioning, startTransition] = useTransition();
-  const [ogScheduledFor, setOgScheduledFor] = useState<string | null>(null);
-  const [scheduleModal, toggleScheduleModal] = useToggle(false);
   const [useTemplateModal, toggleUseTemplateModal] = useToggle(false);
   const modules = forceArray(session?.modules);
   const router = useRouter();
-  const sensors = DndCore.useSensors(DndCore.useSensor(DndCore.PointerSensor));
 
   const currentOrder = Number(
     (isDuplicate ? order : (session?.order ?? order)) ?? 0,
@@ -114,29 +102,7 @@ const SessionForm = ({
     { ignoreValues: ['draft', 'order'] },
   );
 
-  const modulesArray = useFieldArray({
-    control: form.control,
-    keyName: 'key',
-    name: 'modules',
-  });
-
   const draft = form.watch('draft');
-  const hasEvents = modules.some((module) => module.event?.length);
-  const scheduledFor = form.watch('scheduledFor');
-
-  const cancelScheduleModal = () => {
-    form.setValue('scheduledFor', ogScheduledFor ?? null, {
-      shouldDirty: true,
-    });
-
-    setOgScheduledFor(null);
-    toggleScheduleModal(false);
-  };
-
-  const openScheduleModal = () => {
-    setOgScheduledFor(scheduledFor);
-    toggleScheduleModal(true);
-  };
 
   const { highestPublishedOrder } = parseSessions({
     currentSession: session,
@@ -244,145 +210,15 @@ const SessionForm = ({
           }),
         )}
       >
-        <div>
-          <Input label="Title" maxLength={49} {...form.register('title')} />
-          <Modal.Root onOpenChange={cancelScheduleModal} open={scheduleModal}>
-            <Modal.Trigger asChild onClick={(e) => e.preventDefault()}>
-              <Button
-                className="mt-4 w-full"
-                colorScheme="transparent"
-                disabled={hasEvents}
-                onClick={openScheduleModal}
-              >
-                <ClockIcon className="-ml-1 w-5" />
-                {scheduledFor ? (
-                  <span>
-                    Scheduled for{' '}
-                    <DateTime date={scheduledFor} formatter="date-time" />
-                  </span>
-                ) : (
-                  'Schedule'
-                )}
-              </Button>
-            </Modal.Trigger>
-            <Modal.Portal>
-              <Modal.Overlay>
-                <Modal.Content className="max-w-sm p-8 text-center">
-                  <Modal.Title className="text-2xl">
-                    Schedule session
-                  </Modal.Title>
-                  <Modal.Description className="mt-4 px-4 text-fg-4">
-                    Scheduled sessions are not visible to clients until the
-                    specified time.
-                  </Modal.Description>
-                  <div className="mt-16 flex flex-col gap-4">
-                    <Input
-                      // hack to keep height on ios when input is empty
-                      className="h-[2.625em]"
-                      min={formatDatetimeLocal(new Date(), {
-                        seconds: false,
-                      })}
-                      onKeyDown={(e) => {
-                        if (e.key !== 'Enter') return;
-                        e.preventDefault();
-                        toggleScheduleModal(false);
-                      }}
-                      step={60}
-                      type="datetime-local"
-                      {...form.register('scheduledFor')}
-                    />
-                    <div className="flex gap-4">
-                      <Button
-                        className="w-full"
-                        colorScheme="transparent"
-                        disabled={!scheduledFor}
-                        onClick={() => {
-                          form.setValue('scheduledFor', null, {
-                            shouldDirty: true,
-                          });
-
-                          toggleScheduleModal(false);
-                        }}
-                      >
-                        Clear
-                      </Button>
-                      <Button
-                        className="w-full"
-                        disabled={!scheduledFor}
-                        onClick={() => toggleScheduleModal(false)}
-                      >
-                        Schedule
-                      </Button>
-                    </div>
-                    <Modal.Close asChild onClick={(e) => e.preventDefault()}>
-                      <Button
-                        className="m-0 -mb-3 w-full justify-center p-0 py-3"
-                        onClick={cancelScheduleModal}
-                        variant="link"
-                      >
-                        Close
-                      </Button>
-                    </Modal.Close>
-                  </div>
-                </Modal.Content>
-              </Modal.Overlay>
-            </Modal.Portal>
-          </Modal.Root>
-        </div>
-        <div>
-          <ul className="space-y-4">
-            <DndCore.DndContext
-              collisionDetection={DndCore.closestCenter}
-              id="modules"
-              modifiers={[restrictToVerticalAxis]}
-              onDragEnd={({ active, over }: DndCore.DragEndEvent) => {
-                if (!over || active.id === over.id) return;
-
-                modulesArray.move(
-                  modulesArray.fields.findIndex((f) => f.key === active.id),
-                  modulesArray.fields.findIndex((f) => f.key === over.id),
-                );
-              }}
-              sensors={sensors}
-            >
-              <DndSortable.SortableContext
-                items={modulesArray.fields.map((eventType) => eventType.key)}
-                strategy={DndSortable.verticalListSortingStrategy}
-              >
-                {modulesArray.fields.map((module, eventTypeIndex) => (
-                  <ModuleFormSection<SessionFormValues, 'modules'>
-                    availableInputs={availableInputs}
-                    availableTemplates={availableModuleTemplates}
-                    eventTypeArray={modulesArray}
-                    eventTypeIndex={eventTypeIndex}
-                    eventTypeKey={module.key}
-                    form={form}
-                    hasOnlyOne={modulesArray.fields.length === 1}
-                    key={module.key}
-                    subjectId={subjectId}
-                    subjects={subjects}
-                  />
-                ))}
-              </DndSortable.SortableContext>
-            </DndCore.DndContext>
-          </ul>
-          <div className="mt-4 flex items-center gap-4">
-            <Tip side="right">
-              Modules break up your sessions into sections with inputs. You can
-              add as many modules as you need.
-            </Tip>
-            <Button
-              className="w-full"
-              colorScheme="transparent"
-              onClick={() =>
-                modulesArray.append({ content: '', inputs: [], name: '' })
-              }
-            >
-              <PlusIcon className="w-5" />
-              Add module
-            </Button>
-          </div>
-        </div>
+        <SessionFormSection<SessionFormValues>
+          availableInputs={availableInputs}
+          availableModuleTemplates={availableModuleTemplates}
+          form={form}
+          includeScheduledFor={!modules.some((module) => module.event?.length)}
+          includeTitle
+          subjectId={subjectId}
+          subjects={subjects}
+        />
         {form.formState.errors.root && (
           <div className="text-center">
             {form.formState.errors.root.message}
diff --git a/app/_components/session-menu.tsx b/app/_components/session-menu.tsx
index 661a0168..5df25908 100644
--- a/app/_components/session-menu.tsx
+++ b/app/_components/session-menu.tsx
@@ -47,8 +47,8 @@ const SessionMenu = ({
         {isView ? (
           <IconButton icon={<EllipsisVerticalIcon className="w-7" />} />
         ) : (
-          <div className="group mr-1.5 flex items-center justify-center px-2 text-fg-3 hover:text-fg-2 sm:mr-6">
-            <div className="rounded-full p-2 group-hover:bg-alpha-1">
+          <div className="group mr-1.5 flex items-center justify-center px-2 text-fg-3 transition-colors hover:text-fg-2 sm:mr-6">
+            <div className="rounded-full p-2 transition-colors group-hover:bg-alpha-1">
               <EllipsisVerticalIcon className="w-5" />
             </div>
           </div>
@@ -70,15 +70,9 @@ const SessionMenu = ({
             <DocumentDuplicateIcon className="w-5 text-fg-4" />
             Duplicate
           </DropdownMenu.Button>
-          <DropdownMenu.Button
-            href={`/templates/sessions/create/from-session/${sessionId}`}
-            scroll={false}
-          >
-            <PlusIcon className="w-5 text-fg-4" />
-            New template
-          </DropdownMenu.Button>
           {isList && (
             <>
+              <DropdownMenu.Separator />
               <DropdownMenu.Button
                 disabled={!isDraft && order >= highestPublishedOrder}
                 loading={isMoveRightTransitioning}
@@ -119,6 +113,15 @@ const SessionMenu = ({
               </DropdownMenu.Button>
             </>
           )}
+          <DropdownMenu.Separator />
+          <DropdownMenu.Button
+            href={`/templates/sessions/create/from-session/${sessionId}`}
+            scroll={false}
+          >
+            <PlusIcon className="w-5 text-fg-4" />
+            New template
+          </DropdownMenu.Button>
+          <DropdownMenu.Separator />
           <DropdownMenuDeleteItem
             confirmText="Delete session"
             onConfirm={async () => {
diff --git a/app/_components/session-template-form.tsx b/app/_components/session-template-form.tsx
index 3387859f..9c406447 100644
--- a/app/_components/session-template-form.tsx
+++ b/app/_components/session-template-form.tsx
@@ -2,8 +2,8 @@
 
 import Button from '@/_components/button';
 import Input from '@/_components/input';
-import ModuleFormSection from '@/_components/module-form-section';
 import PageModalBackButton from '@/_components/page-modal-back-button';
+import SessionFormSection from '@/_components/session-form-section';
 import UnsavedChangesBanner from '@/_components/unsaved-changes-banner';
 import useCachedForm from '@/_hooks/use-cached-form';
 import upsertSessionTemplate from '@/_mutations/upsert-session-template';
@@ -15,19 +15,16 @@ import { Database } from '@/_types/database';
 import { SessionTemplateDataJson } from '@/_types/session-template-data-json';
 import getFormCacheKey from '@/_utilities/get-form-cache-key';
 import stopPropagation from '@/_utilities/stop-propagation';
-import * as DndCore from '@dnd-kit/core';
-import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
-import * as DndSortable from '@dnd-kit/sortable';
-import PlusIcon from '@heroicons/react/24/outline/PlusIcon';
 import { useRouter } from 'next/navigation';
 import { useTransition } from 'react';
-import { useFieldArray } from 'react-hook-form';
 
 interface SessionTemplateFormProps {
   availableInputs: NonNullable<ListInputsData>;
-  availableTemplates: NonNullable<ListTemplatesWithDataData>;
+  availableModuleTemplates: NonNullable<ListTemplatesWithDataData>;
   disableCache?: boolean;
   isDuplicate?: boolean;
+  onClose?: () => void;
+  onSubmit?: () => void;
   subjects: NonNullable<ListSubjectsByTeamIdData>;
   template?: Partial<GetTemplateData>;
 }
@@ -43,15 +40,16 @@ export type SessionTemplateFormValues = {
 
 const SessionTemplateForm = ({
   availableInputs,
-  availableTemplates,
+  availableModuleTemplates,
   disableCache,
   isDuplicate,
+  onClose,
+  onSubmit,
   subjects,
   template,
 }: SessionTemplateFormProps) => {
   const [isTransitioning, startTransition] = useTransition();
   const router = useRouter();
-  const sensors = DndCore.useSensors(DndCore.useSensor(DndCore.PointerSensor));
   const templateData = template?.data as SessionTemplateDataJson;
 
   const cacheKey = getFormCacheKey.sessionTemplate({
@@ -78,12 +76,6 @@ const SessionTemplateForm = ({
     { disableCache },
   );
 
-  const modulesArray = useFieldArray({
-    control: form.control,
-    keyName: 'key',
-    name: 'modules',
-  });
-
   return (
     <form
       className="flex flex-col gap-8 px-4 pb-8 pt-6 sm:px-8"
@@ -98,65 +90,29 @@ const SessionTemplateForm = ({
             if (res?.error) {
               form.setError('root', { message: res.error, type: 'custom' });
             } else {
-              router.back();
+              onSubmit?.();
+              if (!onClose) router.back();
             }
           }),
         ),
       )}
     >
       <Input label="Name" maxLength={49} required {...form.register('name')} />
-      <div>
-        <ul className="space-y-4">
-          <DndCore.DndContext
-            collisionDetection={DndCore.closestCenter}
-            id="modules"
-            modifiers={[restrictToVerticalAxis]}
-            onDragEnd={({ active, over }: DndCore.DragEndEvent) => {
-              if (!over || active.id === over.id) return;
-
-              modulesArray.move(
-                modulesArray.fields.findIndex((f) => f.key === active.id),
-                modulesArray.fields.findIndex((f) => f.key === over.id),
-              );
-            }}
-            sensors={sensors}
-          >
-            <DndSortable.SortableContext
-              items={modulesArray.fields.map((eventType) => eventType.key)}
-              strategy={DndSortable.verticalListSortingStrategy}
-            >
-              {modulesArray.fields.map((module, eventTypeIndex) => (
-                <ModuleFormSection<SessionTemplateFormValues, 'modules'>
-                  availableInputs={availableInputs}
-                  availableTemplates={availableTemplates}
-                  eventTypeArray={modulesArray}
-                  eventTypeIndex={eventTypeIndex}
-                  eventTypeKey={module.key}
-                  form={form}
-                  hasOnlyOne={modulesArray.fields.length === 1}
-                  key={module.key}
-                  subjects={subjects}
-                />
-              ))}
-            </DndSortable.SortableContext>
-          </DndCore.DndContext>
-        </ul>
-        <Button
-          className="mt-4 w-full"
-          colorScheme="transparent"
-          onClick={() =>
-            modulesArray.append({ content: '', inputs: [], name: '' })
-          }
-        >
-          <PlusIcon className="w-5" />
-          Add module
-        </Button>
-      </div>
+      <SessionFormSection<SessionTemplateFormValues>
+        availableInputs={availableInputs}
+        availableModuleTemplates={availableModuleTemplates}
+        form={form}
+        subjects={subjects}
+      />
       {form.formState.errors.root && (
         <div className="text-center">{form.formState.errors.root.message}</div>
       )}
       <div className="flex gap-4 pt-8">
-        <PageModalBackButton className="w-full" colorScheme="transparent">
+        <PageModalBackButton
+          className="w-full"
+          colorScheme="transparent"
+          onClick={onClose}
+        >
           Close
         </PageModalBackButton>
         <Button
diff --git a/app/_components/sessions-page.tsx b/app/_components/sessions-page.tsx
index 921384c2..30af8f0a 100644
--- a/app/_components/sessions-page.tsx
+++ b/app/_components/sessions-page.tsx
@@ -104,7 +104,7 @@ const SessionsPage = async ({
 
             return (
               <li
-                className="flex items-stretch gap-2 hover:bg-alpha-1"
+                className="flex items-stretch gap-2 transition-colors hover:bg-alpha-1"
                 key={session.id}
               >
                 <Button
diff --git a/app/_components/sortable-session-form-section.tsx b/app/_components/sortable-session-form-section.tsx
new file mode 100644
index 00000000..67915aa0
--- /dev/null
+++ b/app/_components/sortable-session-form-section.tsx
@@ -0,0 +1,310 @@
+'use client';
+
+import Button from '@/_components/button';
+import * as Collapsible from '@/_components/collapsible';
+import * as DropdownMenu from '@/_components/dropdown-menu';
+import DropdownMenuDeleteItem from '@/_components/dropdown-menu-delete-item';
+import IconButton from '@/_components/icon-button';
+import * as Modal from '@/_components/modal';
+import PageModalHeader from '@/_components/page-modal-header';
+import Select from '@/_components/select';
+import SessionTemplateForm from '@/_components/session-template-form';
+import { GetTemplateData } from '@/_queries/get-template';
+import { ListTemplatesWithDataData } from '@/_queries/list-templates-with-data';
+import forceArray from '@/_utilities/force-array';
+import { useSortable } from '@dnd-kit/sortable';
+import ArrowDownIcon from '@heroicons/react/24/outline/ArrowDownIcon';
+import ArrowUpIcon from '@heroicons/react/24/outline/ArrowUpIcon';
+import Bars2Icon from '@heroicons/react/24/outline/Bars2Icon';
+import ChevronDownIcon from '@heroicons/react/24/outline/ChevronDownIcon';
+import ChevronUpIcon from '@heroicons/react/24/outline/ChevronUpIcon';
+import DocumentTextIcon from '@heroicons/react/24/outline/DocumentTextIcon';
+import EllipsisVerticalIcon from '@heroicons/react/24/outline/EllipsisVerticalIcon';
+import PlusIcon from '@heroicons/react/24/outline/PlusIcon';
+import { useToggle } from '@uidotdev/usehooks';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import * as Form from 'react-hook-form';
+import { twMerge } from 'tailwind-merge';
+
+import SessionFormSection, {
+  SessionFormSectionProps,
+} from '@/_components/session-form-section';
+import { TrainingPlanTemplateFormValues } from '@/_components/training-plan-template-form';
+import { SessionTemplateDataJson } from '@/_types/session-template-data-json';
+import DocumentDuplicateIcon from '@heroicons/react/24/outline/DocumentDuplicateIcon';
+
+interface SortableSessionFormSectionProps<
+  T extends Form.FieldValues,
+  U extends Form.ArrayPath<T>,
+> extends SessionFormSectionProps<T> {
+  availableSessionTemplates: NonNullable<ListTemplatesWithDataData>;
+  sessionArray: Form.UseFieldArrayReturn<T, U, 'key'>;
+  sessionIndex: number;
+  sessionKey: string;
+}
+
+const SortableSessionFormSection = <
+  T extends Form.FieldValues,
+  U extends Form.ArrayPath<T>,
+>({
+  availableSessionTemplates,
+  sessionArray,
+  sessionIndex,
+  sessionKey,
+  ...rest
+}: SortableSessionFormSectionProps<T, U>) => {
+  const [createTemplateModal, setCreateTemplateModal] =
+    useState<Partial<GetTemplateData>>(null);
+
+  const [isOpen, setIsOpen] = useState(false);
+  const [useTemplateModal, toggleUseTemplateModal] = useToggle(false);
+  const router = useRouter();
+
+  const {
+    attributes,
+    isDragging,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+  } = useSortable({ id: sessionKey });
+
+  const title = rest.form.watch(`${rest.fieldPath}.title` as Form.Path<T>);
+
+  return (
+    <li
+      className={twMerge(
+        'border-y border-alpha-1 bg-bg-2',
+        isDragging && 'relative z-10 drop-shadow-2xl',
+      )}
+      ref={setNodeRef}
+      style={{
+        transform: transform
+          ? isDragging
+            ? `translate(${transform.x}px, ${transform.y}px) scale(1.03)`
+            : `translate(${transform.x}px, ${transform.y}px)`
+          : undefined,
+        transition,
+      }}
+    >
+      <Collapsible.Root onOpenChange={setIsOpen} open={isOpen}>
+        <div className="flex px-4 transition-colors hover:bg-alpha-1 sm:px-8">
+          <IconButton
+            className="m-0 mr-2 h-full cursor-ns-resize touch-none px-4"
+            icon={<Bars2Icon className="w-5" />}
+            {...attributes}
+            {...listeners}
+          />
+          <Collapsible.Trigger asChild>
+            <Button
+              colorScheme="transparent"
+              className="m-0 w-full min-w-0 justify-between gap-6 p-0 text-left"
+              variant="link"
+            >
+              <div className="min-w-0">
+                <div className="truncate leading-snug">
+                  Session {sessionIndex + 1}
+                  {title ? `: ${title}` : ''}
+                </div>
+              </div>
+              {isOpen ? (
+                <ChevronUpIcon className="mr-2 w-5 shrink-0" />
+              ) : (
+                <ChevronDownIcon className="mr-2 w-5 shrink-0" />
+              )}
+            </Button>
+          </Collapsible.Trigger>
+          <DropdownMenu.Root>
+            <DropdownMenu.Trigger>
+              <div className="group -mr-1 flex items-center justify-center p-1 text-fg-3 transition-colors hover:text-fg-2">
+                <div className="rounded-full p-2 transition-colors group-hover:bg-alpha-1">
+                  <EllipsisVerticalIcon className="w-5" />
+                </div>
+              </div>
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Portal>
+              <DropdownMenu.Content>
+                <DropdownMenu.Button
+                  onClick={() => {
+                    const session = rest.form.getValues(
+                      `${rest.fieldPath}` as Form.Path<T>,
+                    );
+
+                    sessionArray.insert(sessionIndex + 1, session);
+                  }}
+                >
+                  <DocumentDuplicateIcon className="w-5 text-fg-4" />
+                  Duplicate
+                </DropdownMenu.Button>
+                <DropdownMenu.Separator />
+                <DropdownMenu.Button
+                  onClick={() =>
+                    sessionArray.insert(sessionIndex, {
+                      modules: [{ content: '', inputs: [], name: '' }],
+                      title: '',
+                    } as Form.FieldValue<T>)
+                  }
+                >
+                  <ArrowUpIcon className="w-5 text-fg-4" />
+                  Add session above
+                </DropdownMenu.Button>
+                <DropdownMenu.Button
+                  onClick={() =>
+                    sessionArray.insert(sessionIndex + 1, {
+                      modules: [{ content: '', inputs: [], name: '' }],
+                      title: '',
+                    } as Form.FieldValue<T>)
+                  }
+                >
+                  <ArrowDownIcon className="w-5 text-fg-4" />
+                  Add session below
+                </DropdownMenu.Button>
+                <DropdownMenu.Separator />
+                <Modal.Root
+                  onOpenChange={toggleUseTemplateModal}
+                  open={useTemplateModal}
+                >
+                  <Modal.Trigger asChild>
+                    <DropdownMenu.Button
+                      onClick={() => toggleUseTemplateModal()}
+                    >
+                      <DocumentTextIcon className="w-5 text-fg-4" />
+                      Use template
+                    </DropdownMenu.Button>
+                  </Modal.Trigger>
+                  <Modal.Portal>
+                    <Modal.Overlay>
+                      <Modal.Content className="max-w-sm p-8 text-center">
+                        <Modal.Title className="text-2xl">
+                          Use template
+                        </Modal.Title>
+                        <Modal.Description className="mt-4 px-4 text-fg-4">
+                          Selecting a template will overwrite any existing
+                          module values.
+                        </Modal.Description>
+                        <div className="pt-16 text-left">
+                          <Select
+                            noOptionsMessage={() => 'No templates.'}
+                            onChange={(t) => {
+                              const template =
+                                t as NonNullable<ListTemplatesWithDataData>[0];
+
+                              const data =
+                                template?.data as SessionTemplateDataJson;
+
+                              rest.form.setValue(
+                                `${rest.fieldPath}.title` as Form.Path<T>,
+                                template?.name as Form.PathValue<
+                                  T,
+                                  Form.Path<T>
+                                >,
+                                { shouldDirty: true },
+                              );
+
+                              rest.form.setValue(
+                                `${rest.fieldPath}.modules` as Form.Path<T>,
+                                data?.modules?.map((module) => ({
+                                  content: module.content,
+                                  inputs: rest.availableInputs.filter(
+                                    ({ id }) =>
+                                      forceArray(module?.inputIds).includes(id),
+                                  ),
+                                  name: module.name,
+                                })) as Form.PathValue<T, Form.Path<T>>,
+                                { shouldDirty: true },
+                              );
+
+                              toggleUseTemplateModal();
+                            }}
+                            options={availableSessionTemplates}
+                            placeholder="Select a template…"
+                            value={null}
+                          />
+                        </div>
+                        <Modal.Close
+                          asChild
+                          onClick={(e) => e.preventDefault()}
+                        >
+                          <Button
+                            className="-mb-3 mt-14 w-full justify-center p-0 py-3"
+                            onClick={() => toggleUseTemplateModal()}
+                            variant="link"
+                          >
+                            Close
+                          </Button>
+                        </Modal.Close>
+                      </Modal.Content>
+                    </Modal.Overlay>
+                  </Modal.Portal>
+                </Modal.Root>
+                <Modal.Root
+                  onOpenChange={() => setCreateTemplateModal(null)}
+                  open={!!createTemplateModal}
+                >
+                  <Modal.Trigger asChild onClick={(e) => e.preventDefault()}>
+                    <DropdownMenu.Button
+                      onClick={() => {
+                        const { modules, title } = rest.form.getValues(
+                          rest.fieldPath as Form.Path<T>,
+                        ) as TrainingPlanTemplateFormValues['sessions'][0];
+
+                        setCreateTemplateModal({
+                          data: {
+                            modules: modules.map((module) => ({
+                              content: module.content,
+                              inputIds: module.inputs.map(({ id }) => id),
+                              name: module.name,
+                            })),
+                          },
+                          name: title,
+                        });
+                      }}
+                    >
+                      <PlusIcon className="w-5 text-fg-4" />
+                      New template
+                    </DropdownMenu.Button>
+                  </Modal.Trigger>
+                  <Modal.Portal>
+                    <Modal.Overlay>
+                      <Modal.Content>
+                        <PageModalHeader
+                          onClose={() => setCreateTemplateModal(null)}
+                          title="New session template"
+                        />
+                        <SessionTemplateForm
+                          availableInputs={rest.availableInputs}
+                          availableModuleTemplates={
+                            rest.availableModuleTemplates
+                          }
+                          disableCache
+                          onClose={() => setCreateTemplateModal(null)}
+                          onSubmit={() => {
+                            setCreateTemplateModal(null);
+                            router.refresh();
+                          }}
+                          subjects={rest.subjects}
+                          template={createTemplateModal}
+                        />
+                      </Modal.Content>
+                    </Modal.Overlay>
+                  </Modal.Portal>
+                </Modal.Root>
+                <DropdownMenu.Separator />
+                <DropdownMenuDeleteItem
+                  confirmText="Delete session"
+                  onConfirm={() => sessionArray.remove(sessionIndex)}
+                />
+              </DropdownMenu.Content>
+            </DropdownMenu.Portal>
+          </DropdownMenu.Root>
+        </div>
+        <Collapsible.Content className="space-y-8 px-4 pb-16 pt-10 sm:px-8">
+          <SessionFormSection<T> {...rest} />
+        </Collapsible.Content>
+      </Collapsible.Root>
+    </li>
+  );
+};
+
+export default SortableSessionFormSection;
diff --git a/app/_components/subject-list.tsx b/app/_components/subject-list.tsx
index cb89b1b8..c046b2fd 100644
--- a/app/_components/subject-list.tsx
+++ b/app/_components/subject-list.tsx
@@ -19,7 +19,10 @@ const SubjectList = async ({
     {!!teamSubjects.length && (
       <ul className="mx-4 overflow-hidden rounded border border-alpha-1 bg-bg-2 py-1">
         {teamSubjects.map((subject) => (
-          <li className="flex items-stretch hover:bg-alpha-1" key={subject.id}>
+          <li
+            className="flex items-stretch transition-colors hover:bg-alpha-1"
+            key={subject.id}
+          >
             <Button
               className="m-0 w-full gap-4 px-4 py-3 pr-0 leading-snug"
               href={`/subjects/${subject.id}`}
diff --git a/app/_components/subject-menu.tsx b/app/_components/subject-menu.tsx
index da4fba99..95f15262 100644
--- a/app/_components/subject-menu.tsx
+++ b/app/_components/subject-menu.tsx
@@ -51,8 +51,8 @@ const SubjectMenu = ({ canUnarchive, isList, subject }: SubjectMenuProps) => {
     <DropdownMenu.Root>
       <DropdownMenu.Trigger>
         {isList ? (
-          <div className="group flex items-center justify-center px-2 text-fg-3 hover:text-fg-2">
-            <div className="rounded-full p-2 group-hover:bg-alpha-1">
+          <div className="group flex items-center justify-center px-2 text-fg-3 transition-colors hover:text-fg-2">
+            <div className="rounded-full p-2 transition-colors group-hover:bg-alpha-1">
               <EllipsisVerticalIcon className="w-5" />
             </div>
           </div>
diff --git a/app/_components/template-menu.tsx b/app/_components/template-menu.tsx
index 38ee4166..f6cb583a 100644
--- a/app/_components/template-menu.tsx
+++ b/app/_components/template-menu.tsx
@@ -13,7 +13,7 @@ const TemplateMenu = ({ templateId }: TemplateMenuProps) => (
   <DropdownMenu.Root>
     <DropdownMenu.Trigger>
       <div className="group flex items-center justify-center px-2 text-fg-3 hover:text-fg-2">
-        <div className="rounded-full p-2 group-hover:bg-alpha-1">
+        <div className="rounded-full p-2 transition-colors group-hover:bg-alpha-1">
           <EllipsisVerticalIcon className="w-5" />
         </div>
       </div>
diff --git a/app/_components/training-plan-menu.tsx b/app/_components/training-plan-menu.tsx
index f9c7b888..71dc990f 100644
--- a/app/_components/training-plan-menu.tsx
+++ b/app/_components/training-plan-menu.tsx
@@ -28,8 +28,8 @@ const TrainingPlanMenu = ({
         {isModal ? (
           <IconButton icon={<EllipsisVerticalIcon className="w-7" />} />
         ) : (
-          <div className="group flex items-center justify-center px-2 text-fg-3 hover:text-fg-2">
-            <div className="rounded-full p-2 group-hover:bg-alpha-1">
+          <div className="group flex items-center justify-center px-2 text-fg-3 transition-colors hover:text-fg-2">
+            <div className="rounded-full p-2 transition-colors group-hover:bg-alpha-1">
               <EllipsisVerticalIcon className="w-5" />
             </div>
           </div>
diff --git a/app/_components/training-plan-template-form.tsx b/app/_components/training-plan-template-form.tsx
new file mode 100644
index 00000000..8d63b7d5
--- /dev/null
+++ b/app/_components/training-plan-template-form.tsx
@@ -0,0 +1,209 @@
+'use client';
+
+import Button from '@/_components/button';
+import Input from '@/_components/input';
+import PageModalBackButton from '@/_components/page-modal-back-button';
+import SortableSessionFormSection from '@/_components/sortable-session-form-section';
+import UnsavedChangesBanner from '@/_components/unsaved-changes-banner';
+import useCachedForm from '@/_hooks/use-cached-form';
+import upsertTrainingPlanTemplate from '@/_mutations/upsert-training-plan-template';
+import { GetTemplateData } from '@/_queries/get-template';
+import { ListInputsData } from '@/_queries/list-inputs';
+import { ListSubjectsByTeamIdData } from '@/_queries/list-subjects-by-team-id';
+import { ListTemplatesWithDataData } from '@/_queries/list-templates-with-data';
+import { Database } from '@/_types/database';
+import { TrainingPlanTemplateDataJson } from '@/_types/training-plan-template-data-json';
+import getFormCacheKey from '@/_utilities/get-form-cache-key';
+import stopPropagation from '@/_utilities/stop-propagation';
+import * as DndCore from '@dnd-kit/core';
+import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
+import * as DndSortable from '@dnd-kit/sortable';
+import PlusIcon from '@heroicons/react/24/outline/PlusIcon';
+import { useRouter } from 'next/navigation';
+import { useTransition } from 'react';
+import { FieldPath, useFieldArray } from 'react-hook-form';
+
+interface TrainingPlanTemplateFormProps {
+  availableInputs: NonNullable<ListInputsData>;
+  availableModuleTemplates: NonNullable<ListTemplatesWithDataData>;
+  availableSessionTemplates: NonNullable<ListTemplatesWithDataData>;
+  disableCache?: boolean;
+  isDuplicate?: boolean;
+  subjects: NonNullable<ListSubjectsByTeamIdData>;
+  template?: Partial<GetTemplateData>;
+}
+
+export type TrainingPlanTemplateFormValues = {
+  name: string;
+  sessions: Array<{
+    modules: Array<{
+      content: string;
+      inputs: Array<Database['public']['Tables']['inputs']['Row']>;
+      name?: string | null;
+    }>;
+    title: string;
+  }>;
+};
+
+const TrainingPlanTemplateForm = ({
+  availableInputs,
+  availableModuleTemplates,
+  availableSessionTemplates,
+  disableCache,
+  isDuplicate,
+  subjects,
+  template,
+}: TrainingPlanTemplateFormProps) => {
+  const [isTransitioning, startTransition] = useTransition();
+  const router = useRouter();
+  const sensors = DndCore.useSensors(DndCore.useSensor(DndCore.PointerSensor));
+  const templateData = template?.data as TrainingPlanTemplateDataJson;
+
+  const cacheKey = getFormCacheKey.trainingPlanTemplate({
+    id: template?.id,
+    isDuplicate,
+  });
+
+  const form = useCachedForm<TrainingPlanTemplateFormValues>(
+    cacheKey,
+    {
+      defaultValues: {
+        name: template?.name ?? '',
+        sessions: templateData?.sessions?.length
+          ? templateData.sessions.map((session) => ({
+              modules: session.modules?.length
+                ? session.modules.map((module) => ({
+                    content: module.content,
+                    inputs: availableInputs.filter((input) =>
+                      module.inputIds?.includes(input.id),
+                    ),
+                    name: module.name,
+                  }))
+                : [{ content: '', inputs: [], name: '' }],
+              title: session.title ?? '',
+            }))
+          : [],
+      },
+    },
+    { disableCache },
+  );
+
+  const sessionsArray = useFieldArray({
+    control: form.control,
+    keyName: 'key',
+    name: 'sessions',
+  });
+
+  return (
+    <form
+      className="flex flex-col gap-8 pb-8 pt-6"
+      onSubmit={stopPropagation(
+        form.handleSubmit((values) =>
+          startTransition(async () => {
+            const res = await upsertTrainingPlanTemplate(
+              { templateId: template?.id },
+              values,
+            );
+
+            if (res?.error) {
+              form.setError('root', { message: res.error, type: 'custom' });
+            } else {
+              router.back();
+            }
+          }),
+        ),
+      )}
+    >
+      <div className="px-4 sm:px-8">
+        <Input
+          label="Name"
+          maxLength={49}
+          required
+          {...form.register('name')}
+        />
+      </div>
+      {!!sessionsArray.fields.length && (
+        <ul className="space-y-4 overflow-x-clip border-y border-alpha-1 bg-alpha-reverse-2 py-4">
+          <DndCore.DndContext
+            collisionDetection={DndCore.closestCenter}
+            id="sessions"
+            modifiers={[restrictToVerticalAxis]}
+            onDragEnd={({ active, over }: DndCore.DragEndEvent) => {
+              if (!over || active.id === over.id) return;
+
+              sessionsArray.move(
+                sessionsArray.fields.findIndex((f) => f.key === active.id),
+                sessionsArray.fields.findIndex((f) => f.key === over.id),
+              );
+            }}
+            sensors={sensors}
+          >
+            <DndSortable.SortableContext
+              items={sessionsArray.fields.map((eventType) => eventType.key)}
+              strategy={DndSortable.verticalListSortingStrategy}
+            >
+              {sessionsArray.fields.map((session, i) => (
+                <SortableSessionFormSection<
+                  TrainingPlanTemplateFormValues,
+                  'sessions'
+                >
+                  availableInputs={availableInputs}
+                  availableModuleTemplates={availableModuleTemplates}
+                  availableSessionTemplates={availableSessionTemplates}
+                  fieldPath={
+                    `sessions[${i}]` as FieldPath<TrainingPlanTemplateFormValues>
+                  }
+                  form={form}
+                  includeTitle
+                  key={session.key}
+                  sessionArray={sessionsArray}
+                  sessionIndex={i}
+                  sessionKey={session.key}
+                  subjects={subjects}
+                />
+              ))}
+            </DndSortable.SortableContext>
+          </DndCore.DndContext>
+        </ul>
+      )}
+      <div className="px-4 sm:px-8">
+        <Button
+          className="w-full"
+          colorScheme="transparent"
+          onClick={() =>
+            sessionsArray.append({
+              modules: [{ content: '', inputs: [], name: '' }],
+              title: '',
+            })
+          }
+        >
+          <PlusIcon className="w-5" />
+          Add session
+        </Button>
+      </div>
+      {form.formState.errors.root && (
+        <div className="px-4 text-center sm:px-8">
+          {form.formState.errors.root.message}
+        </div>
+      )}
+      <div className="flex gap-4 px-4 pt-8 sm:px-8">
+        <PageModalBackButton className="w-full" colorScheme="transparent">
+          Close
+        </PageModalBackButton>
+        <Button
+          className="w-full"
+          loading={isTransitioning}
+          loadingText="Saving…"
+          type="submit"
+        >
+          Save
+        </Button>
+      </div>
+      {!disableCache && (
+        <UnsavedChangesBanner<TrainingPlanTemplateFormValues> form={form} />
+      )}
+    </form>
+  );
+};
+
+export default TrainingPlanTemplateForm;
diff --git a/app/_components/training-plan-use-template-modal.tsx b/app/_components/training-plan-use-template-modal.tsx
index d4e7f5c4..0c888fef 100644
--- a/app/_components/training-plan-use-template-modal.tsx
+++ b/app/_components/training-plan-use-template-modal.tsx
@@ -3,49 +3,80 @@
 import Button from '@/_components/button';
 import * as Modal from '@/_components/modal';
 import Select from '@/_components/select';
+import createTrainingPlanFromTemplate from '@/_mutations/create-training-plan-from-template';
+import { ListTemplatesData } from '@/_queries/list-templates';
 import DocumentTextIcon from '@heroicons/react/24/outline/DocumentTextIcon';
+import { useRouter } from 'next/navigation';
+import { useTransition } from 'react';
 
-const TrainingPlanUseTemplateModal = () => (
-  <Modal.Root>
-    <Modal.Trigger asChild>
-      <Button className="pr-2 sm:pr-6" variant="link">
-        <DocumentTextIcon className="w-5 text-fg-4" />
-        Use template
-      </Button>
-    </Modal.Trigger>
-    <Modal.Portal>
-      <Modal.Overlay>
-        <Modal.Content className="max-w-sm p-8 text-center">
-          <Modal.Title className="text-2xl">Use template</Modal.Title>
-          <Modal.Description className="mt-4 px-4 text-fg-4">
-            Who said creating an entire training plan had to be hard?
-          </Modal.Description>
-          <div className="pt-16 text-left">
-            <Select
-              noOptionsMessage={() => 'No templates.'}
-              // onChange={(t) => {
-              //   const template =
-              //     t as NonNullable<ListTemplatesWithDataData>[0];
-              //
-              //   const data = template?.data as TemplateDataJson;
-              // }}
-              options={[]}
-              placeholder="Select a template…"
-              value={null}
-            />
-          </div>
-          <Modal.Close asChild>
-            <Button
-              className="-mb-3 mt-14 w-full justify-center p-0 py-3"
-              variant="link"
-            >
-              Close
-            </Button>
-          </Modal.Close>
-        </Modal.Content>
-      </Modal.Overlay>
-    </Modal.Portal>
-  </Modal.Root>
-);
+interface TrainingPlanUseTemplateModalProps {
+  availableTrainingPlanTemplates: NonNullable<ListTemplatesData>;
+  subjectId: string;
+}
+
+const TrainingPlanUseTemplateModal = ({
+  availableTrainingPlanTemplates,
+  subjectId,
+}: TrainingPlanUseTemplateModalProps) => {
+  const [isTransitioning, startTransition] = useTransition();
+  const router = useRouter();
+
+  return (
+    <Modal.Root>
+      <Modal.Trigger asChild>
+        <Button className="pr-2 sm:pr-6" variant="link">
+          <DocumentTextIcon className="w-5 text-fg-4" />
+          Use template
+        </Button>
+      </Modal.Trigger>
+      <Modal.Portal>
+        <Modal.Overlay>
+          <Modal.Content className="max-w-sm p-8 text-center">
+            <Modal.Title className="text-2xl">Use template</Modal.Title>
+            <Modal.Description className="mt-4 px-4 text-fg-4">
+              Who said creating an entire training plan had to be hard?
+            </Modal.Description>
+            <div className="pt-16 text-left">
+              <Select
+                isLoading={isTransitioning}
+                noOptionsMessage={() => 'No templates.'}
+                onChange={(t) =>
+                  startTransition(async () => {
+                    const template = t as NonNullable<ListTemplatesData>[0];
+
+                    const res = await createTrainingPlanFromTemplate({
+                      subjectId,
+                      templateId: template.id,
+                    });
+
+                    if (res.error) {
+                      alert(res.error);
+                      return;
+                    }
+
+                    router.replace(
+                      `/subjects/${subjectId}/training-plans/${res.data?.id}/sessions`,
+                    );
+                  })
+                }
+                options={availableTrainingPlanTemplates}
+                placeholder="Select a template…"
+                value={null}
+              />
+            </div>
+            <Modal.Close asChild>
+              <Button
+                className="-mb-3 mt-14 w-full justify-center p-0 py-3"
+                variant="link"
+              >
+                Close
+              </Button>
+            </Modal.Close>
+          </Modal.Content>
+        </Modal.Overlay>
+      </Modal.Portal>
+    </Modal.Root>
+  );
+};
 
 export default TrainingPlanUseTemplateModal;
diff --git a/app/_components/training-plans.tsx b/app/_components/training-plans.tsx
index cdafa389..70627454 100644
--- a/app/_components/training-plans.tsx
+++ b/app/_components/training-plans.tsx
@@ -23,7 +23,10 @@ const TrainingPlans = async ({ isTeamMember, subjectId }: MissionsProps) => {
     const activeSessionId = activeSession?.id || '';
 
     acc.push(
-      <li className="flex items-stretch hover:bg-alpha-1" key={mission.id}>
+      <li
+        className="flex items-stretch transition-colors hover:bg-alpha-1"
+        key={mission.id}
+      >
         <Button
           className={twMerge(
             'm-0 w-full min-w-0 gap-4 px-4 py-3 leading-snug',
diff --git a/app/_mutations/create-training-plan-from-template.ts b/app/_mutations/create-training-plan-from-template.ts
new file mode 100644
index 00000000..dafba5bb
--- /dev/null
+++ b/app/_mutations/create-training-plan-from-template.ts
@@ -0,0 +1,60 @@
+'use server';
+
+import TemplateType from '@/_constants/enum-template-type';
+import upsertSession from '@/_mutations/upsert-session';
+import upsertTrainingPlan from '@/_mutations/upsert-training-plan';
+import getTemplate from '@/_queries/get-template';
+import { TrainingPlanTemplateDataJson } from '@/_types/training-plan-template-data-json';
+
+const createTrainingPlanFromTemplate = async ({
+  subjectId,
+  templateId,
+}: {
+  subjectId: string;
+  templateId: string;
+}) => {
+  const getTemplateRes = await getTemplate(templateId);
+  if (getTemplateRes.error) return { error: getTemplateRes.error.message };
+
+  if (getTemplateRes.data.type !== TemplateType.TrainingPlan) {
+    return { error: 'Invalid template' };
+  }
+
+  const upsertTrainingPlanRes = await upsertTrainingPlan(
+    { subjectId },
+    { name: getTemplateRes.data.name },
+  );
+
+  if (upsertTrainingPlanRes.error || !upsertTrainingPlanRes.data?.id) {
+    return { error: upsertTrainingPlanRes.error };
+  }
+
+  const data = getTemplateRes.data.data as TrainingPlanTemplateDataJson;
+
+  await Promise.all(
+    data?.sessions.map((session, i) =>
+      upsertSession(
+        {
+          currentOrder: i,
+          missionId: upsertTrainingPlanRes.data.id,
+          publishedOrder: i,
+          subjectId,
+        },
+        {
+          draft: false,
+          modules: session.modules.map((module) => ({
+            content: module.content ?? '',
+            inputs: module.inputIds?.map((id) => ({ id })) ?? [],
+            name: module.name ?? '',
+          })),
+          scheduledFor: null,
+          title: session.title,
+        },
+      ),
+    ) ?? [],
+  );
+
+  return { data: upsertTrainingPlanRes.data };
+};
+
+export default createTrainingPlanFromTemplate;
diff --git a/app/_mutations/upsert-training-plan-template.ts b/app/_mutations/upsert-training-plan-template.ts
new file mode 100644
index 00000000..6407f325
--- /dev/null
+++ b/app/_mutations/upsert-training-plan-template.ts
@@ -0,0 +1,39 @@
+'use server';
+
+import { TrainingPlanTemplateFormValues } from '@/_components/training-plan-template-form';
+import TemplateType from '@/_constants/enum-template-type';
+import createServerSupabaseClient from '@/_utilities/create-server-supabase-client';
+import { revalidatePath } from 'next/cache';
+
+const upsertTrainingPlanTemplate = async (
+  context: { templateId?: string },
+  data: TrainingPlanTemplateFormValues,
+) => {
+  const supabase = createServerSupabaseClient();
+
+  const { error } = await supabase
+    .from('templates')
+    .upsert({
+      data: {
+        sessions: data.sessions.map((session) => ({
+          modules: session.modules.map((module) => ({
+            content: module.content,
+            inputIds: module.inputs.map((input) => input.id),
+            name: module.name?.trim(),
+          })),
+          title: session.title?.trim(),
+        })),
+      },
+      id: context.templateId,
+      name: data.name.trim(),
+      public: false,
+      type: TemplateType.TrainingPlan,
+    })
+    .select('id')
+    .single();
+
+  if (error) return { error: error.message };
+  revalidatePath('/', 'layout');
+};
+
+export default upsertTrainingPlanTemplate;
diff --git a/app/_queries/get-template.ts b/app/_queries/get-template.ts
index 5ee3a5e0..df80cfdd 100644
--- a/app/_queries/get-template.ts
+++ b/app/_queries/get-template.ts
@@ -3,7 +3,7 @@ import createServerSupabaseClient from '@/_utilities/create-server-supabase-clie
 const getTemplate = (templateId: string) =>
   createServerSupabaseClient()
     .from('templates')
-    .select('data, id, name')
+    .select('data, id, name, type')
     .eq('id', templateId)
     .single();
 
diff --git a/app/_queries/get-training-plan-for-template.ts b/app/_queries/get-training-plan-for-template.ts
new file mode 100644
index 00000000..8e1f891d
--- /dev/null
+++ b/app/_queries/get-training-plan-for-template.ts
@@ -0,0 +1,27 @@
+import createServerSupabaseClient from '@/_utilities/create-server-supabase-client';
+
+const getTrainingPlanForTemplate = (trainingPlanId: string) =>
+  createServerSupabaseClient()
+    .from('missions')
+    .select(
+      `
+      name,
+      sessions(
+        modules:event_types(
+          content,
+          inputs(id),
+          name
+        ),
+        title
+      )`,
+    )
+    .eq('id', trainingPlanId)
+    .order('order', { referencedTable: 'sessions' })
+    .neq('sessions.draft', true)
+    .single();
+
+export type GetTrainingPlanForTemplateData = Awaited<
+  ReturnType<typeof getTrainingPlanForTemplate>
+>['data'];
+
+export default getTrainingPlanForTemplate;
diff --git a/app/_queries/list-templates.ts b/app/_queries/list-templates.ts
index c928fe22..effd9f3e 100644
--- a/app/_queries/list-templates.ts
+++ b/app/_queries/list-templates.ts
@@ -1,13 +1,18 @@
+import TemplateType from '@/_constants/enum-template-type';
 import getCurrentUser from '@/_queries/get-current-user';
 import createServerSupabaseClient from '@/_utilities/create-server-supabase-client';
 
-const listTemplates = async () =>
-  createServerSupabaseClient()
+const listTemplates = async ({ type }: { type?: TemplateType } = {}) => {
+  const q = createServerSupabaseClient()
     .from('templates')
     .select('id, name, type')
-    .eq('team_id', (await getCurrentUser())?.id ?? '')
-    .not('type', 'is', null)
-    .order('name');
+    .eq('team_id', (await getCurrentUser())?.id ?? '');
+
+  if (type) q.eq('type', type);
+  else q.not('type', 'is', null);
+  q.order('name');
+  return q;
+};
 
 export type ListTemplatesData = Awaited<
   ReturnType<typeof listTemplates>
diff --git a/app/_types/training-plan-template-data-json.ts b/app/_types/training-plan-template-data-json.ts
new file mode 100644
index 00000000..7a3f33f9
--- /dev/null
+++ b/app/_types/training-plan-template-data-json.ts
@@ -0,0 +1,10 @@
+export type TrainingPlanTemplateDataJson = {
+  sessions: Array<{
+    modules: Array<{
+      content?: string;
+      inputIds?: string[];
+      name?: string;
+    }>;
+    title?: string;
+  }>;
+} | null;
diff --git a/app/_utilities/get-form-cache-key.ts b/app/_utilities/get-form-cache-key.ts
index 68384c90..4c3de1bd 100644
--- a/app/_utilities/get-form-cache-key.ts
+++ b/app/_utilities/get-form-cache-key.ts
@@ -29,6 +29,11 @@ const getFormCacheKey = {
     isDuplicate,
   }: { id?: string; isDuplicate?: boolean } = {}) =>
     `session-template-${id ?? 'create'}${isDuplicate ? '-duplicate' : ''}`,
+  trainingPlanTemplate: ({
+    id,
+    isDuplicate,
+  }: { id?: string; isDuplicate?: boolean } = {}) =>
+    `training-plan-template-${id ?? 'create'}${isDuplicate ? '-duplicate' : ''}`,
 };
 
 export default getFormCacheKey;