diff --git a/apps/app/src/api/auth/mutations.ts b/apps/app/src/api/auth/mutations.ts
index 8062f787..7ea82dfa 100644
--- a/apps/app/src/api/auth/mutations.ts
+++ b/apps/app/src/api/auth/mutations.ts
@@ -11,16 +11,20 @@ import {
   verifyTotpSchema,
 } from "@/api/auth/schemas"
 import { emailVerificationExpiration, lastLocaleExpirationInSeconds, otpWindow, rolesAsObject } from "@/constants"
+import { logoUrl } from "@/constants/medias"
 import { hash } from "@/lib/bcrypt"
 import { env } from "@/lib/env"
+import { Locale } from "@/lib/i18n-config"
+import { _getDictionary } from "@/lib/langs"
 import { sendMail } from "@/lib/mailer"
 import { prisma } from "@/lib/prisma"
 import { redis } from "@/lib/redis"
-import { html, plainText, subject } from "@/lib/templates/mail/verify-email"
 import { ApiError, ensureLoggedIn, generateRandomSecret, handleApiError } from "@/lib/utils/server-utils"
 import { apiInputFromSchema } from "@/types"
+import VerifyEmail from "@next-boilerplate/emails/emails/verify-email"
 import { logger } from "@next-boilerplate/lib"
 import { Prisma } from "@prisma/client"
+import { render } from "@react-email/render"
 
 import { signUpResponseSchema } from "../me/schemas"
 
@@ -55,13 +59,39 @@ export const register = async ({ input }: apiInputFromSchema<typeof signUpSchema
           expires: new Date(Date.now() + emailVerificationExpiration),
         },
       })
