From a6f285576fda4118cd0bfce704a803b7d3f26f6b Mon Sep 17 00:00:00 2001
From: cade <git@cade.me>
Date: Mon, 26 Aug 2024 20:52:01 -0600
Subject: [PATCH] add session templates, various ui/ux improvements

---
 app/(pages)/(with-nav)/inputs/page.tsx        |   4 +-
 .../(with-nav)/notifications/[tab]/page.tsx   |   2 -
 .../(with-nav)/subjects/(list)/page.tsx       |   2 -
 .../(with-nav)/subjects/[subjectId]/page.tsx  |   3 -
 app/(pages)/(with-nav)/templates/layout.tsx   |  30 +-
 app/(pages)/(with-nav)/templates/page.tsx     |   6 +-
 .../(layout)/account/(layout)/[tab]/page.tsx  |   2 -
 .../@modal/(layout)/inputs/[inputId]/page.tsx |   3 -
 .../create/from-input/[inputId]/page.tsx      |   3 -
 .../@modal/(layout)/inputs/create/page.tsx    |   3 -
 .../[subjectId]/events/[eventId]/page.tsx     |   3 -
 .../[subjectId]/insights/[insightId]/page.tsx |   5 -
 .../share/[subjectId]/insights/page.tsx       |   3 -
 .../[missionId]/sessions/[sessionId]/page.tsx |   5 -
 .../[missionId]/sessions/page.tsx             |   3 -
 .../subjects/[subjectId]/edit/page.tsx        |   3 -
 .../event-types/[eventTypeId]/edit/page.tsx   |   8 +-
 .../event-types/[eventTypeId]/page.tsx        |   3 -
 .../[subjectId]/event-types/create/page.tsx   |   8 +-
 .../[subjectId]/events/[eventId]/page.tsx     |   3 -
 .../insights/[insightId]/edit/page.tsx        |   5 -
 .../[subjectId]/insights/[insightId]/page.tsx |   5 -
 .../[subjectId]/insights/create/page.tsx      |   5 -
 .../subjects/[subjectId]/insights/page.tsx    |   3 -
 .../training-plans/[missionId]/edit/page.tsx  |   7 +-
 .../sessions/[sessionId]/edit/page.tsx        |  32 +-
 .../[missionId]/sessions/[sessionId]/page.tsx |   5 -
 .../[order]/from-session/[sessionId]/page.tsx |  32 +-
 .../sessions/create/[order]/page.tsx          |  28 +-
 .../[missionId]/sessions/page.tsx             |   5 -
 .../training-plans/create/page.tsx            |  11 +-
 .../@modal/(layout)/subjects/create/page.tsx  |   3 -
 .../event-types/[templateId]/page.tsx         |   5 +-
 .../from-event-type/[eventTypeId]/page.tsx    |   6 +-
 .../templates/event-types/create/page.tsx     |   5 -
 .../templates/modules/[templateId]/page.tsx   |   5 +-
 .../templates/modules/create/page.tsx         |   5 -
 .../sessions/[templateId]/loading.tsx         |   5 +
 .../templates/sessions/[templateId]/page.tsx  |  46 +++
 .../from-session/[sessionId]/loading.tsx      |   5 +
 .../create/from-session/[sessionId]/page.tsx  |  57 +++
 .../templates/sessions/create/loading.tsx     |   5 +
 .../templates/sessions/create/page.tsx        |  34 ++
 app/(pages)/@modal/(layout)/upgrade/page.tsx  |   3 -
 app/(pages)/share/[subjectId]/page.tsx        |   3 -
 app/_components/account-menu.tsx              |   2 +-
 app/_components/button.tsx                    |   6 +-
 app/_components/calendar.tsx                  |   2 +-
 app/_components/dropdown-menu.tsx             |   2 +-
 app/_components/event-comment.tsx             |  10 +-
 app/_components/event-menu.tsx                |   6 +-
 app/_components/event-type-form.tsx           |  84 +++-
 app/_components/event-type-menu.tsx           | 213 ++--------
 app/_components/event-type-template-form.tsx  |  32 +-
 app/_components/event-types.tsx               |   5 +-
 app/_components/filterable-inputs.tsx         |   5 +-
 app/_components/filterable-templates.tsx      |   5 +-
 app/_components/input-form.tsx                |  21 +-
 app/_components/input-menu.tsx                |   6 +-
 app/_components/input.tsx                     |   9 +-
 app/_components/insight-menu.tsx              |   6 +-
 app/_components/insight.tsx                   |   2 +-
 app/_components/insights-page.tsx             |   2 +-
 app/_components/module-card.tsx               |   2 +-
 app/_components/module-form-section.tsx       |  43 +-
 app/_components/module-template-form.tsx      |  30 +-
 app/_components/notifications.tsx             |   6 +-
 app/_components/popover.tsx                   |   2 +-
 app/_components/select.tsx                    |  14 +-
 app/_components/session-form.tsx              | 383 ++++++++++--------
 app/_components/session-layout.tsx            | 107 -----
 app/_components/session-menu.tsx              | 144 +++----
 app/_components/session-page.tsx              | 153 ++++---
 app/_components/session-template-form.tsx     | 178 ++++++++
 app/_components/sessions-page.tsx             |   2 +-
 .../subject-events-date-filter.tsx            |   2 +-
 app/_components/subject-form.tsx              |  22 +-
 app/_components/subject-list.tsx              |   7 +-
 app/_components/subject-loading.tsx           |   4 +-
 app/_components/subject-menu.tsx              |  18 +-
 app/_components/subject-page.tsx              |  14 +-
 app/_components/switch.tsx                    |   2 +-
 app/_components/template-menu.tsx             |   6 +-
 app/_components/timeline-event-card.tsx       |   2 +-
 app/_components/timeline-session-card.tsx     |   6 +-
 app/_components/tip.tsx                       |   6 +-
 app/_components/training-plan-menu.tsx        |  14 +-
 .../training-plan-use-template-modal.tsx      |  51 +++
 app/_components/training-plans.tsx            |   5 +-
 app/_mutations/upsert-event-type-template.ts  |  34 ++
 ...-template.ts => upsert-module-template.ts} |  12 +-
 app/_mutations/upsert-session-template.ts     |  36 ++
 app/_queries/list-templates-with-data.ts      |   5 +-
 app/_types/event-type-template-data-json.ts   |   4 +
 ...a-json.ts => module-template-data-json.ts} |   2 +-
 app/_types/session-template-data-json.ts      |   7 +
 app/_utilities/format-title.ts                |   8 -
 app/_utilities/get-form-cache-key.ts          |  12 +-
 tailwind.css                                  |   8 +-
 99 files changed, 1162 insertions(+), 1034 deletions(-)
 create mode 100644 app/(pages)/@modal/(layout)/templates/sessions/[templateId]/loading.tsx
 create mode 100644 app/(pages)/@modal/(layout)/templates/sessions/[templateId]/page.tsx
 create mode 100644 app/(pages)/@modal/(layout)/templates/sessions/create/from-session/[sessionId]/loading.tsx
 create mode 100644 app/(pages)/@modal/(layout)/templates/sessions/create/from-session/[sessionId]/page.tsx
 create mode 100644 app/(pages)/@modal/(layout)/templates/sessions/create/loading.tsx
 create mode 100644 app/(pages)/@modal/(layout)/templates/sessions/create/page.tsx
 delete mode 100644 app/_components/session-layout.tsx
 create mode 100644 app/_components/session-template-form.tsx
 create mode 100644 app/_components/training-plan-use-template-modal.tsx
 create mode 100644 app/_mutations/upsert-event-type-template.ts
 rename app/_mutations/{upsert-template.ts => upsert-module-template.ts} (75%)
 create mode 100644 app/_mutations/upsert-session-template.ts
 create mode 100644 app/_types/event-type-template-data-json.ts
 rename app/_types/{template-data-json.ts => module-template-data-json.ts} (57%)
 create mode 100644 app/_types/session-template-data-json.ts
 delete mode 100644 app/_utilities/format-title.ts

diff --git a/app/(pages)/(with-nav)/inputs/page.tsx b/app/(pages)/(with-nav)/inputs/page.tsx
index 43170e89..c5da86ff 100644
--- a/app/(pages)/(with-nav)/inputs/page.tsx
+++ b/app/(pages)/(with-nav)/inputs/page.tsx
@@ -1,11 +1,9 @@
 import Empty from '@/_components/empty';
 import FilterableInputs from '@/_components/filterable-inputs';
 import listInputs from '@/_queries/list-inputs';
-import InformationCircleIcon from '@heroicons/react/24/outline/ExclamationCircleIcon';
+import InformationCircleIcon from '@heroicons/react/24/outline/InformationCircleIcon';
 import { sortBy } from 'lodash';
 
-export const metadata = { title: 'Inputs' };
-
 const Page = async () => {
   const { data: inputs } = await listInputs();
 
diff --git a/app/(pages)/(with-nav)/notifications/[tab]/page.tsx b/app/(pages)/(with-nav)/notifications/[tab]/page.tsx
index 3082a16a..85efddf5 100644
--- a/app/(pages)/(with-nav)/notifications/[tab]/page.tsx
+++ b/app/(pages)/(with-nav)/notifications/[tab]/page.tsx
@@ -7,8 +7,6 @@ interface PageProps {
   };
 }
 
