[PM-25240] Send Access OTP email in MJML format (#6411)

feat: Add MJML email templates for Send Email OTP feat: Implement MJML-based email templates for Send OTP functionality feat: Add feature flag support for Send Email OTP v2 emails feat: Update email view models and call sites for Send Email OTP fix: Modify the directory structure for MJML templates to have Auth directory for better team ownership fix: Rename `hero.js` to `mj-bw-hero.js` --- Co-authored-by: Todd Martin <106564991+trmartin4@users.noreply.github.com>
2025-12-06 00:03:34 +00:00 · 2025-10-22 15:13:31 -04:00
parent 6a3fc08957
commit 9ce1ecba49
18 changed files with 945 additions and 105 deletions
--- a/src/Core/Constants.cs
+++ b/src/Core/Constants.cs
@@ -154,6 +154,7 @@ public static class FeatureFlagKeys
    public const string DisableAlternateLoginMethods = "pm-22110-disable-alternate-login-methods";
    public const string PM23174ManageAccountRecoveryPermissionDrivesTheNeedToSetMasterPassword =
        "pm-23174-manage-account-recovery-permission-drives-the-need-to-set-master-password";
+    public const string MJMLBasedEmailTemplates = "mjml-based-email-templates";

    /* Autofill Team */
    public const string IdpAutoSubmitLogin = "idp-auto-submit-login";
--- a/src/Core/MailTemplates/Handlebars/Auth/SendAccessEmailOtpEmailv2.html.hbs
+++ b/src/Core/MailTemplates/Handlebars/Auth/SendAccessEmailOtpEmailv2.html.hbs
@@ -0,0 +1,675 @@
+<!doctype html>
+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
+  <head>
+    <title></title>
+    <!--[if !mso]><!-->
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <!--<![endif]-->
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style type="text/css">
+      #outlook a { padding:0; }
+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }
+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }
+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }
+      p { display:block;margin:13px 0; }
+    </style>
+    <!--[if mso]>
+    <noscript>
+    <xml>
+    <o:OfficeDocumentSettings>
+      <o:AllowPNG/>
+      <o:PixelsPerInch>96</o:PixelsPerInch>
+    </o:OfficeDocumentSettings>
+    </xml>
+    </noscript>
+    <![endif]-->
+    <!--[if lte mso 11]>
+    <style type="text/css">
+      .mj-outlook-group-fix { width:100% !important; }
+    </style>
+    <![endif]-->
+    
+    
+    <style type="text/css">
+      @media only screen and (min-width:480px) {
+        .mj-column-per-70 { width:70% !important; max-width: 70%; }
+.mj-column-per-30 { width:30% !important; max-width: 30%; }
+.mj-column-per-100 { width:100% !important; max-width: 100%; }
+.mj-column-per-90 { width:90% !important; max-width: 90%; }
+      }
+    </style>
+    <style media="screen and (min-width:480px)">
+      .moz-text-html .mj-column-per-70 { width:70% !important; max-width: 70%; }
+.moz-text-html .mj-column-per-30 { width:30% !important; max-width: 30%; }
+.moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }
+.moz-text-html .mj-column-per-90 { width:90% !important; max-width: 90%; }
+    </style>
+    
+    
+  
+    
+    <style type="text/css">
+
+    @media only screen and (max-width:479px) {
+      table.mj-full-width-mobile { width: 100% !important; }
+      td.mj-full-width-mobile { width: auto !important; }
+    }
+  
+    </style>
+     
+    <style type="text/css">
+.border-fix > table {
+    border-collapse: separate !important;
+  }
+  .border-fix > table > tbody > tr > td {
+    border-radius: 3px;
+  }
+@media only screen and
+  (max-width: 480px) { .hide-small-img { display: none !important; } .send-bubble { padding-left: 20px; padding-right: 20px; width: 90% !important; } }
+
+    </style>
+    <!-- Responsive icon visibility -->
+  </head>
+  <body style="word-spacing:normal;background-color:#e6e9ef;">
+    
+    
+      <div class="border-fix" style="background-color:#e6e9ef;" lang="und" dir="auto">
+        <!-- Blue Header Section -->
+      
+      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="border-fix-outlook" role="presentation" style="width:660px;" width="660" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+    
+      
+      <div class="border-fix" style="margin:0px auto;max-width:660px;">
+        
+        <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+          <tbody>
+            <tr>
+              <td style="direction:ltr;font-size:0px;padding:20px 20px 10px 20px;text-align:center;">
+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" width="660px" ><![endif]-->
+            
+      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#175ddc;background-color:#175ddc;width:100%;border-radius:4px 4px 0px 0px;">
+        <tbody>
+          <tr>
+            <td>
+              
+        
+      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:620px;" width="620" bgcolor="#175ddc" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+    
+        
+      <div style="margin:0px auto;border-radius:4px 4px 0px 0px;max-width:620px;">
+        
+        <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;border-radius:4px 4px 0px 0px;">
+          <tbody>
+            <tr>
+              <td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:434px;" ><![endif]-->
+            
+      <div class="mj-column-per-70 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+        
+      <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+        <tbody>
+          
+              <tr>
+                <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                  
+      <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
+        <tbody>
+          <tr>
+            <td style="width:150px;">
+              
+      <img alt src="https://bitwarden.com/images/logo-horizontal-white.png" style="border:0;display:block;outline:none;text-decoration:none;height:30px;width:100%;font-size:16px;" width="150" height="30">
+    
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    
+                </td>
+              </tr>
+            
+              <tr>
+                <td align="left" style="font-size:0px;padding:10px 25px;padding-top:0;padding-bottom:0;word-break:break-word;">
+                  
+      <div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;line-height:1;text-align:left;color:#ffffff;"><h1 style="font-weight: normal; font-size: 24px; line-height: 32px">
+              Verify your email to access this Bitwarden Send
+            </h1></div>
+    
+                </td>
+              </tr>
+            
+        </tbody>
+      </table>
+    
+      </div>
+    
+          <!--[if mso | IE]></td><td class="" style="vertical-align:bottom;width:186px;" ><![endif]-->
+            
+      <div class="mj-column-per-30 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:bottom;width:100%;">
+        
+      <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:bottom;" width="100%">
+        <tbody>
+          
+              <tr>
+                <td align="center" class="hide-small-img" style="font-size:0px;padding:0px;word-break:break-word;">
+                  
+      <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
+        <tbody>
+          <tr>
+            <td style="width:140px;">
+              
+      <img alt src="https://assets.bitwarden.com/email/v1/spot-secure-send-round.png" style="border:0;display:block;outline:none;text-decoration:none;height:140px;width:100%;font-size:16px;" width="140" height="140">
+    
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    
+                </td>
+              </tr>
+            
+        </tbody>
+      </table>
+    
+      </div>
+    
+          <!--[if mso | IE]></td></tr></table><![endif]-->
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        
+      </div>
+    
+        
+      <!--[if mso | IE]></td></tr></table><![endif]-->
+    
+      
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    
+          <!--[if mso | IE]></td></tr></table><![endif]-->
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        
+      </div>
+    
+      
+      <!--[if mso | IE]></td></tr></table><![endif]-->
+    
+    <!-- Main Content -->
+      
+      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:660px;" width="660" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+    
+      
+      <div style="margin:0px auto;max-width:660px;">
+        
+        <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+          <tbody>
+            <tr>
+              <td style="direction:ltr;font-size:0px;padding:5px 20px 10px 20px;text-align:center;">
+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" width="660px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:620px;" width="620" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+    
+      
+      <div style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:620px;">
+        
+        <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;">
+          <tbody>
+            <tr>
+              <td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:620px;" ><![endif]-->
+            
+      <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+        
+      <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+        <tbody>
+          <tr>
+            <td style="vertical-align:top;padding:0px;">
+              
+      <table border="0" cellpadding="0" cellspacing="0" role="presentation" style width="100%">
+        <tbody>
+          
+              <tr>
+                <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                  
+      <div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;line-height:1;text-align:left;color:#1B2029;">Your verification code is:</div>
+    
+                </td>
+              </tr>
+            
+              <tr>
+                <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                  
+      <div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:32px;line-height:1;text-align:left;color:#1B2029;"><b>{{Token}}</b></div>
+    
+                </td>
+              </tr>
+            
+              <tr>
+                <td style="font-size:0px;word-break:break-word;">
+                  
+      <div style="height:20px;line-height:20px;">&#8202;</div>
+    
+                </td>
+              </tr>
+            
+              <tr>
+                <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                  
+      <div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;line-height:1;text-align:left;color:#1B2029;">This code expires in {{Expiry}} minutes. After that, you'll need to
+            verify your email again.</div>
+    
+                </td>
+              </tr>
+            
+        </tbody>
+      </table>
+    
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    
+      </div>
+    
+          <!--[if mso | IE]></td></tr></table><![endif]-->
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        
+      </div>
+    
+      
+      <!--[if mso | IE]></td></tr></table></td></tr><tr><td class="" width="660px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:620px;" width="620" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+    
+      
+      <div style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:620px;">
+        
+        <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;">
+          <tbody>
+            <tr>
+              <td style="direction:ltr;font-size:0px;padding:0px 0px 20px 0px;text-align:center;">
+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="send-bubble-outlook" style="vertical-align:top;width:558px;" ><![endif]-->
+            
+      <div class="mj-column-per-90 mj-outlook-group-fix send-bubble" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+        
+      <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
+        <tbody>
+          <tr>
+            <td style="vertical-align:top;padding:0px;">
+              
+      <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color:#DBE5F6;border-radius:16px;" width="100%">
+        <tbody>
+          
+              <tr>
+                <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                  
+      <div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;line-height:1;text-align:left;color:#1B2029;"><p>
+              Bitwarden Send transmits sensitive, temporary information to
+              others easily and securely. Learn more about
+              <a href="https://bitwarden.com/help/send" class="link" style="text-decoration: none; color: #175ddc; font-weight: 600;">Bitwarden Send</a>
+              or
+              <a href="https://bitwarden.com/signup" class="link" style="text-decoration: none; color: #175ddc; font-weight: 600;">sign up</a>
+              to try it today.
+            </p></div>
+    
+                </td>
+              </tr>
+            
+        </tbody>
+      </table>
+    
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    
+      </div>
+    
+          <!--[if mso | IE]></td></tr></table><![endif]-->
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        
+      </div>
+    
+      
+      <!--[if mso | IE]></td></tr></table></td></tr></table><![endif]-->
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        
+      </div>
+    
+      
+      <!--[if mso | IE]></td></tr></table><![endif]-->
+    
+    <!-- Learn More Section -->
+      
+      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:660px;" width="660" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+    
+      
+      <div style="margin:0px auto;max-width:660px;">
+        
+        <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+          <tbody>
+            <tr>
+              <td style="direction:ltr;font-size:0px;padding:5px 20px 10px 20px;text-align:center;">
+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" width="660px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:620px;" width="620" bgcolor="#f6f6f6" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+    
+      
+      <div style="background:#f6f6f6;background-color:#f6f6f6;margin:0px auto;border-radius:0px 0px 4px 4px;max-width:620px;">
+        
+        <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#f6f6f6;background-color:#f6f6f6;width:100%;border-radius:0px 0px 4px 4px;">
+          <tbody>
+            <tr>
+              <td style="direction:ltr;font-size:0px;padding:5px 20px 10px 20px;text-align:center;">
+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:406px;" ><![endif]-->
+            
+      <div class="mj-column-per-70 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+        
+      <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+        <tbody>
+          
+              <tr>
+                <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                  
+      <div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;line-height:24px;text-align:left;color:#1B2029;"><h3 style="font-size: 20px; margin: 0; line-height: 28px">
+        Learn more about Bitwarden
+      </h3>
+      Find user guides, product documentation, and videos on the
+      <a href="https://bitwarden.com/help/" class="link" style="text-decoration: none; color: #175ddc; font-weight: 600;"> Bitwarden Help Center</a>.</div>
+    
+                </td>
+              </tr>
+            
+        </tbody>
+      </table>
+    
+      </div>
+    
+          <!--[if mso | IE]></td><td class="" style="vertical-align:top;width:174px;" ><![endif]-->
+            
+      <div class="mj-column-per-30 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+        
+      <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+        <tbody>
+          
+              <tr>
+                <td align="center" class="hide-small-img" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                  
+      <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
+        <tbody>
+          <tr>
+            <td style="width:94px;">
+              
+      <img alt src="https://assets.bitwarden.com/email/v1/spot-community.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:16px;" width="94" height="auto">
+    
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    
+                </td>
+              </tr>
+            
+        </tbody>
+      </table>
+    
+      </div>
+    
+          <!--[if mso | IE]></td></tr></table><![endif]-->
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        
+      </div>
+    
+      
+      <!--[if mso | IE]></td></tr></table></td></tr></table><![endif]-->
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        
+      </div>
+    
+      
+      <!--[if mso | IE]></td></tr></table><![endif]-->
+    
+    <!-- Footer -->
+      
+      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:660px;" width="660" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+    
+      
+      <div style="margin:0px auto;max-width:660px;">
+        
+        <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+          <tbody>
+            <tr>
+              <td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:660px;" ><![endif]-->
+            
+      <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+        
+      <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+        <tbody>
+          
+              <tr>
+                <td align="center" style="font-size:0px;padding:0;word-break:break-word;">
+                  
+      
+     <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><td><![endif]-->
+              <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;">
+                <tbody>
+                  
+      <tr>
+        <td style="padding:10px;vertical-align:middle;">
+          <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-radius:3px;width:30px;">
+            <tbody>
+              <tr>
+                <td style="font-size:0;height:30px;vertical-align:middle;width:30px;">
+                  <a href="https://x.com/bitwarden" target="_blank">
+                    <img alt height="30" src="https://assets.bitwarden.com/email/v1/mail-x.png" style="border-radius:3px;display:block;" width="30">
+                  </a>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </td>
+        
+      </tr>
+    
+                </tbody>
+              </table>
+            <!--[if mso | IE]></td><td><![endif]-->
+              <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;">
+                <tbody>
+                  
+      <tr>
+        <td style="padding:10px;vertical-align:middle;">
+          <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-radius:3px;width:30px;">
+            <tbody>
+              <tr>
+                <td style="font-size:0;height:30px;vertical-align:middle;width:30px;">
+                  <a href="https://www.reddit.com/r/Bitwarden/" target="_blank">
+                    <img alt height="30" src="https://assets.bitwarden.com/email/v1/mail-reddit.png" style="border-radius:3px;display:block;" width="30">
+                  </a>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </td>
+        
+      </tr>
+    
+                </tbody>
+              </table>
+            <!--[if mso | IE]></td><td><![endif]-->
+              <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;">
+                <tbody>
+                  
+      <tr>
+        <td style="padding:10px;vertical-align:middle;">
+          <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-radius:3px;width:30px;">
+            <tbody>
+              <tr>
+                <td style="font-size:0;height:30px;vertical-align:middle;width:30px;">
+                  <a href="https://community.bitwarden.com/" target="_blank">
+                    <img alt height="30" src="https://assets.bitwarden.com/email/v1/mail-discourse.png" style="border-radius:3px;display:block;" width="30">
+                  </a>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </td>
+        
+      </tr>
+    
+                </tbody>
+              </table>
+            <!--[if mso | IE]></td><td><![endif]-->
+              <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;">
+                <tbody>
+                  
+      <tr>
+        <td style="padding:10px;vertical-align:middle;">
+          <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-radius:3px;width:30px;">
+            <tbody>
+              <tr>
+                <td style="font-size:0;height:30px;vertical-align:middle;width:30px;">
+                  <a href="https://github.com/bitwarden" target="_blank">
+                    <img alt height="30" src="https://assets.bitwarden.com/email/v1/mail-github.png" style="border-radius:3px;display:block;" width="30">
+                  </a>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </td>
+        
+      </tr>
+    
+                </tbody>
+              </table>
+            <!--[if mso | IE]></td><td><![endif]-->
+              <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;">
+                <tbody>
+                  
+      <tr>
+        <td style="padding:10px;vertical-align:middle;">
+          <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-radius:3px;width:30px;">
+            <tbody>
+              <tr>
+                <td style="font-size:0;height:30px;vertical-align:middle;width:30px;">
+                  <a href="https://www.youtube.com/channel/UCId9a_jQqvJre0_dE2lE_Rw" target="_blank">
+                    <img alt height="30" src="https://assets.bitwarden.com/email/v1/mail-youtube.png" style="border-radius:3px;display:block;" width="30">
+                  </a>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </td>
+        
+      </tr>
+    
+                </tbody>
+              </table>
+            <!--[if mso | IE]></td><td><![endif]-->
+              <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;">
+                <tbody>
+                  
+      <tr>
+        <td style="padding:10px;vertical-align:middle;">
+          <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-radius:3px;width:30px;">
+            <tbody>
+              <tr>
+                <td style="font-size:0;height:30px;vertical-align:middle;width:30px;">
+                  <a href="https://www.linkedin.com/company/bitwarden1/" target="_blank">
+                    <img alt height="30" src="https://assets.bitwarden.com/email/v1/mail-linkedin.png" style="border-radius:3px;display:block;" width="30">
+                  </a>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </td>
+        
+      </tr>
+    
+                </tbody>
+              </table>
+            <!--[if mso | IE]></td><td><![endif]-->
+              <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;">
+                <tbody>
+                  
+      <tr>
+        <td style="padding:10px;vertical-align:middle;">
+          <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-radius:3px;width:30px;">
+            <tbody>
+              <tr>
+                <td style="font-size:0;height:30px;vertical-align:middle;width:30px;">
+                  <a href="https://www.facebook.com/bitwarden/" target="_blank">
+                    <img alt height="30" src="https://assets.bitwarden.com/email/v1/mail-facebook.png" style="border-radius:3px;display:block;" width="30">
+                  </a>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </td>
+        
+      </tr>
+    
+                </tbody>
+              </table>
+            <!--[if mso | IE]></td></tr></table><![endif]-->
+    
+    
+                </td>
+              </tr>
+            
+              <tr>
+                <td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                  
+      <div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;line-height:16px;text-align:center;color:#5A6D91;"><p style="margin-bottom: 5px">
+        © 2025 Bitwarden Inc. 1 N. Calle Cesar Chavez, Suite 102, Santa
+        Barbara, CA, USA
+      </p>
+      <p style="margin-top: 5px">
+        Always confirm you are on a trusted Bitwarden domain before logging
+        in:<br>
+        <a href="https://bitwarden.com/">bitwarden.com</a> |
+        <a href="https://bitwarden.com/help/emails-from-bitwarden/">Learn why we include this</a>
+      </p></div>
+    
+                </td>
+              </tr>
+            
+        </tbody>
+      </table>
+    
+      </div>
+    
+          <!--[if mso | IE]></td></tr></table><![endif]-->
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        
+      </div>
+    
+      
+      <!--[if mso | IE]></td></tr></table><![endif]-->
+    
+    
+      </div>
+    
+  </body>
+</html>
+  
--- a/src/Core/MailTemplates/Handlebars/Auth/SendAccessEmailOtpEmailv2.text.hbs
+++ b/src/Core/MailTemplates/Handlebars/Auth/SendAccessEmailOtpEmailv2.text.hbs
@@ -0,0 +1,9 @@
+{{#>BasicTextLayout}}
+Verify your email to access this Bitwarden Send.
+
+Your verification code is: {{Token}}
+
+This code can only be used once and expires in {{Expiry}} minutes. After that you'll need to verify your email again.
+
+Bitwarden Send transmits sensitive, temporary information to others easily and securely. Learn more about Bitwarden Send or sign up to try it today.
+{{/BasicTextLayout}}
--- a/src/Core/MailTemplates/Mjml/.mjmlconfig
+++ b/src/Core/MailTemplates/Mjml/.mjmlconfig
@@ -1,5 +1,5 @@
 {
  "packages": [
-    "components/hero"
+    "components/mj-bw-hero"
  ]
 }
--- a/src/Core/MailTemplates/Mjml/components/footer.mjml
+++ b/src/Core/MailTemplates/Mjml/components/footer.mjml
@@ -2,38 +2,38 @@
  <mj-column>
    <mj-social icon-size="30px" inner-padding="10px" padding="0">
      <mj-social-element
-        href="https://twitter.com/bitwarden"
-        src="https://bitwarden.com/images/mail-twitter.png"
+        href="https://x.com/bitwarden"
+        src="https://assets.bitwarden.com/email/v1/mail-x.png"
      ></mj-social-element>

      <mj-social-element
        href="https://www.reddit.com/r/Bitwarden/"
-        src="https://bitwarden.com/images/mail-reddit.png"
+        src="https://assets.bitwarden.com/email/v1/mail-reddit.png"
      ></mj-social-element>

      <mj-social-element
        href="https://community.bitwarden.com/"
-        src="https://bitwarden.com/images/mail-discourse.png"
+        src="https://assets.bitwarden.com/email/v1/mail-discourse.png"
      ></mj-social-element>

      <mj-social-element
        href="https://github.com/bitwarden"
-        src="https://bitwarden.com/images/mail-github.png"
+        src="https://assets.bitwarden.com/email/v1/mail-github.png"
      ></mj-social-element>

      <mj-social-element
        href="https://www.youtube.com/channel/UCId9a_jQqvJre0_dE2lE_Rw"
-        src="https://bitwarden.com/images/mail-youtube.png"
+        src="https://assets.bitwarden.com/email/v1/mail-youtube.png"
      ></mj-social-element>

      <mj-social-element
        href="https://www.linkedin.com/company/bitwarden1/"
-        src="https://bitwarden.com/images/mail-linkedin.png"
+        src="https://assets.bitwarden.com/email/v1/mail-linkedin.png"
      ></mj-social-element>

      <mj-social-element
        href="https://www.facebook.com/bitwarden/"
-        src="https://bitwarden.com/images/mail-facebook.png"
+        src="https://assets.bitwarden.com/email/v1/mail-facebook.png"
      ></mj-social-element>
    </mj-social>

@@ -45,8 +45,8 @@
      <p style="margin-top: 5px">
        Always confirm you are on a trusted Bitwarden domain before logging
        in:<br />
-        <a href="#">bitwarden.com</a> |
-        <a href="#">Learn why we include this</a>
+        <a href="https://bitwarden.com/">bitwarden.com</a> |
+        <a href="https://bitwarden.com/help/emails-from-bitwarden/">Learn why we include this</a>
      </p>
    </mj-text>
  </mj-column>
--- a/src/Core/MailTemplates/Mjml/components/head.mjml
+++ b/src/Core/MailTemplates/Mjml/components/head.mjml
@@ -4,7 +4,7 @@
    font-size="16px"
  />
  <mj-button background-color="#175ddc" />
-  <mj-text color="#333" />
+  <mj-text color="#1B2029" />
  <mj-body background-color="#e6e9ef" width="660px" />
 </mj-attributes>
 <mj-style inline="inline">
@@ -22,3 +22,9 @@
    border-radius: 3px;
  }
 </mj-style>
+
+<!-- Responsive icon visibility -->
+<mj-style>
+@media only screen and
+  (max-width: 480px) { .hide-small-img { display: none !important; } .send-bubble { padding-left: 20px; padding-right: 20px; width: 90% !important; } }
+</mj-style>
--- a/src/Core/MailTemplates/Mjml/components/hero.js
+++ b/src/Core/MailTemplates/Mjml/components/hero.js
@@ -1,64 +0,0 @@
-const { BodyComponent } = require("mjml-core");
-class MjBwHero extends BodyComponent {
-  static dependencies = {
-    // Tell the validator which tags are allowed as our component's parent
-    "mj-column": ["mj-bw-hero"],
-    "mj-wrapper": ["mj-bw-hero"],
-    // Tell the validator which tags are allowed as our component's children
-    "mj-bw-hero": [],
-  };
-
-  static allowedAttributes = {
-    "img-src": "string",
-    title: "string",
-    "button-text": "string",
-    "button-url": "string",
-  };
-
-  static defaultAttributes = {};
-
-  render() {
-    return this.renderMJML(`
-      <mj-section
-        full-width="full-width"
-        background-color="#175ddc"
-        border-radius="4px 4px 0 0"
-      >
-        <mj-column width="70%">
-          <mj-image
-            align="left"
-            src="https://bitwarden.com/images/logo-horizontal-white.png"
-            width="150px"
-            height="30px"
-          ></mj-image>
-          <mj-text color="#fff" padding-top="0" padding-bottom="0">
-            <h1 style="font-weight: normal; font-size: 24px; line-height: 32px">
-              ${this.getAttribute("title")}
-            </h1>
-          </mj-text>
-          <mj-button
-            href="${this.getAttribute("button-url")}"
-            background-color="#fff"
-            color="#1A41AC"
-            border-radius="20px"
-            align="left"
-          >
-              ${this.getAttribute("button-text")}
-            </mj-button
-          >
-        </mj-column>
-        <mj-column width="30%" vertical-align="bottom">
-          <mj-image
-            src="${this.getAttribute("img-src")}"
-            alt=""
-            width="140px"
-            height="140px"
-            padding="0"
-          />
-        </mj-column>
-      </mj-section>
-    `);
-  }
-}
-
-module.exports = MjBwHero;
--- a/src/Core/MailTemplates/Mjml/components/learn-more-footer.mjml
+++ b/src/Core/MailTemplates/Mjml/components/learn-more-footer.mjml
@@ -0,0 +1,18 @@
+<mj-section border-radius="0px 0px 4px 4px" background-color="#f6f6f6" padding="5px 20px 10px 20px">
+  <mj-column width="70%">
+    <mj-text line-height="24px">
+      <h3 style="font-size: 20px; margin: 0; line-height: 28px">
+        Learn more about Bitwarden
+      </h3>
+      Find user guides, product documentation, and videos on the
+      <a href="https://bitwarden.com/help/" class="link"> Bitwarden Help Center</a>.
+    </mj-text>
+  </mj-column>
+  <mj-column width="30%">
+    <mj-image
+      src="https://assets.bitwarden.com/email/v1/spot-community.png"
+      css-class="hide-small-img"
+      width="94px"
+    />
+  </mj-column>
+</mj-section>
--- a/src/Core/MailTemplates/Mjml/components/mj-bw-hero.js
+++ b/src/Core/MailTemplates/Mjml/components/mj-bw-hero.js
@@ -0,0 +1,100 @@
+const { BodyComponent } = require("mjml-core");
+class MjBwHero extends BodyComponent {
+  static dependencies = {
+    // Tell the validator which tags are allowed as our component's parent
+    "mj-column": ["mj-bw-hero"],
+    "mj-wrapper": ["mj-bw-hero"],
+    // Tell the validator which tags are allowed as our component's children
+    "mj-bw-hero": [],
+  };
+
+  static allowedAttributes = {
+    "img-src": "string", // REQUIRED: Source for the image displayed in the right-hand side of the blue header area
+    title: "string", // REQUIRED: large text stating primary purpose of the email
+    "button-text": "string", // OPTIONAL: text to display in the button
+    "button-url": "string", // OPTIONAL: URL to navigate to when the button is clicked
+    "sub-title": "string", // OPTIONAL: smaller text providing additional context for the title
+  };
+
+  static defaultAttributes = {};
+
+  render() {
+    if (this.getAttribute("button-text") && this.getAttribute("button-url")) {
+      return this.renderMJML(`
+      <mj-section
+        full-width="full-width"
+        background-color="#175ddc"
+        border-radius="4px 4px 0px 0px"
+      >
+        <mj-column width="70%">
+          <mj-image
+            align="left"
+            src="https://bitwarden.com/images/logo-horizontal-white.png"
+            width="150px"
+            height="30px"
+          ></mj-image>
+          <mj-text color="#fff" padding-top="0" padding-bottom="0">
+            <h1 style="font-weight: normal; font-size: 24px; line-height: 32px">
+              ${this.getAttribute("title")}
+            </h1>
+          </mj-text>
+          <mj-button
+            href="${this.getAttribute("button-url")}"
+            background-color="#fff"
+            color="#1A41AC"
+            border-radius="20px"
+            align="left"
+          >
+              ${this.getAttribute("button-text")}
+            </mj-button
+          >
+        </mj-column>
+        <mj-column width="30%" vertical-align="bottom">
+          <mj-image
+            src="${this.getAttribute("img-src")}"
+            alt=""
+            width="140px"
+            height="140px"
+            padding="0px"
+            css-class="hide-small-img"
+          />
+        </mj-column>
+      </mj-section>
+    `);
+    } else {
+      return this.renderMJML(`
+      <mj-section
+        full-width="full-width"
+        background-color="#175ddc"
+        border-radius="4px 4px 0px 0px"
+      >
+        <mj-column width="70%">
+          <mj-image
+            align="left"
+            src="https://bitwarden.com/images/logo-horizontal-white.png"
+            width="150px"
+            height="30px"
+          ></mj-image>
+          <mj-text color="#fff" padding-top="0" padding-bottom="0">
+            <h1 style="font-weight: normal; font-size: 24px; line-height: 32px">
+              ${this.getAttribute("title")}
+            </h1>
+          </mj-text>
+        </mj-column>
+        <mj-column width="30%" vertical-align="bottom">
+          <mj-image
+            src="${this.getAttribute("img-src")}"
+            alt=""
+            width="140px"
+            height="140px"
+            padding="0px"
+            css-class="hide-small-img"
+          />
+        </mj-column>
+      </mj-section>
+    `);
+    }
+  }
+}
+
+module.exports = MjBwHero;
--- a/src/Core/MailTemplates/Mjml/emails/Auth/send-email-otp.mjml
+++ b/src/Core/MailTemplates/Mjml/emails/Auth/send-email-otp.mjml
@@ -0,0 +1,64 @@
+<mjml>
+  <mj-head>
+    <mj-include path="../../components/head.mjml" />
+    <mj-style> </mj-style>
+  </mj-head>
+
+  <mj-body css-class="border-fix">
+    <!-- Blue Header Section -->
+    <mj-wrapper css-class="border-fix" padding="20px 20px 10px 20px">
+      <mj-bw-hero
+        img-src="https://assets.bitwarden.com/email/v1/spot-secure-send-round.png"
+        title="Verify your email to access this Bitwarden Send"
+      />
+    </mj-wrapper>
+
+    <!-- Main Content -->
+    <mj-wrapper padding="5px 20px 10px 20px">
+      <mj-section background-color="#fff">
+        <mj-column padding="0px">
+          <mj-text> Your verification code is: </mj-text>
+          <mj-text font-size="32px"> <b>{{Token}}</b> </mj-text>
+          <mj-spacer height="20px" />
+          <mj-text>
+            This code expires in {{Expiry}} minutes. After that, you'll need to
+            verify your email again.
+          </mj-text>
+        </mj-column>
+      </mj-section>
+      <mj-section
+        background-color="#fff"
+        padding="0px 0px 20px 0px"
+      >
+        <mj-column
+          css-class="send-bubble"
+          width="90%"
+          inner-background-color="#DBE5F6"
+          inner-border-radius="16px"
+          padding="0px"
+        >
+          <mj-text>
+            <p>
+              Bitwarden Send transmits sensitive, temporary information to
+              others easily and securely. Learn more about
+              <a href="https://bitwarden.com/help/send" class="link"
+                >Bitwarden Send</a
+              >
+              or
+              <a href="https://bitwarden.com/signup" class="link">sign up</a>
+              to try it today.
+            </p>
+          </mj-text>
+        </mj-column>
+      </mj-section>
+    </mj-wrapper>
+
+    <!-- Learn More Section -->
+    <mj-wrapper padding="5px 20px 10px 20px">
+      <mj-include path="../../components/learn-more-footer.mjml" />
+    </mj-wrapper>
+
+    <!-- Footer -->
+    <mj-include path="../../components/footer.mjml" />
+  </mj-body>
+</mjml>
--- a/src/Core/MailTemplates/Mjml/emails/Auth/two-factor.mjml
+++ b/src/Core/MailTemplates/Mjml/emails/Auth/two-factor.mjml
@@ -1,10 +1,10 @@
 <mjml>
  <mj-head>
-    <mj-include path="../components/head.mjml" />
+    <mj-include path="../../components/head.mjml" />
  </mj-head>

  <mj-body background-color="#f6f6f6">
-    <mj-include path="../components/logo.mjml" />
+    <mj-include path="../../components/logo.mjml" />

    <mj-wrapper
      background-color="#fff"
@@ -24,6 +24,6 @@
      </mj-section>
    </mj-wrapper>

-    <mj-include path="../components/footer.mjml" />
+    <mj-include path="../../components/footer.mjml" />
  </mj-body>
 </mjml>
--- a/src/Core/MailTemplates/Mjml/emails/invite.mjml
+++ b/src/Core/MailTemplates/Mjml/emails/invite.mjml
@@ -22,26 +22,7 @@
          </mj-text>
        </mj-column>
      </mj-section>
-      <mj-section background-color="#fbfbfb">
-        <mj-column width="70%">
-          <mj-text line-height="24px">
-            <h3 style="font-size: 20px; margin: 0; line-height: 28px">
-              We’re here for you!
-            </h3>
-            If you have any questions, search the Bitwarden
-            <a href="#" class="link">Help</a>
-            site or
-            <a href="#" class="link">contact us</a>.
-          </mj-text>
-        </mj-column>
-        <mj-column width="30%">
-          <mj-image
-            src="https://assets.bitwarden.com/email/v1/chat.png"
-            height="77px"
-            width="94px"
-          />
-        </mj-column>
-      </mj-section>
+      <mj-include path="../components/learn-more-footer.mjml" />
    </mj-wrapper>

    <mj-include path="../components/footer.mjml" />
--- a/src/Core/Models/Mail/Auth/DefaultEmailOtpViewModel.cs
+++ b/src/Core/Models/Mail/Auth/DefaultEmailOtpViewModel.cs
@@ -9,4 +9,5 @@ public class DefaultEmailOtpViewModel : BaseMailModel
    public string? TheDate { get; set; }
    public string? TheTime { get; set; }
    public string? TimeZone { get; set; }
+    public string? Expiry { get; set; }
 }