-      const url = `${env.VERCEL_URL ?? env.NEXT_PUBLIC_BASE_URL}/verify-email/${token}`
+      const verificationLink = `${env.VERCEL_URL ?? env.NEXT_PUBLIC_BASE_URL}/verify-email/${token}`
+      const locale = input.locale as Locale
+      const dictionary = await _getDictionary("transactionals", locale, {
+        hey: true,
+        verifyEmail: true,
+        footer: true,
+        thanksForSigninUpCompleteRegistration: true,
+        verifyYourEmailAddress: true,
+        verifyYourEmailAddressToCompleteYourRegistration: true,
+      })
+      const element = VerifyEmail({
+        verificationLink,
+        actionText: dictionary.verifyEmail,
+        contentTitle: dictionary.thanksForSigninUpCompleteRegistration,
+        footerText: dictionary.footer,
+        heyText: dictionary.hey,
+        logoUrl,
+        name: user.name ?? "",
+        previewText: dictionary.verifyYourEmailAddressToCompleteYourRegistration,
+        supportEmail: env.SUPPORT_EMAIL ?? "",
+        titleText: dictionary.verifyYourEmailAddress,
+      })
+      const text = render(element, {
+        plainText: true,
+      })
+      const html = render(element)
+
       await sendMail({
         from: `"${env.SMTP_FROM_NAME}" <${env.SMTP_FROM_EMAIL}>`,
         to: email.toLowerCase(),
-        subject: subject,
-        text: plainText(url, input.locale),
-        html: html(url, input.locale),
+        subject: dictionary.verifyYourEmailAddress,
+        text,
+        html,
       })
     } else {
       logger.debug("Email verification disabled, skipping email sending on registration")
diff --git a/apps/app/src/api/me/email/mutations.ts b/apps/app/src/api/me/email/mutations.ts
index c6c88810..c127652f 100644
--- a/apps/app/src/api/me/email/mutations.ts
+++ b/apps/app/src/api/me/email/mutations.ts
@@ -3,14 +3,17 @@ import { z } from "zod"
 
 import { sendVerificationEmailSchema, verifyEmailResponseSchema, verifyEmailSchema } from "@/api/me/schemas"
 import { emailVerificationExpiration, resendEmailVerificationExpiration } from "@/constants"
+import { logoUrl } from "@/constants/medias"
 import { env } from "@/lib/env"
-import { i18n } from "@/lib/i18n-config"
+import { i18n, Locale } from "@/lib/i18n-config"
+import { _getDictionary } from "@/lib/langs"
 import { sendMail } from "@/lib/mailer"
 import { prisma } from "@/lib/prisma"
-import { html, plainText, subject } from "@/lib/templates/mail/verify-email"
 import { ApiError, handleApiError } from "@/lib/utils/server-utils"
 import { apiInputFromSchema } from "@/types"
+import VerifyEmail from "@next-boilerplate/emails/emails/verify-email"
 import { logger } from "@next-boilerplate/lib"
+import { render } from "@react-email/render"
 
 export const sendVerificationEmail = async ({ input }: apiInputFromSchema<typeof sendVerificationEmailSchema>) => {
   try {
@@ -65,13 +68,39 @@ export const sendVerificationEmail = async ({ input }: apiInputFromSchema<typeof
           expires: new Date(Date.now() + emailVerificationExpiration),
         },
       })
-      const url = `${env.VERCEL_URL ?? env.NEXT_PUBLIC_BASE_URL}/verify-email/${token}`
+      const verificationLink = `${env.VERCEL_URL ?? env.NEXT_PUBLIC_BASE_URL}/verify-email/${token}`
+      const locale = (user.lastLocale as Locale | null) ?? i18n.defaultLocale
+      const dictionary = await _getDictionary("transactionals", locale, {
+        hey: true,
+        verifyEmail: true,
+        footer: true,
+        thanksForSigninUpCompleteRegistration: true,
+        verifyYourEmailAddress: true,
+        verifyYourEmailAddressToCompleteYourRegistration: true,
+      })
+      const element = VerifyEmail({
+        verificationLink,
+        actionText: dictionary.verifyEmail,
+        contentTitle: dictionary.thanksForSigninUpCompleteRegistration,
+        footerText: dictionary.footer,
+        heyText: dictionary.hey,
+        logoUrl,
+        name: user.name ?? "",
+        previewText: dictionary.verifyYourEmailAddressToCompleteYourRegistration,
+        supportEmail: env.SUPPORT_EMAIL ?? "",
+        titleText: dictionary.verifyYourEmailAddress,
+      })
+      const text = render(element, {
+        plainText: true,
+      })
+      const html = render(element)
+
       await sendMail({
         from: `"${env.SMTP_FROM_NAME}" <${env.SMTP_FROM_EMAIL}>`,
         to: email.toLowerCase(),
-        subject: subject,
-        text: plainText(url, user.lastLocale ?? i18n.defaultLocale),
-        html: html(url, user.lastLocale ?? i18n.defaultLocale),
+        subject: dictionary.verifyYourEmailAddress,
+        text,
+        html,
       })
     } else {
       logger.debug("Email verification disabled")
diff --git a/apps/app/src/api/me/password/mutations.ts b/apps/app/src/api/me/password/mutations.ts
index 30cad4f8..3d27a417 100644
--- a/apps/app/src/api/me/password/mutations.ts
+++ b/apps/app/src/api/me/password/mutations.ts
@@ -3,15 +3,18 @@ import { z } from "zod"
 
 import { forgotPasswordSchema, resetPasswordResponseSchema, resetPasswordSchema } from "@/api/me/schemas"
 import { resendResetPasswordExpiration, resetPasswordExpiration, rolesAsObject } from "@/constants"
+import { logoUrl } from "@/constants/medias"
 import { hash } from "@/lib/bcrypt"
 import { env } from "@/lib/env"
-import { i18n } from "@/lib/i18n-config"
+import { i18n, Locale } from "@/lib/i18n-config"
+import { _getDictionary } from "@/lib/langs"
 import { sendMail } from "@/lib/mailer"
 import { prisma } from "@/lib/prisma"
-import { html, plainText, subject } from "@/lib/templates/mail/reset-password"
 import { ApiError, handleApiError } from "@/lib/utils/server-utils"
 import { apiInputFromSchema } from "@/types"
+import ResetPasswordTemplate from "@next-boilerplate/emails/emails/reset-password"
 import { logger } from "@next-boilerplate/lib"
+import { render } from "@react-email/render"
 
 export const forgotPassword = async ({ input }: apiInputFromSchema<typeof forgotPasswordSchema>) => {
   try {
@@ -61,20 +64,37 @@ export const forgotPassword = async ({ input }: apiInputFromSchema<typeof forgot
       },
     })
 
+    const resetLink = `${env.VERCEL_URL ?? env.NEXT_PUBLIC_BASE_URL}/reset-password/${resetPasswordToken}`
+    const locale = (user.lastLocale as Locale) ?? i18n.defaultLocale
+    const mailDict = await _getDictionary("transactionals", locale, {
+      footer: true,
+      resetPasswordRequest: true,
+      resetYourPassword: true,
+      resetPasswordDescription: true,
+      hey: true,
+    })
+    const element = ResetPasswordTemplate({
+      footerText: mailDict.footer,
+      logoUrl: logoUrl,
+      actionText: mailDict.resetYourPassword,
+      contentTitle: mailDict.resetPasswordDescription,
+      heyText: mailDict.hey,
+      name: user.name ?? "",
+      previewText: mailDict.resetPasswordRequest,
+      resetLink,
+      supportEmail: env.SMTP_FROM_EMAIL ?? "",
+      titleText: mailDict.resetYourPassword,
+    })
+    const text = render(element, {
+      plainText: true,
+    })
+    const html = render(element)
     await sendMail({
       from: `"${env.SMTP_FROM_NAME}" <${env.SMTP_FROM_EMAIL}>`,
       to: email,
-      subject: subject,
-      text: plainText(
-        user.username ?? email,
-        `${env.VERCEL_URL ?? env.NEXT_PUBLIC_BASE_URL}/reset-password/${resetPasswordToken}`,
-        user.lastLocale ?? i18n.defaultLocale
-      ),
-      html: html(
-        user.username ?? email,
-        `${env.VERCEL_URL ?? env.NEXT_PUBLIC_BASE_URL}/reset-password/${resetPasswordToken}`,
-        user.lastLocale ?? i18n.defaultLocale
-      ),
+      subject: mailDict.resetYourPassword,
+      text,
+      html,
     })
 
     return { email }
diff --git a/apps/app/src/api/me/schemas.ts b/apps/app/src/api/me/schemas.ts
index 4197054d..41dc2764 100644
--- a/apps/app/src/api/me/schemas.ts
+++ b/apps/app/src/api/me/schemas.ts
@@ -144,6 +144,7 @@ export const sendVerificationEmailSchema = (dictionary?: TDictionary<typeof send
         emailVerified: true,
         lastLocale: true,
         email: true,
+        name: true,
       }),
       silent: z.boolean().optional(),
       email: z.never().optional(),
