diff --git a/apps/docs/content/guides/auth/auth-hooks/send-email-hook.mdx b/apps/docs/content/guides/auth/auth-hooks/send-email-hook.mdx
index ac5a90549ef..3bd3c6a6fcc 100644
--- a/apps/docs/content/guides/auth/auth-hooks/send-email-hook.mdx
+++ b/apps/docs/content/guides/auth/auth-hooks/send-email-hook.mdx
@@ -642,8 +642,8 @@ supabase functions deploy send-email --no-verify-jwt
 Your company is expanding to France and Spain. As part of expansion efforts, the company would like to deliver internationalized email templates to best support local users in their native language. Ensure that you have configured `POSTMARK_SERVER_TOKEN` and `SEND_EMAIL_HOOK_SECRET` in your `.env` file.
 
 ```javascript
-import { Webhook } from 'https://esm.sh/standardwebhooks@1.0.0'
 import { readAll } from 'https://deno.land/std/io/read_all.ts'
+import { Webhook } from 'https://esm.sh/standardwebhooks@1.0.0'
 
 const postmarkEndpoint = 'https://api.postmarkapp.com/email'
 // Replace this with your email
@@ -741,8 +741,8 @@ Deno.serve(async (req) => {
     .replace('{{token}}', email_data.token || '')
     .replace('{{new_token}}', email_data.new_token || '')
     .replace('{{site_url}}', email_data.site_url || '')
-    .replace('{{old_email}}', email_data.email || '')
-    .replace('{{new_email}}', email_data.new_email || '')
+    .replace('{{old_email}}', email_data.old_email || '')
+    .replace('{{new_email}}', user.new_email || '')
 
   const requestOptions = {
     method: 'POST',
@@ -843,8 +843,8 @@ async function sendEmailWithPostmark(user: any, email_data: any, serverToken: st
         .replace('{{token}}', email_data.token || '')
         .replace('{{new_token}}', email_data.new_token || '')
         .replace('{{site_url}}', email_data.site_url || '')
-        .replace('{{old_email}}', email_data.email || '')
-        .replace('{{new_email}}', email_data.new_email || '');
+        .replace('{{old_email}}', email_data.old_email || '')
+        .replace('{{new_email}}', user.new_email || '');
 
     const requestOptions = {
         method: 'POST',
@@ -872,8 +872,8 @@ async function sendEmailWithSendGrid(user: any, email_data: any, apiKey: string)
         .replace('{{token}}', email_data.token || '')
         .replace('{{new_token}}', email_data.new_token || '')
         .replace('{{site_url}}', email_data.site_url || '')
-        .replace('{{old_email}}', email_data.email || '')
-        .replace('{{new_email}}', email_data.new_email || '');
+        .replace('{{old_email}}', email_data.old_email || '')
+        .replace('{{new_email}}', user.new_email || '');
 
     const requestOptions = {
         method: 'POST',
diff --git a/apps/studio/components/interfaces/Account/Preferences/ProfileInformation.tsx b/apps/studio/components/interfaces/Account/Preferences/ProfileInformation.tsx
index 926fcf9cbb3..89ac65362a0 100644
--- a/apps/studio/components/interfaces/Account/Preferences/ProfileInformation.tsx
+++ b/apps/studio/components/interfaces/Account/Preferences/ProfileInformation.tsx
@@ -30,7 +30,6 @@ import z from 'zod'
 import { useProfileIdentitiesQuery } from '@/data/profile/profile-identities-query'
 import { useProfileUpdateMutation } from '@/data/profile/profile-update-mutation'
 import { useProfile } from '@/lib/profile'
-import type { FormSchema } from '@/types'
 
 const FormSchema = z.object({
   first_name: z.string().optional(),
diff --git a/apps/studio/components/interfaces/Auth/AuthTemplatesValidation.tsx b/apps/studio/components/interfaces/Auth/AuthTemplatesValidation.tsx
deleted file mode 100644
index 915c1d06f2c..00000000000
--- a/apps/studio/components/interfaces/Auth/AuthTemplatesValidation.tsx
+++ /dev/null
@@ -1,436 +0,0 @@
-import * as z from 'zod'
-
-import type { FormSchema } from '@/types'
-
-const JSON_SCHEMA_VERSION = 'http://json-schema.org/draft-07/schema#'
-
-const CONFIRMATION: FormSchema = {
-  $schema: JSON_SCHEMA_VERSION,
-  id: 'CONFIRMATION',
-  type: 'object',
-  title: 'Confirm sign up',
-  purpose: 'Ask users to confirm their email address after signing up',
-  properties: {
-    MAILER_SUBJECTS_CONFIRMATION: {
-      title: 'Subject',
-      type: 'string',
-    },
-    MAILER_TEMPLATES_CONFIRMATION_CONTENT: {
-      title: 'Body',
-      descriptionOptional: 'HTML body of your email',
-      type: 'code',
-      description: `
-- \`{{ .ConfirmationURL }}\` : URL to confirm the email address for the new account
-- \`{{ .Token }}\` : The 6-digit numeric email OTP
-- \`{{ .TokenHash }}\` : The hashed token used in the URL
-- \`{{ .SiteURL }}\` : The URL of the site
-- \`{{ .Email }}\` : The user's email address
-- \`{{ .Data }}\` : The user's \`user_metadata\`
-- \`{{ .RedirectTo }}\` : The URL of \`emailRedirectTo\` passed in options
-`,
-    },
-  },
-  validationSchema: z.object({
-    MAILER_SUBJECTS_CONFIRMATION: z.string().min(1, 'Subject is required.'),
-  }),
-  misc: {
-    emailTemplateType: 'authentication',
-  },
-}
-
-const INVITE: FormSchema = {
-  $schema: JSON_SCHEMA_VERSION,
-  id: 'INVITE',
-  type: 'object',
-  title: 'Invite user',
-  purpose: "Invite users who don't yet have an account to sign up",
-  properties: {
-    MAILER_SUBJECTS_INVITE: {
-      title: 'Subject',
-      type: 'string',
-    },
-    MAILER_TEMPLATES_INVITE_CONTENT: {
-      title: 'Body',
-      descriptionOptional: 'HTML body of your email',
-      type: 'code',
-      description: `
-- \`{{ .ConfirmationURL }}\` : URL to accept the invitation to create an account
-- \`{{ .Token }}\` : The 6-digit numeric email OTP
-- \`{{ .TokenHash }}\` : The hashed token used in the URL
-- \`{{ .SiteURL }}\` : The URL of the site
-- \`{{ .Email }}\` : The user's email address
-- \`{{ .Data }}\` : The user's \`user_metadata\`
-- \`{{ .RedirectTo }}\` : The URL of \`redirectTo\` passed in options
-`,
-    },
-  },
-  validationSchema: z.object({
-    MAILER_SUBJECTS_INVITE: z.string().min(1, 'Subject is required.'),
-  }),
-  misc: {
-    emailTemplateType: 'authentication',
-  },
-}
-
-const MAGIC_LINK: FormSchema = {
-  $schema: JSON_SCHEMA_VERSION,
-  id: 'MAGIC_LINK',
-  type: 'object',
-  title: 'Magic link',
-  purpose: 'Allow users to sign in via a one-time link sent to their email',
-  properties: {
-    MAILER_SUBJECTS_MAGIC_LINK: {
-      title: 'Subject',
-      type: 'string',
-    },
-    MAILER_TEMPLATES_MAGIC_LINK_CONTENT: {
-      title: 'Body',
-      descriptionOptional: 'HTML body of your email',
-      type: 'code',
-      description: `
-- \`{{ .ConfirmationURL }}\` : URL for a one-time login to the user's account
-- \`{{ .Token }}\` : The 6-digit numeric email OTP
-- \`{{ .TokenHash }}\` : The hashed token used in the URL
-- \`{{ .SiteURL }}\` : The URL of the site
-- \`{{ .Email }}\` : The user's email address
-- \`{{ .Data }}\` : The user's \`user_metadata\`
-- \`{{ .RedirectTo }}\` : The URL of \`emailRedirectTo\` passed in options
-`,
-    },
-  },
-  validationSchema: z.object({
-    MAILER_SUBJECTS_MAGIC_LINK: z.string().min(1, 'Subject is required.'),
-  }),
-  misc: {
-    emailTemplateType: 'authentication',
-  },
-}
-
-const EMAIL_CHANGE: FormSchema = {
-  $schema: JSON_SCHEMA_VERSION,
-  id: 'EMAIL_CHANGE',
-  type: 'object',
-  title: 'Change email address',
-  purpose: 'Ask users to verify their new email address after changing it',
-  properties: {
-    MAILER_SUBJECTS_EMAIL_CHANGE: {
-      title: 'Subject',
-      type: 'string',
-    },
-    MAILER_TEMPLATES_EMAIL_CHANGE_CONTENT: {
-      title: 'Body',
-      descriptionOptional: 'HTML body of your email',
-      type: 'code',
-      description: `
-- \`{{ .ConfirmationURL }}\` : URL to confirm the email change
-- \`{{ .Token }}\` : The 6-digit numeric email OTP
-- \`{{ .TokenHash }}\` : The hashed token used in the URL
-- \`{{ .SiteURL }}\` : The URL of the site
-- \`{{ .Email }}\` : The original user's email address
-- \`{{ .NewEmail }}\` : The user's new email address
-- \`{{ .Data }}\` : The user's \`user_metadata\`
-- \`{{ .RedirectTo }}\` : The URL of \`emailRedirectTo\` passed in options
-`,
-    },
-  },
-  validationSchema: z.object({
-    MAILER_SUBJECTS_EMAIL_CHANGE: z.string().min(1, 'Subject is required.'),
-  }),
-  misc: {
-    emailTemplateType: 'authentication',
-  },
-}
-
-const RECOVERY: FormSchema = {
-  $schema: JSON_SCHEMA_VERSION,
-  id: 'RECOVERY',
-  type: 'object',
-  title: 'Reset password',
-  purpose: 'Allow users to reset their password if they forget it',
-  properties: {
-    MAILER_SUBJECTS_RECOVERY: {
-      title: 'Subject',
-      type: 'string',
-    },
-    MAILER_TEMPLATES_RECOVERY_CONTENT: {
-      title: 'Body',
-      descriptionOptional: 'HTML body of your email',
-      type: 'code',
-      description: `
-- \`{{ .ConfirmationURL }}\` : URL to confirm the password reset
-- \`{{ .Token }}\` : The 6-digit numeric email OTP
-- \`{{ .TokenHash }}\` : The hashed token used in the URL
-- \`{{ .SiteURL }}\` : The URL of the site
-- \`{{ .Email }}\` : The user's email address
-- \`{{ .Data }}\` : The user's \`user_metadata\`
-- \`{{ .RedirectTo }}\` : The URL of \`redirectTo\` passed in options
-`,
-    },
-  },
-  validationSchema: z.object({
-    MAILER_SUBJECTS_RECOVERY: z.string().min(1, 'Subject is required.'),
-  }),
-  misc: {
-    emailTemplateType: 'authentication',
-  },
-}
-const REAUTHENTICATION: FormSchema = {
-  $schema: JSON_SCHEMA_VERSION,
-  id: 'REAUTHENTICATION',
-  type: 'object',
-  title: 'Reauthentication',
-  purpose: 'Ask users to re-authenticate before performing a sensitive action',
-  properties: {
-    MAILER_SUBJECTS_REAUTHENTICATION: {
-      title: 'Subject',
-      type: 'string',
-    },
-    MAILER_TEMPLATES_REAUTHENTICATION_CONTENT: {
-      title: 'Body',
-      descriptionOptional: 'HTML body of your email',
-      type: 'code',
-      description: `
-- \`{{ .Token }}\` : The 6-digit numeric email OTP
-- \`{{ .SiteURL }}\` : The URL of the site
-- \`{{ .Email }}\` : The user's email address
-- \`{{ .Data }}\` : The user's \`user_metadata\`
-`,
-    },
-  },
-  validationSchema: z.object({
-    MAILER_SUBJECTS_REAUTHENTICATION: z.string().min(1, 'Subject is required.'),
-  }),
-  misc: {
-    emailTemplateType: 'authentication',
-  },
-}
-
-// Notifications
-const PASSWORD_CHANGED_NOTIFICATION: FormSchema = {
-  $schema: JSON_SCHEMA_VERSION,
-  id: 'PASSWORD_CHANGED_NOTIFICATION',
-  type: 'object',
-  title: 'Password changed',
-  purpose: 'Notify users when their password has changed',
-  properties: {
-    MAILER_SUBJECTS_PASSWORD_CHANGED_NOTIFICATION: {
-      title: 'Subject',
-      type: 'string',
-    },
-    MAILER_TEMPLATES_PASSWORD_CHANGED_NOTIFICATION_CONTENT: {
-      title: 'Body',
-      descriptionOptional: 'HTML body of your email',
-      type: 'code',
-      description: `
-- \`{{ .Email }}\` : The user's email address
-- \`{{ .Data }}\` : The user's \`user_metadata\`
-`,
-    },
-  },
-  validationSchema: z.object({
-    MAILER_SUBJECTS_PASSWORD_CHANGED_NOTIFICATION: z.string().min(1, 'Subject is required.'),
-  }),
-  misc: {
-    emailTemplateType: 'security',
-  },
-}
-
-const EMAIL_CHANGED_NOTIFICATION: FormSchema = {
-  $schema: JSON_SCHEMA_VERSION,
-  id: 'EMAIL_CHANGED_NOTIFICATION',
-  type: 'object',
-  title: 'Email address changed',
-  purpose: 'Notify users when their email address has changed',
-  properties: {
-    MAILER_SUBJECTS_EMAIL_CHANGED_NOTIFICATION: {
-      title: 'Subject',
-      type: 'string',
-    },
-    MAILER_TEMPLATES_EMAIL_CHANGED_NOTIFICATION_CONTENT: {
-      title: 'Body',
-      descriptionOptional: 'HTML body of your email',
-      type: 'code',
-      description: `
-- \`{{ .Email }}\` : The user's new email address
-- \`{{ .OldEmail }}\` : The user's old email address
-- \`{{ .Data }}\` : The user's \`user_metadata\`
-`,
-    },
-  },
-  validationSchema: z.object({
-    MAILER_SUBJECTS_EMAIL_CHANGED_NOTIFICATION: z.string().min(1, 'Subject is required.'),
-  }),
-  misc: {
-    emailTemplateType: 'security',
-  },
-}
-
-const PHONE_CHANGED_NOTIFICATION: FormSchema = {
-  $schema: JSON_SCHEMA_VERSION,
-  id: 'PHONE_CHANGED_NOTIFICATION',
-  type: 'object',
-  title: 'Phone number changed',
-  purpose: 'Notify users when their phone number has changed',
-  properties: {
-    MAILER_SUBJECTS_PHONE_CHANGED_NOTIFICATION: {
-      title: 'Subject',
-      type: 'string',
-    },
-    MAILER_TEMPLATES_PHONE_CHANGED_NOTIFICATION_CONTENT: {
-      title: 'Body',
-      descriptionOptional: 'HTML body of your email',
-      type: 'code',
-      description: `
-- \`{{ .Email }}\` : The user's email address
-- \`{{ .Phone }}\` : The user's new phone number
-- \`{{ .OldPhone }}\` : The user's old phone number
-- \`{{ .Data }}\` : The user's \`user_metadata\`
-`,
-    },
-  },
-  validationSchema: z.object({
-    MAILER_SUBJECTS_PHONE_CHANGED_NOTIFICATION: z.string().min(1, 'Subject is required.'),
-  }),
-  misc: {
-    emailTemplateType: 'security',
-  },
-}
-
-const IDENTITY_LINKED_NOTIFICATION: FormSchema = {
-  $schema: JSON_SCHEMA_VERSION,
-  id: 'IDENTITY_LINKED_NOTIFICATION',
-  type: 'object',
-  title: 'Identity linked',
-  purpose: 'Notify users when a new identity has been linked to their account',
-  properties: {
-    MAILER_SUBJECTS_IDENTITY_LINKED_NOTIFICATION: {
-      title: 'Subject',
-      type: 'string',
-    },
-    MAILER_TEMPLATES_IDENTITY_LINKED_NOTIFICATION_CONTENT: {
-      title: 'Body',
-      descriptionOptional: 'HTML body of your email',
-      type: 'code',
-      description: `
-- \`{{ .Email }}\` : The user's email address
-- \`{{ .Provider }}\` : The provider of the newly linked identity
-- \`{{ .Data }}\` : The user's \`user_metadata\`
-`,
-    },
-  },
-  validationSchema: z.object({
-    MAILER_SUBJECTS_IDENTITY_LINKED_NOTIFICATION: z.string().min(1, 'Subject is required.'),
-  }),
-  misc: {
-    emailTemplateType: 'security',
-  },
-}
-
-const IDENTITY_UNLINKED_NOTIFICATION: FormSchema = {
-  $schema: JSON_SCHEMA_VERSION,
-  id: 'IDENTITY_UNLINKED_NOTIFICATION',
-  type: 'object',
-  title: 'Identity unlinked',
-  purpose: 'Notify users when an identity has been unlinked from their account',
-  properties: {
-    MAILER_SUBJECTS_IDENTITY_UNLINKED_NOTIFICATION: {
-      title: 'Subject',
-      type: 'string',
-    },
-    MAILER_TEMPLATES_IDENTITY_UNLINKED_NOTIFICATION_CONTENT: {
-      title: 'Body',
-      descriptionOptional: 'HTML body of your email',
-      type: 'code',
-      description: `
-- \`{{ .Email }}\` : The user's email address
-- \`{{ .Provider }}\` : The provider of the unlinked identity
-- \`{{ .Data }}\` : The user's \`user_metadata\`
-`,
-    },
-  },
-  validationSchema: z.object({
-    MAILER_SUBJECTS_IDENTITY_UNLINKED_NOTIFICATION: z.string().min(1, 'Subject is required.'),
-  }),
-  misc: {
-    emailTemplateType: 'security',
-  },
-}
-
-const MFA_FACTOR_ENROLLED_NOTIFICATION: FormSchema = {
-  $schema: JSON_SCHEMA_VERSION,
-  id: 'MFA_FACTOR_ENROLLED_NOTIFICATION',
-  type: 'object',
-  title: 'Multi-factor authentication method added',
-  purpose:
-    'Notify users when a new multi-factor authentication method has been added to their account',
-  properties: {
-    MAILER_SUBJECTS_MFA_FACTOR_ENROLLED_NOTIFICATION: {
-      title: 'Subject',
-      type: 'string',
-    },
-    MAILER_TEMPLATES_MFA_FACTOR_ENROLLED_NOTIFICATION_CONTENT: {
-      title: 'Body',
-      descriptionOptional: 'HTML body of your email',
-      type: 'code',
-      description: `
-- \`{{ .Email }}\` : The user's email address
-- \`{{ .FactorType }}\` : The type of the newly enrolled MFA factor
-- \`{{ .Data }}\` : The user's \`user_metadata\`
-`,
-    },
-  },
-  validationSchema: z.object({
-    MAILER_SUBJECTS_MFA_FACTOR_ENROLLED_NOTIFICATION: z.string().min(1, 'Subject is required.'),
-  }),
-  misc: {
-    emailTemplateType: 'security',
-  },
-}
-
-const MFA_FACTOR_UNENROLLED_NOTIFICATION: FormSchema = {
-  $schema: JSON_SCHEMA_VERSION,
-  id: 'MFA_FACTOR_UNENROLLED_NOTIFICATION',
-  type: 'object',
-  title: 'Multi-factor authentication method removed',
-  purpose:
-    'Notify users when a multi-factor authentication method has been removed from their account',
-  properties: {
-    MAILER_SUBJECTS_MFA_FACTOR_UNENROLLED_NOTIFICATION: {
-      title: 'Subject',
-      type: 'string',
-    },
-    MAILER_TEMPLATES_MFA_FACTOR_UNENROLLED_NOTIFICATION_CONTENT: {
-      title: 'Body',
-      descriptionOptional: 'HTML body of your email',
-      type: 'code',
-      description: `
-- \`{{ .Email }}\` : The user's email address
-- \`{{ .FactorType }}\` : The type of the newly enrolled MFA factor
-- \`{{ .Data }}\` : The user's \`user_metadata\`
-`,
-    },
-  },
-  validationSchema: z.object({
-    MAILER_SUBJECTS_MFA_FACTOR_UNENROLLED_NOTIFICATION: z.string().min(1, 'Subject is required.'),
-  }),
-  misc: {
-    emailTemplateType: 'security',
-  },
-}
-
-export const TEMPLATES_SCHEMAS = [
-  CONFIRMATION,
-  INVITE,
-  MAGIC_LINK,
-  EMAIL_CHANGE,
-  RECOVERY,
-  REAUTHENTICATION,
-  // Notifications
-  PASSWORD_CHANGED_NOTIFICATION,
-  EMAIL_CHANGED_NOTIFICATION,
-  PHONE_CHANGED_NOTIFICATION,
-  IDENTITY_LINKED_NOTIFICATION,
-  IDENTITY_UNLINKED_NOTIFICATION,
-  MFA_FACTOR_ENROLLED_NOTIFICATION,
-  MFA_FACTOR_UNENROLLED_NOTIFICATION,
-]
diff --git a/apps/studio/components/interfaces/Auth/EmailTemplates/AuthTemplatesValidation.tsx b/apps/studio/components/interfaces/Auth/EmailTemplates/AuthTemplatesValidation.tsx
new file mode 100644
index 00000000000..3cd04dd25e0
--- /dev/null
+++ b/apps/studio/components/interfaces/Auth/EmailTemplates/AuthTemplatesValidation.tsx
@@ -0,0 +1,384 @@
+import * as z from 'zod'
+
+import type { AuthTemplate, TemplateVariable, TemplateVariableName } from './EmailTemplates.types'
+
+const TemplateVariables: Record<TemplateVariableName, TemplateVariable> = {
+  ConfirmationURL: {
+    name: 'ConfirmationURL',
+    value: '{{ .ConfirmationURL }}',
+    description: 'URL to confirm the email address for the new account',
+  },
+  Token: {
+    name: 'Token',
+    value: '{{ .Token }}',
+    description: '6-digit numeric email OTP',
+  },
+  TokenHash: {
+    name: 'TokenHash',
+    value: '{{ .TokenHash }}',
+    description: 'Hashed token used in the URL, useful for constructing your own email link',
+  },
+  SiteURL: {
+    name: 'SiteURL',
+    value: '{{ .SiteURL }}',
+    description: 'Redirect URL',
+  },
+  Email: {
+    name: 'Email',
+    value: '{{ .Email }}',
+    description: "User's current email address",
+  },
+  NewEmail: {
+    name: 'NewEmail',
+    value: '{{ .NewEmail }}',
+    description: "User's new email address",
+  },
+  OldEmail: {
+    name: 'OldEmail',
+    value: '{{ .OldEmail }}',
+    description: "User's old email address",
+  },
+  Phone: {
+    name: 'Phone',
+    value: '{{ .Phone }}',
+    description: "User's new phone number",
+  },
+  OldPhone: {
+    name: 'OldPhone',
+    value: '{{ .OldPhone }}',
+    description: "User's old phone number",
+  },
+  Provider: {
+    name: 'Provider',
+    value: '{{ .Provider }}',
+    description: 'Provider of newly linked/unlinked identity',
+  },
+  FactorType: {
+    name: 'FactorType',
+    value: '{{ .FactorType }}',
+    description: 'Type of newly enrolled/unenrolled MFA factor',
+  },
+  Data: {
+    name: 'Data',
+    value: '{{ .Data }}',
+    description: (
+      <>
+        User's <code className="text-code-inline">user_metadata</code>, use this to personalize the
+        message
+      </>
+    ),
+  },
+  RedirectTo: {
+    name: 'RedirectTo',
+    value: '{{ .RedirectTo }}',
+    description: (
+      <>
+        Redirect URL passed as the <code className="text-code-inline">redirectTo</code> option in
+        the auth method call
+      </>
+    ),
+  },
+}
+
+const CONFIRMATION: AuthTemplate = {
+  id: 'CONFIRMATION',
+  type: 'object',
+  title: 'Confirm sign up',
+  purpose: 'Ask users to confirm their email address after signing up',
+  properties: {
+    MAILER_SUBJECTS_CONFIRMATION: { title: 'Subject', type: 'string' },
+    MAILER_TEMPLATES_CONFIRMATION_CONTENT: { title: 'Body', type: 'code' },
+  },
+  variables: [
+    TemplateVariables.ConfirmationURL,
+    TemplateVariables.Token,
+    TemplateVariables.TokenHash,
+    TemplateVariables.SiteURL,
+    TemplateVariables.Email,
+    TemplateVariables.Data,
+    TemplateVariables.RedirectTo,
+  ],
+  validationSchema: z.object({
+    MAILER_SUBJECTS_CONFIRMATION: z.string().min(1, 'Subject is required.'),
+  }),
+  misc: {
+    emailTemplateType: 'authentication',
+  },
+}
+
+const INVITE: AuthTemplate = {
+  id: 'INVITE',
+  type: 'object',
+  title: 'Invite user',
+  purpose: "Invite users who don't yet have an account to sign up",
+  properties: {
+    MAILER_SUBJECTS_INVITE: { title: 'Subject', type: 'string' },
+    MAILER_TEMPLATES_INVITE_CONTENT: { title: 'Body', type: 'code' },
+  },
+  variables: [
+    TemplateVariables.ConfirmationURL,
+    TemplateVariables.Token,
+    TemplateVariables.TokenHash,
+    TemplateVariables.SiteURL,
+    TemplateVariables.Email,
+    TemplateVariables.Data,
+    TemplateVariables.RedirectTo,
+  ],
+  validationSchema: z.object({
+    MAILER_SUBJECTS_INVITE: z.string().min(1, 'Subject is required.'),
+  }),
+  misc: {
+    emailTemplateType: 'authentication',
+  },
+}
+
+const MAGIC_LINK: AuthTemplate = {
+  id: 'MAGIC_LINK',
+  type: 'object',
+  title: 'Magic link or OTP',
+  purpose: 'Send a one-time sign-in link or one-time password',
+  properties: {
+    MAILER_SUBJECTS_MAGIC_LINK: { title: 'Subject', type: 'string' },
+    MAILER_TEMPLATES_MAGIC_LINK_CONTENT: { title: 'Body', type: 'code' },
+  },
+  variables: [
+    TemplateVariables.ConfirmationURL,
+    TemplateVariables.Token,
+    TemplateVariables.TokenHash,
+    TemplateVariables.SiteURL,
+    TemplateVariables.Email,
+    TemplateVariables.Data,
+    TemplateVariables.RedirectTo,
+  ],
+  validationSchema: z.object({
+    MAILER_SUBJECTS_MAGIC_LINK: z.string().min(1, 'Subject is required.'),
+  }),
+  misc: {
+    emailTemplateType: 'authentication',
+  },
+}
+
+const EMAIL_CHANGE: AuthTemplate = {
+  id: 'EMAIL_CHANGE',
+  type: 'object',
+  title: 'Change email address',
+  purpose: 'Ask users to verify their new email address after changing it',
+  properties: {
+    MAILER_SUBJECTS_EMAIL_CHANGE: { title: 'Subject', type: 'string' },
+    MAILER_TEMPLATES_EMAIL_CHANGE_CONTENT: { title: 'Body', type: 'code' },
+  },
+  variables: [
+    TemplateVariables.ConfirmationURL,
+    TemplateVariables.Token,
+    TemplateVariables.TokenHash,
+    TemplateVariables.SiteURL,
+    TemplateVariables.Email,
+    TemplateVariables.NewEmail,
+    TemplateVariables.Data,
+    TemplateVariables.RedirectTo,
+  ],
+  validationSchema: z.object({
+    MAILER_SUBJECTS_EMAIL_CHANGE: z.string().min(1, 'Subject is required.'),
+  }),
+  misc: {
+    emailTemplateType: 'authentication',
+  },
+}
+
+const RECOVERY: AuthTemplate = {
+  id: 'RECOVERY',
+  type: 'object',
+  title: 'Reset password',
+  purpose: 'Allow users to reset their password if they forget it',
+  properties: {
+    MAILER_SUBJECTS_RECOVERY: { title: 'Subject', type: 'string' },
+    MAILER_TEMPLATES_RECOVERY_CONTENT: { title: 'Body', type: 'code' },
+  },
+  variables: [
+    TemplateVariables.ConfirmationURL,
+    TemplateVariables.Token,
+    TemplateVariables.TokenHash,
+    TemplateVariables.SiteURL,
+    TemplateVariables.Email,
+    TemplateVariables.Data,
+    TemplateVariables.RedirectTo,
+  ],
+  validationSchema: z.object({
+    MAILER_SUBJECTS_RECOVERY: z.string().min(1, 'Subject is required.'),
+  }),
+  misc: {
+    emailTemplateType: 'authentication',
+  },
+}
+
+const REAUTHENTICATION: AuthTemplate = {
+  id: 'REAUTHENTICATION',
+  type: 'object',
+  title: 'Reauthentication',
+  purpose: 'Ask users to re-authenticate before performing a sensitive action',
+  properties: {
+    MAILER_SUBJECTS_REAUTHENTICATION: { title: 'Subject', type: 'string' },
+    MAILER_TEMPLATES_REAUTHENTICATION_CONTENT: { title: 'Body', type: 'code' },
+  },
+  variables: [
+    TemplateVariables.Token,
+    TemplateVariables.SiteURL,
+    TemplateVariables.Email,
+    TemplateVariables.Data,
+  ],
+  validationSchema: z.object({
+    MAILER_SUBJECTS_REAUTHENTICATION: z.string().min(1, 'Subject is required.'),
+  }),
+  misc: {
+    emailTemplateType: 'authentication',
+  },
+}
+
+// Notifications
+const PASSWORD_CHANGED_NOTIFICATION: AuthTemplate = {
+  id: 'PASSWORD_CHANGED_NOTIFICATION',
+  type: 'object',
+  title: 'Password changed',
+  purpose: 'Notify users when their password has changed',
+  properties: {
+    MAILER_SUBJECTS_PASSWORD_CHANGED_NOTIFICATION: { title: 'Subject', type: 'string' },
+    MAILER_TEMPLATES_PASSWORD_CHANGED_NOTIFICATION_CONTENT: { title: 'Body', type: 'code' },
+  },
+  variables: [TemplateVariables.Email, TemplateVariables.Data],
+  validationSchema: z.object({
+    MAILER_SUBJECTS_PASSWORD_CHANGED_NOTIFICATION: z.string().min(1, 'Subject is required.'),
+  }),
+  misc: {
+    emailTemplateType: 'security',
+  },
+}
+
+const EMAIL_CHANGED_NOTIFICATION: AuthTemplate = {
+  id: 'EMAIL_CHANGED_NOTIFICATION',
+  type: 'object',
+  title: 'Email address changed',
+  purpose: 'Notify users when their email address has changed',
+  properties: {
+    MAILER_SUBJECTS_EMAIL_CHANGED_NOTIFICATION: { title: 'Subject', type: 'string' },
+    MAILER_TEMPLATES_EMAIL_CHANGED_NOTIFICATION_CONTENT: { title: 'Body', type: 'code' },
+  },
+  variables: [TemplateVariables.Email, TemplateVariables.OldEmail, TemplateVariables.Data],
+  validationSchema: z.object({
+    MAILER_SUBJECTS_EMAIL_CHANGED_NOTIFICATION: z.string().min(1, 'Subject is required.'),
+  }),
+  misc: {
+    emailTemplateType: 'security',
+  },
+}
+
+const PHONE_CHANGED_NOTIFICATION: AuthTemplate = {
+  id: 'PHONE_CHANGED_NOTIFICATION',
+  type: 'object',
+  title: 'Phone number changed',
+  purpose: 'Notify users when their phone number has changed',
+  properties: {
+    MAILER_SUBJECTS_PHONE_CHANGED_NOTIFICATION: { title: 'Subject', type: 'string' },
+    MAILER_TEMPLATES_PHONE_CHANGED_NOTIFICATION_CONTENT: { title: 'Body', type: 'code' },
+  },
+  variables: [
+    TemplateVariables.Email,
+    TemplateVariables.Phone,
+    TemplateVariables.OldPhone,
+    TemplateVariables.Data,
+  ],
+  validationSchema: z.object({
+    MAILER_SUBJECTS_PHONE_CHANGED_NOTIFICATION: z.string().min(1, 'Subject is required.'),
+  }),
+  misc: {
+    emailTemplateType: 'security',
+  },
+}
+
+const IDENTITY_LINKED_NOTIFICATION: AuthTemplate = {
+  id: 'IDENTITY_LINKED_NOTIFICATION',
+  type: 'object',
+  title: 'Identity linked',
+  purpose: 'Notify users when a new identity has been linked to their account',
+  properties: {
+    MAILER_SUBJECTS_IDENTITY_LINKED_NOTIFICATION: { title: 'Subject', type: 'string' },
+    MAILER_TEMPLATES_IDENTITY_LINKED_NOTIFICATION_CONTENT: { title: 'Body', type: 'code' },
+  },
+  variables: [TemplateVariables.Email, TemplateVariables.Provider, TemplateVariables.Data],
+  validationSchema: z.object({
+    MAILER_SUBJECTS_IDENTITY_LINKED_NOTIFICATION: z.string().min(1, 'Subject is required.'),
+  }),
+  misc: {
+    emailTemplateType: 'security',
+  },
+}
+
+const IDENTITY_UNLINKED_NOTIFICATION: AuthTemplate = {
+  id: 'IDENTITY_UNLINKED_NOTIFICATION',
+  type: 'object',
+  title: 'Identity unlinked',
+  purpose: 'Notify users when an identity has been unlinked from their account',
+  properties: {
+    MAILER_SUBJECTS_IDENTITY_UNLINKED_NOTIFICATION: { title: 'Subject', type: 'string' },
+    MAILER_TEMPLATES_IDENTITY_UNLINKED_NOTIFICATION_CONTENT: { title: 'Body', type: 'code' },
+  },
+  variables: [TemplateVariables.Email, TemplateVariables.Provider, TemplateVariables.Data],
+  validationSchema: z.object({
+    MAILER_SUBJECTS_IDENTITY_UNLINKED_NOTIFICATION: z.string().min(1, 'Subject is required.'),
+  }),
+  misc: {
+    emailTemplateType: 'security',
+  },
+}
+
+const MFA_FACTOR_ENROLLED_NOTIFICATION: AuthTemplate = {
+  id: 'MFA_FACTOR_ENROLLED_NOTIFICATION',
+  type: 'object',
+  title: 'MFA method added',
+  purpose: 'Notify users when an MFA method has been added to their account',
+  properties: {
+    MAILER_SUBJECTS_MFA_FACTOR_ENROLLED_NOTIFICATION: { title: 'Subject', type: 'string' },
+    MAILER_TEMPLATES_MFA_FACTOR_ENROLLED_NOTIFICATION_CONTENT: { title: 'Body', type: 'code' },
+  },
+  variables: [TemplateVariables.Email, TemplateVariables.FactorType, TemplateVariables.Data],
+  validationSchema: z.object({
+    MAILER_SUBJECTS_MFA_FACTOR_ENROLLED_NOTIFICATION: z.string().min(1, 'Subject is required.'),
+  }),
+  misc: {
+    emailTemplateType: 'security',
+  },
+}
+
+const MFA_FACTOR_UNENROLLED_NOTIFICATION: AuthTemplate = {
+  id: 'MFA_FACTOR_UNENROLLED_NOTIFICATION',
+  type: 'object',
+  title: 'MFA method removed',
+  purpose: 'Notify users when an MFA method has been removed from their account',
+  properties: {
+    MAILER_SUBJECTS_MFA_FACTOR_UNENROLLED_NOTIFICATION: { title: 'Subject', type: 'string' },
+    MAILER_TEMPLATES_MFA_FACTOR_UNENROLLED_NOTIFICATION_CONTENT: { title: 'Body', type: 'code' },
+  },
+  variables: [TemplateVariables.Email, TemplateVariables.FactorType, TemplateVariables.Data],
+  validationSchema: z.object({
+    MAILER_SUBJECTS_MFA_FACTOR_UNENROLLED_NOTIFICATION: z.string().min(1, 'Subject is required.'),
+  }),
+  misc: {
+    emailTemplateType: 'security',
+  },
+}
+
+export const TEMPLATES_SCHEMAS = [
+  CONFIRMATION,
+  INVITE,
+  MAGIC_LINK,
+  EMAIL_CHANGE,
+  RECOVERY,
+  REAUTHENTICATION,
+  // Notifications
+  PASSWORD_CHANGED_NOTIFICATION,
+  EMAIL_CHANGED_NOTIFICATION,
+  PHONE_CHANGED_NOTIFICATION,
+  IDENTITY_LINKED_NOTIFICATION,
+  IDENTITY_UNLINKED_NOTIFICATION,
+  MFA_FACTOR_ENROLLED_NOTIFICATION,
+  MFA_FACTOR_UNENROLLED_NOTIFICATION,
+]
diff --git a/apps/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.tsx b/apps/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.tsx
index 2f7f6c4e780..8e3e281af3e 100644
--- a/apps/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.tsx
+++ b/apps/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.tsx
@@ -18,7 +18,7 @@ import {
 import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
 import * as z from 'zod'
 
-import { TEMPLATES_SCHEMAS } from '../AuthTemplatesValidation'
+import { TEMPLATES_SCHEMAS } from './AuthTemplatesValidation'
 import { slugifyTitle } from './EmailTemplates.utils'
 import AlertError from '@/components/ui/AlertError'
 import { InlineLink } from '@/components/ui/InlineLink'
diff --git a/apps/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.types.ts b/apps/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.types.ts
new file mode 100644
index 00000000000..b48ccd78c7a
--- /dev/null
+++ b/apps/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.types.ts
@@ -0,0 +1,64 @@
+import { ReactNode } from 'react'
+import z from 'zod'
+
+export type KebabCase<S extends string> = S extends `${infer A}_${infer B}`
+  ? `${Lowercase<A>}-${KebabCase<B>}`
+  : Lowercase<S>
+
+const AUTH_TEMPLATE_TYPES = [
+  'CONFIRMATION',
+  'EMAIL_CHANGE',
+  'INVITE',
+  'MAGIC_LINK',
+  'RECOVERY',
+  'REAUTHENTICATION',
+  'PASSWORD_CHANGED_NOTIFICATION',
+  'EMAIL_CHANGED_NOTIFICATION',
+  'PHONE_CHANGED_NOTIFICATION',
+  'IDENTITY_LINKED_NOTIFICATION',
+  'IDENTITY_UNLINKED_NOTIFICATION',
+  'MFA_FACTOR_ENROLLED_NOTIFICATION',
+  'MFA_FACTOR_UNENROLLED_NOTIFICATION',
+] as const
+
+export type AuthTemplateType = (typeof AUTH_TEMPLATE_TYPES)[number]
+export type AuthTemplateResetType = KebabCase<AuthTemplateType>
+
+export type TemplateVariableName =
+  | 'ConfirmationURL'
+  | 'Token'
+  | 'TokenHash'
+  | 'SiteURL'
+  | 'Email'
+  | 'NewEmail'
+  | 'OldEmail'
+  | 'Phone'
+  | 'OldPhone'
+  | 'Provider'
+  | 'FactorType'
+  | 'Data'
+  | 'RedirectTo'
+
+export type TemplateVariable = {
+  name: TemplateVariableName
+  value: string
+  description: string | ReactNode
+}
+
+export interface AuthTemplate {
+  id: AuthTemplateType
+  type: 'object'
+  title: string
+  purpose: string
+  properties: {
+    [x: string]: {
+      title: string
+      type: 'boolean' | 'string' | 'select' | 'number' | 'code'
+      description?: string
+      descriptionOptional?: string
+    }
+  }
+  variables: TemplateVariable[]
+  validationSchema: z.AnyZodObject
+  misc: { emailTemplateType: 'authentication' | 'security' }
+}
diff --git a/apps/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.utils.ts b/apps/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.utils.ts
index e1297392939..c9998a9f746 100644
--- a/apps/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.utils.ts
+++ b/apps/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.utils.ts
@@ -1,3 +1,5 @@
+import { type AuthTemplateType, type KebabCase } from './EmailTemplates.types'
+
 /**
  * Convert template title to URL-friendly slug
  * Shared function to ensure slug matching works correctly across multiple files
@@ -6,3 +8,7 @@
 export const slugifyTitle = (title: string) => {
   return title.trim().replace(/\s+/g, '-').toLowerCase()
 }
+
+/* Convert upper camel case to lower kebab case  */
+export const getAuthTemplateType = <T extends AuthTemplateType>(id: T) =>
+  id.toLowerCase().replace(/_/g, '-') as KebabCase<T>
diff --git a/apps/studio/components/interfaces/Auth/EmailTemplates/ResetTemplateDialog.tsx b/apps/studio/components/interfaces/Auth/EmailTemplates/ResetTemplateDialog.tsx
new file mode 100644
index 00000000000..93409adaa83
--- /dev/null
+++ b/apps/studio/components/interfaces/Auth/EmailTemplates/ResetTemplateDialog.tsx
@@ -0,0 +1,89 @@
+import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { useParams } from 'common'
+import { useState } from 'react'
+import { toast } from 'sonner'
+import {
+  AlertDialog,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+  Button,
+} from 'ui'
+
+import { type AuthTemplate } from './EmailTemplates.types'
+import { getAuthTemplateType } from './EmailTemplates.utils'
+import { AuthConfigResponse } from '@/data/auth/auth-config-query'
+import { useAuthTemplateResetMutation } from '@/data/auth/auth-template-reset-mutation'
+import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
+
+export const ResetTemplateDialog = ({
+  template,
+  hasUnsavedChanges,
+  onResetSuccess,
+}: {
+  template: AuthTemplate
+  hasUnsavedChanges: boolean
+  onResetSuccess: (config: AuthConfigResponse) => void
+}) => {
+  const { ref: projectRef } = useParams()
+  const [open, setOpen] = useState(false)
+  const { can: canUpdateConfig } = useAsyncCheckPermissions(
+    PermissionAction.UPDATE,
+    'custom_config_gotrue'
+  )
+
+  const { id } = template
+  const templateType = getAuthTemplateType(id)
+
+  const { mutate: resetAuthTemplate, isPending: isResettingTemplate } =
+    useAuthTemplateResetMutation()
+
+  const resetTemplateToDefault = () => {
+    if (!projectRef) return console.error('Project ref is required')
+    if (!templateType) return console.error('Template type is required')
+
+    resetAuthTemplate(
+      {
+        projectRef,
+        template: templateType,
+      },
+      {
+        onSuccess: (config) => {
+          toast.success('Email template reset to default')
+          onResetSuccess(config)
+          setOpen(false)
+        },
+      }
+    )
+  }
+
+  return (
+    <AlertDialog open={open} onOpenChange={setOpen}>
+      <AlertDialogTrigger asChild>
+        <Button type="default" htmlType="button" disabled={!canUpdateConfig || isResettingTemplate}>
+          Reset template
+        </Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Reset template to default</AlertDialogTitle>
+          <AlertDialogDescription>
+            {hasUnsavedChanges
+              ? 'This will discard your unsaved changes and use the default subject line and email body content.'
+              : 'This will remove your custom subject line and email body content. The default values will be used instead.'}
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={isResettingTemplate}>Cancel</AlertDialogCancel>
+          <Button type="warning" onClick={resetTemplateToDefault} loading={isResettingTemplate}>
+            Reset
+          </Button>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}
diff --git a/apps/studio/components/interfaces/Auth/EmailTemplates/TemplateEditor.test.tsx b/apps/studio/components/interfaces/Auth/EmailTemplates/TemplateEditor.test.tsx
new file mode 100644
index 00000000000..618585a8efb
--- /dev/null
+++ b/apps/studio/components/interfaces/Auth/EmailTemplates/TemplateEditor.test.tsx
@@ -0,0 +1,259 @@
+import { screen, waitFor, within } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { toast } from 'sonner'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { TEMPLATES_SCHEMAS } from './AuthTemplatesValidation'
+import { TemplateEditor } from './TemplateEditor'
+import { render } from '@/tests/helpers'
+
+const {
+  resetTemplateMock,
+  updateAuthConfigMock,
+  useAuthConfigQueryMock,
+  useAuthTemplateResetMutationMock,
+  useAuthConfigUpdateMutationMock,
+  useAsyncCheckPermissionsMock,
+  validateSpamMock,
+} = vi.hoisted(() => ({
+  resetTemplateMock: vi.fn(),
+  updateAuthConfigMock: vi.fn(),
+  useAuthConfigQueryMock: vi.fn(),
+  useAuthTemplateResetMutationMock: vi.fn(),
+  useAuthConfigUpdateMutationMock: vi.fn(),
+  useAsyncCheckPermissionsMock: vi.fn(),
+  validateSpamMock: vi.fn(),
+}))
+
+vi.mock(import('common'), async (importOriginal) => {
+  const actual = await importOriginal()
+
+  return {
+    ...actual,
+    useParams: vi.fn().mockReturnValue({ ref: 'project-ref' }),
+  }
+})
+
+vi.mock('@/components/ui/CodeEditor/CodeEditor', () => ({
+  CodeEditor: ({
+    value,
+    onInputChange,
+  }: {
+    value: string
+    onInputChange: (value: string) => void
+  }) => (
+    <textarea
+      aria-label="Body source"
+      value={value}
+      onChange={(event) => onInputChange(event.target.value)}
+    />
+  ),
+}))
+
+vi.mock('@/components/ui-patterns/Dialogs/PreventNavigationOnUnsavedChanges', () => ({
+  PreventNavigationOnUnsavedChanges: () => null,
+}))
+
+vi.mock('@/data/auth/auth-config-query', () => ({
+  useAuthConfigQuery: useAuthConfigQueryMock,
+}))
+
+vi.mock('@/data/auth/auth-config-update-mutation', () => ({
+  useAuthConfigUpdateMutation: useAuthConfigUpdateMutationMock,
+}))
+
+vi.mock('@/data/auth/auth-template-reset-mutation', () => ({
+  useAuthTemplateResetMutation: useAuthTemplateResetMutationMock,
+}))
+
+vi.mock('@/data/auth/validate-spam-mutation', () => ({
+  useValidateSpamMutation: () => ({ mutate: validateSpamMock }),
+}))
+
+vi.mock('@/hooks/misc/useCheckPermissions', () => ({
+  useAsyncCheckPermissions: useAsyncCheckPermissionsMock,
+}))
+
+vi.mock('sonner', () => ({
+  toast: {
+    success: vi.fn(),
+    error: vi.fn(),
+  },
+}))
+
+const confirmationTemplate = TEMPLATES_SCHEMAS.find((template) => template.id === 'CONFIRMATION')!
+
+const createAuthConfig = ({
+  subject = 'Confirm your email address',
+  body,
+  hasCustomBody,
+  hasCustomSubject = false,
+}: {
+  subject?: string
+  body: string
+  hasCustomBody: boolean
+  hasCustomSubject?: boolean
+}) => ({
+  MAILER_SUBJECTS_CONFIRMATION: subject,
+  MAILER_SUBJECTS_CUSTOM_CONTENTS: {
+    MAILER_SUBJECTS_CONFIRMATION: hasCustomSubject,
+  },
+  MAILER_TEMPLATES_CONFIRMATION_CONTENT: body,
+  MAILER_TEMPLATES_CUSTOM_CONTENTS: {
+    MAILER_TEMPLATES_CONFIRMATION_CONTENT: hasCustomBody,
+  },
+  SMTP_HOST: 'smtp.example.com',
+  SMTP_PASS: 'password',
+  SMTP_USER: 'user',
+})
+
+const renderTemplateEditor = ({
+  body = '<p>Default template</p>',
+  canUpdateConfig = true,
+  hasCustomBody = false,
+  hasCustomSubject = false,
+}: {
+  body?: string
+  canUpdateConfig?: boolean
+  hasCustomBody?: boolean
+  hasCustomSubject?: boolean
+} = {}) => {
+  useAuthConfigQueryMock.mockReturnValue({
+    data: createAuthConfig({ body, hasCustomBody, hasCustomSubject }),
+    isSuccess: true,
+  })
+  useAsyncCheckPermissionsMock.mockReturnValue({ can: canUpdateConfig })
+  useAuthConfigUpdateMutationMock.mockReturnValue({ mutate: updateAuthConfigMock })
+  useAuthTemplateResetMutationMock.mockReturnValue({ mutate: resetTemplateMock })
+
+  return render(<TemplateEditor template={confirmationTemplate} />)
+}
+
+describe('TemplateEditor reset to default', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    validateSpamMock.mockImplementation((_vars, callbacks) => callbacks?.onSuccess?.({ rules: [] }))
+  })
+
+  const resetAuthConfig = createAuthConfig({
+    subject: 'Confirm your email address',
+    body: '<h2>Confirm your email address</h2>\n\n<p>Follow the link below to confirm this email address and finish signing up.</p>\n<p><a href="{{ .ConfirmationURL }}">Confirm email address</a></p>',
+    hasCustomBody: false,
+    hasCustomSubject: false,
+  })
+
+  it('hides reset when the API does not mark the body as custom', () => {
+    renderTemplateEditor()
+
+    expect(screen.queryByRole('button', { name: 'Reset template' })).not.toBeInTheDocument()
+  })
+
+  it('shows reset when the API marks the body as custom', () => {
+    renderTemplateEditor({ hasCustomBody: true })
+
+    expect(screen.getByRole('button', { name: 'Reset template' })).toBeInTheDocument()
+  })
+
+  it('shows reset when the API marks the subject as custom', () => {
+    renderTemplateEditor({ hasCustomSubject: true })
+
+    expect(screen.getByRole('button', { name: 'Reset template' })).toBeInTheDocument()
+  })
+
+  it('keeps reset visible while there are unsaved editor changes', async () => {
+    const user = userEvent.setup()
+    renderTemplateEditor({ hasCustomBody: true })
+
+    await user.clear(screen.getByLabelText('Body source'))
+    await user.type(screen.getByLabelText('Body source'), '<p>Unsaved body</p>')
+
+    expect(screen.getByRole('button', { name: 'Reset template' })).toBeInTheDocument()
+  })
+
+  it('warns that reset discards unsaved changes', async () => {
+    const user = userEvent.setup()
+    renderTemplateEditor({ hasCustomBody: true })
+
+    await user.clear(screen.getByLabelText('Body source'))
+    await user.type(screen.getByLabelText('Body source'), '<p>Unsaved body</p>')
+    await user.click(screen.getByRole('button', { name: 'Reset template' }))
+
+    expect(
+      await screen.findByText(
+        'This will discard your unsaved changes and use the default subject line and email body content.'
+      )
+    ).toBeInTheDocument()
+  })
+
+  it('resets the template through the dedicated reset endpoint after confirmation', async () => {
+    const user = userEvent.setup()
+    resetTemplateMock.mockImplementation((_vars, callbacks) =>
+      callbacks?.onSuccess?.(resetAuthConfig)
+    )
+
+    renderTemplateEditor({ hasCustomBody: true })
+
+    await user.click(screen.getByRole('button', { name: 'Reset template' }))
+    const dialog = await screen.findByRole('alertdialog')
+    await user.click(within(dialog).getByRole('button', { name: 'Reset' }))
+
+    await waitFor(() =>
+      expect(resetTemplateMock).toHaveBeenCalledWith(
+        {
+          projectRef: 'project-ref',
+          template: 'confirmation',
+        },
+        expect.any(Object)
+      )
+    )
+
+    expect(toast.success).toHaveBeenCalledWith('Email template reset to default')
+  })
+
+  it('does not reset through the auth config update payload', async () => {
+    const user = userEvent.setup()
+    resetTemplateMock.mockImplementation((_vars, callbacks) =>
+      callbacks?.onSuccess?.(resetAuthConfig)
+    )
+
+    renderTemplateEditor({ hasCustomBody: true })
+
+    await user.click(screen.getByRole('button', { name: 'Reset template' }))
+    const dialog = await screen.findByRole('alertdialog')
+    await user.click(within(dialog).getByRole('button', { name: 'Reset' }))
+
+    await waitFor(() => expect(resetTemplateMock).toHaveBeenCalled())
+
+    expect(updateAuthConfigMock).not.toHaveBeenCalled()
+  })
+
+  it('uses the reset response as the new editor state', async () => {
+    const user = userEvent.setup()
+    resetTemplateMock.mockImplementation((_vars, callbacks) =>
+      callbacks?.onSuccess?.(resetAuthConfig)
+    )
+
+    renderTemplateEditor({
+      body: '<p>Custom body</p>',
+      hasCustomBody: true,
+      hasCustomSubject: true,
+    })
+
+    await user.click(screen.getByRole('button', { name: 'Reset template' }))
+    const dialog = await screen.findByRole('alertdialog')
+    await user.click(within(dialog).getByRole('button', { name: 'Reset' }))
+
+    await waitFor(() => {
+      expect(screen.getByDisplayValue('Confirm your email address')).toBeInTheDocument()
+      expect(screen.getByLabelText('Body source')).toHaveValue(
+        '<h2>Confirm your email address</h2>\n\n<p>Follow the link below to confirm this email address and finish signing up.</p>\n<p><a href="{{ .ConfirmationURL }}">Confirm email address</a></p>'
+      )
+    })
+  })
+
+  it('disables reset when the user cannot update auth config', () => {
+    renderTemplateEditor({ hasCustomBody: true, canUpdateConfig: false })
+
+    expect(screen.getByRole('button', { name: 'Reset template' })).toBeDisabled()
+  })
+})
diff --git a/apps/studio/components/interfaces/Auth/EmailTemplates/TemplateEditor.tsx b/apps/studio/components/interfaces/Auth/EmailTemplates/TemplateEditor.tsx
index 8427a264c51..29f08d4027d 100644
--- a/apps/studio/components/interfaces/Auth/EmailTemplates/TemplateEditor.tsx
+++ b/apps/studio/components/interfaces/Auth/EmailTemplates/TemplateEditor.tsx
@@ -2,7 +2,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useParams } from 'common'
 import type { editor } from 'monaco-editor'