--- a/src/Core/Services/IMailService.cs
+++ b/src/Core/Services/IMailService.cs
@@ -4,6 +4,7 @@ using Bit.Core.AdminConsole.Entities;
 using Bit.Core.AdminConsole.Entities.Provider;
 using Bit.Core.Auth.Entities;
 using Bit.Core.Auth.Enums;
+using Bit.Core.Auth.Identity.TokenProviders;
 using Bit.Core.Billing.Enums;
 using Bit.Core.Entities;
 using Bit.Core.Models.Data.Organizations;
@@ -31,6 +32,16 @@ public interface IMailService
    Task SendChangeEmailEmailAsync(string newEmailAddress, string token);
    Task SendTwoFactorEmailAsync(string email, string accountEmail, string token, string deviceIp, string deviceType, TwoFactorEmailPurpose purpose);
    Task SendSendEmailOtpEmailAsync(string email, string token, string subject);
+    /// <summary>
+    /// <see cref="DefaultOtpTokenProviderOptions"/> has a default expiry of 5 minutes so we set the expiry to that value int he view model.
+    /// Sends OTP code token to the specified email address.
+    /// will replace <see cref="SendSendEmailOtpEmailAsync"/> when MJML templates are fully accepted.
+    /// </summary>
+    /// <param name="email">Email address to send the OTP to</param>
+    /// <param name="token">Otp code token</param>
+    /// <param name="subject">subject line of the email</param>
+    /// <returns>Task</returns>
+    Task SendSendEmailOtpEmailv2Async(string email, string token, string subject);
    Task SendFailedTwoFactorAttemptEmailAsync(string email, TwoFactorProviderType type, DateTime utcNow, string ip);
    Task SendNoMasterPasswordHintEmailAsync(string email);
    Task SendMasterPasswordHintEmailAsync(string email, string hint);