diff --git a/apps/app/src/constants/medias.ts b/apps/app/src/constants/medias.ts
new file mode 100644
index 00000000..df457e90
--- /dev/null
+++ b/apps/app/src/constants/medias.ts
@@ -0,0 +1 @@
+export const logoUrl = "https://upload.wikimedia.org/wikipedia/commons/5/5e/Vercel_logo_black.svg"
diff --git a/apps/app/src/langs/transactionals/en.json b/apps/app/src/langs/transactionals/en.json
new file mode 100644
index 00000000..609be9d9
--- /dev/null
+++ b/apps/app/src/langs/transactionals/en.json
@@ -0,0 +1,13 @@
+{
+  "hey": "Hey",
+  "verifyYourEmailAddressToCompleteYourRegistration": "Verify your email address to complete your registration",
+  "verifyYourEmailAddress": "Verify your email address",
+  "footer": "This email was sent to you as part of our account services. If you have any questions, please contact us at",
+  "thanksForSigninUpCompleteRegistration": "Thanks for signing up for Animadate. To complete your registration, we just need to verify your email address.",
+  "verifyEmail": "Verify email",
+  "confirmYourNewEmail": "Confirm your new email",
+  "changeEmailAddressDescription": "You have requested to change your email address. Please use the following code to validate your request.",
+  "resetPasswordRequest": "Reset password request",
+  "resetYourPassword": "Reset your password",
+  "resetPasswordDescription": "You recently requested to reset your password for your account. Click the button below to reset it."
+}
diff --git a/apps/app/src/langs/transactionals/fr.json b/apps/app/src/langs/transactionals/fr.json
new file mode 100644
index 00000000..c037fdf0
--- /dev/null
+++ b/apps/app/src/langs/transactionals/fr.json
@@ -0,0 +1,13 @@
+{
+  "hey": "Hey",
+  "verifyYourEmailAddressToCompleteYourRegistration": "Vérifiez votre adresse e-mail pour compléter votre inscription",
+  "verifyYourEmailAddress": "Vérifiez votre adresse e-mail",
+  "footer": "Cet e-mail vous a été envoyé dans le cadre de nos services de compte. Si vous avez des questions, veuillez nous contacter à",
+  "thanksForSigninUpCompleteRegistration": "Merci de vous être inscrit à Animadate. Pour compléter votre inscription, nous devons juste vérifier votre adresse e-mail.",
+  "verifyEmail": "Vérifier l'e-mail",
+  "confirmYourNewEmail": "Confirmez votre nouvel e-mail",
+  "changeEmailAddressDescription": "Vous avez demandé à changer votre adresse e-mail. Veuillez utiliser le code suivant pour valider votre demande.",
+  "resetPasswordRequest": "Demande de réinitialisation du mot de passe",
+  "resetYourPassword": "Réinitialisez votre mot de passe",
+  "resetPasswordDescription": "Vous avez récemment demandé à réinitialiser votre mot de passe pour votre compte. Cliquez sur le bouton ci-dessous pour le réinitialiser."
+}
diff --git a/apps/app/src/lib/langs.ts b/apps/app/src/lib/langs.ts
index 12670353..962bb6f5 100644
--- a/apps/app/src/lib/langs.ts
+++ b/apps/app/src/lib/langs.ts
@@ -12,6 +12,10 @@ const dictionaries = {
     en: () => import("../langs/errors/en.json").then((module) => module.default),
     fr: () => import("../langs/errors/fr.json").then((module) => module.default),
   },