-import { useEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import ReactMarkdown from 'react-markdown'
 import { toast } from 'sonner'
@@ -21,32 +21,54 @@ import {
 } from 'ui'
 import { Admonition } from 'ui-patterns'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
+import z from 'zod'
 
+import type { AuthTemplate } from './EmailTemplates.types'
+import { ResetTemplateDialog } from './ResetTemplateDialog'
 import { SpamValidation } from './SpamValidation'
 import { PreventNavigationOnUnsavedChanges } from '@/components/ui-patterns/Dialogs/PreventNavigationOnUnsavedChanges'
-import CodeEditor from '@/components/ui/CodeEditor/CodeEditor'
+import { CodeEditor } from '@/components/ui/CodeEditor/CodeEditor'
+import { InlineLink } from '@/components/ui/InlineLink'
 import { TwoOptionToggle } from '@/components/ui/TwoOptionToggle'
+import type { AuthConfigResponse } from '@/data/auth/auth-config-query'
 import { useAuthConfigQuery } from '@/data/auth/auth-config-query'
 import { useAuthConfigUpdateMutation } from '@/data/auth/auth-config-update-mutation'
 import { useValidateSpamMutation, ValidateSpamResponse } from '@/data/auth/validate-spam-mutation'
 import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
-import type { FormSchema } from '@/types'
+import { DOCS_URL } from '@/lib/constants'
 
 interface TemplateEditorProps {
-  template: FormSchema
+  template: AuthTemplate
 }
 
+type EmailTemplateContentKey = Extract<
+  keyof AuthConfigResponse,
+  `MAILER_TEMPLATES_${string}_CONTENT`
+>
+type EmailTemplateSubjectKey = Exclude<
+  Extract<keyof AuthConfigResponse, `MAILER_SUBJECTS_${string}`>,
+  'MAILER_SUBJECTS_CUSTOM_CONTENTS'
+>
+
 export const TemplateEditor = ({ template }: TemplateEditorProps) => {
   const { ref: projectRef } = useParams()
   const { can: canUpdateConfig } = useAsyncCheckPermissions(
     PermissionAction.UPDATE,
     'custom_config_gotrue'
   )
-  const editorRef = useRef<editor.IStandaloneCodeEditor>(null)
 
-  // [Joshen] Error state is handled in the parent
+  const { id, properties } = template
+  const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null)
+  const messageSlug = `MAILER_TEMPLATES_${id}_CONTENT` as EmailTemplateContentKey
+
   const { data: authConfig, isSuccess } = useAuthConfigQuery({ projectRef })
 
+  const [validationResult, setValidationResult] = useState<ValidateSpamResponse>()
+  const [bodyValue, setBodyValue] = useState((authConfig && authConfig[messageSlug]) ?? '')
+  const [, setHasUnsavedChanges] = useState(false)
+  const [isSavingTemplate, setIsSavingTemplate] = useState(false)
+  const [activeView, setActiveView] = useState<'source' | 'preview'>('source')
+
   const { mutate: validateSpam } = useValidateSpamMutation()
 
   const { mutate: updateAuthConfig } = useAuthConfigUpdateMutation({
@@ -56,37 +78,39 @@ export const TemplateEditor = ({ template }: TemplateEditorProps) => {
     },
   })
 
-  const { id, properties } = template
+  const subjectSlug = Object.keys(properties).find((key) => key.startsWith('MAILER_SUBJECTS_')) as
+    | EmailTemplateSubjectKey
+    | undefined
 
-  const messageSlug = `MAILER_TEMPLATES_${id}_CONTENT` as keyof typeof authConfig
   const messageProperty = properties[messageSlug]
   const builtInSMTP =
     isSuccess &&
     authConfig &&
     (!authConfig.SMTP_HOST || !authConfig.SMTP_USER || !authConfig.SMTP_PASS)
 
-  const [validationResult, setValidationResult] = useState<ValidateSpamResponse>()
-  const [bodyValue, setBodyValue] = useState((authConfig && authConfig[messageSlug]) ?? '')
-  const [, setHasUnsavedChanges] = useState(false)
-  const [isSavingTemplate, setIsSavingTemplate] = useState(false)
-  const [activeView, setActiveView] = useState<'source' | 'preview'>('source')
-
   const spamRules = (validationResult?.rules ?? []).filter((rule) => rule.score > 0)
 
+  const getFormValuesFromConfig = useCallback(
+    (config: AuthConfigResponse | undefined) => {
+      const result: { [x: string]: string } = {}
+      Object.keys(properties).forEach((key) => {
+        result[key] = ((config && config[key as keyof typeof config]) ?? '') as string
+      })
+      return result
+    },
+    [properties]
+  )
+
   const INITIAL_VALUES = useMemo(() => {
-    const result: { [x: string]: string } = {}
-    Object.keys(properties).forEach((key) => {
-      result[key] = ((authConfig && authConfig[key as keyof typeof authConfig]) ?? '') as string
-    })
-    return result
-  }, [authConfig, properties])
+    return getFormValuesFromConfig(authConfig)
+  }, [authConfig, getFormValuesFromConfig])
 
   const form = useForm({
     defaultValues: INITIAL_VALUES,
     resolver: zodResolver(template.validationSchema),
   })
 