--- a/src/Core/Services/Implementations/HandlebarsMailService.cs
+++ b/src/Core/Services/Implementations/HandlebarsMailService.cs
@@ -224,6 +224,27 @@ public class HandlebarsMailService : IMailService
        await _mailDeliveryService.SendEmailAsync(message);
    }

+    public async Task SendSendEmailOtpEmailv2Async(string email, string token, string subject)
+    {
+        var message = CreateDefaultMessage(subject, email);
+        var requestDateTime = DateTime.UtcNow;
+        var model = new DefaultEmailOtpViewModel
+        {
+            Token = token,
+            Expiry = "5", // This should be configured through the OTPDefaultTokenProviderOptions but for now we will hardcode it to 5 minutes.
+            TheDate = requestDateTime.ToLongDateString(),
+            TheTime = requestDateTime.ToShortTimeString(),
+            TimeZone = _utcTimeZoneDisplay,
+            WebVaultUrl = _globalSettings.BaseServiceUri.VaultWithHash,
+            SiteName = _globalSettings.SiteName,
+        };
+        await AddMessageContentAsync(message, "Auth.SendAccessEmailOtpEmailv2", model);
+        message.MetaData.Add("SendGridBypassListManagement", true);
+        // TODO - PM-25380 change to string constant
+        message.Category = "SendEmailOtp";
+        await _mailDeliveryService.SendEmailAsync(message);
+    }
+
    public async Task SendFailedTwoFactorAttemptEmailAsync(string email, TwoFactorProviderType failedType, DateTime utcNow, string ip)
    {
        // Check if we've sent this email within the last hour
--- a/src/Core/Services/NoopImplementations/NoopMailService.cs
+++ b/src/Core/Services/NoopImplementations/NoopMailService.cs
@@ -98,6 +98,11 @@ public class NoopMailService : IMailService
        return Task.FromResult(0);
    }