+  transactionals: {
+    en: () => import("../langs/transactionals/en.json").then((module) => module.default),
+    fr: () => import("../langs/transactionals/fr.json").then((module) => module.default),
+  },
 }
 
 export type TPossibleNamespaces = keyof typeof dictionaries
diff --git a/apps/app/src/lib/templates/mail/reset-password.ts b/apps/app/src/lib/templates/mail/reset-password.ts
deleted file mode 100644
index 26680bc2..00000000
--- a/apps/app/src/lib/templates/mail/reset-password.ts
+++ /dev/null
@@ -1,261 +0,0 @@
-import { env } from "@/lib/env"
-
-export const subject = "Reset your password"
-
-export const plainText = (username: string, resetLink: string, locale: string) => {
-  const en = `Password Reset
-
-Hello ${username},
-
-We received a request to reset your password. You can reset your password by clicking the following link:
-
-${resetLink}
-
-If you did not request this password reset, you can safely ignore this email.
-
-This email was sent to you as part of our account services.${
-    env.SUPPORT_EMAIL ? ` If you have any questions, please contact us at ${env.SUPPORT_EMAIL}.` : ""
-  }
-`
-  const fr = `Réinitialiser votre mot de passe
-
-Bonjour ${username},
-
-Nous avons reçu une demande de réinitialisation de votre mot de passe. Vous pouvez réinitialiser votre mot de passe en cliquant sur le lien suivant :
-
-${resetLink}
-
-Si vous n'avez pas demandé cette réinitialisation de mot de passe, vous pouvez ignorer cet e-mail en toute sécurité.
-
-Ce courriel vous a été envoyé dans le cadre de nos services de compte.${
-    env.SUPPORT_EMAIL ? ` Si vous avez des questions, veuillez nous contacter à l'adresse ${env.SUPPORT_EMAIL}.` : ""
-  }
-`
-  if (locale === "fr") return fr
-  return en
-}
-
-export const html = (username: string, resetLink: string, locale: string) => `<!DOCTYPE html>
-<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="${locale}">
-
-<head>
-    <title></title>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <!--[if mso]><xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch><o:AllowPNG/></o:OfficeDocumentSettings></xml><![endif]-->
-    <style>
-        * {
-            box-sizing: border-box;
-        }
-
-        body {
-            margin: 0;
-            padding: 0;
-        }
-
-        a[x-apple-data-detectors] {
-            color: inherit !important;
-            text-decoration: inherit !important;
-        }
-
-        #MessageViewBody a {
-            color: inherit;
-            text-decoration: none;
-        }
-
-        p {
-            line-height: inherit
-        }
-
-        .desktop_hide,
-        .desktop_hide table {
-            mso-hide: all;
-            display: none;
-            max-height: 0px;
-            overflow: hidden;
-        }
-
-        .image_block img+div {
-            display: none;
-        }
-
-        @media (max-width:700px) {
-            .desktop_hide table.icons-inner {
-                display: inline-block !important;
-            }
-
-            .icons-inner {
-                text-align: center;
-            }
-
-            .icons-inner td {
-                margin: 0 auto;
-            }
-
-            .mobile_hide {
-                display: none;
-            }
-
-            .row-content {
-                width: 100% !important;
-            }
-
-            .stack .column {
-                width: 100%;
-                display: block;
-            }
-
-            .mobile_hide {
-                min-height: 0;
-                max-height: 0;
-                max-width: 0;
-                overflow: hidden;
-                font-size: 0px;
-            }
-
-            .desktop_hide,
-            .desktop_hide table {
-                display: table !important;
-                max-height: none !important;
-            }
-        }
-    </style>
-</head>
-
-<body style="background-color: #fff0e3; margin: 0; padding: 0; -webkit-text-size-adjust: none; text-size-adjust: none;">
-    <table class="nl-container" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation"
-        style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #fff0e3;">
-        <tbody>
-            <tr>
-                <td>
-                    <div style="height: 100px;"></div>
-                    <table class="row row-4" align="center" width="100%" border="0" cellpadding="0" cellspacing="0"
-                        role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
-                        <tbody>
-                            <tr>
-                                <td>
-                                    <table class="row-content stack" align="center" border="0" cellpadding="0"
-                                        cellspacing="0" role="presentation"
-                                        style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #fff; color: #000; width: 680px; margin: 0 auto; border-radius: 1rem 1rem 0 0;"
-                                        width="680">
-                                        <tbody>
-                                            <tr>
-                                                <td class="column column-1" width="100%"
-                                                    style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-weight: 400; text-align: left; padding-bottom: 5px; padding-top: 5px; vertical-align: top; border-top: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px;">
-                                                    <div class="spacer_block block-1"
-                                                        style="height:35px;line-height:35px;font-size:1px;">&#8202;
-                                                    </div>
-                                                    <table class="heading_block block-2" width="100%" border="0"
-                                                        cellpadding="0" cellspacing="0" role="presentation"
-                                                        style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
-                                                        <tr>
-                                                            <td class="pad" style="text-align:center;width:100%;">
-                                                                <h1
-                                                                    style="margin: 0; color: #101010; direction: ltr; font-family: Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 27px; font-weight: normal; letter-spacing: normal; line-height: 120%; text-align: center; margin-top: 0; margin-bottom: 0;">
-                                                                    <strong>
-                                                                    ${
-                                                                      locale === "fr"
-                                                                        ? "Mot de passe oublié ?"
-                                                                        : "Forgot Your Password?"
-                                                                    }
-                                                                    </strong>
-                                                                </h1>
-                                                            </td>
-                                                        </tr>
-                                                    </table>
-                                                </td>
-                                            </tr>
-                                        </tbody>
-                                    </table>
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
-                    <table class="row row-5" align="center" width="100%" border="0" cellpadding="0" cellspacing="0"
-                        role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
-                        <tbody>
-                            <tr>
-                                <td>
-                                    <table class="row-content stack" align="center" border="0" cellpadding="0"
-                                        cellspacing="0" role="presentation"
-                                        style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #fff; color: #000; width: 680px; margin: 0 auto; border-radius: 0 0 1rem 1rem;"
-                                        width="680">
-                                        <tbody>
-                                            <tr>
-                                                <td class="column column-1" width="16.666666666666668%"
-                                                    style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-weight: 400; text-align: left; padding-bottom: 5px; padding-top: 5px; vertical-align: top; border-top: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px;">
-                                                    <div class="spacer_block block-1"
-                                                        style="height:0px;line-height:0px;font-size:1px;">&#8202;</div>
-                                                </td>
-                                                <td class="column column-2" width="66.66666666666667%"
-                                                    style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-weight: 400; text-align: left; padding-bottom: 5px; padding-top: 5px; vertical-align: top; border-top: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px;">
-                                                    <table class="paragraph_block block-1" width="100%" border="0"
-                                                        cellpadding="0" cellspacing="0" role="presentation"
-                                                        style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word;">
-                                                        <tr>
-                                                            <td class="pad"
-                                                                style="padding-bottom:10px;padding-left:20px;padding-right:10px;padding-top:10px;">
-                                                                <div
-                                                                    style="color:#848484;font-family:Arial, Helvetica Neue, Helvetica, sans-serif;font-size:14px;line-height:180%;text-align:center;mso-line-height-alt:25.2px;">
-                                                                    <p style="margin: 0; word-break: break-word;">
-                                                                        <span>
-                                                                        ${
-                                                                          locale === "fr"
-                                                                            ? `Bonjour ${username}, vous avez récemment demandé à réinitialiser votre mot de passe pour votre compte. Cliquez sur le bouton ci-dessous pour le réinitialiser.`
-                                                                            : `
-                                                                            Hi ${username}, you recently requested to reset your password for your account. Click the button below to reset it.`
-                                                                        }
-                                                                        </span>
-                                                                    </p>
-                                                                </div>
-                                                            </td>
-                                                        </tr>
-                                                    </table>
-                                                    <div class="spacer_block block-2"
-                                                        style="height:10px;line-height:10px;font-size:1px;">&#8202;
-                                                    </div>
-                                                    <table class="button_block block-3" width="100%" border="0"
-                                                        cellpadding="10" cellspacing="0" role="presentation"
-                                                        style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
-                                                        <tr>
-                                                            <td class="pad">
-                                                                <div class="alignment" align="center">
-                                                                    <!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="${resetLink}" style="height:44px;width:160px;v-text-anchor:middle;" arcsize="10%" strokeweight="0.75pt" strokecolor="#101" fillcolor="#101"><w:anchorlock/><v:textbox inset="0px,0px,0px,0px"><center style="color:#ffffff; font-family:Arial, sans-serif; font-size:16px"><![endif]--><a
-                                                                        href="${resetLink}" target="_blank"
-                                                                        style="text-decoration:none;display:inline-block;color:#ffffff;background-color:#101;border-radius:4px;width:auto;border-top:1px solid #101;font-weight:undefined;border-right:1px solid #101;border-bottom:1px solid #101;border-left:1px solid #101;padding-top:5px;padding-bottom:5px;font-family:Arial, Helvetica Neue, Helvetica, sans-serif;font-size:16px;text-align:center;mso-border-alt:none;word-break:keep-all;"><span
-                                                                            style="padding-left:20px;padding-right:20px;font-size:16px;display:inline-block;letter-spacing:normal;"><span
-                                                                                style="word-break: break-word; line-height: 32px;">
-                                                                                ${
-                                                                                  locale === "fr"
-                                                                                    ? "Réinitialiser le mot de passe"
-                                                                                    : "Reset Password"
-                                                                                }
-                                                                                </span></span></a><!--[if mso]></center></v:textbox></v:roundrect><![endif]-->
-                                                                </div>
-                                                            </td>
-                                                        </tr>
-                                                    </table>
-                                                    <div class="spacer_block block-4"
-                                                        style="height:20px;line-height:20px;font-size:1px;">&#8202;
-                                                    </div>
-                                                </td>
-                                                <td class="column column-3" width="16.666666666666668%"
-                                                    style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-weight: 400; text-align: left; padding-bottom: 5px; padding-top: 5px; vertical-align: top; border-top: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px;">
-                                                    <div class="spacer_block block-1"
-                                                        style="height:0px;line-height:0px;font-size:1px;">&#8202;</div>
-                                                </td>
-                                            </tr>
-                                        </tbody>
-                                    </table>
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
-                    <div style="height: 100px;"></div>
-                </td>
-            </tr>
-        </tbody>
-    </table><!-- End -->
-</body>
-
-</html>`
diff --git a/apps/app/src/lib/templates/mail/verify-email.ts b/apps/app/src/lib/templates/mail/verify-email.ts
deleted file mode 100644
index a4e8a3fa..00000000
--- a/apps/app/src/lib/templates/mail/verify-email.ts
+++ /dev/null
@@ -1,257 +0,0 @@
-import { env } from "@/lib/env"
-
-export const subject = "Verify your email address"
-
-export const plainText = (verificationLink: string, locale: string) => {
-  const en = `Email Verification
-
-Hello,
-
-Thank you for signing up with us. Please verify your email address by clicking the following link:
-
-${verificationLink}
-
-If you did not sign up for an account, you can safely ignore this email.
-
-This email was sent to you as part of our account services. ${
-    env.SUPPORT_EMAIL ? ` If you have any questions, please contact us at ${env.SUPPORT_EMAIL}.` : ""
-  }
-`
-
-  const fr = `Vérification de l'adresse e-mail
-
-Bonjour,
-
-Merci de vous être inscrit chez nous. Veuillez vérifier votre adresse e-mail en cliquant sur le lien suivant :
-
-${verificationLink}
-
-Si vous ne vous êtes pas inscrit pour un compte, vous pouvez ignorer cet e-mail en toute sécurité.
-
-Cet e-mail vous a été envoyé dans le cadre de nos services de compte. ${
-    env.SUPPORT_EMAIL ? ` Si vous avez des questions, veuillez nous contacter à ${env.SUPPORT_EMAIL}.` : ""
-  }
-`
-
-  if (locale === "fr") return fr
-  return en
-}
-
-export const html = (verificationLink: string, locale: string) => `<!DOCTYPE html>
-<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="${locale}">
-
-<head>
-    <title></title>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <style>
-        * {
-            box-sizing: border-box;
-        }
-
-        body {
-            margin: 0;
-            padding: 0;
-        }
-
-        a[x-apple-data-detectors] {
-            color: inherit !important;
-            text-decoration: inherit !important;
-        }
-
-        #MessageViewBody a {
-            color: inherit;
-            text-decoration: none;
-        }
-
-        p {
-            line-height: inherit
-        }
-
-        .desktop_hide,
-        .desktop_hide table {
-            mso-hide: all;
-            display: none;
-            max-height: 0px;
-            overflow: hidden;
-        }
-
-        .image_block img+div {
-            display: none;
-        }
-
-        @media (max-width:700px) {
-            .desktop_hide table.icons-inner {
-                display: inline-block !important;
-            }
-
-            .icons-inner {
-                text-align: center;
-            }
-
-            .icons-inner td {
-                margin: 0 auto;
-            }
-
-            .mobile_hide {
-                display: none;
-            }
-
-            .row-content {
-                width: 100% !important;
-            }
-
-            .stack .column {
-                width: 100%;
-                display: block;
-            }
-
-            .mobile_hide {
-                min-height: 0;
-                max-height: 0;
-                max-width: 0;
-                overflow: hidden;
-                font-size: 0px;
-            }
-
-            .desktop_hide,
-            .desktop_hide table {
-                display: table !important;
-                max-height: none !important;
-            }
-        }
-    </style>
-</head>
-
-<body style="background-color: #fff0e3; margin: 0; padding: 0; -webkit-text-size-adjust: none; text-size-adjust: none;">
-    <table class="nl-container" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation"
-        style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #fff0e3;">
-        <tbody>
-            <tr>
-                <td>
-                    <div style="height: 100px;"></div>
-                    <table class="row row-4" align="center" width="100%" border="0" cellpadding="0" cellspacing="0"
-                        role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
-                        <tbody>
-                            <tr>
-                                <td>
-                                    <table class="row-content stack" align="center" border="0" cellpadding="0"
-                                        cellspacing="0" role="presentation"
-                                        style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #fff; color: #000; width: 680px; margin: 0 auto; border-radius: 1rem 1rem 0 0;"
-                                        width="680">
-                                        <tbody>
-                                            <tr>
-                                                <td class="column column-1" width="100%"
-                                                    style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-weight: 400; text-align: left; padding-bottom: 5px; padding-top: 5px; vertical-align: top; border-top: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px;">
-                                                    <div class="spacer_block block-1"
-                                                        style="height:35px;line-height:35px;font-size:1px;">&#8202;
-                                                    </div>
-                                                    <table class="heading_block block-2" width="100%" border="0"
-                                                        cellpadding="0" cellspacing="0" role="presentation"
-                                                        style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
-                                                        <tr>
-                                                            <td class="pad" style="text-align:center;width:100%;">
-                                                                <h1
-                                                                    style="margin: 0; color: #101010; direction: ltr; font-family: Arial, Helvetica Neue, Helvetica, sans-serif; font-size: 27px; font-weight: normal; letter-spacing: normal; line-height: 120%; text-align: center; margin-top: 0; margin-bottom: 0;">
-                                                                    <strong>${
-                                                                      locale === "fr"
-                                                                        ? "Vérification de l'adresse e-mail"
-                                                                        : "Email Verification"
-                                                                    }</strong>
-                                                                </h1>
-                                                            </td>
-                                                        </tr>
-                                                    </table>
-                                                </td>
-                                            </tr>
-                                        </tbody>
-                                    </table>
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
-                    <table class="row row-5" align="center" width="100%" border="0" cellpadding="0" cellspacing="0"
-                        role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
-                        <tbody>
-                            <tr>
-                                <td>
-                                    <table class="row-content stack" align="center" border="0" cellpadding="0"
-                                        cellspacing="0" role="presentation"
-                                        style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #fff; color: #000; width: 680px; margin: 0 auto; border-radius: 0 0 1rem 1rem;"
-                                        width="680">
-                                        <tbody>
-                                            <tr>
-                                                <td class="column column-1" width="16.666666666666668%"
-                                                    style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-weight: 400; text-align: left; padding-bottom: 5px; padding-top: 5px; vertical-align: top; border-top: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px;">
-                                                    <div class="spacer_block block-1"
-                                                        style="height:0px;line-height:0px;font-size:1px;">&#8202;</div>
-                                                </td>
-                                                <td class="column column-2" width="66.66666666666667%"
-                                                    style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-weight: 400; text-align: left; padding-bottom: 5px; padding-top: 5px; vertical-align: top; border-top: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px;">
-                                                    <table class="paragraph_block block-1" width="100%" border="0"
-                                                        cellpadding="0" cellspacing="0" role="presentation"
-                                                        style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word;">
-                                                        <tr>
-                                                            <td class="pad"
-                                                                style="padding-bottom:10px;padding-left:20px;padding-right:10px;padding-top:10px;">
-                                                                <div
-                                                                    style="color:#848484;font-family:Arial, Helvetica Neue, Helvetica, sans-serif;font-size:14px;line-height:180%;text-align:center;mso-line-height-alt:25.2px;">
-                                                                    <p style="margin: 0; word-break: break-word;">
-                                                                        <span>
-                                                                        ${
-                                                                          locale === "fr"
-                                                                            ? `Cliquez sur le bouton ci-dessous pour vérifier votre adresse e-mail et terminer votre inscription.`
-                                                                            : `Click the button below to verify your email and complete your registration.`
-                                                                        }
-                                                                        </span>
-                                                                    </p>
-                                                                </div>
-                                                            </td>
-                                                        </tr>
-                                                    </table>
-                                                    <div class="spacer_block block-2"
-                                                        style="height:10px;line-height:10px;font-size:1px;">&#8202;
-                                                    </div>
-                                                    <table class="button_block block-3" width="100%" border="0"
-                                                        cellpadding="10" cellspacing="0" role="presentation"
-                                                        style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
-                                                        <tr>
-                                                            <td class="pad">
-                                                                <div class="alignment" align="center">
-                                                                    <!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="${verificationLink}" style="height:44px;width:160px;v-text-anchor:middle;" arcsize="10%" strokeweight="0.75pt" strokecolor="#101" fillcolor="#101"><w:anchorlock/><v:textbox inset="0px,0px,0px,0px"><center style="color:#ffffff; font-family:Arial, sans-serif; font-size:16px"><![endif]--><a
-                                                                        href="${verificationLink}" target="_blank"
-                                                                        style="text-decoration:none;display:inline-block;color:#ffffff;background-color:#101;border-radius:4px;width:auto;border-top:1px solid #101;font-weight:undefined;border-right:1px solid #101;border-bottom:1px solid #101;border-left:1px solid #101;padding-top:5px;padding-bottom:5px;font-family:Arial, Helvetica Neue, Helvetica, sans-serif;font-size:16px;text-align:center;mso-border-alt:none;word-break:keep-all;"><span
-                                                                            style="padding-left:20px;padding-right:20px;font-size:16px;display:inline-block;letter-spacing:normal;"><span
-                                                                                style="word-break: break-word; line-height: 32px;">${
-                                                                                  locale === "fr"
-                                                                                    ? "Vérifier mon adresse e-mail"
-                                                                                    : "Confirm my email"
-                                                                                }</span></span></a><!--[if mso]></center></v:textbox></v:roundrect><![endif]-->
-                                                                </div>
-                                                            </td>
-                                                        </tr>
-                                                    </table>
-                                                    <div class="spacer_block block-4"
-                                                        style="height:20px;line-height:20px;font-size:1px;">&#8202;
-                                                    </div>
-                                                </td>
-                                                <td class="column column-3" width="16.666666666666668%"
-                                                    style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-weight: 400; text-align: left; padding-bottom: 5px; padding-top: 5px; vertical-align: top; border-top: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px;">
-                                                    <div class="spacer_block block-1"
-                                                        style="height:0px;line-height:0px;font-size:1px;">&#8202;</div>
-                                                </td>
-                                            </tr>
-                                        </tbody>
-                                    </table>
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
-                    <div style="height: 100px;"></div>
-                </td>
-            </tr>
-        </tbody>
-    </table><!-- End -->
-</body>
-
-</html>`
diff --git a/packages/emails/contants.ts b/packages/emails/contants.ts
index d5f8f987..eac1f99d 100644
--- a/packages/emails/contants.ts
+++ b/packages/emails/contants.ts
@@ -1,5 +1,5 @@
-export const primary = "#6AD2E7"
-export const background = "#E2EFF1"
+export const primary = "#006FEE"
+export const background = "#FFFFFF"
 export const content1 = "#FFFFFF"
 export const content2 = "#f4f4f5"
 export const content3 = "#e4e4e7"