-export const metadata = { title: 'Notifications' };
-
 const Page = async ({ params: { tab } }: PageProps) => {
   if (!['archive', 'inbox'].includes(tab)) return null;
 
diff --git a/app/(pages)/(with-nav)/subjects/(list)/page.tsx b/app/(pages)/(with-nav)/subjects/(list)/page.tsx
index 108552ea..cae87c3a 100644
--- a/app/(pages)/(with-nav)/subjects/(list)/page.tsx
+++ b/app/(pages)/(with-nav)/subjects/(list)/page.tsx
@@ -8,8 +8,6 @@ import listSubjects, { ListSubjectsData } from '@/_queries/list-subjects';
 import InformationCircleIcon from '@heroicons/react/24/outline/InformationCircleIcon';
 import PlusIcon from '@heroicons/react/24/outline/PlusIcon';
 
-export const metadata = { title: 'Subjects' };
-
 const Page = async () => {
   const [{ data: subjects }, user] = await Promise.all([
     listSubjects(),
diff --git a/app/(pages)/(with-nav)/subjects/[subjectId]/page.tsx b/app/(pages)/(with-nav)/subjects/[subjectId]/page.tsx
index b4b0888a..763a5b03 100644
--- a/app/(pages)/(with-nav)/subjects/[subjectId]/page.tsx
+++ b/app/(pages)/(with-nav)/subjects/[subjectId]/page.tsx
@@ -1,13 +1,10 @@
 import SubjectPage from '@/_components/subject-page';
-import formatTitle from '@/_utilities/format-title';
 
 interface PageProps {
   params: { subjectId: string };
   searchParams: { from?: string; limit?: string; to?: string };
 }
 
-export const metadata = { title: formatTitle(['Subjects', 'Events']) };
-
 const Page = ({
   params: { subjectId },
   searchParams: { from, limit, to },
diff --git a/app/(pages)/(with-nav)/templates/layout.tsx b/app/(pages)/(with-nav)/templates/layout.tsx
index bbeaea68..74e37768 100644
--- a/app/(pages)/(with-nav)/templates/layout.tsx
+++ b/app/(pages)/(with-nav)/templates/layout.tsx
@@ -16,26 +16,34 @@ const Layout = ({ children }: LayoutProps) => (
         <DropdownMenu.Trigger>
           <Button size="sm">
             New&hellip;
-            <ChevronDownIcon className="-mr-0.5 w-5 stroke-2" />
+            <ChevronDownIcon className="-mr-1 w-5 stroke-2" />
           </Button>
         </DropdownMenu.Trigger>
         <DropdownMenu.Portal>
           <DropdownMenu.Content>
             <DropdownMenu.Button href="/templates/event-types/create">
               <PlusIcon className="w-5 text-fg-4" />
-              Event type template
+              <div>
+                Event type <span className="text-fg-4">template</span>
+              </div>
+            </DropdownMenu.Button>
+            <DropdownMenu.Button href="/templates/training-plans/create">
+              <PlusIcon className="w-5 text-fg-4" />
+              <div>
+                Training plan <span className="text-fg-4">template</span>
+              </div>
+            </DropdownMenu.Button>
+            <DropdownMenu.Button href="/templates/sessions/create">
+              <PlusIcon className="w-5 text-fg-4" />
+              <div>
+                Session <span className="text-fg-4">template</span>
+              </div>
             </DropdownMenu.Button>
-            {/*<DropdownMenu.Button>*/}
-            {/*  <PlusIcon className="w-5 text-fg-4" />*/}
-            {/*  Training plan template*/}
-            {/*</DropdownMenu.Button>*/}
-            {/*<DropdownMenu.Button>*/}
-            {/*  <PlusIcon className="w-5 text-fg-4" />*/}
-            {/*  Session template*/}
-            {/*</DropdownMenu.Button>*/}
             <DropdownMenu.Button href="/templates/modules/create">
               <PlusIcon className="w-5 text-fg-4" />
-              Module template
+              <div>
+                Module <span className="text-fg-4">template</span>
+              </div>
             </DropdownMenu.Button>
           </DropdownMenu.Content>
         </DropdownMenu.Portal>
diff --git a/app/(pages)/(with-nav)/templates/page.tsx b/app/(pages)/(with-nav)/templates/page.tsx
index 07bf14d7..3c560dd8 100644
--- a/app/(pages)/(with-nav)/templates/page.tsx
+++ b/app/(pages)/(with-nav)/templates/page.tsx
@@ -1,9 +1,7 @@
 import Empty from '@/_components/empty';
 import FilterableTemplates from '@/_components/filterable-templates';
 import listTemplates from '@/_queries/list-templates';
-import InformationCircleIcon from '@heroicons/react/24/outline/ExclamationCircleIcon';
-
-export const metadata = { title: 'Templates' };
+import InformationCircleIcon from '@heroicons/react/24/outline/InformationCircleIcon';
 
 const Page = async () => {
   const { data: templates } = await listTemplates();
@@ -14,7 +12,7 @@ const Page = async () => {
         <InformationCircleIcon className="w-7" />
         Templates define reusable content for
         <br />
-        event types and session modules.
+        event types and training plans.
       </Empty>
     );
   }
diff --git a/app/(pages)/@modal/(layout)/account/(layout)/[tab]/page.tsx b/app/(pages)/@modal/(layout)/account/(layout)/[tab]/page.tsx
index b7ec7024..557bcc65 100644
--- a/app/(pages)/@modal/(layout)/account/(layout)/[tab]/page.tsx
+++ b/app/(pages)/@modal/(layout)/account/(layout)/[tab]/page.tsx
@@ -9,8 +9,6 @@ interface PageProps {
   };
 }
 
-export const metadata = { title: 'Account' };
-
 const Page = async ({ params: { tab } }: PageProps) => {
   const user = await getCurrentUser();
   if (!user || !['email', 'password', 'profile'].includes(tab)) return null;
diff --git a/app/(pages)/@modal/(layout)/inputs/[inputId]/page.tsx b/app/(pages)/@modal/(layout)/inputs/[inputId]/page.tsx
index 9d6e3a78..58084191 100644
--- a/app/(pages)/@modal/(layout)/inputs/[inputId]/page.tsx
+++ b/app/(pages)/@modal/(layout)/inputs/[inputId]/page.tsx
@@ -3,7 +3,6 @@ import * as Modal from '@/_components/modal';
 import PageModalHeader from '@/_components/page-modal-header';
 import getInput from '@/_queries/get-input';
 import listSubjectsByTeamId from '@/_queries/list-subjects-by-team-id';
-import formatTitle from '@/_utilities/format-title';
 
 interface PageProps {
   params: {
@@ -11,8 +10,6 @@ interface PageProps {
   };
 }
 
-export const metadata = { title: formatTitle(['Inputs', 'Edit']) };
-
 const Page = async ({ params: { inputId } }: PageProps) => {
   const [{ data: input }, { data: subjects }] = await Promise.all([
     getInput(inputId),
diff --git a/app/(pages)/@modal/(layout)/inputs/create/from-input/[inputId]/page.tsx b/app/(pages)/@modal/(layout)/inputs/create/from-input/[inputId]/page.tsx
index e35d5d56..3a870873 100644
--- a/app/(pages)/@modal/(layout)/inputs/create/from-input/[inputId]/page.tsx
+++ b/app/(pages)/@modal/(layout)/inputs/create/from-input/[inputId]/page.tsx
@@ -3,7 +3,6 @@ import * as Modal from '@/_components/modal';
 import PageModalHeader from '@/_components/page-modal-header';
 import getInput from '@/_queries/get-input';
 import listSubjectsByTeamId from '@/_queries/list-subjects-by-team-id';
-import formatTitle from '@/_utilities/format-title';
 
 interface PageProps {
   params: {
@@ -11,8 +10,6 @@ interface PageProps {
   };
 }
 
-export const metadata = { title: formatTitle(['Inputs', 'New']) };
-
 const Page = async ({ params: { inputId } }: PageProps) => {
   const [{ data: subjects }, { data: input }] = await Promise.all([
     listSubjectsByTeamId(),
diff --git a/app/(pages)/@modal/(layout)/inputs/create/page.tsx b/app/(pages)/@modal/(layout)/inputs/create/page.tsx
index 65591f90..e7f0f7fe 100644
--- a/app/(pages)/@modal/(layout)/inputs/create/page.tsx
+++ b/app/(pages)/@modal/(layout)/inputs/create/page.tsx
@@ -2,9 +2,6 @@ import InputForm from '@/_components/input-form';
 import * as Modal from '@/_components/modal';
 import PageModalHeader from '@/_components/page-modal-header';
 import listSubjectsByTeamId from '@/_queries/list-subjects-by-team-id';
-import formatTitle from '@/_utilities/format-title';
-
-export const metadata = { title: formatTitle(['Inputs', 'New']) };
 
 const Page = async () => {
   const { data: subjects } = await listSubjectsByTeamId();
diff --git a/app/(pages)/@modal/(layout)/share/[subjectId]/events/[eventId]/page.tsx b/app/(pages)/@modal/(layout)/share/[subjectId]/events/[eventId]/page.tsx
index fc01d917..a846cdfc 100644
--- a/app/(pages)/@modal/(layout)/share/[subjectId]/events/[eventId]/page.tsx
+++ b/app/(pages)/@modal/(layout)/share/[subjectId]/events/[eventId]/page.tsx
@@ -1,5 +1,4 @@
 import EventPage from '@/_components/event-page';
-import formatTitle from '@/_utilities/format-title';
 
 interface PageProps {
   params: {
@@ -8,8 +7,6 @@ interface PageProps {
   };
 }
 
-export const metadata = { title: formatTitle(['Subjects', 'Event']) };
-
 const Page = async ({ params: { eventId, subjectId } }: PageProps) => (
   <EventPage eventId={eventId} subjectId={subjectId} isPublic={true} />
 );
diff --git a/app/(pages)/@modal/(layout)/share/[subjectId]/insights/[insightId]/page.tsx b/app/(pages)/@modal/(layout)/share/[subjectId]/insights/[insightId]/page.tsx
index 77d24dcc..458258d8 100644
--- a/app/(pages)/@modal/(layout)/share/[subjectId]/insights/[insightId]/page.tsx
+++ b/app/(pages)/@modal/(layout)/share/[subjectId]/insights/[insightId]/page.tsx
@@ -1,15 +1,10 @@
 import InsightPage from '@/_components/insight-page';
-import formatTitle from '@/_utilities/format-title';
 
 interface PageProps {
   params: { insightId: string; subjectId: string };
   searchParams: { from?: string; to?: string };
 }
 
-export const metadata = {
-  title: formatTitle(['Subjects', 'Insight']),
-};
-
 const Page = async ({
   params: { insightId, subjectId },
   searchParams: { from, to },
diff --git a/app/(pages)/@modal/(layout)/share/[subjectId]/insights/page.tsx b/app/(pages)/@modal/(layout)/share/[subjectId]/insights/page.tsx
index 4426ac96..eb4b5fbd 100644
--- a/app/(pages)/@modal/(layout)/share/[subjectId]/insights/page.tsx
+++ b/app/(pages)/@modal/(layout)/share/[subjectId]/insights/page.tsx
@@ -1,13 +1,10 @@
 import InsightsPage from '@/_components/insights-page';
-import formatTitle from '@/_utilities/format-title';
 
 interface PageProps {
   params: { subjectId: string };
   searchParams: { foo?: string; from?: string; to?: string };
 }
 
-export const metadata = { title: formatTitle(['Subjects', 'Insights']) };
-
 const Page = async ({ params: { subjectId }, searchParams }: PageProps) => (
   <InsightsPage isPublic searchParams={searchParams} subjectId={subjectId} />
 );
diff --git a/app/(pages)/@modal/(layout)/share/[subjectId]/training-plans/[missionId]/sessions/[sessionId]/page.tsx b/app/(pages)/@modal/(layout)/share/[subjectId]/training-plans/[missionId]/sessions/[sessionId]/page.tsx
index faac828f..be893f1c 100644
--- a/app/(pages)/@modal/(layout)/share/[subjectId]/training-plans/[missionId]/sessions/[sessionId]/page.tsx
+++ b/app/(pages)/@modal/(layout)/share/[subjectId]/training-plans/[missionId]/sessions/[sessionId]/page.tsx
@@ -1,5 +1,4 @@
 import SessionPage from '@/_components/session-page';
-import formatTitle from '@/_utilities/format-title';
 
 interface PageProps {
   params: {
@@ -9,10 +8,6 @@ interface PageProps {
   };
 }
 
-export const metadata = {
-  title: formatTitle(['Subjects', 'Training plans', 'Sessions']),
-};
-
 const Page = async ({
   params: { missionId, sessionId, subjectId },
 }: PageProps) => (
diff --git a/app/(pages)/@modal/(layout)/share/[subjectId]/training-plans/[missionId]/sessions/page.tsx b/app/(pages)/@modal/(layout)/share/[subjectId]/training-plans/[missionId]/sessions/page.tsx
index 1732723a..2923580b 100644
--- a/app/(pages)/@modal/(layout)/share/[subjectId]/training-plans/[missionId]/sessions/page.tsx
+++ b/app/(pages)/@modal/(layout)/share/[subjectId]/training-plans/[missionId]/sessions/page.tsx
@@ -1,5 +1,4 @@
 import SessionsPage from '@/_components/sessions-page';
-import formatTitle from '@/_utilities/format-title';
 
 interface PageProps {
   params: {
@@ -8,8 +7,6 @@ interface PageProps {
   };
 }
 
-export const metadata = { title: formatTitle(['Subjects', 'Training plans']) };
-
 const Page = ({ params: { missionId, subjectId } }: PageProps) => (
   <SessionsPage isPublic missionId={missionId} subjectId={subjectId} />
 );
diff --git a/app/(pages)/@modal/(layout)/subjects/[subjectId]/edit/page.tsx b/app/(pages)/@modal/(layout)/subjects/[subjectId]/edit/page.tsx
index cf5ec70b..e051a2ea 100644
--- a/app/(pages)/@modal/(layout)/subjects/[subjectId]/edit/page.tsx
+++ b/app/(pages)/@modal/(layout)/subjects/[subjectId]/edit/page.tsx
@@ -2,7 +2,6 @@ import * as Modal from '@/_components/modal';
 import PageModalHeader from '@/_components/page-modal-header';
 import SubjectForm from '@/_components/subject-form';
 import getSubject from '@/_queries/get-subject';
-import formatTitle from '@/_utilities/format-title';
 
 interface PageProps {
   params: {
@@ -10,8 +9,6 @@ interface PageProps {
   };
 }
 
-export const metadata = { title: formatTitle(['Subjects', 'Edit']) };
-
 const Page = async ({ params: { subjectId } }: PageProps) => {
   const { data: subject } = await getSubject(subjectId);
   if (!subject) return null;
diff --git a/app/(pages)/@modal/(layout)/subjects/[subjectId]/event-types/[eventTypeId]/edit/page.tsx b/app/(pages)/@modal/(layout)/subjects/[subjectId]/event-types/[eventTypeId]/edit/page.tsx
index a3b79d73..a1bb1bfc 100644
--- a/app/(pages)/@modal/(layout)/subjects/[subjectId]/event-types/[eventTypeId]/edit/page.tsx
+++ b/app/(pages)/@modal/(layout)/subjects/[subjectId]/event-types/[eventTypeId]/edit/page.tsx
@@ -1,10 +1,10 @@
 import EventTypeForm from '@/_components/event-type-form';
+import TemplateType from '@/_constants/enum-template-type';
 import getEventTypeWithInputs from '@/_queries/get-event-type-with-inputs';
 import getSubject from '@/_queries/get-subject';
 import listInputsBySubjectId from '@/_queries/list-inputs-by-subject-id';
 import listSubjectsByTeamId from '@/_queries/list-subjects-by-team-id';
 import listTemplatesWithData from '@/_queries/list-templates-with-data';
-import formatTitle from '@/_utilities/format-title';
 
 interface PageProps {
   params: {
@@ -13,10 +13,6 @@ interface PageProps {
   };
 }
 
-export const metadata = {
-  title: formatTitle(['Subjects', 'Event types', 'Edit']),
-};
-
 const Page = async ({ params: { eventTypeId, subjectId } }: PageProps) => {
   const [
     { data: subject },
@@ -29,7 +25,7 @@ const Page = async ({ params: { eventTypeId, subjectId } }: PageProps) => {
     getEventTypeWithInputs(eventTypeId),
     listInputsBySubjectId(subjectId),
     listSubjectsByTeamId(),
-    listTemplatesWithData(),
+    listTemplatesWithData({ type: TemplateType.EventType }),
   ]);
 
   if (
diff --git a/app/(pages)/@modal/(layout)/subjects/[subjectId]/event-types/[eventTypeId]/page.tsx b/app/(pages)/@modal/(layout)/subjects/[subjectId]/event-types/[eventTypeId]/page.tsx
index 9779f91f..ecf0aa98 100644
--- a/app/(pages)/@modal/(layout)/subjects/[subjectId]/event-types/[eventTypeId]/page.tsx
+++ b/app/(pages)/@modal/(layout)/subjects/[subjectId]/event-types/[eventTypeId]/page.tsx
@@ -5,7 +5,6 @@ import PageModalHeader from '@/_components/page-modal-header';
 import getCurrentUser from '@/_queries/get-current-user';
 import getEventTypeWithInputsAndOptions from '@/_queries/get-event-type-with-inputs-and-options';
 import getSubject from '@/_queries/get-subject';
-import formatTitle from '@/_utilities/format-title';
 
 interface PageProps {
   params: {
@@ -14,8 +13,6 @@ interface PageProps {
   };
 }
 
-export const metadata = { title: formatTitle(['Subjects', 'Event']) };
-
 const Page = async ({ params: { eventTypeId, subjectId } }: PageProps) => {
   const [{ data: subject }, { data: eventType }, user] = await Promise.all([
     getSubject(subjectId),
diff --git a/app/(pages)/@modal/(layout)/subjects/[subjectId]/event-types/create/page.tsx b/app/(pages)/@modal/(layout)/subjects/[subjectId]/event-types/create/page.tsx
index 2ee1bc8a..33d10e12 100644
--- a/app/(pages)/@modal/(layout)/subjects/[subjectId]/event-types/create/page.tsx
+++ b/app/(pages)/@modal/(layout)/subjects/[subjectId]/event-types/create/page.tsx
@@ -1,9 +1,9 @@
 import EventTypeForm from '@/_components/event-type-form';
+import TemplateType from '@/_constants/enum-template-type';
 import getSubject from '@/_queries/get-subject';
 import listInputsBySubjectId from '@/_queries/list-inputs-by-subject-id';
 import listSubjectsByTeamId from '@/_queries/list-subjects-by-team-id';
 import listTemplatesWithData from '@/_queries/list-templates-with-data';
-import formatTitle from '@/_utilities/format-title';
 
 interface PageProps {
   params: {
@@ -11,10 +11,6 @@ interface PageProps {
   };
 }
 
-export const metadata = {
-  title: formatTitle(['Subjects', 'Event types', 'New']),
-};
-
 const Page = async ({ params: { subjectId } }: PageProps) => {
   const [
     { data: subject },
@@ -25,7 +21,7 @@ const Page = async ({ params: { subjectId } }: PageProps) => {
     getSubject(subjectId),
     listInputsBySubjectId(subjectId),
     listSubjectsByTeamId(),
-    listTemplatesWithData(),
+    listTemplatesWithData({ type: TemplateType.EventType }),
   ]);
 
   if (!subject || !availableInputs || !subjects || !availableTemplates) {
diff --git a/app/(pages)/@modal/(layout)/subjects/[subjectId]/events/[eventId]/page.tsx b/app/(pages)/@modal/(layout)/subjects/[subjectId]/events/[eventId]/page.tsx
index 7062b4c5..d638bdf5 100644
--- a/app/(pages)/@modal/(layout)/subjects/[subjectId]/events/[eventId]/page.tsx
+++ b/app/(pages)/@modal/(layout)/subjects/[subjectId]/events/[eventId]/page.tsx
@@ -1,5 +1,4 @@
 import EventPage from '@/_components/event-page';
-import formatTitle from '@/_utilities/format-title';
 
 interface PageProps {
   params: {
@@ -8,8 +7,6 @@ interface PageProps {
   };
 }
 
-export const metadata = { title: formatTitle(['Subjects', 'Event']) };
-
 const Page = async ({ params: { eventId, subjectId } }: PageProps) => (
   <EventPage eventId={eventId} subjectId={subjectId} />
 );
diff --git a/app/(pages)/@modal/(layout)/subjects/[subjectId]/insights/[insightId]/edit/page.tsx b/app/(pages)/@modal/(layout)/subjects/[subjectId]/insights/[insightId]/edit/page.tsx
index 542e5c47..72cf0402 100644
--- a/app/(pages)/@modal/(layout)/subjects/[subjectId]/insights/[insightId]/edit/page.tsx
+++ b/app/(pages)/@modal/(layout)/subjects/[subjectId]/insights/[insightId]/edit/page.tsx
@@ -4,7 +4,6 @@ import PageModalHeader from '@/_components/page-modal-header';
 import Number from '@/_constants/enum-number';
 import getInsight from '@/_queries/get-insight';
 import listEvents from '@/_queries/list-events';
-import formatTitle from '@/_utilities/format-title';
 
 interface PageProps {
   params: {
@@ -13,10 +12,6 @@ interface PageProps {
   };
 }
 
-export const metadata = {
-  title: formatTitle(['Subjects', 'Insights', 'Edit']),
-};
-
 const Page = async ({ params: { insightId, subjectId } }: PageProps) => {
   const [{ data: events }, { data: insight }] = await Promise.all([
     listEvents(subjectId, { from: 0, to: Number.FourByteSignedIntMax - 1 }),
diff --git a/app/(pages)/@modal/(layout)/subjects/[subjectId]/insights/[insightId]/page.tsx b/app/(pages)/@modal/(layout)/subjects/[subjectId]/insights/[insightId]/page.tsx
index 951a76e9..9e419d60 100644
--- a/app/(pages)/@modal/(layout)/subjects/[subjectId]/insights/[insightId]/page.tsx
+++ b/app/(pages)/@modal/(layout)/subjects/[subjectId]/insights/[insightId]/page.tsx
@@ -1,15 +1,10 @@
 import InsightPage from '@/_components/insight-page';
-import formatTitle from '@/_utilities/format-title';
 
 interface PageProps {
   params: { insightId: string; subjectId: string };
   searchParams: { from?: string; to?: string };
 }
 
-export const metadata = {
-  title: formatTitle(['Subjects', 'Insight']),
-};
-
 const Page = async ({
   params: { insightId, subjectId },
   searchParams: { from, to },
diff --git a/app/(pages)/@modal/(layout)/subjects/[subjectId]/insights/create/page.tsx b/app/(pages)/@modal/(layout)/subjects/[subjectId]/insights/create/page.tsx
index dcca540b..fcc19112 100644
--- a/app/(pages)/@modal/(layout)/subjects/[subjectId]/insights/create/page.tsx
+++ b/app/(pages)/@modal/(layout)/subjects/[subjectId]/insights/create/page.tsx
@@ -3,7 +3,6 @@ import * as Modal from '@/_components/modal';
 import PageModalHeader from '@/_components/page-modal-header';
 import Number from '@/_constants/enum-number';
 import listEvents from '@/_queries/list-events';
-import formatTitle from '@/_utilities/format-title';
 
 interface PageProps {
   params: {
@@ -11,10 +10,6 @@ interface PageProps {
   };
 }
 
-export const metadata = {
-  title: formatTitle(['Subjects', 'Insights', 'New']),
-};
-
 const Page = async ({ params: { subjectId } }: PageProps) => {
   const { data: events } = await listEvents(subjectId, {
     from: 0,
diff --git a/app/(pages)/@modal/(layout)/subjects/[subjectId]/insights/page.tsx b/app/(pages)/@modal/(layout)/subjects/[subjectId]/insights/page.tsx
index cc13bf92..ae3963f4 100644
--- a/app/(pages)/@modal/(layout)/subjects/[subjectId]/insights/page.tsx
+++ b/app/(pages)/@modal/(layout)/subjects/[subjectId]/insights/page.tsx
@@ -1,13 +1,10 @@
 import InsightsPage from '@/_components/insights-page';
-import formatTitle from '@/_utilities/format-title';
 
 interface PageProps {
   params: { subjectId: string };
   searchParams: { from?: string; to?: string };
 }
 
-export const metadata = { title: formatTitle(['Subjects', 'Insights']) };
-
 const Page = async ({ params: { subjectId }, searchParams }: PageProps) => (
   <InsightsPage searchParams={searchParams} subjectId={subjectId} />
 );
diff --git a/app/(pages)/@modal/(layout)/subjects/[subjectId]/training-plans/[missionId]/edit/page.tsx b/app/(pages)/@modal/(layout)/subjects/[subjectId]/training-plans/[missionId]/edit/page.tsx
index b64824d8..1fa671e0 100644
--- a/app/(pages)/@modal/(layout)/subjects/[subjectId]/training-plans/[missionId]/edit/page.tsx
+++ b/app/(pages)/@modal/(layout)/subjects/[subjectId]/training-plans/[missionId]/edit/page.tsx
@@ -3,7 +3,6 @@ import PageModalHeader from '@/_components/page-modal-header';
 import TrainingPlanForm from '@/_components/training-plan-form';
 import getSubject from '@/_queries/get-subject';
 import getTrainingPlan from '@/_queries/get-training-plan';
-import formatTitle from '@/_utilities/format-title';
 
 interface PageProps {
   params: {
@@ -12,10 +11,6 @@ interface PageProps {
   };
 }
 
-export const metadata = {
-  title: formatTitle(['Subjects', 'Training plans', 'Edit']),
-};
-
 const Page = async ({ params: { missionId, subjectId } }: PageProps) => {
   const [{ data: subject }, { data: mission }] = await Promise.all([
     getSubject(subjectId),
@@ -26,7 +21,7 @@ const Page = async ({ params: { missionId, subjectId } }: PageProps) => {
 
   return (
     <Modal.Content>
-      <PageModalHeader title={mission.name} />
+      <PageModalHeader title="Edit training plan name" />
       <TrainingPlanForm mission={mission} subjectId={subjectId} />
     </Modal.Content>
   );
diff --git a/app/(pages)/@modal/(layout)/subjects/[subjectId]/training-plans/[missionId]/sessions/[sessionId]/edit/page.tsx b/app/(pages)/@modal/(layout)/subjects/[subjectId]/training-plans/[missionId]/sessions/[sessionId]/edit/page.tsx
index 9f0504dd..4c818845 100644
--- a/app/(pages)/@modal/(layout)/subjects/[subjectId]/training-plans/[missionId]/sessions/[sessionId]/edit/page.tsx
+++ b/app/(pages)/@modal/(layout)/subjects/[subjectId]/training-plans/[missionId]/sessions/[sessionId]/edit/page.tsx
@@ -1,4 +1,5 @@
 import SessionForm from '@/_components/session-form';
+import TemplateType from '@/_constants/enum-template-type';
 import getCurrentUser from '@/_queries/get-current-user';
 import getSession from '@/_queries/get-session';
 import getSubject from '@/_queries/get-subject';
@@ -6,7 +7,6 @@ import getTrainingPlanWithSessions from '@/_queries/get-training-plan-with-sessi
 import listInputsBySubjectId from '@/_queries/list-inputs-by-subject-id';
 import listSubjectsByTeamId from '@/_queries/list-subjects-by-team-id';
 import listTemplatesWithData from '@/_queries/list-templates-with-data';
-import formatTitle from '@/_utilities/format-title';
 
 interface PageProps {
   params: {
@@ -17,37 +17,36 @@ interface PageProps {
   };
 }
 
-export const metadata = {
-  title: formatTitle(['Subjects', 'Training plans', 'Sessions', 'Edit']),
-};
-
 const Page = async ({
   params: { missionId, sessionId, subjectId },
 }: PageProps) => {
   const [
-    { data: subject },
+    { data: availableInputs },
+    { data: availableModuleTemplates },
+    { data: availableSessionTemplates },
     { data: mission },
     { data: session },
-    { data: availableInputs },
-    { data: availableTemplates },
+    { data: subject },
     { data: subjects },
     user,
   ] = await Promise.all([
-    getSubject(subjectId),
+    listInputsBySubjectId(subjectId),
+    listTemplatesWithData({ type: TemplateType.Module }),
+    listTemplatesWithData({ type: TemplateType.Session }),
     getTrainingPlanWithSessions(missionId, { draft: true }),
     getSession(sessionId),
-    listInputsBySubjectId(subjectId),
-    listTemplatesWithData(),
+    getSubject(subjectId),
     listSubjectsByTeamId(),
     getCurrentUser(),
   ]);
 
   if (
-    !subject ||
+    !availableInputs ||
+    !availableModuleTemplates ||
+    !availableSessionTemplates ||
     !mission ||
     !session ||
-    !availableInputs ||
-    !availableTemplates ||
+    !subject ||
     !subjects ||
     !user ||
     subject.team_id !== user.id
@@ -58,11 +57,12 @@ const Page = async ({
   return (
     <SessionForm
       availableInputs={availableInputs}
-      availableTemplates={availableTemplates}
+      availableModuleTemplates={availableModuleTemplates}
+      availableSessionTemplates={availableSessionTemplates}
       mission={mission}
       session={session}
-      subjects={subjects}
       subjectId={subjectId}
+      subjects={subjects}
     />
   );
 };
diff --git a/app/(pages)/@modal/(layout)/subjects/[subjectId]/training-plans/[missionId]/sessions/[sessionId]/page.tsx b/app/(pages)/@modal/(layout)/subjects/[subjectId]/training-plans/[missionId]/sessions/[sessionId]/page.tsx
index c30708f7..f4aeb707 100644
--- a/app/(pages)/@modal/(layout)/subjects/[subjectId]/training-plans/[missionId]/sessions/[sessionId]/page.tsx
+++ b/app/(pages)/@modal/(layout)/subjects/[subjectId]/training-plans/[missionId]/sessions/[sessionId]/page.tsx
@@ -1,5 +1,4 @@
 import SessionPage from '@/_components/session-page';
-import formatTitle from '@/_utilities/format-title';
 
 interface PageProps {
   params: {
@@ -9,10 +8,6 @@ interface PageProps {
   };
 }
 
-export const metadata = {
-  title: formatTitle(['Subjects', 'Training plans', 'Sessions']),
-};
-
 const Page = async ({
   params: { missionId, sessionId, subjectId },
 }: PageProps) => (
diff --git a/app/(pages)/@modal/(layout)/subjects/[subjectId]/training-plans/[missionId]/sessions/create/[order]/from-session/[sessionId]/page.tsx b/app/(pages)/@modal/(layout)/subjects/[subjectId]/training-plans/[missionId]/sessions/create/[order]/from-session/[sessionId]/page.tsx
index 3cfff7b1..ebd452c0 100644
--- a/app/(pages)/@modal/(layout)/subjects/[subjectId]/training-plans/[missionId]/sessions/create/[order]/from-session/[sessionId]/page.tsx
+++ b/app/(pages)/@modal/(layout)/subjects/[subjectId]/training-plans/[missionId]/sessions/create/[order]/from-session/[sessionId]/page.tsx
@@ -1,4 +1,5 @@
 import SessionForm from '@/_components/session-form';
+import TemplateType from '@/_constants/enum-template-type';
 import getCurrentUser from '@/_queries/get-current-user';
 import getSession from '@/_queries/get-session';
 import getSubject from '@/_queries/get-subject';
@@ -6,7 +7,6 @@ import getTrainingPlanWithSessions from '@/_queries/get-training-plan-with-sessi
 import listInputsBySubjectId from '@/_queries/list-inputs-by-subject-id';
 import listSubjectsByTeamId from '@/_queries/list-subjects-by-team-id';
 import listTemplatesWithData from '@/_queries/list-templates-with-data';
-import formatTitle from '@/_utilities/format-title';
 
 interface PageProps {
   params: {
@@ -17,37 +17,36 @@ interface PageProps {
   };
 }
 
-export const metadata = {
-  title: formatTitle(['Subjects', 'Training plans', 'Sessions', 'New']),
-};
-
 const Page = async ({
   params: { missionId, order, sessionId, subjectId },
 }: PageProps) => {
   const [
-    { data: subject },
+    { data: availableInputs },
+    { data: availableModuleTemplates },
+    { data: availableSessionTemplates },
     { data: mission },
     { data: session },
-    { data: availableInputs },
-    { data: availableTemplates },
+    { data: subject },
     { data: subjects },
     user,
   ] = await Promise.all([
-    getSubject(subjectId),
+    listInputsBySubjectId(subjectId),
+    listTemplatesWithData({ type: TemplateType.Module }),
+    listTemplatesWithData({ type: TemplateType.Session }),
     getTrainingPlanWithSessions(missionId, { draft: true }),
     getSession(sessionId),
-    listInputsBySubjectId(subjectId),
-    listTemplatesWithData(),
+    getSubject(subjectId),
     listSubjectsByTeamId(),
     getCurrentUser(),
   ]);
 
   if (
-    !subject ||
+    !availableInputs ||
+    !availableModuleTemplates ||
+    !availableSessionTemplates ||
     !mission ||
     !session ||
-    !availableInputs ||
-    !availableTemplates ||
+    !subject ||
     !subjects ||
     !user ||
     subject.team_id !== user.id
@@ -58,13 +57,14 @@ const Page = async ({
   return (
     <SessionForm
       availableInputs={availableInputs}
-      availableTemplates={availableTemplates}
+      availableModuleTemplates={availableModuleTemplates}
+      availableSessionTemplates={availableSessionTemplates}
       isDuplicate
       mission={mission}
       order={order}
       session={session}
-      subjects={subjects}
       subjectId={subjectId}
+      subjects={subjects}
     />
   );
 };
diff --git a/app/(pages)/@modal/(layout)/subjects/[subjectId]/training-plans/[missionId]/sessions/create/[order]/page.tsx b/app/(pages)/@modal/(layout)/subjects/[subjectId]/training-plans/[missionId]/sessions/create/[order]/page.tsx
index 11924540..01a3b965 100644
--- a/app/(pages)/@modal/(layout)/subjects/[subjectId]/training-plans/[missionId]/sessions/create/[order]/page.tsx
+++ b/app/(pages)/@modal/(layout)/subjects/[subjectId]/training-plans/[missionId]/sessions/create/[order]/page.tsx
@@ -1,11 +1,11 @@
 import SessionForm from '@/_components/session-form';
+import TemplateType from '@/_constants/enum-template-type';
 import getCurrentUser from '@/_queries/get-current-user';
 import getSubject from '@/_queries/get-subject';
 import getTrainingPlanWithSessions from '@/_queries/get-training-plan-with-sessions';
 import listInputsBySubjectId from '@/_queries/list-inputs-by-subject-id';
 import listSubjectsByTeamId from '@/_queries/list-subjects-by-team-id';
 import listTemplatesWithData from '@/_queries/list-templates-with-data';
-import formatTitle from '@/_utilities/format-title';
 
 interface PageProps {
   params: {
@@ -15,24 +15,22 @@ interface PageProps {
   };
 }
 
-export const metadata = {
-  title: formatTitle(['Subjects', 'Training plans', 'Sessions', 'New']),
-};
-
 const Page = async ({ params: { missionId, order, subjectId } }: PageProps) => {
   const [
-    { data: subject },
+    { data: availableInputs },
+    { data: availableModuleTemplates },
+    { data: availableSessionTemplates },
     { data: mission },
+    { data: subject },
     { data: subjects },
-    { data: availableInputs },
-    { data: availableTemplates },
     user,
   ] = await Promise.all([
-    getSubject(subjectId),
+    listInputsBySubjectId(subjectId),
+    listTemplatesWithData({ type: TemplateType.Module }),
+    listTemplatesWithData({ type: TemplateType.Session }),
     getTrainingPlanWithSessions(missionId, { draft: true }),
+    getSubject(subjectId),
     listSubjectsByTeamId(),
-    listInputsBySubjectId(subjectId),
-    listTemplatesWithData(),
     getCurrentUser(),
   ]);
 
@@ -41,7 +39,8 @@ const Page = async ({ params: { missionId, order, subjectId } }: PageProps) => {
     !mission ||
     !subjects ||
     !availableInputs ||
-    !availableTemplates ||
+    !availableModuleTemplates ||
+    !availableSessionTemplates ||
     !user ||
     subject.team_id !== user.id
   ) {
@@ -51,11 +50,12 @@ const Page = async ({ params: { missionId, order, subjectId } }: PageProps) => {
   return (
     <SessionForm
       availableInputs={availableInputs}
-      availableTemplates={availableTemplates}
+      availableModuleTemplates={availableModuleTemplates}
+      availableSessionTemplates={availableSessionTemplates}
       mission={mission}
       order={order}
-      subjects={subjects}
       subjectId={subjectId}
+      subjects={subjects}
     />
   );
 };
diff --git a/app/(pages)/@modal/(layout)/subjects/[subjectId]/training-plans/[missionId]/sessions/page.tsx b/app/(pages)/@modal/(layout)/subjects/[subjectId]/training-plans/[missionId]/sessions/page.tsx
index 139cdf66..f0cb7d8b 100644
--- a/app/(pages)/@modal/(layout)/subjects/[subjectId]/training-plans/[missionId]/sessions/page.tsx
+++ b/app/(pages)/@modal/(layout)/subjects/[subjectId]/training-plans/[missionId]/sessions/page.tsx
@@ -1,5 +1,4 @@
 import SessionsPage from '@/_components/sessions-page';
-import formatTitle from '@/_utilities/format-title';
 
 interface PageProps {
   params: {
@@ -8,10 +7,6 @@ interface PageProps {
   };
 }
 
-export const metadata = {
-  title: formatTitle(['Subjects', 'Training plans', 'Sessions']),
-};
-
 const Page = ({ params: { missionId, subjectId } }: PageProps) => (
   <SessionsPage missionId={missionId} subjectId={subjectId} />
 );
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 437b292d..039caab5 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
@@ -1,8 +1,8 @@
 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 getSubject from '@/_queries/get-subject';
-import formatTitle from '@/_utilities/format-title';
 
 interface PageProps {
   params: {
@@ -10,17 +10,16 @@ interface PageProps {
   };
 }
 
-export const metadata = {
-  title: formatTitle(['Subjects', 'Training plans', 'New']),
-};
-
 const Page = async ({ params: { subjectId } }: PageProps) => {
   const { data: subject } = await getSubject(subjectId);
   if (!subject) return null;
 
   return (
     <Modal.Content>
-      <PageModalHeader title="New training plan" />
+      <PageModalHeader
+        right={<TrainingPlanUseTemplateModal />}
+        title="New training plan"
+      />
       <TrainingPlanForm subjectId={subjectId} />
     </Modal.Content>
   );
diff --git a/app/(pages)/@modal/(layout)/subjects/create/page.tsx b/app/(pages)/@modal/(layout)/subjects/create/page.tsx
index d87a7491..2e4f75ab 100644
--- a/app/(pages)/@modal/(layout)/subjects/create/page.tsx
+++ b/app/(pages)/@modal/(layout)/subjects/create/page.tsx
@@ -1,9 +1,6 @@
 import * as Modal from '@/_components/modal';
 import PageModalHeader from '@/_components/page-modal-header';
 import SubjectForm from '@/_components/subject-form';
-import formatTitle from '@/_utilities/format-title';
-
-export const metadata = { title: formatTitle(['Subjects', 'New']) };
 
 const Page = () => (
   <Modal.Content>
diff --git a/app/(pages)/@modal/(layout)/templates/event-types/[templateId]/page.tsx b/app/(pages)/@modal/(layout)/templates/event-types/[templateId]/page.tsx
index 5860ae3d..fe30095c 100644
--- a/app/(pages)/@modal/(layout)/templates/event-types/[templateId]/page.tsx
+++ b/app/(pages)/@modal/(layout)/templates/event-types/[templateId]/page.tsx
@@ -4,7 +4,6 @@ import PageModalHeader from '@/_components/page-modal-header';
 import getTemplate from '@/_queries/get-template';
 import listInputs from '@/_queries/list-inputs';
 import listSubjectsByTeamId from '@/_queries/list-subjects-by-team-id';
-import formatTitle from '@/_utilities/format-title';
 
 interface PageProps {
   params: {
@@ -12,8 +11,6 @@ interface PageProps {
   };
 }
 
-export const metadata = { title: formatTitle(['Templates', 'Edit']) };
-
 const Page = async ({ params: { templateId } }: PageProps) => {
   const [{ data: template }, { data: availableInputs }, { data: subjects }] =
     await Promise.all([
@@ -26,7 +23,7 @@ const Page = async ({ params: { templateId } }: PageProps) => {
 
   return (
     <Modal.Content>
-      <PageModalHeader title={template.name} />
+      <PageModalHeader title="Edit event type template" />
       <EventTypeTemplateForm
         availableInputs={availableInputs}
         subjects={subjects}
diff --git a/app/(pages)/@modal/(layout)/templates/event-types/create/from-event-type/[eventTypeId]/page.tsx b/app/(pages)/@modal/(layout)/templates/event-types/create/from-event-type/[eventTypeId]/page.tsx
index ed7be2b4..0d5ae508 100644
--- a/app/(pages)/@modal/(layout)/templates/event-types/create/from-event-type/[eventTypeId]/page.tsx
+++ b/app/(pages)/@modal/(layout)/templates/event-types/create/from-event-type/[eventTypeId]/page.tsx
@@ -4,7 +4,6 @@ import PageModalHeader from '@/_components/page-modal-header';
 import getEventTypeWithInputs from '@/_queries/get-event-type-with-inputs';
 import listInputs from '@/_queries/list-inputs';
 import listSubjectsByTeamId from '@/_queries/list-subjects-by-team-id';
-import formatTitle from '@/_utilities/format-title';
 
 interface PageProps {
   params: {
@@ -12,8 +11,6 @@ interface PageProps {
   };
 }
 
-export const metadata = { title: formatTitle(['Templates', 'New']) };
-
 const Page = async ({ params: { eventTypeId } }: PageProps) => {
   const [{ data: eventType }, { data: availableInputs }, { data: subjects }] =
     await Promise.all([
@@ -37,8 +34,7 @@ const Page = async ({ params: { eventTypeId } }: PageProps) => {
             content: eventType.content,
             inputIds: eventType.inputs.map((i) => i.input_id),
           },
-          id: eventType.id,
-          name: eventType.name!,
+          name: eventType.name ?? '',
         }}
       />
     </Modal.Content>
diff --git a/app/(pages)/@modal/(layout)/templates/event-types/create/page.tsx b/app/(pages)/@modal/(layout)/templates/event-types/create/page.tsx
index 4bb2e724..e2ed9d77 100644
--- a/app/(pages)/@modal/(layout)/templates/event-types/create/page.tsx
+++ b/app/(pages)/@modal/(layout)/templates/event-types/create/page.tsx
@@ -3,11 +3,6 @@ import * as Modal from '@/_components/modal';
 import PageModalHeader from '@/_components/page-modal-header';
 import listInputs from '@/_queries/list-inputs';
 import listSubjectsByTeamId from '@/_queries/list-subjects-by-team-id';
-import formatTitle from '@/_utilities/format-title';
-
-export const metadata = {
-  title: formatTitle(['Templates', 'New']),
-};
 
 const Page = async () => {
   const [{ data: availableInputs }, { data: subjects }] = await Promise.all([
diff --git a/app/(pages)/@modal/(layout)/templates/modules/[templateId]/page.tsx b/app/(pages)/@modal/(layout)/templates/modules/[templateId]/page.tsx
index dff1a0e7..84c042d7 100644
--- a/app/(pages)/@modal/(layout)/templates/modules/[templateId]/page.tsx
+++ b/app/(pages)/@modal/(layout)/templates/modules/[templateId]/page.tsx
@@ -4,7 +4,6 @@ import PageModalHeader from '@/_components/page-modal-header';
 import getTemplate from '@/_queries/get-template';
 import listInputs from '@/_queries/list-inputs';
 import listSubjectsByTeamId from '@/_queries/list-subjects-by-team-id';
-import formatTitle from '@/_utilities/format-title';
 
 interface PageProps {
   params: {
@@ -12,8 +11,6 @@ interface PageProps {
   };
 }
 
-export const metadata = { title: formatTitle(['Templates', 'Edit']) };
-
 const Page = async ({ params: { templateId } }: PageProps) => {
   const [{ data: template }, { data: availableInputs }, { data: subjects }] =
     await Promise.all([
@@ -26,7 +23,7 @@ const Page = async ({ params: { templateId } }: PageProps) => {
 
   return (
     <Modal.Content>
-      <PageModalHeader title={template.name} />
+      <PageModalHeader title="Edit module template" />
       <ModuleTemplateForm
         availableInputs={availableInputs}
         subjects={subjects}
diff --git a/app/(pages)/@modal/(layout)/templates/modules/create/page.tsx b/app/(pages)/@modal/(layout)/templates/modules/create/page.tsx
index 4de75ff7..8ac2470e 100644
--- a/app/(pages)/@modal/(layout)/templates/modules/create/page.tsx
+++ b/app/(pages)/@modal/(layout)/templates/modules/create/page.tsx
@@ -3,11 +3,6 @@ import ModuleTemplateForm from '@/_components/module-template-form';
 import PageModalHeader from '@/_components/page-modal-header';
 import listInputs from '@/_queries/list-inputs';
 import listSubjectsByTeamId from '@/_queries/list-subjects-by-team-id';
-import formatTitle from '@/_utilities/format-title';
-
-export const metadata = {
-  title: formatTitle(['Templates', 'New']),
-};
 
 const Page = async () => {
   const [{ data: availableInputs }, { data: subjects }] = await Promise.all([
diff --git a/app/(pages)/@modal/(layout)/templates/sessions/[templateId]/loading.tsx b/app/(pages)/@modal/(layout)/templates/sessions/[templateId]/loading.tsx
new file mode 100644
index 00000000..e3d948d8
--- /dev/null
+++ b/app/(pages)/@modal/(layout)/templates/sessions/[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/sessions/[templateId]/page.tsx b/app/(pages)/@modal/(layout)/templates/sessions/[templateId]/page.tsx
new file mode 100644
index 00000000..842e3d89
--- /dev/null
+++ b/app/(pages)/@modal/(layout)/templates/sessions/[templateId]/page.tsx
@@ -0,0 +1,46 @@
+import * as Modal from '@/_components/modal';
+import PageModalHeader from '@/_components/page-modal-header';
+import SessionTemplateForm from '@/_components/session-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: availableTemplates },
+    { data: subjects },
+    { data: template },
+  ] = await Promise.all([
+    listInputs(),
+    listTemplatesWithData({ type: TemplateType.Module }),
+    listSubjectsByTeamId(),
+    getTemplate(templateId),
+  ]);
+
+  if (!availableInputs || !availableTemplates || !subjects || !template) {
+    return null;
+  }
+
+  return (
+    <Modal.Content>
+      <PageModalHeader title="Edit session template" />
+      <SessionTemplateForm
+        availableInputs={availableInputs}
+        availableTemplates={availableTemplates}
+        subjects={subjects}
+        template={template}
+      />
+    </Modal.Content>
+  );
+};
+
+export default Page;
diff --git a/app/(pages)/@modal/(layout)/templates/sessions/create/from-session/[sessionId]/loading.tsx b/app/(pages)/@modal/(layout)/templates/sessions/create/from-session/[sessionId]/loading.tsx
new file mode 100644
index 00000000..e3d948d8
--- /dev/null
+++ b/app/(pages)/@modal/(layout)/templates/sessions/create/from-session/[sessionId]/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/sessions/create/from-session/[sessionId]/page.tsx b/app/(pages)/@modal/(layout)/templates/sessions/create/from-session/[sessionId]/page.tsx
new file mode 100644
index 00000000..07ea9101
--- /dev/null
+++ b/app/(pages)/@modal/(layout)/templates/sessions/create/from-session/[sessionId]/page.tsx
@@ -0,0 +1,57 @@
+import * as Modal from '@/_components/modal';
+import PageModalHeader from '@/_components/page-modal-header';
+import SessionTemplateForm from '@/_components/session-template-form';
+import TemplateType from '@/_constants/enum-template-type';
+import getSession from '@/_queries/get-session';
+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: {
+    sessionId: string;
+  };
+}
+
+const Page = async ({ params: { sessionId } }: PageProps) => {
+  const [
+    { data: availableInputs },
+    { data: availableTemplates },
+    { data: session },
+    { data: subjects },
+  ] = await Promise.all([
+    listInputs(),
+    listTemplatesWithData({ type: TemplateType.Module }),
+    getSession(sessionId),
+    listSubjectsByTeamId(),
+  ]);
+
+  if (!availableInputs || !availableTemplates || !session || !subjects) {
+    return null;
+  }
+
+  return (
+    <Modal.Content>
+      <PageModalHeader title="New session template" />
+      <SessionTemplateForm
+        availableInputs={availableInputs}
+        availableTemplates={availableTemplates}
+        disableCache
+        isDuplicate
+        subjects={subjects}
+        template={{
+          data: {
+            modules: session.modules.map((module) => ({
+              content: module.content,
+              inputIds: module.inputs.map((i) => i.input_id),
+              name: module.name,
+            })),
+          },
+          name: session.title ?? '',
+        }}
+      />
+    </Modal.Content>
+  );
+};
+
+export default Page;
diff --git a/app/(pages)/@modal/(layout)/templates/sessions/create/loading.tsx b/app/(pages)/@modal/(layout)/templates/sessions/create/loading.tsx
new file mode 100644
index 00000000..e3d948d8
--- /dev/null
+++ b/app/(pages)/@modal/(layout)/templates/sessions/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/sessions/create/page.tsx b/app/(pages)/@modal/(layout)/templates/sessions/create/page.tsx
new file mode 100644
index 00000000..8b74a82c
--- /dev/null
+++ b/app/(pages)/@modal/(layout)/templates/sessions/create/page.tsx
@@ -0,0 +1,34 @@
+import * as Modal from '@/_components/modal';
+import PageModalHeader from '@/_components/page-modal-header';
+import SessionTemplateForm from '@/_components/session-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: availableTemplates },
+    { data: subjects },
+  ] = await Promise.all([
+    listInputs(),
+    listTemplatesWithData({ type: TemplateType.Module }),
+    listSubjectsByTeamId(),
+  ]);
+
+  if (!availableInputs || !availableTemplates || !subjects) return null;
+
+  return (
+    <Modal.Content>
+      <PageModalHeader title="New session template" />
+      <SessionTemplateForm
+        availableInputs={availableInputs}
+        availableTemplates={availableTemplates}
+        subjects={subjects}
+      />
+    </Modal.Content>
+  );
+};
+
+export default Page;
diff --git a/app/(pages)/@modal/(layout)/upgrade/page.tsx b/app/(pages)/@modal/(layout)/upgrade/page.tsx
index 51d71b8f..5a18d166 100644
--- a/app/(pages)/@modal/(layout)/upgrade/page.tsx
+++ b/app/(pages)/@modal/(layout)/upgrade/page.tsx
@@ -3,9 +3,6 @@ import PageModalBackButton from '@/_components/page-modal-back-button';
 import PageModalHeader from '@/_components/page-modal-header';
 import UpgradePlanButton from '@/_components/upgrade-plan-button';
 import getCurrentUser from '@/_queries/get-current-user';
-import formatTitle from '@/_utilities/format-title';
-
-export const metadata = { title: formatTitle(['Upgrade plan']) };
 
 const Page = async () => {
   const user = await getCurrentUser();
diff --git a/app/(pages)/share/[subjectId]/page.tsx b/app/(pages)/share/[subjectId]/page.tsx
index 385b3237..5af68719 100644
--- a/app/(pages)/share/[subjectId]/page.tsx
+++ b/app/(pages)/share/[subjectId]/page.tsx
@@ -1,13 +1,10 @@
 import SubjectPage from '@/_components/subject-page';
-import formatTitle from '@/_utilities/format-title';
 
 interface PageProps {
   params: { subjectId: string };
   searchParams: { foo?: string; from?: string; limit?: string; to?: string };
 }
 
-export const metadata = { title: formatTitle(['Subjects', 'Events']) };
-
 const Page = async ({
   params: { subjectId },
   searchParams: { from, limit, to },
diff --git a/app/_components/account-menu.tsx b/app/_components/account-menu.tsx
index cd86fcb9..0e4911c6 100644
--- a/app/_components/account-menu.tsx
+++ b/app/_components/account-menu.tsx
@@ -29,7 +29,7 @@ const AccountMenu = ({ user }: AccountMenuProps) => {
   return (
     <DropdownMenu.Root>
       <DropdownMenu.Trigger>
-        <div className="flex gap-2 rounded-sm border border-alpha-3 pl-2 transition-colors hover:bg-alpha-1 active:bg-alpha-1">
+        <div className="flex gap-2 rounded-sm border border-alpha-3 pl-2 transition-colors hover:bg-alpha-1">
           <Bars3Icon className="w-5" />
           <Avatar
             className="-m-px"
diff --git a/app/_components/button.tsx b/app/_components/button.tsx
index 216f6dfb..c2338350 100644
--- a/app/_components/button.tsx
+++ b/app/_components/button.tsx
@@ -9,9 +9,9 @@ import { twMerge } from 'tailwind-merge';
 
 const colorSchemes = {
   accent:
-    'ring-accent-2 bg-accent-1 text-bg-1 font-bold active:bg-accent-2 hover:bg-accent-2 ring-offset-bg-2 ring-offset-4',
+    'ring-accent-2 bg-accent-1 text-bg-1 font-bold hover:bg-accent-2 ring-offset-bg-2 ring-offset-4',
   transparent:
-    'ring-accent-2 hover:bg-alpha-1 font-normal active:text-fg-2 active:bg-alpha-1 text-fg-3 hover:text-fg-2',
+    'ring-accent-2 hover:bg-alpha-1 font-normal text-fg-3 hover:text-fg-2',
 };
 
 const spinnerColorSchemes = {
@@ -25,7 +25,7 @@ const sizes = {
 };
 
 const variants = {
-  link: 'p-3 -m-3 border-0 text-fg-3 hover:text-fg-2 active:text-fg-2',
+  link: 'p-3 -m-3 border-0 text-fg-3 hover:text-fg-2',
   primary: 'focus:ring-1 justify-center',
 };
 
diff --git a/app/_components/calendar.tsx b/app/_components/calendar.tsx
index 5762ad2c..45121f20 100644
--- a/app/_components/calendar.tsx
+++ b/app/_components/calendar.tsx
@@ -33,7 +33,7 @@ const Calendar = ({
       months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0',
       nav: 'space-x-1 flex items-center',
       nav_button:
-        'p-3 -m-3 p-0 focus:outline-none transition-colors absolute text-fg-3 hover:text-fg-2 active:text-fg-2',
+        'p-3 -m-3 p-0 focus:outline-none transition-colors absolute text-fg-3 hover:text-fg-2',
       nav_button_next: '-right-2',
       nav_button_previous: 'left-1',
       row: 'flex w-full mt-2',
diff --git a/app/_components/dropdown-menu.tsx b/app/_components/dropdown-menu.tsx
index 60dd917c..1bca0d0a 100644
--- a/app/_components/dropdown-menu.tsx
+++ b/app/_components/dropdown-menu.tsx
@@ -24,7 +24,7 @@ const Content = React.forwardRef<
   <DropdownMenuPrimitive.Content
     align="end"
     ref={ref}
-    sideOffset={4}
+    sideOffset={7}
     className={twMerge(
       'z-10 w-60 overflow-hidden rounded border border-alpha-2 bg-bg-3 py-1 drop-shadow',
       className,
diff --git a/app/_components/event-comment.tsx b/app/_components/event-comment.tsx
index e9a44ab8..83d4bc79 100644
--- a/app/_components/event-comment.tsx
+++ b/app/_components/event-comment.tsx
@@ -52,15 +52,13 @@ const EventComment = ({
           !isArchived &&
           (userId === profile.id || isTeamMember) && (
             <DropdownMenu.Root>
-              <DropdownMenu.Trigger>
-                <div className="-mr-2 -mt-[0.7rem]">
-                  <div className="rounded-full p-2 text-fg-3 transition-colors hover:bg-alpha-1 hover:text-fg-2 active:bg-alpha-1 active:text-fg-2">
-                    <EllipsisVerticalIcon className="w-5" />
-                  </div>
+              <DropdownMenu.Trigger className="-mr-4 -mt-[0.7rem]">
+                <div className="rounded-full p-2 text-fg-3 transition-colors hover:text-fg-2">
+                  <EllipsisVerticalIcon className="w-5" />
                 </div>
               </DropdownMenu.Trigger>
               <DropdownMenu.Portal>
-                <DropdownMenu.Content>
+                <DropdownMenu.Content className="mx-2" sideOffset={4}>
                   <DropdownMenuDeleteItem
                     confirmText="Delete comment"
                     onConfirm={() => deleteComment(id)}
diff --git a/app/_components/event-menu.tsx b/app/_components/event-menu.tsx
index 91b34294..24fe3530 100644
--- a/app/_components/event-menu.tsx
+++ b/app/_components/event-menu.tsx
@@ -25,18 +25,18 @@ const EventMenu = ({ className, eventId, isModal }: EventMenuProps) => {
         ) : (
           <div
             className={twMerge(
-              'group absolute right-0 top-0 flex items-center justify-center px-2 py-2.5 text-fg-3 hover:text-fg-2 active:text-fg-2',
+              'group absolute right-0 top-0 flex items-center justify-center px-2 py-2.5 text-fg-3 hover:text-fg-2',
               className,
             )}
           >
-            <div className="rounded-full p-2 group-hover:bg-alpha-1 group-active:bg-alpha-1">
+            <div className="rounded-full p-2 group-hover:bg-alpha-1">
               <EllipsisVerticalIcon className="w-5" />
             </div>
           </div>
         )}
       </DropdownMenu.Trigger>
       <DropdownMenu.Portal>
-        <DropdownMenu.Content>
+        <DropdownMenu.Content className="mx-2" sideOffset={0}>
           <DropdownMenuDeleteItem
             confirmText="Delete event"
             onConfirm={async () => {
diff --git a/app/_components/event-type-form.tsx b/app/_components/event-type-form.tsx
index b4c017a9..64feed00 100644
--- a/app/_components/event-type-form.tsx
+++ b/app/_components/event-type-form.tsx
@@ -1,7 +1,6 @@
 'use client';
 
 import Button from '@/_components/button';
-import EventTypeMenu from '@/_components/event-type-menu';
 import Input from '@/_components/input';
 import InputForm from '@/_components/input-form';
 import * as Modal from '@/_components/modal';
@@ -17,7 +16,11 @@ import { GetInputData } from '@/_queries/get-input';
 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 { EventTypeTemplateDataJson } from '@/_types/event-type-template-data-json';
+import forceArray from '@/_utilities/force-array';
 import getFormCacheKey from '@/_utilities/get-form-cache-key';
+import DocumentTextIcon from '@heroicons/react/24/outline/DocumentTextIcon';
+import { useToggle } from '@uidotdev/usehooks';
 import { useRouter } from 'next/navigation';
 import { useState, useTransition } from 'react';
 import { Controller, useFieldArray } from 'react-hook-form';
@@ -47,6 +50,7 @@ const EventTypeForm = ({
     useState<Partial<GetInputData>>(null);
 
   const [isTransitioning, startTransition] = useTransition();
+  const [useTemplateModal, toggleUseTemplateModal] = useToggle(false);
   const cacheKey = getFormCacheKey.eventType({ id: eventType?.id, subjectId });
 
   const form = useCachedForm<EventTypeFormValues>(cacheKey, {
@@ -66,16 +70,76 @@ const EventTypeForm = ({
     <Modal.Content>
       <PageModalHeader
         right={
-          <EventTypeMenu<EventTypeFormValues>
-            availableInputs={availableInputs}
-            availableTemplates={availableTemplates}
-            eventTypeId={eventType?.id}
-            form={form}
-            subjectId={subjectId}
-            subjects={subjects}
-          />
+          <Modal.Root
+            onOpenChange={toggleUseTemplateModal}
+            open={useTemplateModal}
+          >
+            <Modal.Trigger asChild>
+              <Button
+                className="sm:pr-6"
+                onClick={() => toggleUseTemplateModal()}
+                variant="link"
+              >
+                <DocumentTextIcon className="w-5 text-fg-4" />
+                Use a template
+              </Button>
+            </Modal.Trigger>
+            <Modal.Portal>
+              <Modal.Overlay>
+                <Modal.Content className="max-w-sm p-8 text-center">
+                  <Modal.Title className="text-2xl">Use a template</Modal.Title>
+                  <Modal.Description className="mt-4 px-4 text-fg-4">
+                    Selecting a template will overwrite any existing event type
+                    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 EventTypeTemplateDataJson;
+
+                        const inputs = availableInputs.filter(({ id }) =>
+                          forceArray(data?.inputIds).includes(id),
+                        );
+
+                        form.setValue('name', template.name, {
+                          shouldDirty: true,
+                        });
+
+                        form.setValue('content', data?.content ?? '', {
+                          shouldDirty: true,
+                        });
+
+                        form.setValue('inputs', inputs, {
+                          shouldDirty: true,
+                        });
+
+                        toggleUseTemplateModal();
+                      }}
+                      options={availableTemplates}
+                      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>
         }
-        title={(eventType?.name as string) ?? 'New event type'}
+        title={eventType?.id ? 'Edit event type' : 'New event type'}
       />
       <form
         className="flex flex-col gap-8 px-4 pb-8 pt-6 sm:px-8"
diff --git a/app/_components/event-type-menu.tsx b/app/_components/event-type-menu.tsx
index 44e09bde..7daf0898 100644
--- a/app/_components/event-type-menu.tsx
+++ b/app/_components/event-type-menu.tsx
@@ -1,218 +1,63 @@
 'use client';
 
-import Button from '@/_components/button';
 import * as DropdownMenu from '@/_components/dropdown-menu';
 import DropdownMenuDeleteItem from '@/_components/dropdown-menu-delete-item';
-import EventTypeTemplateForm from '@/_components/event-type-template-form';
 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 deleteEventType from '@/_mutations/delete-event-type';
-import { GetTemplateData } from '@/_queries/get-template';
-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 { TemplateDataJson } from '@/_types/template-data-json';
-import forceArray from '@/_utilities/force-array';
-import DocumentDuplicateIcon from '@heroicons/react/24/outline/DocumentDuplicateIcon';
 import EllipsisVerticalIcon from '@heroicons/react/24/outline/EllipsisVerticalIcon';
 import PencilIcon from '@heroicons/react/24/outline/PencilIcon';
 import PlusIcon from '@heroicons/react/24/outline/PlusIcon';
-import { useToggle } from '@uidotdev/usehooks';
 import { useRouter } from 'next/navigation';
-import { useState } from 'react';
-import { FieldValues, Path, PathValue, UseFormReturn } from 'react-hook-form';
 
-interface EventTypeMenuProps<T extends FieldValues> {
-  availableInputs?: NonNullable<ListInputsBySubjectIdData>;
-  availableTemplates?: NonNullable<ListTemplatesWithDataData>;
-  eventTypeId?: string;
-  form?: UseFormReturn<T>;
+interface EventTypeMenuProps {
+  eventTypeId: string;
   isModal?: boolean;
   subjectId: string;
-  subjects?: NonNullable<ListSubjectsByTeamIdData>;
 }
 
-const EventTypeMenu = <T extends FieldValues>({
-  availableInputs,
-  availableTemplates,
+const EventTypeMenu = ({
   eventTypeId,
-  form,
   isModal,
   subjectId,
-  subjects,
-}: EventTypeMenuProps<T>) => {
-  const [createTemplateModal, setCreateTemplateModal] =
-    useState<Partial<GetTemplateData>>(null);
-
-  const [useTemplateModal, toggleUseTemplateModal] = useToggle(false);
+}: EventTypeMenuProps) => {
   const router = useRouter();
 
   return (
     <DropdownMenu.Root>
       <DropdownMenu.Trigger>
-        {form || isModal ? (
+        {isModal ? (
           <IconButton icon={<EllipsisVerticalIcon className="w-7" />} />
         ) : (
-          <div className="group flex items-center justify-center px-2 text-fg-3 hover:text-fg-2 active:text-fg-2">
-            <div className="rounded-full p-2 group-hover:bg-alpha-1 group-active:bg-alpha-1">
+          <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">
               <EllipsisVerticalIcon className="w-5" />
             </div>
           </div>
         )}
       </DropdownMenu.Trigger>
       <DropdownMenu.Portal>
-        <DropdownMenu.Content>
-          {form && availableInputs && subjects && (
-            <>
-              <Modal.Root
-                onOpenChange={toggleUseTemplateModal}
-                open={useTemplateModal}
-              >
-                <Modal.Trigger asChild>
-                  <DropdownMenu.Button onClick={() => toggleUseTemplateModal()}>
-                    <DocumentDuplicateIcon 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 event
-                        type values.
-                      </Modal.Description>
-                      <div className="pt-16 text-left">
-                        <Select
-                          instanceId="template-select"
-                          noOptionsMessage={() => 'No templates.'}
-                          onChange={(t) => {
-                            const template =
-                              t as NonNullable<ListTemplatesWithDataData>[0];
-
-                            const data = template?.data as TemplateDataJson;
-
-                            const inputs = availableInputs.filter(({ id }) =>
-                              forceArray(data?.inputIds).includes(id),
-                            ) as PathValue<T, T[string]>;
-
-                            form.setValue(
-                              'name' as Path<T>,
-                              template?.name as PathValue<T, Path<T>>,
-                              { shouldDirty: true },
-                            );
-
-                            form.setValue(
-                              'content' as Path<T>,
-                              data?.content as PathValue<T, Path<T>>,
-                              { shouldDirty: true },
-                            );
-
-                            form.setValue(
-                              'inputs' as Path<T>,
-                              inputs as PathValue<T, Path<T>>,
-                              { shouldDirty: true },
-                            );
-
-                            toggleUseTemplateModal();
-                          }}
-                          options={availableTemplates}
-                          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 { content, inputs, name } = form.getValues();
-
-                      setCreateTemplateModal({
-                        data: {
-                          content,
-                          inputIds: inputs.map(({ id }: { id: string }) => id),
-                        },
-                        name,
-                      });
-                    }}
-                  >
-                    <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 event type template"
-                      />
-                      <EventTypeTemplateForm
-                        availableInputs={availableInputs}
-                        disableCache
-                        onClose={() => setCreateTemplateModal(null)}
-                        onSubmit={() => {
-                          setCreateTemplateModal(null);
-                          router.refresh();
-                        }}
-                        subjects={subjects}
-                        template={createTemplateModal}
-                      />
-                    </Modal.Content>
-                  </Modal.Overlay>
-                </Modal.Portal>
-              </Modal.Root>
-            </>
-          )}
-          {eventTypeId && (
-            <>
-              {!form && (
-                <>
-                  <DropdownMenu.Button
-                    href={`/subjects/${subjectId}/event-types/${eventTypeId}/edit`}
-                    scroll={false}
-                  >
-                    <PencilIcon className="w-5 text-fg-4" />
-                    Edit
-                  </DropdownMenu.Button>
-                  <DropdownMenu.Button
-                    href={`/templates/event-types/create/from-event-type/${eventTypeId}`}
-                    scroll={false}
-                  >
-                    <PlusIcon className="w-5 text-fg-4" />
-                    New template
-                  </DropdownMenu.Button>
-                </>
-              )}
-              <DropdownMenuDeleteItem
-                confirmText="Delete event type"
-                onConfirm={async () => {
-                  await deleteEventType(eventTypeId);
-                  if (form || isModal) router.back();
-                }}
-              />
-            </>
-          )}
+        <DropdownMenu.Content className="mx-2" sideOffset={-2}>
+          <DropdownMenu.Button
+            href={`/subjects/${subjectId}/event-types/${eventTypeId}/edit`}
+            scroll={false}
+          >
+            <PencilIcon className="w-5 text-fg-4" />
+            Edit
+          </DropdownMenu.Button>
+          <DropdownMenu.Button
+            href={`/templates/event-types/create/from-event-type/${eventTypeId}`}
+            scroll={false}
+          >
+            <PlusIcon className="w-5 text-fg-4" />
+            New template
+          </DropdownMenu.Button>
+          <DropdownMenuDeleteItem
+            confirmText="Delete event type"
+            onConfirm={async () => {
+              await deleteEventType(eventTypeId);
+              if (isModal) router.back();
+            }}
+          />
         </DropdownMenu.Content>
       </DropdownMenu.Portal>
     </DropdownMenu.Root>
diff --git a/app/_components/event-type-template-form.tsx b/app/_components/event-type-template-form.tsx
index ebe1a722..d4def377 100644
--- a/app/_components/event-type-template-form.tsx
+++ b/app/_components/event-type-template-form.tsx
@@ -9,14 +9,13 @@ import PageModalHeader from '@/_components/page-modal-header';
 import RichTextarea from '@/_components/rich-textarea';
 import Select, { IOption } from '@/_components/select';
 import UnsavedChangesBanner from '@/_components/unsaved-changes-banner';
-import TemplateType from '@/_constants/enum-template-type';
 import useCachedForm from '@/_hooks/use-cached-form';
-import upsertTemplate from '@/_mutations/upsert-template';
+import upsertEventTypeTemplate from '@/_mutations/upsert-event-type-template';
 import { GetInputData } from '@/_queries/get-input';
 import { GetTemplateData } from '@/_queries/get-template';
 import { ListInputsData } from '@/_queries/list-inputs';
 import { ListSubjectsByTeamIdData } from '@/_queries/list-subjects-by-team-id';
-import { TemplateDataJson } from '@/_types/template-data-json';
+import { EventTypeTemplateDataJson } from '@/_types/event-type-template-data-json';
 import getFormCacheKey from '@/_utilities/get-form-cache-key';
 import stopPropagation from '@/_utilities/stop-propagation';
 import { sortBy } from 'lodash';
@@ -28,8 +27,6 @@ interface EventTypeTemplateFormProps {
   availableInputs: NonNullable<ListInputsData>;
   disableCache?: boolean;
   isDuplicate?: boolean;
-  onClose?: () => void;
-  onSubmit?: () => void;
   subjects: NonNullable<ListSubjectsByTeamIdData>;
   template?: Partial<GetTemplateData>;
 }
@@ -44,8 +41,6 @@ const EventTypeTemplateForm = ({
   availableInputs,
   disableCache,
   isDuplicate,
-  onClose,
-  onSubmit,
   subjects,
   template,
 }: EventTypeTemplateFormProps) => {
@@ -53,9 +48,8 @@ const EventTypeTemplateForm = ({
     useState<Partial<GetInputData>>(null);
 
   const [isTransitioning, startTransition] = useTransition();
-
   const router = useRouter();
-  const templateData = template?.data as TemplateDataJson;
+  const templateData = template?.data as EventTypeTemplateDataJson;
 
   const cacheKey = getFormCacheKey.eventTypeTemplate({
     id: template?.id,
@@ -67,8 +61,8 @@ const EventTypeTemplateForm = ({
     {
       defaultValues: {
         content: templateData?.content ?? '',
-        inputs: availableInputs.filter(({ id }) =>
-          templateData?.inputIds?.includes(id),
+        inputs: availableInputs.filter((input) =>
+          templateData?.inputIds?.includes(input.id),
         ),
         name: template?.name ?? '',
       },
@@ -84,17 +78,17 @@ const EventTypeTemplateForm = ({
       onSubmit={stopPropagation(
         form.handleSubmit((values) =>
           startTransition(async () => {
-            const res = await upsertTemplate(
-              { templateId: template?.id, type: TemplateType.EventType },
+            const res = await upsertEventTypeTemplate(
+              { templateId: template?.id },
               values,
             );
 
             if (res?.error) {
               form.setError('root', { message: res.error, type: 'custom' });
-            } else if (res?.data) {
-              onSubmit?.();
-              if (!onClose) router.back();
+              return;
             }
+
+            router.back();
           }),
         ),
       )}
@@ -157,11 +151,7 @@ const EventTypeTemplateForm = ({
         <div className="text-center">{form.formState.errors.root.message}</div>
       )}
       <div className="flex gap-4 pt-8">
-        <PageModalBackButton
-          className="w-full"
-          colorScheme="transparent"
-          onClick={onClose}
-        >
+        <PageModalBackButton className="w-full" colorScheme="transparent">
           Close
         </PageModalBackButton>
         <Button
diff --git a/app/_components/event-types.tsx b/app/_components/event-types.tsx
index 1668cc9b..65150a92 100644
--- a/app/_components/event-types.tsx
+++ b/app/_components/event-types.tsx
@@ -16,10 +16,7 @@ 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 active:bg-alpha-1"
-          key={eventType.id}
-        >
+        <li className="flex items-stretch 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 473c47f5..3d784df7 100644
--- a/app/_components/filterable-inputs.tsx
+++ b/app/_components/filterable-inputs.tsx
@@ -72,10 +72,7 @@ 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 active:bg-alpha-1"
-            key={input.id}
-          >
+          <li className="flex items-stretch 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 930c623d..5a83d8e3 100644
--- a/app/_components/filterable-templates.tsx
+++ b/app/_components/filterable-templates.tsx
@@ -65,10 +65,7 @@ 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 active:bg-alpha-1"
-            key={template.id}
-          >
+          <li className="flex items-stretch 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-form.tsx b/app/_components/input-form.tsx
index dedb3107..2d22be4f 100644
--- a/app/_components/input-form.tsx
+++ b/app/_components/input-form.tsx
@@ -197,12 +197,13 @@ const InputForm = ({
               {!!optionsArray.fields.length && (
                 <ul className="flex flex-col gap-2">
                   {optionsArray.fields.map((option, optionIndex) => (
-                    <li key={option.id}>
+                    <li className="relative" key={option.id}>
                       <Controller
                         control={form.control}
                         name={`options.${optionIndex}.label`}
                         render={({ field }) => (
                           <Input
+                            className="pr-[2.4rem]"
                             onKeyDown={(e) => {
                               if (e.key === 'Backspace' && !field.value) {
                                 e.preventDefault();
@@ -228,19 +229,19 @@ const InputForm = ({
                             }}
                             placeholder="Label…"
                             required
-                            right={
-                              <IconButton
-                                className="m-0 h-full w-full justify-center p-0"
-                                icon={<XMarkIcon className="w-5" />}
-                                label="Delete option"
-                                onClick={() => optionsArray.remove(optionIndex)}
-                                tabIndex={-1}
-                              />
-                            }
                             {...field}
                           />
                         )}
                       />
+                      <div className="absolute right-0 top-0 flex h-[2.625rem] w-[2.4rem] items-center justify-center">
+                        <IconButton
+                          className="m-0 h-full w-full justify-center p-0"
+                          icon={<XMarkIcon className="w-5" />}
+                          label="Delete option"
+                          onClick={() => optionsArray.remove(optionIndex)}
+                          tabIndex={-1}
+                        />
+                      </div>
                     </li>
                   ))}
                 </ul>
diff --git a/app/_components/input-menu.tsx b/app/_components/input-menu.tsx
index 1afd75a7..6353282e 100644
--- a/app/_components/input-menu.tsx
+++ b/app/_components/input-menu.tsx
@@ -13,14 +13,14 @@ 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 active:text-fg-2">
-        <div className="rounded-full p-2 group-hover:bg-alpha-1 group-active:bg-alpha-1">
+      <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">
           <EllipsisVerticalIcon className="w-5" />
         </div>
       </div>
     </DropdownMenu.Trigger>
     <DropdownMenu.Portal>
-      <DropdownMenu.Content>
+      <DropdownMenu.Content className="mx-2" sideOffset={-2}>
         <DropdownMenu.Button
           href={`/inputs/create/from-input/${inputId}`}
           scroll={false}
diff --git a/app/_components/input.tsx b/app/_components/input.tsx
index 05a88dd1..9b0178cc 100644
--- a/app/_components/input.tsx
+++ b/app/_components/input.tsx
@@ -5,7 +5,6 @@ import { twMerge } from 'tailwind-merge';
 
 interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   label?: ReactNode;
-  right?: ReactNode;
   tooltip?: ReactNode;
 }
 
@@ -16,7 +15,6 @@ const Input = forwardRef(
       disabled,
       id,
       label,
-      right,
       type,
       name,
       tooltip,
@@ -42,7 +40,7 @@ const Input = forwardRef(
         </div>
         <input
           autoComplete="off"
-          className={twMerge('input', right && 'pr-[2.4rem]', className)}
+          className={twMerge('input', className)}
           disabled={disabled || pending}
           id={id ?? name}
           name={name}
@@ -50,11 +48,6 @@ const Input = forwardRef(
           type={type ?? 'text'}
           {...rest}
         />
-        {right && (
-          <div className="absolute right-0 top-0 flex h-[2.625rem] w-[2.4rem] items-center justify-center">
-            {right}
-          </div>
-        )}
       </div>
     );
   },
diff --git a/app/_components/insight-menu.tsx b/app/_components/insight-menu.tsx
index feb787ea..51c4c9ec 100644
--- a/app/_components/insight-menu.tsx
+++ b/app/_components/insight-menu.tsx
@@ -14,14 +14,14 @@ 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 active:text-fg-2">
-        <div className="rounded-full p-2 group-hover:bg-alpha-1 group-active:bg-alpha-1">
+      <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">
           <EllipsisVerticalIcon className="w-5" />
         </div>
       </div>
     </DropdownMenu.Trigger>
     <DropdownMenu.Portal>
-      <DropdownMenu.Content>
+      <DropdownMenu.Content className="mx-1.5" sideOffset={0}>
         <DropdownMenu.Button
           href={`/subjects/${subjectId}/insights/${insightId}/edit`}
           scroll={false}
diff --git a/app/_components/insight.tsx b/app/_components/insight.tsx
index b7bbd516..d691c1db 100644
--- a/app/_components/insight.tsx
+++ b/app/_components/insight.tsx
@@ -8,7 +8,7 @@ import { ListEventsData } from '@/_queries/list-events';
 import { ListInsightsData } from '@/_queries/list-insights';
 import { InsightConfigJson } from '@/_types/insight-config-json';
 import { useSortable } from '@dnd-kit/sortable';
-import { ArrowsPointingOutIcon } from '@heroicons/react/24/outline';
+import ArrowsPointingOutIcon from '@heroicons/react/24/outline/ArrowsPointingOutIcon';
 import Bars2Icon from '@heroicons/react/24/outline/Bars2Icon';
 import { Dispatch, SetStateAction } from 'react';
 import { twMerge } from 'tailwind-merge';
diff --git a/app/_components/insights-page.tsx b/app/_components/insights-page.tsx
index bb24aa3f..b83e463d 100644
--- a/app/_components/insights-page.tsx
+++ b/app/_components/insights-page.tsx
@@ -13,7 +13,7 @@ import listInsights from '@/_queries/list-insights';
 import listPublicEvents from '@/_queries/list-public-events';
 import listPublicInsights from '@/_queries/list-public-insights';
 import formatEventFilters from '@/_utilities/format-event-filters';
-import { ChartBarSquareIcon } from '@heroicons/react/24/outline';
+import ChartBarSquareIcon from '@heroicons/react/24/outline/ChartBarSquareIcon';
 import PlusIcon from '@heroicons/react/24/outline/PlusIcon';
 import { URLSearchParams } from 'next/dist/compiled/@edge-runtime/primitives';
 
diff --git a/app/_components/module-card.tsx b/app/_components/module-card.tsx
index 916ae1f0..50ea8d12 100644
--- a/app/_components/module-card.tsx
+++ b/app/_components/module-card.tsx
@@ -51,7 +51,7 @@ const ModuleCard = ({
       <Collapsible.Trigger asChild>
         <Button
           colorScheme="transparent"
-          className="m-0 block w-full px-4 hover:bg-alpha-1 active:bg-alpha-1 sm:px-8"
+          className="m-0 block w-full px-4 hover:bg-alpha-1 sm:px-8"
           variant="link"
         >
           <div
diff --git a/app/_components/module-form-section.tsx b/app/_components/module-form-section.tsx
index 65c131ba..b3de07e3 100644
--- a/app/_components/module-form-section.tsx
+++ b/app/_components/module-form-section.tsx
@@ -16,11 +16,12 @@ import { GetTemplateData } from '@/_queries/get-template';
 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 { TemplateDataJson } from '@/_types/template-data-json';
+import { ModuleTemplateDataJson } from '@/_types/module-template-data-json';
 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 DocumentDuplicateIcon from '@heroicons/react/24/outline/DocumentDuplicateIcon';
 import DocumentTextIcon from '@heroicons/react/24/outline/DocumentTextIcon';
 import EllipsisHorizontalIcon from '@heroicons/react/24/outline/EllipsisHorizontalIcon';
 import PlusIcon from '@heroicons/react/24/outline/PlusIcon';
@@ -41,7 +42,7 @@ interface ModuleFormSectionProps<
   eventTypeKey: string;
   form: Form.UseFormReturn<T>;
   hasOnlyOne?: boolean;
-  subjectId: string;
+  subjectId?: string;
   subjects: NonNullable<ListSubjectsByTeamIdData>;
 }
 
@@ -109,14 +110,14 @@ const ModuleFormSection = <
         <div className="smallcaps text-fg-4">Module {eventTypeIndex + 1}</div>
         <DropdownMenu.Root>
           <DropdownMenu.Trigger>
-            <div className="group flex items-center justify-center px-2 text-fg-3 hover:text-fg-2 active:text-fg-2">
-              <div className="rounded-full p-2 group-hover:bg-alpha-1 group-active:bg-alpha-1">
+            <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>
             </div>
           </DropdownMenu.Trigger>
           <DropdownMenu.Portal>
-            <DropdownMenu.Content>
+            <DropdownMenu.Content className="mx-2">
               <Modal.Root
                 onOpenChange={toggleUseTemplateModal}
                 open={useTemplateModal}
@@ -124,14 +125,14 @@ const ModuleFormSection = <
                 <Modal.Trigger asChild>
                   <DropdownMenu.Button onClick={() => toggleUseTemplateModal()}>
                     <DocumentTextIcon className="w-5 text-fg-4" />
-                    Use template
+                    Use a 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
+                        Use a template
                       </Modal.Title>
                       <Modal.Description className="mt-4 px-4 text-fg-4">
                         Selecting a template will overwrite any existing module
@@ -139,13 +140,13 @@ const ModuleFormSection = <
                       </Modal.Description>
                       <div className="pt-16 text-left">
                         <Select
-                          instanceId="template-select"
                           noOptionsMessage={() => 'No templates.'}
                           onChange={(t) => {
                             const template =
                               t as NonNullable<ListTemplatesWithDataData>[0];
 
-                            const data = template?.data as TemplateDataJson;
+                            const data =
+                              template?.data as ModuleTemplateDataJson;
 
                             const inputs = availableInputs.filter(({ id }) =>
                               forceArray(data?.inputIds).includes(id),
@@ -209,7 +210,7 @@ const ModuleFormSection = <
                       });
                     }}
                   >
-                    <DocumentDuplicateIcon className="w-5 text-fg-4" />
+                    <PlusIcon className="w-5 text-fg-4" />
                     New template
                   </DropdownMenu.Button>
                 </Modal.Trigger>
@@ -235,7 +236,6 @@ const ModuleFormSection = <
                   </Modal.Overlay>
                 </Modal.Portal>
               </Modal.Root>
-              <DropdownMenu.Separator />
               <DropdownMenu.Button
                 onClick={() =>
                   eventTypeArray.insert(eventTypeIndex, {
@@ -245,7 +245,7 @@ const ModuleFormSection = <
                   } as Form.FieldValue<T>)
                 }
               >
-                <PlusIcon className="w-5 text-fg-4" />
+                <ArrowUpIcon className="w-5 text-fg-4" />
                 Add module above
               </DropdownMenu.Button>
               <DropdownMenu.Button
@@ -257,17 +257,14 @@ const ModuleFormSection = <
                   } as Form.FieldValue<T>)
                 }
               >
-                <PlusIcon className="w-5 text-fg-4" />
+                <ArrowDownIcon className="w-5 text-fg-4" />
                 Add module below
               </DropdownMenu.Button>
               {!hasOnlyOne && (
-                <>
-                  <DropdownMenu.Separator />
-                  <DropdownMenuDeleteItem
-                    confirmText="Delete module"
-                    onConfirm={() => eventTypeArray.remove(eventTypeIndex)}
-                  />
-                </>
+                <DropdownMenuDeleteItem
+                  confirmText="Delete module"
+                  onConfirm={() => eventTypeArray.remove(eventTypeIndex)}
+                />
               )}
             </DropdownMenu.Content>
           </DropdownMenu.Portal>
@@ -276,7 +273,7 @@ const ModuleFormSection = <
       <Input
         className="rounded-none border-t-0"
         maxLength={49}
-        placeholder="Module title"
+        placeholder="Title"
         {...form.register(`modules[${eventTypeIndex}].name` as Form.Path<T>)}
       />
       <Form.Controller
@@ -311,7 +308,7 @@ const ModuleFormSection = <
               onCreateOption={(value) =>
                 setCreateInputModal({
                   label: value,
-                  subjects: [{ id: subjectId }],
+                  subjects: subjectId ? [{ id: subjectId }] : [],
                 })
               }
               options={availableInputs as IOption[]}
diff --git a/app/_components/module-template-form.tsx b/app/_components/module-template-form.tsx
index 31801602..aea8e998 100644
--- a/app/_components/module-template-form.tsx
+++ b/app/_components/module-template-form.tsx
@@ -9,14 +9,13 @@ import PageModalHeader from '@/_components/page-modal-header';
 import RichTextarea from '@/_components/rich-textarea';
 import Select, { IOption } from '@/_components/select';
 import UnsavedChangesBanner from '@/_components/unsaved-changes-banner';
-import TemplateType from '@/_constants/enum-template-type';
 import useCachedForm from '@/_hooks/use-cached-form';
-import upsertTemplate from '@/_mutations/upsert-template';
+import upsertModuleTemplate from '@/_mutations/upsert-module-template';
 import { GetInputData } from '@/_queries/get-input';
 import { GetTemplateData } from '@/_queries/get-template';
 import { ListInputsData } from '@/_queries/list-inputs';
 import { ListSubjectsByTeamIdData } from '@/_queries/list-subjects-by-team-id';
-import { TemplateDataJson } from '@/_types/template-data-json';
+import { ModuleTemplateDataJson } from '@/_types/module-template-data-json';
 import getFormCacheKey from '@/_utilities/get-form-cache-key';
 import stopPropagation from '@/_utilities/stop-propagation';
 import { sortBy } from 'lodash';
@@ -27,7 +26,6 @@ import { Controller, useFieldArray } from 'react-hook-form';
 interface ModuleTemplateFormProps {
   availableInputs: NonNullable<ListInputsData>;
   disableCache?: boolean;
-  isDuplicate?: boolean;
   onClose?: () => void;
   onSubmit?: () => void;
   subjects: NonNullable<ListSubjectsByTeamIdData>;
@@ -43,7 +41,6 @@ export type ModuleTemplateFormValues = {
 const ModuleTemplateForm = ({
   availableInputs,
   disableCache,
-  isDuplicate,
   onClose,
   onSubmit,
   subjects,
@@ -54,20 +51,16 @@ const ModuleTemplateForm = ({
 
   const [isTransitioning, startTransition] = useTransition();
   const router = useRouter();
-  const templateData = template?.data as TemplateDataJson;
-
-  const cacheKey = getFormCacheKey.moduleTemplate({
-    id: template?.id,
-    isDuplicate,
-  });
+  const templateData = template?.data as ModuleTemplateDataJson;
+  const cacheKey = getFormCacheKey.moduleTemplate({ id: template?.id });
 
   const form = useCachedForm<ModuleTemplateFormValues>(
     cacheKey,
     {
       defaultValues: {
         content: templateData?.content ?? '',
-        inputs: availableInputs.filter(({ id }) =>
-          templateData?.inputIds?.includes(id),
+        inputs: availableInputs.filter((input) =>
+          templateData?.inputIds?.includes(input.id),
         ),
         name: template?.name ?? '',
       },
@@ -83,8 +76,8 @@ const ModuleTemplateForm = ({
       onSubmit={stopPropagation(
         form.handleSubmit((values) =>
           startTransition(async () => {
-            const res = await upsertTemplate(
-              { templateId: template?.id, type: TemplateType.Module },
+            const res = await upsertModuleTemplate(
+              { templateId: template?.id },
               values,
             );
 
@@ -98,12 +91,7 @@ const ModuleTemplateForm = ({
         ),
       )}
     >
-      <Input
-        label="Module title"
-        maxLength={49}
-        required
-        {...form.register('name')}
-      />
+      <Input label="Name" maxLength={49} required {...form.register('name')} />
       <Controller
         control={form.control}
         name="content"
diff --git a/app/_components/notifications.tsx b/app/_components/notifications.tsx
index cf3fe5a7..9cc345e7 100644
--- a/app/_components/notifications.tsx
+++ b/app/_components/notifications.tsx
@@ -41,7 +41,7 @@ const Notifications = ({ notifications }: NotificationsProps) => {
         return (
           <li className="relative" key={n.id}>
             <Button
-              className="m-0 w-full items-start gap-6 px-4 py-7 text-fg-4 hover:bg-alpha-1 hover:text-fg-4 active:bg-alpha-1 active:text-fg-4 sm:px-8"
+              className="m-0 w-full items-start gap-6 px-4 py-7 text-fg-4 hover:bg-alpha-1 hover:text-fg-4 sm:px-8"
               href={
                 sourceEvent
                   ? `/subjects/${n?.subject?.id}/events/${sourceEvent.id}`
@@ -110,7 +110,7 @@ const Notifications = ({ notifications }: NotificationsProps) => {
                 })}
               >
                 <IconButton
-                  className="rounded-full hover:bg-alpha-1 active:bg-alpha-1"
+                  className="rounded-full hover:bg-alpha-1"
                   icon={
                     n.archived ? (
                       <ArchiveBoxXMarkIcon className="w-5" />
@@ -123,7 +123,7 @@ const Notifications = ({ notifications }: NotificationsProps) => {
               </form>
               <form action={deleteNotification.bind(null, n.id)}>
                 <IconButton
-                  className="rounded-full hover:bg-alpha-1 active:bg-alpha-1"
+                  className="rounded-full hover:bg-alpha-1"
                   icon={<TrashIcon className="w-5" />}
                   type="submit"
                 />
diff --git a/app/_components/popover.tsx b/app/_components/popover.tsx
index 2782f9b1..6b98404f 100644
--- a/app/_components/popover.tsx
+++ b/app/_components/popover.tsx
@@ -19,7 +19,7 @@ const Content = React.forwardRef<
         className,
       )}
       onOpenAutoFocus={(e) => e.preventDefault()}
-      sideOffset={8}
+      sideOffset={7}
       {...props}
     />
   </PopoverPrimitive.Portal>
diff --git a/app/_components/select.tsx b/app/_components/select.tsx
index 311ac53e..055cbcf5 100644
--- a/app/_components/select.tsx
+++ b/app/_components/select.tsx
@@ -50,7 +50,7 @@ const ClearIndicator = <TOption extends IOption>(
   props: ClearIndicatorProps<TOption>,
 ) => (
   <components.ClearIndicator {...props}>
-    <div className="cursor-pointer p-1 text-fg-3 transition-colors hover:text-fg-2 active:text-fg-2">
+    <div className="cursor-pointer p-1 text-fg-3 transition-colors hover:text-fg-2">
       <XMarkIcon className="w-5" />
     </div>
   </components.ClearIndicator>
@@ -77,8 +77,7 @@ const Control = <TOption extends IOption>({
         menuIsOpen &&
           !(!hasNoOptionsMessage && !hasOptions) &&
           'rounded-b-none focus-within:ring-0',
-        selectProps.isDisabled &&
-          'disabled group-hover:bg-alpha-1 group-active:bg-alpha-1',
+        selectProps.isDisabled && 'disabled group-hover:bg-alpha-1',
         selectProps.className,
       )}
       menuIsOpen={menuIsOpen}
@@ -91,7 +90,7 @@ const Control = <TOption extends IOption>({
 };
 
 const DropdownIndicator = () => (
-  <ChevronUpDownIcon className="mx-1 w-5 text-fg-3 transition-colors group-hover:text-fg-2 group-active:text-fg-2" />
+  <ChevronUpDownIcon className="mx-1 w-5 text-fg-3 transition-colors group-hover:text-fg-2" />
 );
 
 const GroupHeading = <TOption extends IOption>(
@@ -132,7 +131,10 @@ const Menu = <TOption extends IOption>({
   children,
   ...props
 }: MenuProps<TOption>) => (
-  <components.Menu className="rounded-b bg-bg-2 drop-shadow" {...props}>
+  <components.Menu
+    className="overflow-hidden rounded-b bg-bg-2 drop-shadow"
+    {...props}
+  >
     <div className="rounded-b border border-t-0 border-alpha-1 bg-alpha-2">
       {children}
     </div>
@@ -197,7 +199,7 @@ const MultiValueLabel = <TOption extends IOption>({
 
 const MultiValueRemove = (props: MultiValueRemoveProps) => (
   <components.MultiValueRemove {...props}>
-    <div className="-m-1 p-1 pr-1.5 text-fg-3 transition-colors hover:text-fg-2 active:text-fg-2">
+    <div className="-m-1 p-1 pr-1.5 text-fg-3 transition-colors hover:text-fg-2">
       <XMarkIcon className="w-5" />
     </div>
   </components.MultiValueRemove>
diff --git a/app/_components/session-form.tsx b/app/_components/session-form.tsx
index 77894152..2ca6a252 100644
--- a/app/_components/session-form.tsx
+++ b/app/_components/session-form.tsx
@@ -7,8 +7,7 @@ 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 SessionLayout from '@/_components/session-layout';
-import SessionMenu from '@/_components/session-menu';
+import Select from '@/_components/select';
 import Tip from '@/_components/tip';
 import UnsavedChangesBanner from '@/_components/unsaved-changes-banner';
 import useCachedForm from '@/_hooks/use-cached-form';
@@ -18,7 +17,7 @@ import { GetTrainingPlanWithSessionsData } from '@/_queries/get-training-plan-wi
 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 { Database } from '@/_types/database';
+import { SessionTemplateDataJson } from '@/_types/session-template-data-json';
 import forceArray from '@/_utilities/force-array';
 import formatDatetimeLocal from '@/_utilities/format-datetime-local';
 import getFormCacheKey from '@/_utilities/get-form-cache-key';
@@ -27,6 +26,7 @@ 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';
@@ -35,7 +35,8 @@ import { useFieldArray } from 'react-hook-form';
 
 interface SessionFormProps {
   availableInputs: NonNullable<ListInputsBySubjectIdData>;
-  availableTemplates: NonNullable<ListTemplatesWithDataData>;
+  availableModuleTemplates: NonNullable<ListTemplatesWithDataData>;
+  availableSessionTemplates: NonNullable<ListTemplatesWithDataData>;
   isDuplicate?: boolean;
   mission: NonNullable<GetTrainingPlanWithSessionsData>;
   order?: string;
@@ -49,7 +50,7 @@ export type SessionFormValues = {
   modules: Array<{
     content: string;
     id?: string;
-    inputs: Array<Database['public']['Tables']['inputs']['Row']>;
+    inputs: NonNullable<ListInputsBySubjectIdData>;
     name?: string | null;
   }>;
   scheduledFor: string | null;
@@ -58,7 +59,8 @@ export type SessionFormValues = {
 
 const SessionForm = ({
   availableInputs,
-  availableTemplates,
+  availableModuleTemplates,
+  availableSessionTemplates,
   isDuplicate,
   mission,
   order,
@@ -69,6 +71,7 @@ const SessionForm = ({
   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));
@@ -135,12 +138,7 @@ const SessionForm = ({
     toggleScheduleModal(true);
   };
 
-  const {
-    highestOrder,
-    highestPublishedOrder,
-    nextSessionId,
-    previousSessionId,
-  } = parseSessions({
+  const { highestPublishedOrder } = parseSessions({
     currentSession: session,
     sessionOrder: currentOrder,
     sessions: mission.sessions,
@@ -150,149 +148,188 @@ const SessionForm = ({
     <Modal.Content>
       <PageModalHeader
         right={
-          <SessionMenu
-            highestPublishedOrder={highestPublishedOrder}
-            isDraft={session && !isDuplicate ? session.draft : true}
-            isDuplicate={isDuplicate}
-            isEdit
-            missionId={mission.id}
-            nextSessionOrder={highestOrder + 1}
-            order={currentOrder}
-            sessionId={session?.id}
-            subjectId={subjectId}
-          />
+          <Modal.Root
+            onOpenChange={toggleUseTemplateModal}
+            open={useTemplateModal}
+          >
+            <Modal.Trigger asChild>
+              <Button className="sm:pr-6" variant="link">
+                <DocumentTextIcon className="w-5 text-fg-4" />
+                Use a template
+              </Button>
+            </Modal.Trigger>
+            <Modal.Portal>
+              <Modal.Overlay>
+                <Modal.Content className="max-w-sm p-8 text-center">
+                  <Modal.Title className="text-2xl">Use a template</Modal.Title>
+                  <Modal.Description className="mt-4 px-4 text-fg-4">
+                    Selecting a template will overwrite any existing session
+                    modules.
+                  </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;
+
+                        form.setValue('title', template.name, {
+                          shouldDirty: true,
+                        });
+
+                        form.setValue(
+                          'modules',
+                          (data?.modules ?? []).map((module) => ({
+                            content: module.content ?? '',
+                            inputs: availableInputs.filter((input) =>
+                              module.inputIds?.some((id) => id === input.id),
+                            ),
+                            name: module.name,
+                          })),
+                          { shouldDirty: true },
+                        );
+
+                        toggleUseTemplateModal();
+                      }}
+                      options={availableSessionTemplates}
+                      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>
         }
-        title={mission.name}
+        title={session && !isDuplicate ? 'Edit session' : 'New session'}
       />
-      <SessionLayout
-        highestOrder={highestOrder}
-        isCreate={!session}
-        isEdit={!!session}
-        missionId={mission.id}
-        nextSessionId={nextSessionId}
-        order={order}
-        previousSessionId={previousSessionId}
-        sessionId={session?.id}
-        sessions={mission.sessions}
-        subjectId={subjectId}
-      >
-        <form
-          className="flex flex-col gap-8 px-4 pb-8 pt-16 sm:px-8"
-          onSubmit={form.handleSubmit((values) =>
-            startTransition(async () => {
-              values.scheduledFor = values.scheduledFor
-                ? new Date(values.scheduledFor).toISOString()
-                : null;
+      <form
+        className="flex flex-col gap-8 px-4 pb-8 pt-6 sm:px-8"
+        onSubmit={form.handleSubmit((values) =>
+          startTransition(async () => {
+            values.scheduledFor = values.scheduledFor
+              ? new Date(values.scheduledFor).toISOString()
+              : null;
 
-              const res = await upsertSession(
-                {
+            const res = await upsertSession(
+              {
+                currentOrder,
+                missionId: mission.id,
+                publishedOrder: Math.min(
                   currentOrder,
-                  missionId: mission.id,
-                  publishedOrder: Math.min(
-                    currentOrder,
-                    highestPublishedOrder + 1,
-                  ),
-                  sessionId: isDuplicate ? undefined : session?.id,
-                  subjectId,
-                },
-                values,
-              );
+                  highestPublishedOrder + 1,
+                ),
+                sessionId: isDuplicate ? undefined : session?.id,
+                subjectId,
+              },
+              values,
+            );
 
-              if (res?.error) {
-                form.setError('root', { message: res.error, type: 'custom' });
-                return;
-              }
+            if (res?.error) {
+              form.setError('root', { message: res.error, type: 'custom' });
+              return;
+            }
 
-              router.back();
-            }),
-          )}
-        >
-          <div className="flex items-center gap-6">
-            <Input
-              placeholder="Session title"
-              maxLength={49}
-              {...form.register('title')}
-            />
-            <Modal.Root onOpenChange={cancelScheduleModal} open={scheduleModal}>
-              <Modal.Trigger asChild onClick={(e) => e.preventDefault()}>
-                <Button
-                  className="shrink-0"
-                  disabled={hasEvents}
-                  onClick={openScheduleModal}
-                  variant="link"
-                >
-                  <ClockIcon className="w-5" />
-                  {scheduledFor ? (
+            router.back();
+          }),
+        )}
+      >
+        <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" />
-                  ) : (
-                    '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();
+                  </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);
                         }}
-                        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>
+                      >
+                        Clear
+                      </Button>
+                      <Button
+                        className="w-full"
+                        disabled={!scheduledFor}
+                        onClick={() => toggleScheduleModal(false)}
+                      >
+                        Schedule
+                      </Button>
                     </div>
-                  </Modal.Content>
-                </Modal.Overlay>
-              </Modal.Portal>
-            </Modal.Root>
-          </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}
@@ -315,7 +352,7 @@ const SessionForm = ({
                 {modulesArray.fields.map((module, eventTypeIndex) => (
                   <ModuleFormSection<SessionFormValues, 'modules'>
                     availableInputs={availableInputs}
-                    availableTemplates={availableTemplates}
+                    availableTemplates={availableModuleTemplates}
                     eventTypeArray={modulesArray}
                     eventTypeIndex={eventTypeIndex}
                     eventTypeKey={module.key}
@@ -329,10 +366,10 @@ const SessionForm = ({
               </DndSortable.SortableContext>
             </DndCore.DndContext>
           </ul>
-          <div className="flex items-center gap-4">
+          <div className="mt-4 flex items-center gap-4">
             <Tip side="right">
-              Modules break up your session and allow you to capture inputs at
-              different points. You can add as many modules as you need.
+              Modules break up your sessions into sections with inputs. You can
+              add as many modules as you need.
             </Tip>
             <Button
               className="w-full"
@@ -345,36 +382,36 @@ const SessionForm = ({
               Add module
             </Button>
           </div>
-          {form.formState.errors.root && (
-            <div className="text-center">
-              {form.formState.errors.root.message}
-            </div>
-          )}
-          <div className="flex flex-row gap-4 pt-8">
-            {draft && (
-              <Button
-                className="w-full"
-                colorScheme="transparent"
-                loading={isTransitioning}
-                loadingText="Saving…"
-                type="submit"
-              >
-                Save as draft
-              </Button>
-            )}
+        </div>
+        {form.formState.errors.root && (
+          <div className="text-center">
+            {form.formState.errors.root.message}
+          </div>
+        )}
+        <div className="flex flex-row gap-4 pt-8">
+          {draft && (
             <Button
               className="w-full"
-              loading={!draft && isTransitioning}
+              colorScheme="transparent"
+              loading={isTransitioning}
               loadingText="Saving…"
-              onClick={() => form.setValue('draft', false)}
               type="submit"
             >
-              {draft ? <>Save &amp; publish</> : <>Save</>}
+              Save as draft
             </Button>
-          </div>
-          <UnsavedChangesBanner<SessionFormValues> form={form} />
-        </form>
-      </SessionLayout>
+          )}
+          <Button
+            className="w-full"
+            loading={!draft && isTransitioning}
+            loadingText="Saving…"
+            onClick={() => form.setValue('draft', false)}
+            type="submit"
+          >
+            {draft ? <>Save &amp; publish</> : <>Save</>}
+          </Button>
+        </div>
+        <UnsavedChangesBanner<SessionFormValues> form={form} />
+      </form>
       <PageModalBackButton
         className="m-0 block w-full py-6 text-center"
         variant="link"
diff --git a/app/_components/session-layout.tsx b/app/_components/session-layout.tsx
deleted file mode 100644
index 3a5cc27a..00000000
--- a/app/_components/session-layout.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import IconButton from '@/_components/icon-button';
-import { GetTrainingPlanWithSessionsData } from '@/_queries/get-training-plan-with-sessions';
-import ChevronLeftIcon from '@heroicons/react/24/outline/ChevronLeftIcon';
-import ChevronRightIcon from '@heroicons/react/24/outline/ChevronRightIcon';
-import PlusIcon from '@heroicons/react/24/outline/PlusIcon';
-import { ReactNode } from 'react';
-
-interface SessionLayoutProps {
-  children: ReactNode;
-  highestOrder: number;
-  isCreate?: boolean;
-  isEdit?: boolean;
-  isPublic?: boolean;
-  missionId: string;
-  nextSessionId: string | null;
-  order?: string;
-  previousSessionId: string | null;
-  sessionId?: string;
-  sessions: NonNullable<GetTrainingPlanWithSessionsData>['sessions'];
-  subjectId: string;
-}
-
-const SessionLayout = ({
-  children,
-  highestOrder,
-  isCreate,
-  isEdit,
-  isPublic,
-  missionId,
-  nextSessionId,
-  order,
-  previousSessionId,
-  sessionId,
-  sessions,
-  subjectId,
-}: SessionLayoutProps) => {
-  const isEditOrCreate = isCreate || isEdit;
-  const currentSession = sessions.find(({ id }) => id === sessionId);
-  const sessionOrder = order ? Number(order) : currentSession?.order;
-  if (typeof sessionOrder === 'undefined') return null;
-  const shareOrSubjects = isPublic ? 'share' : 'subjects';
-
-  if (
-    isEditOrCreate &&
-    sessions.length > 0 &&
-    !previousSessionId &&
-    !nextSessionId
-  ) {
-    sessions.some((session) => {
-      if (session.order < sessionOrder) {
-        previousSessionId = session.id;
-      } else if (session.order > sessionOrder) {
-        nextSessionId = session.id;
-        return true;
-      }
-    });
-  }
-
-  const editSuffix = isEditOrCreate ? '/edit' : '';
-  const nextSessionOrder = highestOrder + 1;
-
-  return (
-    <>
-      <nav className="flex w-full items-center justify-between px-4 sm:px-8">
-        <IconButton
-          disabled={!previousSessionId}
-          href={`/${shareOrSubjects}/${subjectId}/training-plans/${missionId}/sessions/${previousSessionId}${editSuffix}`}
-          icon={<ChevronLeftIcon className="relative left-1 w-7" />}
-          label="Previous session"
-          replace
-          scroll={false}
-        />
-        <div className="flex items-baseline gap-4">
-          <span className="smallcaps text-fg-4">
-            Session {sessionOrder + 1}
-            {!isEditOrCreate && <> of {highestOrder + 1}</>}
-          </span>
-          {(currentSession?.draft || order) && (
-            <span className="smallcaps text-fg-4">Draft</span>
-          )}
-        </div>
-        {isEditOrCreate && !nextSessionId ? (
-          <IconButton
-            disabled={isCreate}
-            href={`/${shareOrSubjects}/${subjectId}/training-plans/${missionId}/sessions/create/${nextSessionOrder}`}
-            icon={<PlusIcon className="relative right-1 w-7" />}
-            label="New session"
-            replace
-            scroll={false}
-          />
-        ) : (
-          <IconButton
-            disabled={!nextSessionId}
-            href={`/${shareOrSubjects}/${subjectId}/training-plans/${missionId}/sessions/${nextSessionId}${editSuffix}`}
-            icon={<ChevronRightIcon className="relative right-1 w-7" />}
-            label="Next session"
-            replace
-            scroll={false}
-          />
-        )}
-      </nav>
-      {children}
-    </>
-  );
-};
-
-export default SessionLayout;
diff --git a/app/_components/session-menu.tsx b/app/_components/session-menu.tsx
index 2ddf5efd..661a0168 100644
--- a/app/_components/session-menu.tsx
+++ b/app/_components/session-menu.tsx
@@ -6,35 +6,29 @@ import IconButton from '@/_components/icon-button';
 import deleteSession from '@/_mutations/delete-session';
 import moveSession from '@/_mutations/move-session';
 import ArrowDownIcon from '@heroicons/react/24/outline/ArrowDownIcon';
-import ArrowLeftIcon from '@heroicons/react/24/outline/ArrowLeftIcon';
-import ArrowRightIcon from '@heroicons/react/24/outline/ArrowRightIcon';
 import ArrowUpIcon from '@heroicons/react/24/outline/ArrowUpIcon';
 import DocumentDuplicateIcon from '@heroicons/react/24/outline/DocumentDuplicateIcon';
 import EllipsisVerticalIcon from '@heroicons/react/24/outline/EllipsisVerticalIcon';
-import EyeIcon from '@heroicons/react/24/outline/EyeIcon';
 import PencilIcon from '@heroicons/react/24/outline/PencilIcon';
+import PlusIcon from '@heroicons/react/24/outline/PlusIcon';
 import { useRouter } from 'next/navigation';
 import { useTransition } from 'react';
 
 interface SessionMenuProps {
   highestPublishedOrder: number;
   isDraft: boolean;
-  isDuplicate?: boolean;
-  isEdit?: boolean;
   isList?: boolean;
   isView?: boolean;
   missionId: string;
   nextSessionOrder: number;
   order: number;
-  sessionId?: string;
+  sessionId: string;
   subjectId: string;
 }
 
 const SessionMenu = ({
   highestPublishedOrder,
   isDraft,
-  isDuplicate,
-  isEdit,
   isList,
   isView,
   missionId,
@@ -50,45 +44,41 @@ const SessionMenu = ({
   return (
     <DropdownMenu.Root>
       <DropdownMenu.Trigger>
-        {isView || isEdit ? (
+        {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 active:text-fg-2 sm:mr-6">
-            <div className="rounded-full p-2 group-hover:bg-alpha-1 group-active:bg-alpha-1">
+          <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">
               <EllipsisVerticalIcon className="w-5" />
             </div>
           </div>
         )}
       </DropdownMenu.Trigger>
       <DropdownMenu.Portal>
-        <DropdownMenu.Content>
-          {isEdit && !isDraft && (
-            <DropdownMenu.Button
-              href={`/subjects/${subjectId}/training-plans/${missionId}/sessions/${sessionId}`}
-              scroll={false}
-            >
-              <EyeIcon className="w-5 text-fg-4" />
-              View
-            </DropdownMenu.Button>
-          )}
-          {(isList || isView) && (
-            <DropdownMenu.Button
-              href={`/subjects/${subjectId}/training-plans/${missionId}/sessions/${sessionId}/edit`}
-              scroll={false}
-            >
-              <PencilIcon className="w-5 text-fg-4" />
-              Edit
-            </DropdownMenu.Button>
-          )}
-          {sessionId && !isDuplicate ? (
+        <DropdownMenu.Content className="mx-2" sideOffset={-2}>
+          <DropdownMenu.Button
+            href={`/subjects/${subjectId}/training-plans/${missionId}/sessions/${sessionId}/edit`}
+            scroll={false}
+          >
+            <PencilIcon className="w-5 text-fg-4" />
+            Edit
+          </DropdownMenu.Button>
+          <DropdownMenu.Button
+            href={`/subjects/${subjectId}/training-plans/${missionId}/sessions/create/${nextSessionOrder}/from-session/${sessionId}`}
+            scroll={false}
+          >
+            <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.Button
-                href={`/subjects/${subjectId}/training-plans/${missionId}/sessions/create/${nextSessionOrder}/from-session/${sessionId}`}
-                scroll={false}
-              >
-                <DocumentDuplicateIcon className="w-5 text-fg-4" />
-                Duplicate
-              </DropdownMenu.Button>
               <DropdownMenu.Button
                 disabled={!isDraft && order >= highestPublishedOrder}
                 loading={isMoveRightTransitioning}
@@ -105,17 +95,8 @@ const SessionMenu = ({
                   )
                 }
               >
-                {isList ? (
-                  <>
-                    <ArrowUpIcon className="w-5 text-fg-4" />
-                    Move up
-                  </>
-                ) : (
-                  <>
-                    <ArrowRightIcon className="w-5 text-fg-4" />
-                    Move right
-                  </>
-                )}
+                <ArrowUpIcon className="w-5 text-fg-4" />
+                Move up
               </DropdownMenu.Button>
               <DropdownMenu.Button
                 disabled={order < 1}
@@ -133,56 +114,27 @@ const SessionMenu = ({
                   );
                 }}
               >
-                {isList ? (
-                  <>
-                    <ArrowDownIcon className="w-5 text-fg-4" />
-                    Move down
-                  </>
-                ) : (
-                  <>
-                    <ArrowLeftIcon className="w-5 text-fg-4" />
-                    Move left
-                  </>
-                )}
-              </DropdownMenu.Button>
-              <DropdownMenuDeleteItem
-                confirmText="Delete session"
-                onConfirm={async () => {
-                  await deleteSession({
-                    currentOrder: order,
-                    missionId: missionId,
-                    sessionId,
-                  });
-
-                  if (!isList) {
-                    router.replace(
-                      `/subjects/${subjectId}/training-plans/${missionId}/sessions`,
-                    );
-                  }
-                }}
-              />
-            </>
-          ) : (
-            <>
-              <DropdownMenu.Button
-                disabled={order < 1}
-                href={`/subjects/${subjectId}/training-plans/${missionId}/sessions/create/${order - 1}${isDuplicate ? `/from-session/${sessionId}` : ''}`}
-                replace
-                scroll={false}
-              >
-                <ArrowLeftIcon className="w-5 text-fg-4" />
-                Move left
-              </DropdownMenu.Button>
-              <DropdownMenu.Button
-                href={`/subjects/${subjectId}/training-plans/${missionId}/sessions/create/${order + 1}${isDuplicate ? `/from-session/${sessionId}` : ''}`}
-                replace
-                scroll={false}
-              >
-                <ArrowRightIcon className="w-5 text-fg-4" />
-                Move right
+                <ArrowDownIcon className="w-5 text-fg-4" />
+                Move down
               </DropdownMenu.Button>
             </>
           )}
+          <DropdownMenuDeleteItem
+            confirmText="Delete session"
+            onConfirm={async () => {
+              await deleteSession({
+                currentOrder: order,
+                missionId: missionId,
+                sessionId,
+              });
+
+              if (!isList) {
+                router.replace(
+                  `/subjects/${subjectId}/training-plans/${missionId}/sessions`,
+                );
+              }
+            }}
+          />
         </DropdownMenu.Content>
       </DropdownMenu.Portal>
     </DropdownMenu.Root>
diff --git a/app/_components/session-page.tsx b/app/_components/session-page.tsx
index ba4f1dd0..889de68a 100644
--- a/app/_components/session-page.tsx
+++ b/app/_components/session-page.tsx
@@ -1,11 +1,11 @@
 import Button from '@/_components/button';
 import DateTime from '@/_components/date-time';
 import Empty from '@/_components/empty';
+import IconButton from '@/_components/icon-button';
 import * as Modal from '@/_components/modal';
 import ModuleCard from '@/_components/module-card';
 import PageModalBackButton from '@/_components/page-modal-back-button';
 import PageModalHeader from '@/_components/page-modal-header';
-import SessionLayout from '@/_components/session-layout';
 import SessionMenu from '@/_components/session-menu';
 import getCurrentUser from '@/_queries/get-current-user';
 import getPublicSessionWithDetails from '@/_queries/get-public-session-with-details';
@@ -18,6 +18,8 @@ import firstIfArray from '@/_utilities/first-if-array';
 import parseSessions from '@/_utilities/parse-sessions';
 import ArrowUpRightIcon from '@heroicons/react/24/outline/ArrowUpRightIcon';
 import CalendarDaysIcon from '@heroicons/react/24/outline/CalendarDaysIcon';
+import ChevronLeftIcon from '@heroicons/react/24/outline/ChevronLeftIcon';
+import ChevronRightIcon from '@heroicons/react/24/outline/ChevronRightIcon';
 
 interface SessionPageProps {
   isPublic?: boolean;
@@ -45,11 +47,16 @@ const SessionPage = async ({
     ]);
 
   if (!subject || !trainingPlan || !session) return null;
+  const currentSession = trainingPlan.sessions.find((s) => s.id === sessionId);
+  if (!currentSession) return null;
+
   const isTeamMember = !!user && subject.team_id === user.id;
   const shareOrSubjects = isPublic ? 'share' : 'subjects';
 
-  const {
+  let {
+    // eslint-disable-next-line prefer-const
     highestOrder,
+    // eslint-disable-next-line prefer-const
     highestPublishedOrder,
     nextSessionId,
     previousSessionId,
@@ -59,6 +66,21 @@ const SessionPage = async ({
     sessions: trainingPlan.sessions,
   });
 
+  if (
+    trainingPlan.sessions.length > 0 &&
+    !previousSessionId &&
+    !nextSessionId
+  ) {
+    trainingPlan.sessions.some((session) => {
+      if (session.order < currentSession.order) {
+        previousSessionId = session.id;
+      } else if (session.order > currentSession.order) {
+        nextSessionId = session.id;
+        return true;
+      }
+    });
+  }
+
   return (
     <Modal.Content>
       <PageModalHeader
@@ -89,66 +111,75 @@ const SessionPage = async ({
         }
         title={trainingPlan.name}
       />
-      <SessionLayout
-        highestOrder={highestOrder}
-        isPublic={isPublic}
-        missionId={missionId}
-        nextSessionId={nextSessionId}
-        previousSessionId={previousSessionId}
-        sessionId={sessionId}
-        sessions={trainingPlan.sessions}
-        subjectId={subjectId}
-      >
-        {session.scheduled_for &&
-        new Date(session.scheduled_for) > new Date() ? (
-          <Empty className="mt-6 border-0">
-            <CalendarDaysIcon className="w-7" />
-            <p>
-              Scheduled for{' '}
-              <DateTime
-                className="inline"
-                date={session.scheduled_for}
-                formatter="date-time"
-              />
-            </p>
-          </Empty>
-        ) : (
-          <>
-            {session.title && (
-              <p className="mx-auto max-w-xs px-4 text-center">
-                {session.title}
-              </p>
-            )}
-            <ul className="mt-8 space-y-4 border-y border-alpha-1 bg-alpha-reverse-2 py-4">
-              {session.modules.map((module, i) => {
-                const event = firstIfArray(module.event);
-                const previousModuleEvent = session.modules[i - 1]?.event;
+      <nav className="flex w-full items-center justify-between px-4 sm:px-8">
+        <IconButton
+          disabled={!previousSessionId}
+          href={`/${shareOrSubjects}/${subjectId}/training-plans/${missionId}/sessions/${previousSessionId}`}
+          icon={<ChevronLeftIcon className="relative left-1 w-7" />}
+          label="Previous session"
+          replace
+          scroll={false}
+        />
+        <div className="flex items-baseline gap-4">
+          <span className="smallcaps text-fg-4">
+            Session {currentSession.order + 1} of {highestOrder + 1}
+          </span>
+          {currentSession.draft && (
+            <span className="smallcaps text-fg-4">Draft</span>
+          )}
+        </div>
+        <IconButton
+          disabled={!nextSessionId}
+          href={`/${shareOrSubjects}/${subjectId}/training-plans/${missionId}/sessions/${nextSessionId}`}
+          icon={<ChevronRightIcon className="relative right-1 w-7" />}
+          label="Next session"
+          replace
+          scroll={false}
+        />
+      </nav>
+      {session.scheduled_for && new Date(session.scheduled_for) > new Date() ? (
+        <Empty className="mt-6 border-0">
+          <CalendarDaysIcon className="w-7" />
+          <p>
+            Scheduled for{' '}
+            <DateTime
+              className="inline"
+              date={session.scheduled_for}
+              formatter="date-time"
+            />
+          </p>
+        </Empty>
+      ) : (
+        <>
+          {session.title && (
+            <p className="mx-auto max-w-xs px-4 text-center">{session.title}</p>
+          )}
+          <ul className="mt-8 space-y-4 border-y border-alpha-1 bg-alpha-reverse-2 py-4">
+            {session.modules.map((module, i) => {
+              const event = firstIfArray(module.event);
+              const previousModuleEvent = session.modules[i - 1]?.event;
 
-                return (
-                  <li
-                    className="border-y border-alpha-1 bg-bg-2"
-                    key={module.id}
-                  >
-                    <ModuleCard
-                      event={event}
-                      eventType={module}
-                      isArchived={subject.archived}
-                      isPreviousModulePending={
-                        previousModuleEvent && !previousModuleEvent.length
-                      }
-                      isPublic={isPublic}
-                      isTeamMember={isTeamMember}
-                      mission={trainingPlan}
-                      subjectId={subjectId}
-                      user={user}
-                    />
-                  </li>
-                );
-              })}
-            </ul>
-          </>
-        )}
-      </SessionLayout>
+              return (
+                <li className="border-y border-alpha-1 bg-bg-2" key={module.id}>
+                  <ModuleCard
+                    event={event}
+                    eventType={module}
+                    isArchived={subject.archived}
+                    isPreviousModulePending={
+                      previousModuleEvent && !previousModuleEvent.length
+                    }
+                    isPublic={isPublic}
+                    isTeamMember={isTeamMember}
+                    mission={trainingPlan}
+                    subjectId={subjectId}
+                    user={user}
+                  />
+                </li>
+              );
+            })}
+          </ul>
+        </>
+      )}
       <PageModalBackButton
         className="m-0 block w-full py-6 text-center"
         variant="link"
diff --git a/app/_components/session-template-form.tsx b/app/_components/session-template-form.tsx
new file mode 100644
index 00000000..3387859f
--- /dev/null
+++ b/app/_components/session-template-form.tsx
@@ -0,0 +1,178 @@
+'use client';
+
+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 UnsavedChangesBanner from '@/_components/unsaved-changes-banner';
+import useCachedForm from '@/_hooks/use-cached-form';
+import upsertSessionTemplate from '@/_mutations/upsert-session-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 { 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>;
+  disableCache?: boolean;
+  isDuplicate?: boolean;
+  subjects: NonNullable<ListSubjectsByTeamIdData>;
+  template?: Partial<GetTemplateData>;
+}
+
+export type SessionTemplateFormValues = {
+  modules: Array<{
+    content: string;
+    inputs: Array<Database['public']['Tables']['inputs']['Row']>;
+    name?: string | null;
+  }>;
+  name: string;
+};
+
+const SessionTemplateForm = ({
+  availableInputs,
+  availableTemplates,
+  disableCache,
+  isDuplicate,
+  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({
+    id: template?.id,
+    isDuplicate,
+  });
+
+  const form = useCachedForm<SessionTemplateFormValues>(
+    cacheKey,
+    {
+      defaultValues: {
+        modules: templateData?.modules?.length
+          ? templateData.modules.map((module) => ({
+              content: module.content,
+              inputs: availableInputs.filter((input) =>
+                module.inputIds?.includes(input.id),
+              ),
+              name: module.name,
+            }))
+          : [{ content: '', inputs: [], name: '' }],
+        name: template?.name ?? '',
+      },
+    },
+    { 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"
+      onSubmit={stopPropagation(
+        form.handleSubmit((values) =>
+          startTransition(async () => {
+            const res = await upsertSessionTemplate(
+              { templateId: template?.id },
+              values,
+            );
+
+            if (res?.error) {
+              form.setError('root', { message: res.error, type: 'custom' });
+            } else {
+              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>
+      {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">
+          Close
+        </PageModalBackButton>
+        <Button
+          className="w-full"
+          loading={isTransitioning}
+          loadingText="Saving…"
+          type="submit"
+        >
+          Save
+        </Button>
+      </div>
+      {!disableCache && (
+        <UnsavedChangesBanner<SessionTemplateFormValues> form={form} />
+      )}
+    </form>
+  );
+};
+
+export default SessionTemplateForm;
diff --git a/app/_components/sessions-page.tsx b/app/_components/sessions-page.tsx
index 7c186f23..921384c2 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 active:bg-alpha-1"
+                className="flex items-stretch gap-2 hover:bg-alpha-1"
                 key={session.id}
               >
                 <Button
diff --git a/app/_components/subject-events-date-filter.tsx b/app/_components/subject-events-date-filter.tsx
index 707113c2..4ec5bacc 100644
--- a/app/_components/subject-events-date-filter.tsx
+++ b/app/_components/subject-events-date-filter.tsx
@@ -53,7 +53,7 @@ const SubjectEventsDateFilter = () => {
           )}
         </Button>
       </Popover.Trigger>
-      <Popover.Content align="start" className="my-2" sideOffset={0}>
+      <Popover.Content align="start">
         <Calendar
           defaultMonth={opDate?.to ?? opDate?.from}
           disabled={{ after: new Date() }}
diff --git a/app/_components/subject-form.tsx b/app/_components/subject-form.tsx
index 60c2e56a..60e644af 100644
--- a/app/_components/subject-form.tsx
+++ b/app/_components/subject-form.tsx
@@ -137,24 +137,15 @@ const SubjectForm = ({ subject }: SubjectFormProps) => {
           {!!linkArray.fields.length && (
             <ul className="flex flex-col gap-2">
               {linkArray.fields.map((link, linkIndex) => (
-                <li key={link.id}>
+                <li className="relative" key={link.id}>
                   <Controller
                     control={form.control}
                     name={`data.links.${linkIndex}.label`}
                     render={({ field }) => (
                       <Input
-                        className="rounded-b-none border-b-0"
+                        className="rounded-b-none border-b-0 pr-[2.4rem]"
                         placeholder="Label…"
                         required
-                        right={
-                          <IconButton
-                            className="m-0 h-full w-full justify-center p-0"
-                            icon={<XMarkIcon className="w-5" />}
-                            label="Delete link"
-                            onClick={() => linkArray.remove(linkIndex)}
-                            tabIndex={-1}
-                          />
-                        }
                         {...field}
                       />
                     )}
@@ -172,6 +163,15 @@ const SubjectForm = ({ subject }: SubjectFormProps) => {
                       />
                     )}
                   />
+                  <div className="absolute right-0 top-0 flex h-[2.625rem] w-[2.4rem] items-center justify-center">
+                    <IconButton
+                      className="m-0 h-full w-full justify-center p-0"
+                      icon={<XMarkIcon className="w-5" />}
+                      label="Delete link"
+                      onClick={() => linkArray.remove(linkIndex)}
+                      tabIndex={-1}
+                    />
+                  </div>
                 </li>
               ))}
             </ul>
diff --git a/app/_components/subject-list.tsx b/app/_components/subject-list.tsx
index c95b24e5..cb89b1b8 100644
--- a/app/_components/subject-list.tsx
+++ b/app/_components/subject-list.tsx
@@ -19,10 +19,7 @@ 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 active:bg-alpha-1"
-            key={subject.id}
-          >
+          <li className="flex items-stretch 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}`}
@@ -46,7 +43,7 @@ const SubjectList = async ({
         {clientSubjects.map((subject) => (
           <li key={subject.id}>
             <Button
-              className="m-0 w-full gap-6 px-4 py-3 leading-snug hover:bg-alpha-1 active:bg-alpha-1"
+              className="m-0 w-full gap-6 px-4 py-3 leading-snug hover:bg-alpha-1"
               href={`/subjects/${subject.id}`}
               variant="link"
             >
diff --git a/app/_components/subject-loading.tsx b/app/_components/subject-loading.tsx
index 424e4452..951b7210 100644
--- a/app/_components/subject-loading.tsx
+++ b/app/_components/subject-loading.tsx
@@ -4,8 +4,8 @@ import ArrowLeftIcon from '@heroicons/react/24/outline/ArrowLeftIcon';
 
 const SubjectLoading = () => (
   <>
-    <div className="my-16 flex h-8 items-center justify-between gap-8 px-4">
-      <div className="flex items-center gap-6">
+    <div className="my-16 flex h-8 items-center justify-between gap-4 px-4">
+      <div className="flex items-center gap-4">
         <IconButton
           icon={<ArrowLeftIcon className="relative -left-[0.16em] w-7" />}
         />
diff --git a/app/_components/subject-menu.tsx b/app/_components/subject-menu.tsx
index eeef59e3..da4fba99 100644
--- a/app/_components/subject-menu.tsx
+++ b/app/_components/subject-menu.tsx
@@ -26,6 +26,7 @@ import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon';
 import { useCopyToClipboard, useToggle } from '@uidotdev/usehooks';
 import { useRouter } from 'next/navigation';
 import { useOptimistic, useRef, useTransition } from 'react';
+import { twMerge } from 'tailwind-merge';
 
 interface SubjectMenuProps {
   canUnarchive?: boolean;
@@ -50,24 +51,23 @@ 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 active:text-fg-2">
-            <div className="rounded-full p-2 group-hover:bg-alpha-1 group-active:bg-alpha-1">
+          <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">
               <EllipsisVerticalIcon className="w-5" />
             </div>
           </div>
         ) : (
-          <div className="flex gap-2 rounded-sm border border-alpha-3 pl-2 transition-colors hover:bg-alpha-1 active:bg-alpha-1">
+          <div className="flex gap-2 rounded-sm border border-alpha-3 pl-2 transition-colors hover:bg-alpha-1">
             <Bars3Icon className="w-5" />
-            <Avatar
-              className="-m-px"
-              file={subject.image_uri}
-              id={subject.id}
-            />
+            <Avatar file={subject.image_uri} id={subject.id} />
           </div>
         )}
       </DropdownMenu.Trigger>
       <DropdownMenu.Portal>
-        <DropdownMenu.Content>
+        <DropdownMenu.Content
+          className={twMerge(isList && 'mx-2')}
+          sideOffset={isList ? -2 : 7}
+        >
           <DropdownMenu.Button
             href={`/subjects/${subject.id}/edit`}
             scroll={false}
diff --git a/app/_components/subject-page.tsx b/app/_components/subject-page.tsx
index 9c45843c..78e8a93b 100644
--- a/app/_components/subject-page.tsx
+++ b/app/_components/subject-page.tsx
@@ -23,8 +23,8 @@ import ArrowLeftIcon from '@heroicons/react/24/outline/ArrowLeftIcon';
 import ArrowTopRightOnSquareIcon from '@heroicons/react/24/outline/ArrowTopRightOnSquareIcon';
 import ArrowUpRightIcon from '@heroicons/react/24/outline/ArrowUpRightIcon';
 import ChevronDownIcon from '@heroicons/react/24/outline/ChevronDownIcon';
-import InformationCircleIcon from '@heroicons/react/24/outline/InformationCircleIcon';
 import PlusIcon from '@heroicons/react/24/outline/PlusIcon';
+import TableCellsIcon from '@heroicons/react/24/outline/TableCellsIcon';
 import { twMerge } from 'tailwind-merge';
 
 interface SubjectPageProps {
@@ -65,8 +65,8 @@ const SubjectPage = async ({
 
   return (
     <div className="px-4">
-      <div className="mt-16 flex h-8 items-center justify-between gap-6">
-        <div className="flex min-w-0 items-center gap-6">
+      <div className="mt-16 flex h-8 items-center justify-between gap-4">
+        <div className="flex min-w-0 items-center gap-4">
           {!isPublic && (
             <IconButton
               href="/subjects"
@@ -77,7 +77,7 @@ const SubjectPage = async ({
           <h1 className="truncate text-2xl">{subject.name}</h1>
         </div>
         {isTeamMember && !isPublic ? (
-          <div className="flex gap-4">
+          <div className="flex shrink-0 gap-4">
             {!subject.archived && (
               <DropdownMenu.Root>
                 <DropdownMenu.Trigger>
@@ -96,7 +96,7 @@ const SubjectPage = async ({
                         <PlusIcon className="w-5 text-fg-4" />
                         Event type
                       </DropdownMenu.Button>
-                      <Tip className="absolute right-3 top-2.5" side="left">
+                      <Tip className="absolute right-3 top-2.5">
                         Use event types to track individual behaviors,
                         activities etc. For example: &ldquo;Barking&rdquo; or
                         &ldquo;Medication&rdquo;.
@@ -110,7 +110,7 @@ const SubjectPage = async ({
                         <PlusIcon className="w-5 text-fg-4" />
                         Training plan
                       </DropdownMenu.Button>
-                      <Tip className="absolute right-3 top-2.5" side="left">
+                      <Tip className="absolute right-3 top-2.5">
                         Use training plans to teach new behaviors, skills etc.
                         For example: &ldquo;Reduce separation anxiety&rdquo;.
                       </Tip>
@@ -205,7 +205,7 @@ const SubjectPage = async ({
         <>
           <div className="mx-4 mt-4 h-14 border-l-2 border-dashed border-alpha-2" />
           <Empty className="mt-4">
-            <InformationCircleIcon className="w-7" />
+            <TableCellsIcon className="w-7" />
             No events.
           </Empty>
         </>
diff --git a/app/_components/switch.tsx b/app/_components/switch.tsx
index 6ff01343..fceac3e0 100644
--- a/app/_components/switch.tsx
+++ b/app/_components/switch.tsx
@@ -11,7 +11,7 @@ const Switch = React.forwardRef<
 >(({ className, description, label, ...props }, ref) => (
   <label
     className={twMerge(
-      'input block bg-transparent py-4 text-left hover:bg-alpha-1 active:bg-alpha-1',
+      'input block bg-transparent py-4 text-left hover:bg-alpha-1',
       className,
     )}
   >
diff --git a/app/_components/template-menu.tsx b/app/_components/template-menu.tsx
index b1f1b8a1..38ee4166 100644
--- a/app/_components/template-menu.tsx
+++ b/app/_components/template-menu.tsx
@@ -12,14 +12,14 @@ interface TemplateMenuProps {
 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 active:text-fg-2">
-        <div className="rounded-full p-2 group-hover:bg-alpha-1 group-active:bg-alpha-1">
+      <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">
           <EllipsisVerticalIcon className="w-5" />
         </div>
       </div>
     </DropdownMenu.Trigger>
     <DropdownMenu.Portal>
-      <DropdownMenu.Content>
+      <DropdownMenu.Content className="mx-2" sideOffset={-2}>
         <DropdownMenuDeleteItem
           confirmText="Delete template"
           onConfirm={() => deleteTemplate(templateId)}
diff --git a/app/_components/timeline-event-card.tsx b/app/_components/timeline-event-card.tsx
index b12b09aa..bb28f3f1 100644
--- a/app/_components/timeline-event-card.tsx
+++ b/app/_components/timeline-event-card.tsx
@@ -33,7 +33,7 @@ const TimelineEventCard = ({
   return (
     <div className="relative overflow-hidden rounded border border-alpha-1 bg-bg-2 py-1">
       <Button
-        className="m-0 block p-0 px-4 py-3 hover:bg-alpha-1 active:bg-alpha-1"
+        className="m-0 block p-0 px-4 py-3 hover:bg-alpha-1"
         href={`/${shareOrSubjects}/${subjectId}/events/${event.id}`}
         scroll={false}
         variant="link"
diff --git a/app/_components/timeline-session-card.tsx b/app/_components/timeline-session-card.tsx
index 1c18a139..df8c5c51 100644
--- a/app/_components/timeline-session-card.tsx
+++ b/app/_components/timeline-session-card.tsx
@@ -42,7 +42,7 @@ const TimelineSessionCard = ({
   return (
     <div className="overflow-hidden rounded border border-alpha-1 bg-bg-2 pt-1">
       <Button
-        className="m-0 block p-0 px-4 py-3 hover:bg-alpha-1 active:bg-alpha-1"
+        className="m-0 block p-0 px-4 py-3 hover:bg-alpha-1"
         href={`/${shareOrSubjects}/${subjectId}/training-plans/${lastEventType?.session?.mission?.id}/sessions/${lastEventType?.session?.id}`}
         scroll={false}
         variant="link"
@@ -68,7 +68,7 @@ const TimelineSessionCard = ({
         <Collapsible.Trigger asChild>
           <Button
             colorScheme="transparent"
-            className="m-0 mb-1 w-full justify-between gap-6 px-4 hover:bg-alpha-1 active:bg-alpha-1"
+            className="m-0 mb-1 w-full justify-between gap-6 px-4 hover:bg-alpha-1"
             variant="link"
           >
             {group.length} completed module{group.length > 1 ? 's' : ''}
@@ -84,7 +84,7 @@ const TimelineSessionCard = ({
             {group.map((event) => (
               <li className="relative py-1" key={event.id}>
                 <Button
-                  className="m-0 block p-0 px-4 py-3 hover:bg-alpha-1 active:bg-alpha-1"
+                  className="m-0 block p-0 px-4 py-3 hover:bg-alpha-1"
                   href={`/${shareOrSubjects}/${subjectId}/events/${event.id}`}
                   scroll={false}
                   variant="link"
diff --git a/app/_components/tip.tsx b/app/_components/tip.tsx
index 14d16610..69d0111c 100644
--- a/app/_components/tip.tsx
+++ b/app/_components/tip.tsx
@@ -2,7 +2,7 @@
 
 import Button from '@/_components/button';
 import * as Popover from '@/_components/popover';
-import InformationCircleIcon from '@heroicons/react/24/outline/InformationCircleIcon';
+import QuestionMarkCircleIcon from '@heroicons/react/24/outline/QuestionMarkCircleIcon';
 import { PopoverContentProps } from '@radix-ui/react-popover';
 import { ReactNode } from 'react';
 import { twMerge } from 'tailwind-merge';
@@ -17,7 +17,7 @@ const Tip = ({ children, className, tipClassName, ...rest }: TipProps) => (
   <Popover.Root>
     <Popover.Trigger asChild>
       <Button className={className} variant="link">
-        <InformationCircleIcon className="w-5" />
+        <QuestionMarkCircleIcon className="w-5" />
       </Button>
     </Popover.Trigger>
     <Popover.Content
@@ -25,7 +25,7 @@ const Tip = ({ children, className, tipClassName, ...rest }: TipProps) => (
         'z-30 max-w-[20rem] rounded border border-alpha-2 bg-bg-3 px-6 py-4 text-center drop-shadow',
         tipClassName,
       )}
-      sideOffset={0}
+      sideOffset={-2}
       {...rest}
     >
       {children}
diff --git a/app/_components/training-plan-menu.tsx b/app/_components/training-plan-menu.tsx
index 92c92820..f9c7b888 100644
--- a/app/_components/training-plan-menu.tsx
+++ b/app/_components/training-plan-menu.tsx
@@ -6,6 +6,7 @@ import IconButton from '@/_components/icon-button';
 import deleteTrainingPlan from '@/_mutations/delete-training-plan';
 import EllipsisVerticalIcon from '@heroicons/react/24/outline/EllipsisVerticalIcon';
 import PencilIcon from '@heroicons/react/24/outline/PencilIcon';
+import PlusIcon from '@heroicons/react/24/outline/PlusIcon';
 import { useRouter } from 'next/navigation';
 
 interface TrainingPlanMenuProps {
@@ -27,15 +28,15 @@ 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 active:text-fg-2">
-            <div className="rounded-full p-2 group-hover:bg-alpha-1 group-active:bg-alpha-1">
+          <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">
               <EllipsisVerticalIcon className="w-5" />
             </div>
           </div>
         )}
       </DropdownMenu.Trigger>
       <DropdownMenu.Portal>
-        <DropdownMenu.Content>
+        <DropdownMenu.Content className="mx-2" sideOffset={-2}>
           <DropdownMenu.Button
             href={`/subjects/${subjectId}/training-plans/${missionId}/edit`}
             scroll={false}
@@ -43,6 +44,13 @@ const TrainingPlanMenu = ({
             <PencilIcon className="w-5 text-fg-4" />
             Edit name
           </DropdownMenu.Button>
+          <DropdownMenu.Button
+            href={`/templates/training-plans/create/from-training-plan/${missionId}`}
+            scroll={false}
+          >
+            <PlusIcon className="w-5 text-fg-4" />
+            New template
+          </DropdownMenu.Button>
           <DropdownMenuDeleteItem
             confirmText="Delete training plan"
             onConfirm={async () => {
diff --git a/app/_components/training-plan-use-template-modal.tsx b/app/_components/training-plan-use-template-modal.tsx
new file mode 100644
index 00000000..81f5d1c8
--- /dev/null
+++ b/app/_components/training-plan-use-template-modal.tsx
@@ -0,0 +1,51 @@
+'use client';
+
+import Button from '@/_components/button';
+import * as Modal from '@/_components/modal';
+import Select from '@/_components/select';
+import DocumentTextIcon from '@heroicons/react/24/outline/DocumentTextIcon';
+
+const TrainingPlanUseTemplateModal = () => (
+  <Modal.Root>
+    <Modal.Trigger asChild>
+      <Button className="sm:pr-6" variant="link">
+        <DocumentTextIcon className="w-5 text-fg-4" />
+        Use a template
+      </Button>
+    </Modal.Trigger>
+    <Modal.Portal>
+      <Modal.Overlay>
+        <Modal.Content className="max-w-sm p-8 text-center">
+          <Modal.Title className="text-2xl">Use a 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>
+);
+
+export default TrainingPlanUseTemplateModal;
diff --git a/app/_components/training-plans.tsx b/app/_components/training-plans.tsx
index 5646c563..cdafa389 100644
--- a/app/_components/training-plans.tsx
+++ b/app/_components/training-plans.tsx
@@ -23,10 +23,7 @@ const TrainingPlans = async ({ isTeamMember, subjectId }: MissionsProps) => {
     const activeSessionId = activeSession?.id || '';
 
     acc.push(
-      <li
-        className="flex items-stretch hover:bg-alpha-1 active:bg-alpha-1"
-        key={mission.id}
-      >
+      <li className="flex items-stretch 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/upsert-event-type-template.ts b/app/_mutations/upsert-event-type-template.ts
new file mode 100644
index 00000000..c00c7bcb
--- /dev/null
+++ b/app/_mutations/upsert-event-type-template.ts
@@ -0,0 +1,34 @@
+'use server';
+
+import { EventTypeTemplateFormValues } from '@/_components/event-type-template-form';
+import TemplateType from '@/_constants/enum-template-type';
+import createServerSupabaseClient from '@/_utilities/create-server-supabase-client';
+import sanitizeHtml from '@/_utilities/sanitize-html';
+import { revalidatePath } from 'next/cache';
+
+const upsertEventTypeTemplate = async (
+  context: { templateId?: string },
+  data: EventTypeTemplateFormValues,
+) => {
+  const supabase = createServerSupabaseClient();
+
+  const { error } = await supabase
+    .from('templates')
+    .upsert({
+      data: {
+        content: sanitizeHtml(data.content),
+        inputIds: data.inputs.map((input) => input.id),
+      },
+      id: context.templateId,
+      name: data.name.trim(),
+      public: false,
+      type: TemplateType.EventType,
+    })
+    .select('id')
+    .single();
+
+  if (error) return { error: error.message };
+  revalidatePath('/', 'layout');
+};
+
+export default upsertEventTypeTemplate;
diff --git a/app/_mutations/upsert-template.ts b/app/_mutations/upsert-module-template.ts
similarity index 75%
rename from app/_mutations/upsert-template.ts
rename to app/_mutations/upsert-module-template.ts
index fdb991b3..2874b6a0 100644
--- a/app/_mutations/upsert-template.ts
+++ b/app/_mutations/upsert-module-template.ts
@@ -1,6 +1,6 @@
 'use server';
 
-import { EventTypeTemplateFormValues } from '@/_components/event-type-template-form';
+import { ModuleTemplateFormValues } from '@/_components/module-template-form';
 import TemplateType from '@/_constants/enum-template-type';
 import createServerSupabaseClient from '@/_utilities/create-server-supabase-client';
 import sanitizeHtml from '@/_utilities/sanitize-html';
@@ -8,9 +8,9 @@ import { revalidatePath } from 'next/cache';
 
 type State = { data?: { id?: string }; error?: string } | null;
 
-const upsertTemplate = async (
-  context: { templateId?: string; type: TemplateType },
-  data: EventTypeTemplateFormValues,
+const upsertModuleTemplate = async (
+  context: { templateId?: string },
+  data: ModuleTemplateFormValues,
 ): Promise<State> => {
   const supabase = createServerSupabaseClient();
 
@@ -24,7 +24,7 @@ const upsertTemplate = async (
       id: context.templateId,
       name: data.name.trim(),
       public: false,
-      type: context.type,
+      type: TemplateType.Module,
     })
     .select('id')
     .single();
@@ -34,4 +34,4 @@ const upsertTemplate = async (
   return { data: template };
 };
 
-export default upsertTemplate;
+export default upsertModuleTemplate;
diff --git a/app/_mutations/upsert-session-template.ts b/app/_mutations/upsert-session-template.ts
new file mode 100644
index 00000000..d7172002
--- /dev/null
+++ b/app/_mutations/upsert-session-template.ts
@@ -0,0 +1,36 @@
+'use server';
+
+import { SessionTemplateFormValues } from '@/_components/session-template-form';
+import TemplateType from '@/_constants/enum-template-type';
+import createServerSupabaseClient from '@/_utilities/create-server-supabase-client';
+import { revalidatePath } from 'next/cache';
+
+const upsertSessionTemplate = async (
+  context: { templateId?: string },
+  data: SessionTemplateFormValues,
+) => {
+  const supabase = createServerSupabaseClient();
+
+  const { error } = await supabase
+    .from('templates')
+    .upsert({
+      data: {
+        modules: data.modules.map((module) => ({
+          content: module.content,
+          inputIds: module.inputs.map((input) => input.id),
+          name: module.name?.trim(),
+        })),
+      },
+      id: context.templateId,
+      name: data.name.trim(),
+      public: false,
+      type: TemplateType.Session,
+    })
+    .select('id')
+    .single();
+
+  if (error) return { error: error.message };
+  revalidatePath('/', 'layout');
+};
+
+export default upsertSessionTemplate;
diff --git a/app/_queries/list-templates-with-data.ts b/app/_queries/list-templates-with-data.ts
index 708f13e6..5033791c 100644
--- a/app/_queries/list-templates-with-data.ts
+++ b/app/_queries/list-templates-with-data.ts
@@ -1,12 +1,13 @@
+import TemplateType from '@/_constants/enum-template-type';
 import getCurrentUser from '@/_queries/get-current-user';
 import createServerSupabaseClient from '@/_utilities/create-server-supabase-client';
 
-const listTemplatesWithData = async () =>
+const listTemplatesWithData = async ({ type }: { type: TemplateType }) =>
   createServerSupabaseClient()
     .from('templates')
     .select('data, id, name, type')
     .eq('team_id', (await getCurrentUser())?.id ?? '')
-    .not('type', 'is', null)
+    .eq('type', type)
     .order('name');
 
 export type ListTemplatesWithDataData = Awaited<
diff --git a/app/_types/event-type-template-data-json.ts b/app/_types/event-type-template-data-json.ts
new file mode 100644
index 00000000..70b444dd
--- /dev/null
+++ b/app/_types/event-type-template-data-json.ts
@@ -0,0 +1,4 @@
+export type EventTypeTemplateDataJson = {
+  content?: string;
+  inputIds?: string[];
+} | null;
diff --git a/app/_types/template-data-json.ts b/app/_types/module-template-data-json.ts
similarity index 57%
rename from app/_types/template-data-json.ts
rename to app/_types/module-template-data-json.ts
index 35c87fe3..b3f92cbd 100644
--- a/app/_types/template-data-json.ts
+++ b/app/_types/module-template-data-json.ts
@@ -1,4 +1,4 @@
-export type TemplateDataJson = {
+export type ModuleTemplateDataJson = {
   content?: string;
   inputIds?: string[];
 } | null;
diff --git a/app/_types/session-template-data-json.ts b/app/_types/session-template-data-json.ts
new file mode 100644
index 00000000..edf60816
--- /dev/null
+++ b/app/_types/session-template-data-json.ts
@@ -0,0 +1,7 @@
+export type SessionTemplateDataJson = {
+  modules: Array<{
+    content?: string;
+    inputIds?: string[];
+    name?: string;
+  }>;
+} | null;
diff --git a/app/_utilities/format-title.ts b/app/_utilities/format-title.ts
deleted file mode 100644
index 8e1c539c..00000000
--- a/app/_utilities/format-title.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import forceArray from '@/_utilities/force-array';
-
-const formatTitle = (parts: string | (string | null | undefined)[]) =>
-  forceArray(parts)
-    .filter((p) => p)
-    .join(' / ');
-
-export default formatTitle;
diff --git a/app/_utilities/get-form-cache-key.ts b/app/_utilities/get-form-cache-key.ts
index 2446bb5f..68384c90 100644
--- a/app/_utilities/get-form-cache-key.ts
+++ b/app/_utilities/get-form-cache-key.ts
@@ -10,11 +10,8 @@ const getFormCacheKey = {
     `input-${id ?? 'create'}${isDuplicate ? '-duplicate' : ''}`,
   insight: ({ id, subjectId }: { id?: string; subjectId: string }) =>
     `subject-${subjectId}-insight-${id ?? 'create'}`,
-  moduleTemplate: ({
-    id,
-    isDuplicate,
-  }: { id?: string; isDuplicate?: boolean } = {}) =>
-    `module-template-${id ?? 'create'}${isDuplicate ? '-duplicate' : ''}`,
+  moduleTemplate: ({ id }: { id?: string } = {}) =>
+    `module-template-${id ?? 'create'}`,
   session: ({
     id,
     isDuplicate,
@@ -27,6 +24,11 @@ const getFormCacheKey = {
     subjectId: string;
   }) =>
     `subject-${subjectId}-mission-${missionId}-session-${id ?? 'create'}${isDuplicate ? '-duplicate' : ''}`,
+  sessionTemplate: ({
+    id,
+    isDuplicate,
+  }: { id?: string; isDuplicate?: boolean } = {}) =>
+    `session-template-${id ?? 'create'}${isDuplicate ? '-duplicate' : ''}`,
 };
 
 export default getFormCacheKey;
diff --git a/tailwind.css b/tailwind.css
index 32f222ff..8c4f990f 100644
--- a/tailwind.css
+++ b/tailwind.css
@@ -16,9 +16,9 @@
     --color-bg-2: hsl(0, 0%, 14%);
     --color-bg-3: hsl(0, 0%, 16%);
     --color-fg-1: hsla(0, 0%, 100%, 90%);
-    --color-fg-2: hsla(0, 0%, 100%, 75%);
-    --color-fg-3: hsla(0, 0%, 100%, 60%);
-    --color-fg-4: hsla(0, 0%, 100%, 45%);
+    --color-fg-2: hsla(0, 0%, 100%, 74%);
+    --color-fg-3: hsla(0, 0%, 100%, 58%);
+    --color-fg-4: hsla(0, 0%, 100%, 42%);
     --color-red-1: hsl(5, 85%, 40%);
     --font-weight-bold: 700;
     --font-weight-normal: 400;
@@ -84,7 +84,7 @@
   }
 
   .label {
-    @apply flex items-baseline justify-between px-4 pb-2 leading-snug text-fg-3 transition-colors group-focus-within:text-fg-2 group-hover:text-fg-2 group-active:text-fg-2 print:pt-8 print:font-bold print:text-fg-1;
+    @apply flex items-baseline justify-between px-4 pb-2 leading-snug text-fg-3 transition-colors group-focus-within:text-fg-2 group-hover:text-fg-2 print:pt-8 print:font-bold print:text-fg-1;
   }
 }