-  const onSubmit = (values: any) => {
+  const onSubmit = (values: z.infer<typeof template.validationSchema>) => {
     if (!projectRef) return console.error('Project ref is required')
 
     setIsSavingTemplate(true)
@@ -137,33 +161,14 @@ export const TemplateEditor = ({ template }: TemplateEditorProps) => {
     )
   }
 
-  // Single useMemo hook to parse and prepare message variables
-  const messageVariables = useMemo(() => {
-    if (!messageProperty?.description) return []
-
-    // Parse bullet point format: - `{{ .Variable }}` : Description
-    const lines = messageProperty.description.split('\n')
-    const variables: { variable: string; description: string }[] = []
-
-    for (const line of lines) {
-      // Match lines that start with a bullet point followed by a variable in the format {{ .Variable }}
-      // Handle variations in formatting (with or without backticks, different spacing)
-      const match = line.match(/-\s*`?({{\s*\.\w+\s*}})`?\s*(?::|-)?\s*(.+)/)
-      if (match && match[1] && match[2]) {
-        variables.push({
-          variable: match[1].replace(/`/g, '').trim(),
-          description: match[2].trim(),
-        })
-      }
-    }
-
-    return variables
-  }, [messageProperty?.description])
-
   // Check if form values have changed
   const formValues = form.watch()
   const baselineValues = INITIAL_VALUES
   const baselineBodyValue = (authConfig && authConfig[messageSlug]) ?? ''
+  const hasCustomTemplate =
+    authConfig?.MAILER_TEMPLATES_CUSTOM_CONTENTS?.[messageSlug] === true ||
+    (subjectSlug !== undefined &&
+      authConfig?.MAILER_SUBJECTS_CUSTOM_CONTENTS?.[subjectSlug] === true)
   const hasFormChanges = JSON.stringify(formValues) !== JSON.stringify(baselineValues)
   const hasChanges = hasFormChanges || baselineBodyValue !== bodyValue
 
@@ -198,14 +203,10 @@ export const TemplateEditor = ({ template }: TemplateEditorProps) => {
   // Update form values when authConfig changes
   useEffect(() => {
     if (authConfig) {
-      const values: { [key: string]: string } = {}
-      Object.keys(properties).forEach((key) => {
-        values[key] = ((authConfig && authConfig[key as keyof typeof authConfig]) ?? '') as string
-      })
-      form.reset(values)
+      form.reset(getFormValuesFromConfig(authConfig))
       setBodyValue((authConfig && authConfig[messageSlug]) ?? '')
     }
-  }, [authConfig, properties, messageSlug, form])
+  }, [authConfig, getFormValuesFromConfig, messageSlug, form])
 
   useEffect(() => {
     if (projectRef && id && !!authConfig) {
@@ -300,27 +301,57 @@ export const TemplateEditor = ({ template }: TemplateEditorProps) => {
                       editorRef={editorRef}
                     />
                   </div>
-                  {messageVariables.length > 0 && (
-                    <div className="flex flex-wrap gap-1">
-                      {messageVariables.map(({ variable, description }) => (
-                        <Tooltip key={variable}>
+
+                  <div className="flex flex-col gap-y-2">
+                    <div className="flex flex-col">
+                      <p className="text-sm">Template variables</p>
+                      <p className="text-sm text-foreground-lighter">
+                        Data placeholders that can be inserted into the subject or body.{' '}
+                        <InlineLink
+                          href={`${DOCS_URL}/guides/local-development/customizing-email-templates#template-variables`}
+                        >
+                          Learn more
+                        </InlineLink>
+                      </p>
+                    </div>
+                    <div className="flex flex-wrap gap-x-1">
+                      {template.variables.map((variable) => (
+                        <Tooltip key={variable.value}>
                           <TooltipTrigger asChild>
                             <Button
                               type="outline"
                               size="tiny"
                               className="rounded-full"
-                              onClick={() => insertTextAtCursor(variable)}
+                              onClick={() => insertTextAtCursor(variable.value)}
                             >
-                              {variable}
+                              {variable.value}
                             </Button>
                           </TooltipTrigger>
-                          <TooltipContent side="top">
-                            <p>{description || 'Variable description not available'}</p>
+                          <TooltipContent side="bottom">
+                            {variable.description}
+
+                            {variable.name === 'Token' &&
+                              template.variables.some((x) => x.name === 'ConfirmationURL') && (
+                                <>
+                                  , which can be used instead of{' '}
+                                  <code className="text-code-inline">ConfirmationURL</code>
+                                </>
+                              )}
+
+                            {variable.name === 'SiteURL' && (
+                              <>
+                                {' '}
+                                as defined in{' '}
+                                <InlineLink href={`/project/${projectRef}/auth/url-configuration`}>
+                                  URL Configuration
+                                </InlineLink>
+                              </>
+                            )}
                           </TooltipContent>
                         </Tooltip>
                       ))}
                     </div>
-                  )}
+                  </div>
                 </>
               ) : (
                 <>
@@ -341,27 +372,42 @@ export const TemplateEditor = ({ template }: TemplateEditorProps) => {
 
             <SpamValidation spamRules={spamRules} />
 
-            <CardFooter className="flex flex-row justify-end gap-2">
-              {hasChanges && (
-                <Button
-                  type="default"
-                  onClick={() => {
-                    form.reset(INITIAL_VALUES)
-                    setBodyValue((authConfig && authConfig[messageSlug]) ?? '')
+            <CardFooter className="flex flex-row justify-between gap-2">
+              {hasCustomTemplate && (
+                <ResetTemplateDialog
+                  template={template}
+                  hasUnsavedChanges={hasChanges}
+                  onResetSuccess={(config: AuthConfigResponse) => {
+                    form.reset(getFormValuesFromConfig(config))
+                    setBodyValue((config && config[messageSlug]) ?? '')
+                    setValidationResult(undefined)
                     setHasUnsavedChanges(false)
                   }}
-                >
-                  Cancel
-                </Button>
+                />
               )}
-              <Button
-                type="primary"
-                htmlType="submit"
-                disabled={!canUpdateConfig || isSavingTemplate || !hasChanges}
-                loading={isSavingTemplate}
-              >
-                Save changes
-              </Button>
+              <div className="ml-auto flex flex-row gap-2">
+                {hasChanges && (
+                  <Button
+                    type="default"
+                    htmlType="button"
+                    onClick={() => {
+                      form.reset(INITIAL_VALUES)
+                      setBodyValue((authConfig && authConfig[messageSlug]) ?? '')
+                      setHasUnsavedChanges(false)
+                    }}
+                  >
+                    Cancel
+                  </Button>
+                )}
+                <Button
+                  type="primary"
+                  htmlType="submit"
+                  disabled={!canUpdateConfig || isSavingTemplate || !hasChanges}
+                  loading={isSavingTemplate}
+                >
+                  Save changes
+                </Button>
+              </div>
             </CardFooter>
           </>
         )}
diff --git a/apps/studio/components/interfaces/Database/Functions/CreateFunction/index.tsx b/apps/studio/components/interfaces/Database/Functions/CreateFunction/index.tsx
index 2f9944b22a2..d998356f7dc 100644
--- a/apps/studio/components/interfaces/Database/Functions/CreateFunction/index.tsx
+++ b/apps/studio/components/interfaces/Database/Functions/CreateFunction/index.tsx
@@ -48,7 +48,6 @@ import { useDatabaseFunctionUpdateMutation } from '@/data/database-functions/dat
 import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
 import { useConfirmOnClose } from '@/hooks/ui/useConfirmOnClose'
 import { useProtectedSchemas } from '@/hooks/useProtectedSchemas'
-import type { FormSchema } from '@/types'
 
 const FORM_ID = 'create-function-sidepanel'
 
diff --git a/apps/studio/components/layouts/AuthLayout/AuthEmailsLayout.tsx b/apps/studio/components/layouts/AuthLayout/AuthEmailsLayout.tsx
index 3b265cf2675..6a427514f84 100644
--- a/apps/studio/components/layouts/AuthLayout/AuthEmailsLayout.tsx
+++ b/apps/studio/components/layouts/AuthLayout/AuthEmailsLayout.tsx
@@ -23,7 +23,7 @@ export const AuthEmailsLayout = ({ children }: PropsWithChildren<{}>) => {
   ]
 
   return (
-    <AuthLayout title="Email">
+    <AuthLayout title="Emails">
       {showEmails ? (
         <PageLayout
           title="Emails"
diff --git a/apps/studio/components/layouts/AuthLayout/AuthLayout.utils.test.ts b/apps/studio/components/layouts/AuthLayout/AuthLayout.utils.test.ts
index 7cf8b2e67d0..557684c5246 100644
--- a/apps/studio/components/layouts/AuthLayout/AuthLayout.utils.test.ts
+++ b/apps/studio/components/layouts/AuthLayout/AuthLayout.utils.test.ts
@@ -52,7 +52,7 @@ describe('generateAuthMenu', () => {
     expect(names).toContain('Overview')
     expect(names).toContain('Users')
     expect(names).toContain('OAuth Apps')
-    expect(names).toContain('Email')
+    expect(names).toContain('Emails')
     expect(names).toContain('Sign In / Providers')
     expect(names).toContain('OAuth Server')
     expect(names).toContain('Passkeys')
@@ -81,7 +81,7 @@ describe('generateAuthMenu', () => {
     expect(names).toContain('Audit Logs')
 
     expect(names).not.toContain('Overview')
-    expect(names).not.toContain('Email')
+    expect(names).not.toContain('Emails')
     expect(names).not.toContain('Sign In / Providers')
     expect(names).not.toContain('Rate Limits')
     expect(names).not.toContain('Multi-Factor')
@@ -119,7 +119,7 @@ describe('generateAuthMenu', () => {
   it.each([
     ['signInProviders', 'Sign In / Providers'],
     ['rateLimits', 'Rate Limits'],
-    ['emails', 'Email'],
+    ['emails', 'Emails'],
     ['multiFactor', 'Multi-Factor'],
     ['attackProtection', 'Attack Protection'],
     ['performance', 'Performance'],
diff --git a/apps/studio/components/layouts/AuthLayout/AuthLayout.utils.ts b/apps/studio/components/layouts/AuthLayout/AuthLayout.utils.ts
index b593ae60108..c27fa348dd8 100644
--- a/apps/studio/components/layouts/AuthLayout/AuthLayout.utils.ts
+++ b/apps/studio/components/layouts/AuthLayout/AuthLayout.utils.ts
@@ -68,7 +68,7 @@ export function generateAuthMenu(options: GenerateAuthMenuOptions): ProductMenuG
               ...(features.emails
                 ? [
                     {
-                      name: 'Email',
+                      name: 'Emails',
                       key: 'email',
                       pages: ['templates', 'smtp'],
                       url: `${baseUrl}/templates`,
diff --git a/apps/studio/data/auth/auth-config-update-mutation.ts b/apps/studio/data/auth/auth-config-update-mutation.ts
index f21414a47b5..7d1fb426221 100644
--- a/apps/studio/data/auth/auth-config-update-mutation.ts
+++ b/apps/studio/data/auth/auth-config-update-mutation.ts
@@ -1,6 +1,7 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { toast } from 'sonner'
 
+import type { ProjectAuthConfigData } from './auth-config-query'
 import { authKeys } from './keys'
 import type { components } from '@/data/api'
 import { handleError, patch } from '@/data/fetchers'
@@ -43,16 +44,26 @@ export const useAuthConfigUpdateMutation = ({
     mutationFn: (vars) => updateAuthConfig(vars),
     async onSuccess(data, variables, context) {
       const { projectRef, skipInvalidation = false } = variables
-      await Promise.all([
-        !skipInvalidation &&
-          queryClient.invalidateQueries({ queryKey: authKeys.authConfig(projectRef) }),
-        queryClient.invalidateQueries({ queryKey: lintKeys.lint(projectRef) }),
-      ])
-      await queryClient.refetchQueries({
-        queryKey: lintKeys.lint(projectRef),
-        type: 'active',
-      })
+
+      if (!skipInvalidation) {
+        queryClient.setQueryData<ProjectAuthConfigData>(authKeys.authConfig(projectRef), data)
+        await queryClient.invalidateQueries({
+          queryKey: authKeys.authConfig(projectRef),
+          refetchType: 'none',
+        })
+      }
+
       await onSuccess?.(data, variables, context)
+
+      queryClient
+        .invalidateQueries({ queryKey: lintKeys.lint(projectRef) })
+        .then(() =>
+          queryClient.refetchQueries({
+            queryKey: lintKeys.lint(projectRef),
+            type: 'active',
+          })
+        )
+        .catch(() => undefined)
     },
     async onError(data, variables, context) {
       if (onError === undefined) {
diff --git a/apps/studio/data/auth/auth-template-reset-mutation.ts b/apps/studio/data/auth/auth-template-reset-mutation.ts
new file mode 100644
index 00000000000..4233fcf56e7
--- /dev/null
+++ b/apps/studio/data/auth/auth-template-reset-mutation.ts
@@ -0,0 +1,67 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { toast } from 'sonner'
+
+import type { ProjectAuthConfigData } from './auth-config-query'
+import { authKeys } from './keys'
+import { type AuthTemplateResetType } from '@/components/interfaces/Auth/EmailTemplates/EmailTemplates.types'
+import { handleError, post } from '@/data/fetchers'
+import { lintKeys } from '@/data/lint/keys'
+import type { ResponseError, UseCustomMutationOptions } from '@/types'
+
+type AuthTemplateResetVariables = {
+  projectRef: string
+  template: AuthTemplateResetType
+}
+
+async function resetAuthTemplate({ projectRef, template }: AuthTemplateResetVariables) {
+  const { data, error } = await post('/platform/auth/{ref}/templates/{template}/reset', {
+    params: { path: { ref: projectRef, template } },
+  })
+
+  if (error) handleError(error)
+  return data
+}
+
+type AuthTemplateResetData = Awaited<ReturnType<typeof resetAuthTemplate>>
+
+export const useAuthTemplateResetMutation = ({
+  onSuccess,
+  onError,
+  ...options
+}: Omit<
+  UseCustomMutationOptions<AuthTemplateResetData, ResponseError, AuthTemplateResetVariables>,
+  'mutationFn'
+> = {}) => {
+  const queryClient = useQueryClient()
+
+  return useMutation<AuthTemplateResetData, ResponseError, AuthTemplateResetVariables>({
+    mutationFn: (vars) => resetAuthTemplate(vars),
+    async onSuccess(data, variables, context) {
+      const { projectRef } = variables
+      queryClient.setQueryData<ProjectAuthConfigData>(authKeys.authConfig(projectRef), data)
+      await queryClient.invalidateQueries({
+        queryKey: authKeys.authConfig(projectRef),
+        refetchType: 'none',
+      })
+      await onSuccess?.(data, variables, context)
+
+      void queryClient
+        .invalidateQueries({ queryKey: lintKeys.lint(projectRef) })
+        .then(() =>
+          queryClient.refetchQueries({
+            queryKey: lintKeys.lint(projectRef),
+            type: 'active',
+          })
+        )
+        .catch(() => undefined)
+    },
+    async onError(data, variables, context) {
+      if (onError === undefined) {
+        toast.error(`Failed to reset email template: ${data.message}`)
+      } else {
+        onError(data, variables, context)
+      }
+    },
+    ...options,
+  })
+}
diff --git a/apps/studio/pages/project/[ref]/auth/templates/[templateId].tsx b/apps/studio/pages/project/[ref]/auth/templates/[templateId].tsx
index 57ce2dedd5f..bbca5ebac8c 100644
--- a/apps/studio/pages/project/[ref]/auth/templates/[templateId].tsx
+++ b/apps/studio/pages/project/[ref]/auth/templates/[templateId].tsx
@@ -35,13 +35,13 @@ import {
 } from 'ui/src/components/shadcn/ui/breadcrumb'
 import * as z from 'zod'
 
-import { TEMPLATES_SCHEMAS } from '@/components/interfaces/Auth/AuthTemplatesValidation'
+import { TEMPLATES_SCHEMAS } from '@/components/interfaces/Auth/EmailTemplates/AuthTemplatesValidation'
 import { slugifyTitle } from '@/components/interfaces/Auth/EmailTemplates/EmailTemplates.utils'
 import { TemplateEditor } from '@/components/interfaces/Auth/EmailTemplates/TemplateEditor'
 import AuthLayout from '@/components/layouts/AuthLayout/AuthLayout'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
 import { DocsButton } from '@/components/ui/DocsButton'
-import NoPermission from '@/components/ui/NoPermission'
+import { NoPermission } from '@/components/ui/NoPermission'
 import { useAuthConfigQuery } from '@/data/auth/auth-config-query'
 import { useAuthConfigUpdateMutation } from '@/data/auth/auth-config-update-mutation'
 import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
diff --git a/apps/studio/types/form.ts b/apps/studio/types/form.ts
deleted file mode 100644
index 0bd0bce02a1..00000000000
--- a/apps/studio/types/form.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-interface Enum {
-  label: string
-  value: string
-  icon: string
-}
-
-export interface FormSchema {
-  $schema: string
-  id?: string
-  type: 'object'
-  title: string
-  purpose?: string
-  properties: {
-    [x: string]: {
-      title: string
-      type: 'boolean' | 'string' | 'select' | 'number' | 'code'
-      description?: string
-      descriptionOptional?: string
-      enum?: Enum[]
-      show?: {
-        key: string
-        matches: string
-      }
-    }
-  }
-  validationSchema: any // todo: use Yup type
-  misc?: {
-    iconKey?: string
-    requiresRedirect?: true
-    helper?: string
-    alert?: {
-      title?: string
-      description?: string
-    }
-    emailTemplateType?: 'authentication' | 'security'
-  }
-}
diff --git a/apps/studio/types/index.ts b/apps/studio/types/index.ts
index 5fe47deabdb..c14677d41ab 100644
--- a/apps/studio/types/index.ts
+++ b/apps/studio/types/index.ts
@@ -7,7 +7,6 @@ export {
   type Role,
   type SupaResponse,
 } from './base'
-export type * from './form'
 export type * from './next'
 export { isNextPageWithLayout } from './next'
 export type * from './react-query'
diff --git a/packages/api-types/types/platform.d.ts b/packages/api-types/types/platform.d.ts
index 59a17f0556b..f0bf0352afa 100644
--- a/packages/api-types/types/platform.d.ts
+++ b/packages/api-types/types/platform.d.ts
@@ -7357,6 +7357,21 @@ export interface components {
       MAILER_SUBJECTS_PHONE_CHANGED_NOTIFICATION: string
       MAILER_SUBJECTS_REAUTHENTICATION: string
       MAILER_SUBJECTS_RECOVERY: string
+      MAILER_SUBJECTS_CUSTOM_CONTENTS: {
+        MAILER_SUBJECTS_CONFIRMATION: boolean
+        MAILER_SUBJECTS_EMAIL_CHANGE: boolean
+        MAILER_SUBJECTS_EMAIL_CHANGED_NOTIFICATION: boolean
+        MAILER_SUBJECTS_IDENTITY_LINKED_NOTIFICATION: boolean
+        MAILER_SUBJECTS_IDENTITY_UNLINKED_NOTIFICATION: boolean
+        MAILER_SUBJECTS_INVITE: boolean
+        MAILER_SUBJECTS_MAGIC_LINK: boolean
+        MAILER_SUBJECTS_MFA_FACTOR_ENROLLED_NOTIFICATION: boolean
+        MAILER_SUBJECTS_MFA_FACTOR_UNENROLLED_NOTIFICATION: boolean
+        MAILER_SUBJECTS_PASSWORD_CHANGED_NOTIFICATION: boolean
+        MAILER_SUBJECTS_PHONE_CHANGED_NOTIFICATION: boolean
+        MAILER_SUBJECTS_REAUTHENTICATION: boolean
+        MAILER_SUBJECTS_RECOVERY: boolean
+      }
       MAILER_TEMPLATES_CONFIRMATION_CONTENT: string
       MAILER_TEMPLATES_CUSTOM_CONTENTS: {
         MAILER_TEMPLATES_CONFIRMATION_CONTENT: boolean