+    public Task SendSendEmailOtpEmailv2Async(string email, string token, string subject)
+    {
+        return Task.FromResult(0);
+    }
+
    public Task SendFailedTwoFactorAttemptEmailAsync(string email, TwoFactorProviderType failedType, DateTime utcNow, string ip)
    {
        return Task.FromResult(0);
--- a/src/Identity/IdentityServer/RequestValidators/SendAccess/SendEmailOtpRequestValidator.cs
+++ b/src/Identity/IdentityServer/RequestValidators/SendAccess/SendEmailOtpRequestValidator.cs
@@ -1,4 +1,5 @@
 using System.Security.Claims;
+using Bit.Core;
 using Bit.Core.Auth.Identity;
 using Bit.Core.Auth.Identity.TokenProviders;
 using Bit.Core.Services;
@@ -10,6 +11,7 @@ using Duende.IdentityServer.Validation;
 namespace Bit.Identity.IdentityServer.RequestValidators.SendAccess;

 public class SendEmailOtpRequestValidator(
+    IFeatureService featureService,
    IOtpTokenProvider<DefaultOtpTokenProviderOptions> otpTokenProvider,
    IMailService mailService) : ISendAuthenticationMethodValidator<EmailOtp>
 {
@@ -60,11 +62,20 @@ public class SendEmailOtpRequestValidator(
            {
                return BuildErrorResult(SendAccessConstants.EmailOtpValidatorResults.OtpGenerationFailed);
            }
-
-            await mailService.SendSendEmailOtpEmailAsync(
-                email,
-                token,
-                string.Format(SendAccessConstants.OtpEmail.Subject, token));
+            if (featureService.IsEnabled(FeatureFlagKeys.MJMLBasedEmailTemplates))
+            {
+                await mailService.SendSendEmailOtpEmailv2Async(
+                    email,
+                    token,
+                    string.Format(SendAccessConstants.OtpEmail.Subject, token));
+            }
+            else
+            {
+                await mailService.SendSendEmailOtpEmailAsync(
+                    email,
+                    token,
+                    string.Format(SendAccessConstants.OtpEmail.Subject, token));
+            }
            return BuildErrorResult(SendAccessConstants.EmailOtpValidatorResults.EmailOtpSent);
        }

--- a/test/Identity.Test/IdentityServer/SendAccess/SendEmailOtpRequestValidatorTests.cs
+++ b/test/Identity.Test/IdentityServer/SendAccess/SendEmailOtpRequestValidatorTests.cs
@@ -265,9 +265,10 @@ public class SendEmailOtpRequestValidatorTests
        // Arrange
        var otpTokenProvider = Substitute.For<IOtpTokenProvider<DefaultOtpTokenProviderOptions>>();
        var mailService = Substitute.For<IMailService>();
+        var featureService = Substitute.For<IFeatureService>();

        // Act
-        var validator = new SendEmailOtpRequestValidator(otpTokenProvider, mailService);
+        var validator = new SendEmailOtpRequestValidator(featureService, otpTokenProvider, mailService);

        // Assert
        Assert.NotNull(validator);