Bug: Creating new email templates for Hyperswitch



- Create Email templates as per new figma designs
diff --git a/crates/router/src/services/email/assets/api_key_expiry_reminder.html b/crates/router/src/services/email/assets/api_key_expiry_reminder.html
index 772602d71e7..6ebb099ed74 100644
--- a/crates/router/src/services/email/assets/api_key_expiry_reminder.html
+++ b/crates/router/src/services/email/assets/api_key_expiry_reminder.html
@@ -1,149 +1,170 @@
-<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
-<title>API Key Expiry Notice</title>
-<body style="background-color: #ececec">
-  <style>
-    .apple-footer a {{
-      text-decoration: none !important;
-      color: #999 !important;
-      border: none !important;
-    }}
-    .apple-email a {{
-      text-decoration: none !important;
-      color: #448bff !important;
-      border: none !important;
-    }}
-  </style>
-  <div
-    id="wrapper"
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>API Key Expiry Notice</title>
+  </head>
+  <body
     style="
-      background-color: none;
-      margin: 0 auto;
-      text-align: center;
-      width: 60%;
-      -premailer-height: 200;
+      background-color: #f8f9fb;
+      height: 100%;
+      font-family: Arial, Helvetica, sans-serif;
     "
   >
-    <table
-      align="center"
-      class="main-table"
+    <div
       style="
-        -premailer-cellpadding: 0;
-        -premailer-cellspacing: 0;
-        background-color: #fff;
-        border: 0;
-        border-top: 5px solid #0165ef;
-        margin: 0 auto;
-        mso-table-lspace: 0;
-        mso-table-rspace: 0;
-        padding: 0 40;
-        text-align: center;
         width: 100%;
+        margin: auto;
+        text-align: center;
+        background-color: #f8f9fb;
       "
-      bgcolor="#ffffff"
-      cellpadding="0"
-      cellspacing="0"
     >
-      
-      <tr>
-        <td
-          class="spacer-lg"
-          style="
-            -premailer-height: 75;
-            -premailer-width: 100%;
-            line-height: 30px;
-            margin: 0 auto;
-            padding: 0;
-          "
-          height="25"
-          width="100%"
-        ></td>
-      </tr>
-      <tr>
-        <td
-          class="spacer-lg"
-          style="
-            -premailer-height: 75;
-            -premailer-width: 100%;
-            line-height: 30px;
-            margin: 0 auto;
-            padding: 0;
-          "
-          height="50"
-          width="100%"
-        ></td>
-      </tr>
-      <tr>
-        <td
-          class="headline"
-          style="
-            color: #444;
-            font-family: Roboto, Helvetica, Arial, san-serif;
-            font-size: 30px;
-            font-weight: 100;
-            line-height: 36px;
-            margin: 0 auto;
-            padding: 0;
-            text-align: left;
-          "
-          align="center"
-        >
-        <p style="font-size: 18px">Dear Merchant,</p>
-        <span style="font-size: 18px">
-          It has come to our attention that your API key, <b>{api_key_name}</b> (<code>{prefix}*****</code>) </code> will expire in {expires_in} days. To ensure uninterrupted
-          access to our platform and continued smooth operation of your services, we kindly request that you take the
-          necessary actions as soon as possible.
-        </span>
-        </td>
-      </tr>
-      <tr>
-        <td
-          class="spacer-sm"
-          style="
-            -premailer-height: 20;
-            -premailer-width: 80%;
-            line-height: 10px;
-            margin: 0 auto;
-            padding: 0;
-          "
-          height="20"
-          width="100%"
-        ></td>
-      </tr>
-
-      <tr>
-        <td
-          class="headline"
-          style="
-            color: #444;
-            font-family: Roboto, Helvetica, Arial, san-serif;
-            font-size: 18px;
-            font-weight: 100;
-            line-height: 36px;
-            margin: 0 auto;
-            padding: 0;
-            text-align: left;
-          "
-          align="center"
-        >
-          Thanks,<br />
-          Team Hyperswitch
-        </td>
-      </tr>
-      <tr>
-        <td
-          class="spacer-lg"
-          style="
-            -premailer-height: 75;
-            -premailer-width: 100%;
-            line-height: 30px;
-            margin: 0 auto;
-            padding: 0;
-          "
-          height="75"
-          width="100%"
-        ></td>
-      </tr>
-      
-    </table>
-  </div>
-</body>
+      <table style="text-align: center; width: 100%">
+        <tr>
+          <td style="height: 6px"></td>
+        </tr>
+        <tr>
+          <td style="text-align: center">
+            <table
+              style="
+                background-color: #ffffff;
+                text-align: center;
+                max-width: 50%;
+                margin: auto;
+              "
+            >
+              <tr>
+                <td style="height: 20px"></td>
+              </tr>
+              <tr>
+                <td>
+                  <table style="width: 100%">
+                    <tr>
+                      <td style="text-align: center">
+                        <img
+                          src="https://app.hyperswitch.io/email-assets/HyperswitchLogo.png"
+                          alt="Hyperswitch"
+                          style="
+                            text-align: center;
+                            height: 1.3rem;
+                            width: auto;
+                          "
+                        />
+                      </td>
+                    </tr>
+                  </table>
+                </td>
+              </tr>
+              <tr>
+                <td style="height: 40px"></td>
+              </tr>
+              <tr>
+                <td
+                  style="
+                    color: #666666;
+                    font-size: 1rem;
+                    font-weight: 400;
+                    line-height: 1.5rem;
+                    min-width: 450px;
+                  "
+                >
+                  <table
+                    style="
+                      width: 90%;
+                      min-width: 350px;
+                      text-align: start;
+                      margin: auto;
+                      padding: 0 10px;
+                    "
+                  >
+                  <tr>
+                    <td style="text-align: start;"> 
+                        <p>Dear Merchant,</p>
+                    </td>
+                  </tr>
+                    <tr>
+                      <td style="text-align: start;">
+                        <p>
+                            It has come to our attention that your API key, <b>{api_key_name}</b> (<code>{prefix}*****</code>) </code> will expire in {expires_in} days.
+                        </p>
+                        <p>
+                            To ensure uninterrupted
+                        access to our platform and continued smooth operation of your services, we request you to take the
+                        necessary actions as soon as possible.
+                        </p>
+                         
+                      </td>
+                    </tr>
+                    <tr>
+                         <td style="height: 30px"></td>
+                    </tr>
+                    <tr>
+                        <td style="text-align: start;">
+                            Thanks,<br />
+                            Team Hyperswitch
+                        </td>
+                    </tr>
+                  </table>
+                </td>
+              </tr>
+              <tr>
+                <td style="height: 50px"></td>
+              </tr>
+              <tr>
+                <td
+                  style="
+                    font-size: 12px;
+                    line-height: 1rem;
+                    font-weight: 400;
+                    color: #111326b2;
+                  "
+                >
+                  Follow us on
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <a
+                    href="https://github.com/juspay/hyperswitch"
+                    target="_blank"
+                  >
+                    <img
+                      src="https://app.hyperswitch.io/email-assets/Github.png"
+                      alt="Github"
+                      height="15"
+                    />
+                  </a>
+                  <a href="https://x.com/hyperswitchio?s=21" target="_blank">
+                    <img
+                      src="https://app.hyperswitch.io/email-assets/Twitter.png"
+                      alt="Twitter"
+                      height="15"
+                    />
+                  </a>
+                  <a
+                    href="https://www.linkedin.com/company/hyperswitch/"
+                    target="_blank"
+                  >
+                    <img
+                      src="https://app.hyperswitch.io/email-assets/Linkedin-Dark.png"
+                      alt="LinkedIn"
+                      height="15"
+                    />
+                  </a>
+                </td>
+              </tr>
+              <tr>
+                <td style="height: 20px"></td>
+              </tr>
+            </table>
+          </td>
+        </tr>
+        <tr>
+          <td style="height: 6px"></td>
+        </tr>
+      </table>
+    </div>
+  </body>
+</html>
diff --git a/crates/router/src/services/email/assets/bizemailprod.html b/crates/router/src/services/email/assets/bizemailprod.html
index c705608ec72..02f646c010d 100644
--- a/crates/router/src/services/email/assets/bizemailprod.html
+++ b/crates/router/src/services/email/assets/bizemailprod.html
@@ -1,138 +1,180 @@
-<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
-<title>Welcome to HyperSwitch!</title>
-<body style="background-color: #ececec">
-  <div
-    id="wrapper"
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Welcome to Hyperswitch!</title>
+  </head>
+  <body
     style="
-      background-color: none;
-      margin: 0 auto;
-      text-align: center;
-      width: 90%;
-      -premailer-height: 200;
+      background-color: #f8f9fb;
+      height: 100%;
+      font-family: Arial, Helvetica, sans-serif;
     "
   >
-    <table
-      align="center"
-      class="main-table"
+    <div
       style="
-        -premailer-cellpadding: 0;
-        -premailer-cellspacing: 0;
-        background-color: #fff;
-        border: 0;
-        border-top: 5px solid #0165ef;
-        margin: 0 auto;
-        mso-table-lspace: 0;
-        mso-table-rspace: 0;
-        padding: 0 40;
-        text-align: center;
         width: 100%;
+        margin: auto;
+        text-align: center;
+        background-color: #f8f9fb;
       "
-      bgcolor="#ffffff"
-      cellpadding="0"
-      cellspacing="0"
     >
-      <tr>
-        <td
-          class="spacer-sm"
-          style="
-            -premailer-height: 20;
-            -premailer-width: 80%;
-            line-height: 10px;
-            margin: 0 auto;
-            padding: 0;
-          "
-          width="100%"
-        ></td>
-      </tr>
-      <tr>
-        <td
-          class="spacer-sm"
-          style="
-            -premailer-height: 20;
-            -premailer-width: 80%;
-            line-height: 10px;
-            margin: 0 auto;
-            padding: 0;
-          "
-          width="100%"
-        ></td>
-      </tr>
-      <tr>
-        <td
-          class="copy"
-          style="
-            color: #666;
-            font-family: Roboto, Helvetica, Arial, san-serif;
-            font-size: 14px;
-            text-align: left;
-            line-height: 20px;
-            margin-top: 20px;
-            padding: 15px;
-          "
-        >
-          <br />
-          <p>Hi Team,</p>
-          <p>
-            A Production Account Intent has been initiated by {username} -
-            please find more details below:
-          </p>
-          <ol>
-            <li><strong>Name:</strong> {username}</li>
-            <li><strong>Point of Contact Email (POC):</strong> {poc_email}</li>
-            <li><strong>Legal Business Name:</strong> {legal_business_name}</li>
-            <li><strong>Business Location:</strong> {business_location}</li>
-            <li><strong>Business Website:</strong> {business_website}</li>
-          </ol>
-          <br />
-        </td>
-      </tr>
-      <tr>
-        <td
-          class="spacer-sm"
-          style="
-            -premailer-height: 20;
-            -premailer-width: 80%;
-            line-height: 10px;
-            margin: 0 auto;
-            padding: 0;
-          "
-          width="100%"
-        ></td>
-      </tr>
-
-      <tr>
-        <td
-          class="headline"
-          style="
-            color: #444;
-            font-family: Roboto, Helvetica, Arial, san-serif;
-            font-size: 18px;
-            font-weight: 100;
-            line-height: 36px;
-            margin: 0 auto;
-            padding: 0;
-            text-align: center;
-          "
-          align="center"
-        >
-          Regards,<br />
-          Hyperswitch Dashboard Team
-        </td>
-      </tr>
-      <tr>
-        <td
-          class="spacer-lg"
-          style="
-            -premailer-height: 75;
-            -premailer-width: 100%;
-            line-height: 30px;
-            margin: 0 auto;
-            padding: 0;
-          "
-          height="75"
-          width="100%"
-        ></td>
-      </tr>
-    </table>
-  </div>
-</body>
+      <table style="text-align: center; width: 100%">
+        <tr>
+          <td style="height: 6px"></td>
+        </tr>
+        <tr>
+          <td style="text-align: center">
+            <table
+              style="
+                background-color: #ffffff;
+                text-align: center;
+                max-width: 60%;
+                margin: auto;
+              "
+            >
+              <tr>
+                <td style="height: 15px"></td>
+              </tr>
+              <tr>
+                <td>
+                  <table style="width: 100%">
+                    <tr>
+                      <td style="text-align: center">
+                        <img
+                          src="https://app.hyperswitch.io/email-assets/HyperswitchLogo.png"
+                          alt="Hyperswitch"
+                          style="
+                            text-align: center;
+                            height: 1.3rem;
+                            width: auto;
+                          "
+                        />
+                      </td>
+                    </tr>
+                  </table>
+                </td>
+              </tr>
+              <tr>
+                <td style="height: 20px"></td>
+              </tr>
+              <tr>
+                <td
+                  style="
+                    color: #666666;
+                    font-size: 1rem;
+                    font-weight: 400;
+                    line-height: 1.5rem;
+                    min-width: 450px;
+                  "
+                >
+                  <table
+                    style="
+                      width: 90%;
+                      min-width: 350px;
+                      text-align: start;
+                      margin: auto;
+                      padding: 0 10px;
+                    "
+                  >
+                    <tr>
+                      <td style="text-align: start">
+                        <p>Hi Team,</p>
+                        <p>
+                          A Production Account Intent has been initiated by
+                          {username} - please find more details below:
+                        </p>
+                        <ol>
+                          <li><strong>Name:</strong> {username}</li>
+                          <li>
+                            <strong>Point of Contact Email (POC):</strong>
+                            {poc_email}
+                          </li>
+                          <li>
+                            <strong>Legal Business Name:</strong>
+                            {legal_business_name}
+                          </li>
+                          <li>
+                            <strong>Business Location:</strong>
+                            {business_location}
+                          </li>
+                          <li>
+                            <strong>Business Website:</strong>
+                            {business_website}
+                          </li>
+                        </ol>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td style="height: 15px"></td>
+                    </tr>
+                    <tr>
+                      <td style="text-align: start">
+                        Regards,<br />
+                        Hyperswitch Dashboard Team
+                      </td>
+                    </tr>
+                  </table>
+                </td>
+              </tr>
+              <tr>
+                <td style="height: 50px"></td>
+              </tr>
+              <tr>
+                <td
+                  style="
+                    font-size: 12px;
+                    line-height: 1rem;
+                    font-weight: 400;
+                    color: #111326b2;
+                  "
+                >
+                  Follow us on
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <a
+                    href="https://github.com/juspay/hyperswitch"
+                    target="_blank"
+                  >
+                    <img
+                      src="https://app.hyperswitch.io/email-assets/Github.png"
+                      alt="Github"
+                      height="15"
+                    />
+                  </a>
+                  <a href="https://x.com/hyperswitchio?s=21" target="_blank">
+                    <img
+                      src="https://app.hyperswitch.io/email-assets/Twitter.png"
+                      alt="Twitter"
+                      height="15"
+                    />
+                  </a>
+                  <a
+                    href="https://www.linkedin.com/company/hyperswitch/"
+                    target="_blank"
+                  >
+                    <img
+                      src="https://app.hyperswitch.io/email-assets/Linkedin-Dark.png"
+                      alt="LinkedIn"
+                      height="15"
+                    />
+                  </a>
+                </td>
+              </tr>
+              <tr>
+                <td style="height: 20px"></td>
+              </tr>
+            </table>
+          </td>
+        </tr>
+        <tr>
+          <td style="height: 6px"></td>
+        </tr>
+      </table>
+    </div>
+  </body>
+</html>
diff --git a/crates/router/src/services/email/assets/invite.html b/crates/router/src/services/email/assets/invite.html
index 307ec6cead8..7c7beb317fb 100644
--- a/crates/router/src/services/email/assets/invite.html
+++ b/crates/router/src/services/email/assets/invite.html
@@ -1,243 +1,225 @@
-<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
-<title>Welcome to HyperSwitch!</title>
-
-<body style="background-color: #ececec">
-    <style>
-        .apple-footer a {{
-                text-decoration: none !important;
-                color: #999 !important;
-                border: none !important;
-          }}
-
-        .apple-email a {{
-                text-decoration: none !important;
-                color: #448bff !important;
-                border: none !important;
-            }}
-    </style>
-    <div id="wrapper" style="
-      background-color: none;
-      margin: 0 auto;
-      text-align: center;
-      width: 60%;
-      -premailer-height: 200;
-    ">
-        <table align="center" class="main-table" style="
-        -premailer-cellpadding: 0;
-        -premailer-cellspacing: 0;
-        background-color: #fff;
-        border: 0;
-        border-top: 5px solid #0165ef;
-        margin: 0 auto;
-        mso-table-lspace: 0;
-        mso-table-rspace: 0;
-        padding: 0 40;
-        text-align: center;
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Invite User</title>
+  </head>
+  <body
+    style="
+      background-color: #f8f9fb;
+      height: 100%;
+      font-family: Arial, Helvetica, sans-serif;
+    "
+  >
+    <div
+      style="
         width: 100%;
-      " bgcolor="#ffffff" cellpadding="0" cellspacing="0">
-            <tr>
-                <td class="spacer-lg" style="
-            -premailer-height: 75;
-            -premailer-width: 100%;
-            line-height: 30px;
-            margin: 0 auto;
-            padding: 0;
-          " height="75" width="100%"></td>
-            </tr>
-            <tr>
-                <td class="spacer-lg" style="
-            -premailer-height: 75;
-            -premailer-width: 100%;
-            line-height: 30px;
-            margin: 0 auto;
-            padding: 0;
-          " height="25" width="100%"></td>
-            </tr>
-            <tr>
-                <td class="spacer-lg" style="
-            -premailer-height: 75;
-            -premailer-width: 100%;
-            line-height: 30px;
-            margin: 0 auto;
-            padding: 0;
-          " height="50" width="100%"></td>
-            </tr>
-            <tr>
-                <td class="headline" style="
-            color: #444;
-            font-family: Roboto, Helvetica, Arial, san-serif;
-            font-size: 30px;
-            font-weight: 100;
-            line-height: 36px;
-            margin: 0 auto;
-            padding: 0;
-            text-align: center;
-          " align="center">
-                    Welcome to HyperSwitch!
+        margin: auto;
+        text-align: center;
+        background-color: #f8f9fb;
+      "
+    >
+      <table style="text-align: center; width: 100%">
+        <tr>
+          <td style="height: 6px"></td>
+        </tr>
+        <tr>
+          <td style="text-align: center">
+            <table
+              style="
+                background-color: #ffffff;
+                text-align: center;
+                max-width: 55%;
+                margin: auto;
+              "
+            >
+              <tr>
+                <td style="height: 20px"></td>
+              </tr>
+              <tr>
+                <td>
+                  <table style="width: 100%">
+                    <tr>
+                      <td style="text-align: center">
+                        <img
+                          src="https://app.hyperswitch.io/email-assets/HyperswitchLogo.png"
+                          alt="Hyperswitch"
+                          style="
+                            text-align: center;
+                            height: 1.3rem;
+                            width: auto;
+                          "
+                        />
+                      </td>
+                    </tr>
+                  </table>
                 </td>
-            </tr>
-            <tr>
-                <td class="spacer-sm" style="
-            -premailer-height: 20;
-            -premailer-width: 80%;
-            line-height: 10px;
-            margin: 0 auto;
-            padding: 0;
-          " width="100%"></td>
-            </tr>
-            <tr>
-              <td class="copy" style="
-                  color: #666;
-                  font-family: Roboto, Helvetica, Arial, san-serif;
-                  font-size: 14px;
-                  text-align: center;
-                  line-height: 20px;
-                  margin-top: 20px;
-                  padding: 0;
-                " 20px!important; align="center">
-                <br />
-                Hi {username}<br />
-              </td>
-            </tr>
-            <tr>
-                <td class="spacer-sm" style="
-            -premailer-height: 20;
-            -premailer-width: 80%;
-            line-height: 10px;
-            margin: 0 auto;
-            padding: 0;
-          " width="100%"></td>
-            </tr>
-            <tr>
-                <td class="copy" style="
-            color: #666;
-            font-family: Roboto, Helvetica, Arial, san-serif;
-            font-size: 14px;
-            text-align: center;
-            line-height: 20px;
-            margin-top: 20px;
-            padding: 0;
-          " 20px!important; align="center">
-                    <br />
-                    You have received this email because your administrator has invited you as a new user on
-                    Hyperswitch.
-                    <br />
+              </tr>
+              <tr>
+                <td style="height: 40px"></td>
+              </tr>
+              <tr>
+                <td
+                  style="
+                    font-size: 2.02rem;
+                    font-weight: 600;
+                    line-height: 2.5rem;
+                    color: #111326;
+                    min-width: 550px;
+                  "
+                >
+                  Welcome to Hyperswitch!
                 </td>
-            </tr>
-            <tr>
-                <td class="spacer-sm" style="
-            -premailer-height: 20;
-            -premailer-width: 80%;
-            line-height: 10px;
-            margin: 0 auto;
-            padding: 0;
-          " width="100%"></td>
-            </tr>
-            <tr>
-                <td class="copy" style="
-            color: #666;
-            font-family: Roboto, Helvetica, Arial, san-serif;
-            font-size: 14px;
-            text-align: center;
-            line-height: 20px;
-            margin-top: 20px;
-            padding: 0;
-          " 20px!important; align="center">
-                    <br />
-                    <b>To get started, click on the button below. </b>
+              </tr>
+              <tr>
+                <td style="height: 10px"></td>
+              </tr>
+              <tr>
+                <td
+                  style="
+                    color: #666666;
+                    width: 50%;
+                    font-size: 1.02rem;
+                    font-weight: 400;
+                    line-height: 1.4rem;
+                    min-width: 300px;
+                  "
+                >
+                  <table
+                    style="
+                      width: 50%;
+                      min-width: 440px;
+                      text-align: center;
+                      margin: auto;
+                    "
+                  >
+                    <tr>
+                      <td>
+                        Hi {username}, you have received this email because your
+                        administrator has invited you as a new user on
+                        Hyperswitch.
+                      </td>
+                    </tr>
+                  </table>
                 </td>
-            </tr>
-            <tr>
-                <td class="spacer-sm" style="
-            -premailer-height: 20;
-            -premailer-width: 100%;
-            line-height: 10px;
-            margin: 0 auto;
-            padding: 0;
-          " height="20" width="100%"></td>
-            </tr>
-            <tr>
+              </tr>
+              <tr>
+                <td style="height: 30px"></td>
+              </tr>
+              <tr>
                 <td>
-                    <table align="center">
-                        <tr>
-                            <td align="center" width="160" height="40" class="button" style="
-                  background-color: #0165ef;
-                  border-radius: 2.5px;
-                  display: block;
-                ">
-                                <a href="{link}" style="
-                    width: 100%;
-                    display: inline-block;
-                    text-decoration: none;
-                    font-weight: medium;
-                    color: #fff;
-                    font-family: Roboto, Helvetica, Arial, san-serif;
-                    font-size: 14px;
-                    text-align: center;
-                    line-height: 40px;
-                  ">Click here to Join</a>
-                            </td>
-                        </tr>
-                    </table>
+                  <a
+                    href="{link}"
+                    style="
+                      text-decoration: none;
+                      border: none;
+                      border-radius: 64px;
+                      font-size: 1.02rem;
+                      color: #ffffff;
+                      font-weight: 500;
+                      line-height: 1.5rem;
+                      width: 50%;
+                      padding: 0.9rem 4rem;
+                      background: #0070ff;
+                      min-width: 18rem;
+                      max-width: 25rem;
+                      cursor: pointer;
+                    "
+                  >
+                    Click here to join
+                  </a>
                 </td>
-            </tr>
-            <tr>
-                <td class="copy" style="
-            color: #666;
-            font-family: Roboto, Helvetica, Arial, san-serif;
-            font-size: 14px;
-            text-align: center;
-            line-height: 20px;
-            margin-top: 20px;
-            padding: 0;
-          " 20px!important; align="center">
-                    <br />
-                    If the link has already expired, you can request a new link from your administrator or reach out to
-                    your internal support for more assistance.<br />
+              </tr>
+              <tr>
+                <td style="height: 30px"></td>
+              </tr>
+              <tr>
+                <td
+                  style="
+                    color: #666666;
+                    width: 50%;
+                    font-size: 1.02rem;
+                    font-weight: 400;
+                    line-height: 1.4rem;
+                    min-width: 300px;
+                  "
+                >
+                  <table
+                    style="
+                      width: 50%;
+                      min-width: 500px;
+                      text-align: center;
+                      margin: auto;
+                    "
+                  >
+                    <tr>
+                      <td>
+                        If the link has already expired, you can request a new
+                        link from your administrator or reach out to your
+                        internal support for more assistance.
+                      </td>
+                    </tr>
+                  </table>
                 </td>
-            </tr>
-            <tr>
-                <td class="spacer-lg" style="
-            -premailer-height: 75;
-            -premailer-width: 100%;
-            line-height: 30px;
-            margin: 0 auto;
-            padding: 0;
-          " height="75" width="100%"></td>
-            </tr>
-            <tr>
-                <td class="headline" style="
-            color: #444;
-            font-family: Roboto, Helvetica, Arial, san-serif;
-            font-size: 18px;
-            font-weight: 100;
-            line-height: 36px;
-            margin: 0 auto;
-            padding: 0;
-            text-align: center;
-          " align="center">
-                    Thanks,<br />
-                    Team Hyperswitch
+              </tr>
+              <tr>
+                <td style="height: 50px"></td>
+              </tr>
+              <tr>
+                <td
+                  style="
+                    font-size: 12px;
+                    line-height: 1rem;
+                    font-weight: 400;
+                    color: #111326b2;
+                  "
+                >
+                  Follow us on
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <a
+                    href="https://github.com/juspay/hyperswitch"
+                    target="_blank"
+                  >
+                    <img
+                      src="https://app.hyperswitch.io/email-assets/Github.png"
+                      alt="Github"
+                      height="15"
+                    />
+                  </a>
+                  <a href="https://x.com/hyperswitchio?s=21" target="_blank">
+                    <img
+                      src="https://app.hyperswitch.io/email-assets/Twitter.png"
+                      alt="Twitter"
+                      height="15"
+                    />
+                  </a>
+                  <a
+                    href="https://www.linkedin.com/company/hyperswitch/"
+                    target="_blank"
+                  >
+                    <img
+                      src="https://app.hyperswitch.io/email-assets/Linkedin-Dark.png"
+                      alt="LinkedIn"
+                      height="15"
+                    />
+                  </a>
                 </td>
-            </tr>
-            <tr>
-                <td class="spacer-lg" style="
-            -premailer-height: 75;
-            -premailer-width: 100%;
-            line-height: 30px;
-            margin: 0 auto;
-            padding: 0;
-          " height="75" width="100%"></td>
-            </tr>
-            <tr>
-                <td class="spacer-lg" style="
-            -premailer-height: 75;
-            -premailer-width: 100%;
-            line-height: 30px;
-            margin: 0 auto;
-            padding: 0;
-          " height="75" width="100%"></td>
-            </tr>
-        </table>
+              </tr>
+              <tr>
+                <td style="height: 20px"></td>
+              </tr>
+            </table>
+          </td>
+        </tr>
+        <tr>
+          <td style="height: 6px"></td>
+        </tr>
+      </table>
     </div>
-</body>
+  </body>
+</html>
diff --git a/crates/router/src/services/email/assets/magic_link.html b/crates/router/src/services/email/assets/magic_link.html
index 643b6e23063..27f0b9816ef 100644
--- a/crates/router/src/services/email/assets/magic_link.html
+++ b/crates/router/src/services/email/assets/magic_link.html
@@ -1,256 +1,224 @@
-<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
-<title>Login to Hyperswitch</title>
-<body style="background-color: #ececec">
-  <style>
-    .apple-footer a {{
-      text-decoration: none !important;
-      color: #999 !important;
-      border: none !important;
-    }}
-    .apple-email a {{
-      text-decoration: none !important;
-      color: #448bff !important;
-      border: none !important;
-    }}
-  </style>
-  <div
-    id="wrapper"
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Login to Hyperswitch</title>
+  </head>
+  <body
     style="
-      background-color: none;
-      margin: 0 auto;
-      text-align: center;
-      width: 60%;
-      -premailer-height: 200;
+      background-color: #f8f9fb;
+      height: 100%;
+      font-family: Arial, Helvetica, sans-serif;
     "
   >
-    <table
-      align="center"
-      class="main-table"
+    <div
       style="
-        -premailer-cellpadding: 0;
-        -premailer-cellspacing: 0;
-        background-color: #fff;
-        border: 0;
-        border-top: 5px solid #0165ef;
-        margin: 0 auto;
-        mso-table-lspace: 0;
-        mso-table-rspace: 0;
-        padding: 0 40px;
-        text-align: center;
         width: 100%;
+        margin: auto;
+        text-align: center;
+        background-color: #f8f9fb;
       "
-      bgcolor="#ffffff"
-      cellpadding="0"
-      cellspacing="0"
     >
-      <tr>
-        <td
-          class="spacer-lg"
-          style="
-            -premailer-height: 75;
-            -premailer-width: 100%;
-            line-height: 30px;
-            margin: 0 auto;
-            padding: 0;
-          "
-          height="75"
-          width="100%"
-        ></td>
-      </tr>
-      <tr>
-        <td
-          class="spacer-lg"
-          style="
-            -premailer-height: 75;
-            -premailer-width: 100%;
-            line-height: 30px;
-            margin: 0 auto;
-            padding: 0;
-          "
-          height="25"
-          width="100%"
-        ></td>
-      </tr>
-      <tr>
-        <td
-          class="spacer-lg"
-          style="
-            -premailer-height: 75;
-            -premailer-width: 100%;
-            line-height: 30px;
-            margin: 0 auto;
-            padding: 0;
-          "
-          height="50"
-          width="100%"
-        ></td>
-      </tr>
-      <tr>
-        <td
-          class="headline"
-          style="
-            color: #444;
-            font-family: Roboto, Helvetica, Arial, san-serif;
-            font-size: 30px;
-            font-weight: 100;
-            line-height: 36px;
-            margin: 0 auto;
-            padding: 0;
-            text-align: center;
-          "
-          align="center"
-        >
-          Welcome to Hyperswitch!
-          <p style="font-size: 18px">Dear {user_name},</p>
-            <span style="font-size: 18px">
-              We are thrilled to welcome you into our community!
-          </span>
-        </td>
-      </tr>
-      <tr>
-        <td
-          class="spacer-sm"
-          style="
-            -premailer-height: 20;
-            -premailer-width: 80%;
-            line-height: 10px;
-            margin: 0 auto;
-            padding: 0;
-          "
-          width="100%"
-        ></td>
-      </tr>
-      <tr>
-        <td
-          class="copy"
-          style="
-            color: #666;
-            font-family: Roboto, Helvetica, Arial, san-serif;
-            font-size: 14px;
-            text-align: center;
-            line-height: 20px;
-            margin-top: 20px;
-            padding: 0;
-          "
-          20px!important;
-          align="center"
-        >
-          <br />
-          Simply click on the link below, and you'll be granted instant access 
-          to your Hyperswitch account. Note that this link expires in 24 hours 
-          and can only be used once.<br />
-        </td>
-      </tr>
-      <tr>
-        <td
-          class="spacer-sm"
-          style="
-            -premailer-height: 20;
-            -premailer-width: 100%;
-            line-height: 10px;
-            margin: 0 auto;
-            padding: 0;
-          "
-          height="20"
-          width="100%"
-        ></td>
-      </tr>
-      <tr>
-        <td>
-          <table align="center">
-            <tr>
-              <td
-                align="center"
-                width="160"
-                height="40"
-                class="button"
-                style="
-                  background-color: #0165ef;
-                  border-radius: 2.5px;
-                  display: block;
-                "
-              >
-                <a
-                  href="{link}"
+      <table style="text-align: center; width: 100%">
+        <tr>
+          <td style="height: 6px"></td>
+        </tr>
+        <tr>
+          <td style="text-align: center">
+            <table
+              style="
+                background-color: #ffffff;
+                text-align: center;
+                max-width: 55%;
+                margin: auto;
+              "
+            >
+              <tr>
+                <td style="height: 20px"></td>
+              </tr>
+              <tr>
+                <td>
+                  <table style="width: 100%">
+                    <tr>
+                      <td style="text-align: center">
+                        <img
+                          src="https://app.hyperswitch.io/email-assets/HyperswitchLogo.png"
+                          alt="Hyperswitch"
+                          style="
+                            text-align: center;
+                            height: 1.3rem;
+                            width: auto;
+                          "
+                        />
+                      </td>
+                    </tr>
+                  </table>
+                </td>
+              </tr>
+              <tr>
+                <td style="height: 40px"></td>
+              </tr>
+              <tr>
+                <td
+                  style="
+                    font-size: 2.02rem;
+                    font-weight: 600;
+                    line-height: 2.5rem;
+                    color: #111326;
+                    min-width: 550px;
+                  "
+                >
+                  Welcome to Hyperswitch!
+                </td>
+              </tr>
+              <tr>
+                <td style="height: 10px"></td>
+              </tr>
+              <tr>
+                <td
+                  style="
+                    color: #666666;
+                    width: 50%;
+                    font-size: 1.02rem;
+                    font-weight: 400;
+                    line-height: 1.4rem;
+                    min-width: 300px;
+                  "
+                >
+                  <table
+                    style="
+                      width: 50%;
+                      min-width: 350px;
+                      text-align: center;
+                      margin: auto;
+                    "
+                  >
+                    <tr>
+                      <td>
+                        Dear {username}, we are thrilled to welcome you into our
+                        community!
+                      </td>
+                    </tr>
+                  </table>
+                </td>
+              </tr>
+              <tr>
+                <td style="height: 30px"></td>
+              </tr>
+              <tr>
+                <td>
+                  <a
+                    href="{link}"
+                    style="
+                      text-decoration: none;
+                      border: none;
+                      border-radius: 64px;
+                      font-size: 1.02rem;
+                      color: #ffffff;
+                      font-weight: 500;
+                      line-height: 1.5rem;
+                      width: 50%;
+                      padding: 0.9rem 3.5rem;
+                      background: #0070ff;
+                      min-width: 18rem;
+                      max-width: 25rem;
+                      cursor: pointer;
+                    "
+                  >
+                    Unlock Hyperswitch
+                  </a>
+                </td>
+              </tr>
+              <tr>
+                <td style="height: 30px"></td>
+              </tr>
+              <tr>
+                <td
+                  style="
+                    color: #666666;
+                    width: 50%;
+                    font-size: 1.02rem;
+                    font-weight: 400;
+                    line-height: 1.4rem;
+                    min-width: 300px;
+                  "
+                >
+                  <table
+                    style="
+                      width: 50%;
+                      min-width: 500px;
+                      text-align: center;
+                      margin: auto;
+                    "
+                  >
+                    <tr>
+                      <td>
+                        This link provides instant access to Hyperswitch
+                        account. It will expire in 24 hours and can only be used
+                        once.
+                      </td>
+                    </tr>
+                  </table>
+                </td>
+              </tr>
+              <tr>
+                <td style="height: 50px"></td>
+              </tr>
+              <tr>
+                <td
                   style="
-                    width: 100%;
-                    display: inline-block;
-                    text-decoration: none;
-                    font-weight: medium;
-                    color: #fff;
-                    font-family: Roboto, Helvetica, Arial, san-serif;
-                    font-size: 14px;
-                    text-align: center;
-                    line-height: 40px;
+                    font-size: 12px;
+                    line-height: 1rem;
+                    font-weight: 400;
+                    color: #111326b2;
                   "
-                  >Unlock Hyperswitch</a
                 >
-              </td>
-            </tr>
-          </table>
-        </td>
-      </tr>
-      <tr>
-        <td
-          class="spacer-lg"
-          style="
-            -premailer-height: 75;
-            -premailer-width: 100%;
-            line-height: 30px;
-            margin: 0 auto;
-            padding: 0;
-          "
-          height="75"
-          width="100%"
-        ></td>
-      </tr>
-      <tr>
-        <td
-          class="headline"
-          style="
-            color: #444;
-            font-family: Roboto, Helvetica, Arial, san-serif;
-            font-size: 18px;
-            font-weight: 100;
-            line-height: 36px;
-            margin: 0 auto;
-            padding: 0;
-            text-align: center;
-          "
-          align="center"
-        >
-          Thanks,<br />
-          Team Hyperswitch
-        </td>
-      </tr>
-      <tr>
-        <td
-          class="spacer-lg"
-          style="
-            -premailer-height: 75;
-            -premailer-width: 100%;
-            line-height: 30px;
-            margin: 0 auto;
-            padding: 0;
-          "
-          height="75"
-          width="100%"
-        ></td>
-      </tr>
-      <tr>
-        <td
-          class="spacer-lg"
-          style="
-            -premailer-height: 75;
-            -premailer-width: 100%;
-            line-height: 30px;
-            margin: 0 auto;
-            padding: 0;
-          "
-          height="75"
-          width="100%"
-        ></td>
-      </tr>
-    </table>
-  </div>
-</body>
+                  Follow us on
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <a
+                    href="https://github.com/juspay/hyperswitch"
+                    target="_blank"
+                  >
+                    <img
+                      src="https://app.hyperswitch.io/email-assets/Github.png"
+                      alt="Github"
+                      height="15"
+                    />
+                  </a>
+                  <a href="https://x.com/hyperswitchio?s=21" target="_blank">
+                    <img
+                      src="https://app.hyperswitch.io/email-assets/Twitter.png"
+                      alt="Twitter"
+                      height="15"
+                    />
+                  </a>
+                  <a
+                    href="https://www.linkedin.com/company/hyperswitch/"
+                    target="_blank"
+                  >
+                    <img
+                      src="https://app.hyperswitch.io/email-assets/Linkedin-Dark.png"
+                      alt="LinkedIn"
+                      height="15"
+                    />
+                  </a>
+                </td>
+              </tr>
+              <tr>
+                <td style="height: 20px"></td>
+              </tr>
+            </table>
+          </td>
+        </tr>
+        <tr>
+          <td style="height: 6px"></td>
+        </tr>
+      </table>
+    </div>
+  </body>
+</html>
diff --git a/crates/router/src/services/email/assets/recon_activation.html b/crates/router/src/services/email/assets/recon_activation.html
index 7feffacb09d..53ee8386380 100644
--- a/crates/router/src/services/email/assets/recon_activation.html
+++ b/crates/router/src/services/email/assets/recon_activation.html
@@ -1,309 +1,197 @@
-<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
-<title>Access Granted to HyperSwitch Recon Dashboard!</title>
-
-<body style="background-color: #ececec">
-  <style>
-    <style>
-    .apple-footer a {{
-      text-decoration: none !important;
-      color: #999 !important;
-      border: none !important;
-    }}
-
-    .apple-email a {{
-      text-decoration: none !important;
-      color: #448bff !important;
-      border: none !important;
-    }}
-  </style>
-  </style>
-  <div
-    id="wrapper"
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Access Granted to Hyperswitch Recon Dashboard!</title>
+  </head>
+  <body
     style="
-      background-color: none;
-      margin: 0 auto;
-      text-align: center;
-      width: 60%;
-      -premailer-height: 200;
+      background-color: #f8f9fb;
+      height: 100%;
+      font-family: Arial, Helvetica, sans-serif;
     "
   >
-    <table
-      align="center"
-      class="main-table"
+    <div
       style="
-        -premailer-cellpadding: 0;
-        -premailer-cellspacing: 0;
-        background-color: #fff;
-        border: 0;
-        border-top: 5px solid #0165ef;
-        margin: 0 auto;
-        mso-table-lspace: 0;
-        mso-table-rspace: 0;
-        padding: 0 40;
-        text-align: center;
         width: 100%;
+        margin: auto;
+        text-align: center;
+        background-color: #f8f9fb;
       "
-      bgcolor="#ffffff"
-      cellpadding="0"
-      cellspacing="0"
     >
-      <tr>
-        <td
-          class="spacer-lg"
-          style="
-            -premailer-height: 75;
-            -premailer-width: 100%;
-            line-height: 30px;
-            margin: 0 auto;
-            padding: 0;
-          "
-          height="75"
-          width="100%"
-        ></td>
-      </tr>
-      <tr>
-        <td
-          class="spacer-lg"
-          style="
-            -premailer-height: 75;
-            -premailer-width: 100%;
-            line-height: 30px;
-            margin: 0 auto;
-            padding: 0;
-          "
-          height="25"
-          width="100%"
-        ></td>
-      </tr>
-      <tr>
-        <td
-          class="spacer-lg"
-          style="
-            -premailer-height: 75;
-            -premailer-width: 100%;
-            line-height: 30px;
-            margin: 0 auto;
-            padding: 0;
-          "
-          height="50"
-          width="100%"
-        ></td>
-      </tr>
-      <tr>
-        <td
-          class="headline"
-          style="
-            color: #444;
-            font-family: Roboto, Helvetica, Arial, san-serif;
-            font-size: 30px;
-            font-weight: 100;
-            line-height: 36px;
-            margin: 0 auto;
-            padding: 0;
-            text-align: center;
-          "
-          align="center"
-        >
-          Access Granted to HyperSwitch Recon Dashboard!
-        </td>
-      </tr>
-      <tr>
-        <td
-          class="spacer-sm"
-          style="
-            -premailer-height: 20;
-            -premailer-width: 80%;
-            line-height: 10px;
-            margin: 0 auto;
-            padding: 0;
-          "
-          width="100%"
-        ></td>
-      </tr>
-      <tr>
-        <td
-          class="copy"
-          style="
-            color: #666;
-            font-family: Roboto, Helvetica, Arial, san-serif;
-            font-size: 14px;
-            text-align: left;
-            line-height: 20px;
-            margin-top: 20px;
-            padding: 0;
-          "
-          20px!important;
-          align="left"
-        >
-          <br />
-          Dear {username}<br />
-        </td>
-      </tr>
-      <tr>
-        <td
-          class="spacer-sm"
-          style="
-            -premailer-height: 20;
-            -premailer-width: 80%;
-            line-height: 10px;
-            margin: 0 auto;
-            padding: 0;
-          "
-          width="100%"
-        ></td>
-      </tr>
-      <tr>
-        <td
-          class="copy"
-          style="
-            color: #666;
-            font-family: Roboto, Helvetica, Arial, san-serif;
-            font-size: 14px;
-            text-align: left;
-            line-height: 20px;
-            margin-top: 20px;
-            padding: 0;
-          "
-          20px!important;
-          align="left"
-        >
-          <br />
-          We are pleased to inform you that your Reconciliation access request
-          has been approved. As a result, you now have authorized access to the
-          Recon dashboard, allowing you to test its functionality and experience
-          its benefits firsthand.
-          <br />
-        </td>
-      </tr>
-      <tr>
-        <td
-          class="spacer-sm"
-          style="
-            -premailer-height: 20;
-            -premailer-width: 80%;
-            line-height: 10px;
-            margin: 0 auto;
-            padding: 0;
-          "
-          width="100%"
-        ></td>
-      </tr>
-      <tr>
-        <td
-          class="copy"
-          style="
-            color: #666;
-            font-family: Roboto, Helvetica, Arial, san-serif;
-            font-size: 14px;
-            text-align: left;
-            line-height: 20px;
-            margin-top: 20px;
-            padding: 0;
-          "
-          20px!important;
-          align="left"
-        >
-          <br />
-          <b>To access the Recon dashboard, please follow these steps </b>
-        </td>
-      </tr>
-      <tr>
-        <td
-          class="copy"
-          style="
-            color: #666;
-            font-family: Roboto, Helvetica, Arial, san-serif;
-            font-size: 14px;
-            text-align: left;
-            line-height: 20px;
-            margin-top: 20px;
-            padding: 0;
-          "
-          20px!important;
-          align="left"
-        >
-          <br />
-          <ol type="1">
-            <li>
-              Visit our website at
-              <a href="https://app.hyperswitch.io/">Hyperswitch Dashboard</a>.
-            </li>
-            <li>Click on the "Login" button.</li>
-            <li>Enter your login credentials to log in.</li>
-            <li>
-              Once logged in, you will have full access to the Recon dashboard,
-              where you can explore its comprehensive features.
-            </li>
-          </ol>
-          Should you have any inquiries or require any form of assistance,
-          please do not hesitate to reach out to our team on
-          <a href="https://hyperswitch-io.slack.com/ssb/redirect">Slack </a>,
-          and we will be more than willing to assist you promptly. <br /><br />
-          Wishing you a seamless and successful experience as you explore the
-          capabilities of Hyperswitch.<br />
-        </td>
-      </tr>
-      <tr>
-        <td
-          class="spacer-lg"
-          style="
-            -premailer-height: 75;
-            -premailer-width: 100%;
-            line-height: 30px;
-            margin: 0 auto;
-            padding: 0;
-          "
-          height="75"
-          width="100%"
-        ></td>
-      </tr>
-      <tr>
-        <td
-          class="headline"
-          style="
-            color: #444;
-            font-family: Roboto, Helvetica, Arial, san-serif;
-            font-size: 18px;
-            font-weight: 100;
-            line-height: 36px;
-            margin: 0 auto;
-            padding: 0;
-            text-align: center;
-          "
-          align="center"
-        >
-          Thanks,<br />
-          Team Hyperswitch
-        </td>
-      </tr>
-      <tr>
-        <td
-          class="spacer-lg"
-          style="
-            -premailer-height: 75;
-            -premailer-width: 100%;
-            line-height: 30px;
-            margin: 0 auto;
-            padding: 0;
-          "
-          height="75"
-          width="100%"
-        ></td>
-      </tr>
-      <tr>
-        <td
-          class="spacer-lg"
-          style="
-            -premailer-height: 75;
-            -premailer-width: 100%;
-            line-height: 30px;
-            margin: 0 auto;
-            padding: 0;
-          "
-          height="75"
-          width="100%"
-        ></td>
-      </tr>
-    </table>
-  </div>
-</body>
\ No newline at end of file
+      <table style="text-align: center; width: 100%">
+        <tr>
+          <td style="height: 6px"></td>
+        </tr>
+        <tr>
+          <td style="text-align: center">
+            <table
+              style="
+                background-color: #ffffff;
+                text-align: center;
+                max-width: 55%;
+                margin: auto;
+              "
+            >
+              <tr>
+                <td style="height: 15px"></td>
+              </tr>
+              <tr>
+                <td>
+                  <table style="width: 100%">
+                    <tr>
+                      <td style="text-align: center">
+                        <img
+                          src="https://app.hyperswitch.io/email-assets/HyperswitchLogo.png"
+                          alt="Hyperswitch"
+                          style="
+                            text-align: center;
+                            height: 1.3rem;
+                            width: auto;
+                          "
+                        />
+                      </td>
+                    </tr>
+                  </table>
+                </td>
+              </tr>
+              <tr>
+                <td style="height: 40px"></td>
+              </tr>
+              <tr>
+                <td
+                  style="
+                    color: #666666;
+                    font-size: 1rem;
+                    font-weight: 400;
+                    line-height: 1.5rem;
+                    min-width: 450px;
+                  "
+                >
+                  <table
+                    style="
+                      width: 90%;
+                      min-width: 350px;
+                      text-align: start;
+                      margin: auto;
+                      padding: 0 10px;
+                    "
+                  >
+                  <tr>
+                <td
+                  style="
+                    font-size: 2rem;
+                    font-weight: 600;
+                    line-height: 2.5rem;
+                    color: #111326;
+                    min-width: 500px;
+                    text-align: center;
+                  "
+                >
+                  Access Granted to Hyperswitch Recon Dashboard!
+                </td>
+              </tr>
+                    <tr>
+                      <td style="text-align: start; font-size: 0.95rem; padding: 0 10px">
+                        <p>Dear {username}</p>
+                        <p>
+                            We are pleased to inform you that your Reconciliation access request
+                            has been approved. You now have authorized access to the
+                            Recon dashboard, allowing you to test its functionality and experience
+                            its benefits firsthand.
+                        </p>
+                        <p>
+                          To access the Recon dashboard, please follow these steps:
+                        </p>
+                        <ol type="1">
+                            <li>
+                            Visit our website at
+                            <a href="https://app.hyperswitch.io/">Hyperswitch Dashboard</a>.
+                            </li>
+                            <li>Click on the "Login" button.</li>
+                            <li>Enter your login credentials.</li>
+                            <li>
+                            Once logged in, you will have full access to the Recon dashboard,
+                            where you can explore its comprehensive features.
+                            </li>
+                        </ol>
+                        <p>
+                            For any inquiries or assistance,
+                            please reach out to our team on
+                            <a href="https://hyperswitch-io.slack.com/ssb/redirect">Slack </a>.
+                        </p>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td style="height: 15px"></td>
+                    </tr>
+                    <tr>
+                      <td style="text-align: start">
+                        Thanks,</br>
+                        Team Hyperswitch
+                      </td>
+                    </tr>
+                  </table>
+                </td>
+              </tr>
+              <tr>
+                <td style="height: 50px"></td>
+              </tr>
+              <tr>
+                <td
+                  style="
+                    font-size: 12px;
+                    line-height: 1rem;
+                    font-weight: 400;
+                    color: #111326b2;
+                  "
+                >
+                  Follow us on
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <a
+                    href="https://github.com/juspay/hyperswitch"
+                    target="_blank"
+                  >
+                    <img
+                      src="https://app.hyperswitch.io/email-assets/Github.png"
+                      alt="Github"
+                      height="15"
+                    />
+                  </a>
+                  <a href="https://x.com/hyperswitchio?s=21" target="_blank">
+                    <img
+                      src="https://app.hyperswitch.io/email-assets/Twitter.png"
+                      alt="Twitter"
+                      height="15"
+                    />
+                  </a>
+                  <a
+                    href="https://www.linkedin.com/company/hyperswitch/"
+                    target="_blank"
+                  >
+                    <img
+                      src="https://app.hyperswitch.io/email-assets/Linkedin-Dark.png"
+                      alt="LinkedIn"
+                      height="15"
+                    />
+                  </a>
+                </td>
+              </tr>
+              <tr>
+                <td style="height: 20px"></td>
+              </tr>
+            </table>
+          </td>
+        </tr>
+        <tr>
+          <td style="height: 6px"></td>
+        </tr>
+      </table>
+    </div>
+  </body>
+</html>
diff --git a/crates/router/src/services/email/assets/reset.html b/crates/router/src/services/email/assets/reset.html
index 98ddf8a7bd1..1aa6b1b50e9 100644
--- a/crates/router/src/services/email/assets/reset.html
+++ b/crates/router/src/services/email/assets/reset.html
@@ -1,229 +1,222 @@
-<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
-<title>Hyperswitch Merchant</title>
-
-<body style="background-color: #ececec">
-  <style>
-    .apple-footer a {{
-      text-decoration: none !important;
-      color: #999 !important;
-      border: none !important;
-    }}
-
-    .apple-email a {{
-      text-decoration: none !important;
-      color: #448bff !important;
-      border: none !important;
-    }}
-  </style>
-  <div id="wrapper" style="
-      background-color: none;
-      margin: 0 auto;
-      text-align: center;
-      width: 60%;
-      -premailer-height: 200;
-    ">
-    <table align="center" class="main-table" style="
-        -premailer-cellpadding: 0;
-        -premailer-cellspacing: 0;
-        background-color: #fff;
-        border: 0;
-        border-top: 5px solid #0165ef;
-        margin: 0 auto;
-        mso-table-lspace: 0;
-        mso-table-rspace: 0;
-        padding: 0 40;
-        text-align: center;
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Reset Password</title>
+  </head>
+  <body
+    style="
+      background-color: #f8f9fb;
+      height: 100%;
+      font-family: Arial, Helvetica, sans-serif;
+    "
+  >
+    <div
+      style="
         width: 100%;
-      " bgcolor="#ffffff" cellpadding="0" cellspacing="0">
-      <tr>
-        <td class="spacer-lg" style="
-            -premailer-height: 75;
-            -premailer-width: 100%;
-            line-height: 30px;
-            margin: 0 auto;
-            padding: 0;
-          " height="75" width="100%"></td>
-      </tr>
-      <tr>
-        <td class="spacer-lg" style="
-            -premailer-height: 75;
-            -premailer-width: 100%;
-            line-height: 30px;
-            margin: 0 auto;
-            padding: 0;
-          " height="25" width="100%"></td>
-      </tr>
-      <tr>
-        <td class="spacer-lg" style="
-            -premailer-height: 75;
-            -premailer-width: 100%;
-            line-height: 30px;
-            margin: 0 auto;
-            padding: 0;
-          " height="50" width="100%"></td>
-      </tr>
-      <tr>
-        <td class="headline" style="
-            color: #444;
-            font-family: Roboto, Helvetica, Arial, san-serif;
-            font-size: 30px;
-            font-weight: 100;
-            line-height: 36px;
-            margin: 0 auto;
-            padding: 0;
-            text-align: center;
-          " align="center">
-          Reset Your Password
-        </td>
-      </tr>
-      <tr>
-        <td class="spacer-sm" style="
-            -premailer-height: 20;
-            -premailer-width: 80%;
-            line-height: 10px;
-            margin: 0 auto;
-            padding: 0;
-          " width="100%"></td>
-      </tr>
-      <tr>
-        <td class="copy" style="
-            color: #666;
-            font-family: Roboto, Helvetica, Arial, san-serif;
-            font-size: 14px;
-            text-align: center;
-            line-height: 20px;
-            margin-top: 20px;
-            padding: 0;
-          " 20px!important; align="center">
-          <br />
-          Hey {username}<br />
-        </td>
-      </tr>
-      <tr>
-        <td class="spacer-sm" style="
-            -premailer-height: 20;
-            -premailer-width: 80%;
-            line-height: 10px;
-            margin: 0 auto;
-            padding: 0;
-          " width="100%"></td>
-      </tr>
-      <tr>
-        <td class="copy" style="
-            color: #666;
-            font-family: Roboto, Helvetica, Arial, san-serif;
-            font-size: 14px;
-            text-align: center;
-            line-height: 20px;
-            margin-top: 20px;
-            padding: 0;
-          " 20px!important; align="center">
-          <br />
-          We have received a request to reset your password associated with
-          <br />
-          <span style="font-weight: bold"> username : </span>
-          {username}<br />
-        </td>
-      </tr>
-      <tr>
-        <td class="spacer-sm" style="
-            -premailer-height: 20;
-            -premailer-width: 80%;
-            line-height: 10px;
-            margin: 0 auto;
-            padding: 0;
-          " width="100%"></td>
-      </tr>
-      <tr>
-        <td class="copy" style="
-            color: #666;
-            font-family: Roboto, Helvetica, Arial, san-serif;
-            font-size: 14px;
-            text-align: center;
-            line-height: 20px;
-            margin-top: 20px;
-            padding: 0;
-          " 20px!important; align="center">
-          <br />
-          Click on the below button to reset your password. <br />
-        </td>
-      </tr>
-      <tr>
-        <td class="spacer-sm" style="
-            -premailer-height: 20;
-            -premailer-width: 100%;
-            line-height: 10px;
-            margin: 0 auto;
-            padding: 0;
-          " height="20" width="100%"></td>
-      </tr>
-      <tr>
-        <td>
-          <table align="center">
-            <tr>
-              <td align="center" width="160" height="40" class="button" style="
-                  background-color: #0165ef;
-                  border-radius: 2.5px;
-                  display: block;
-                ">
-                <a href="{link}" style="
-                    width: 100%;
-                    display: inline-block;
-                    text-decoration: none;
-                    font-weight: medium;
-                    color: #fff;
-                    font-family: Roboto, Helvetica, Arial, san-serif;
-                    font-size: 14px;
-                    text-align: center;
-                    line-height: 40px;
-                  ">Reset Password</a>
-              </td>
-            </tr>
-          </table>
-        </td>
-      </tr>
-      <tr>
-        <td class="spacer-lg" style="
-            -premailer-height: 75;
-            -premailer-width: 100%;
-            line-height: 30px;
-            margin: 0 auto;
-            padding: 0;
-          " height="75" width="100%"></td>
-      </tr>
-      <tr>
-        <td class="headline" style="
-            color: #444;
-            font-family: Roboto, Helvetica, Arial, san-serif;
-            font-size: 18px;
-            font-weight: 100;
-            line-height: 36px;
-            margin: 0 auto;
-            padding: 0;
-            text-align: center;
-          " align="center">
-          Thanks,<br />
-          Team Hyperswitch
-        </td>
-      </tr>
-      <tr>
-        <td class="spacer-lg" style="
-            -premailer-height: 75;
-            -premailer-width: 100%;
-            line-height: 30px;
-            margin: 0 auto;
-            padding: 0;
-          " height="75" width="100%"></td>
-      </tr>
-      <tr>
-        <td class="spacer-lg" style="
-            -premailer-height: 75;
-            -premailer-width: 100%;
-            line-height: 30px;
-            margin: 0 auto;
-            padding: 0;
-          " height="75" width="100%"></td>
-      </tr>
-    </table>
-  </div>
-</body>
+        margin: auto;
+        text-align: center;
+        background-color: #f8f9fb;
+      "
+    >
+      <table style="text-align: center; width: 100%">
+        <tr>
+          <td style="height: 6px"></td>
+        </tr>
+        <tr>
+          <td style="text-align: center">
+            <table
+              style="
+                background-color: #ffffff;
+                text-align: center;
+                max-width: 55%;
+                margin: auto;
+              "
+            >
+              <tr>
+                <td style="height: 20px"></td>
+              </tr>
+              <tr>
+                <td>
+                  <table style="width: 100%">
+                    <tr>
+                      <td style="text-align: center">
+                        <img
+                          src="https://app.hyperswitch.io/email-assets/HyperswitchLogo.png"
+                          alt="Hyperswitch"
+                          style="
+                            text-align: center;
+                            height: 1.3rem;
+                            width: auto;
+                          "
+                        />
+                      </td>
+                    </tr>
+                  </table>
+                </td>
+              </tr>
+              <tr>
+                <td style="height: 40px"></td>
+              </tr>
+              <tr>
+                <td
+                  style="
+                    font-size: 2.02rem;
+                    font-weight: 600;
+                    line-height: 2.5rem;
+                    color: #111326;
+                    min-width: 550px;
+                  "
+                >
+                  Reset password!
+                </td>
+              </tr>
+              <tr>
+                <td style="height: 10px"></td>
+              </tr>
+              <tr>
+                <td
+                  style="
+                    color: #666666;
+                    width: 50%;
+                    font-size: 1.02rem;
+                    font-weight: 400;
+                    line-height: 1.4rem;
+                    min-width: 300px;
+                  "
+                >
+                  <table
+                    style="
+                      width: 50%;
+                      min-width: 450px;
+                      text-align: center;
+                      margin: auto;
+                    "
+                  >
+                    <tr>
+                      <td>
+                        We have received a request to reset your password
+                        associated with
+                        <span style="font-weight: bold"> username : </span>
+                        {username}
+                      </td>
+                    </tr>
+                  </table>
+                </td>
+              </tr>
+              <tr>
+                <td style="height: 10px"></td>
+              </tr>
+              <tr>
+                <td
+                  style="
+                    color: #666666;
+                    width: 50%;
+                    font-size: 1.02rem;
+                    font-weight: 400;
+                    line-height: 1.4rem;
+                    min-width: 300px;
+                  "
+                >
+                  <table
+                    style="
+                      width: 50%;
+                      min-width: 370px;
+                      text-align: center;
+                      margin: auto;
+                    "
+                  >
+                    <tr>
+                      <td>Click on the below button to reset your password.</td>
+                    </tr>
+                  </table>
+                </td>
+              </tr>
+              <tr>
+                <td style="height: 30px"></td>
+              </tr>
+              <tr>
+                <td>
+                  <a
+                    href="{link}"
+                    style="
+                      text-decoration: none;
+                      border: none;
+                      border-radius: 64px;
+                      font-size: 1.03rem;
+                      color: #ffffff;
+                      font-weight: 500;
+                      line-height: 1.5rem;
+                      width: 50%;
+                      padding: 0.9rem 4rem;
+                      background: #0070ff;
+                      min-width: 18rem;
+                      max-width: 25rem;
+                      cursor: pointer;
+                    "
+                  >
+                    Reset Password
+                  </a>
+                </td>
+              </tr>
+              <tr>
+                <td style="height: 70px"></td>
+              </tr>
+              <tr>
+                <td
+                  style="
+                    font-size: 12px;
+                    line-height: 1rem;
+                    font-weight: 400;
+                    color: #111326b2;
+                  "
+                >
+                  Follow us on
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <a
+                    href="https://github.com/juspay/hyperswitch"
+                    target="_blank"
+                  >
+                    <img
+                      src="https://app.hyperswitch.io/email-assets/Github.png"
+                      alt="Github"
+                      height="15"
+                    />
+                  </a>
+                  <a href="https://x.com/hyperswitchio?s=21" target="_blank">
+                    <img
+                      src="https://app.hyperswitch.io/email-assets/Twitter.png"
+                      alt="Twitter"
+                      height="15"
+                    />
+                  </a>
+                  <a
+                    href="https://www.linkedin.com/company/hyperswitch/"
+                    target="_blank"
+                  >
+                    <img
+                      src="https://app.hyperswitch.io/email-assets/Linkedin-Dark.png"
+                      alt="LinkedIn"
+                      height="15"
+                    />
+                  </a>
+                </td>
+              </tr>
+              <tr>
+                <td style="height: 20px"></td>
+              </tr>
+            </table>
+          </td>
+        </tr>
+        <tr>
+          <td style="height: 6px"></td>
+        </tr>
+      </table>
+    </div>
+  </body>
+</html>
diff --git a/crates/router/src/services/email/assets/verify.html b/crates/router/src/services/email/assets/verify.html
index 47d0e3b5c6d..7b56b79abdf 100644
--- a/crates/router/src/services/email/assets/verify.html
+++ b/crates/router/src/services/email/assets/verify.html
@@ -1,253 +1,190 @@
-<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
-<title>Hyperswitch Merchant</title>
-<body style="background-color: #ececec">
-  <style>
-    .apple-footer a {{
-      text-decoration: none !important;
-      color: #999 !important;
-      border: none !important;
-    }}
-    .apple-email a {{
-      text-decoration: none !important;
-      color: #448bff !important;
-      border: none !important;
-    }}
-  </style>
-  <div
-    id="wrapper"
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Verify Email</title>
+  </head>
+  <body
     style="
-      background-color: none;
-      margin: 0 auto;
-      text-align: center;
-      width: 60%;
-      -premailer-height: 200;
+      background-color: #f8f9fb;
+      height: 100%;
+      font-family: Arial, Helvetica, sans-serif;
     "
   >
-    <table
-      align="center"
-      class="main-table"
+    <div
       style="
-        -premailer-cellpadding: 0;
-        -premailer-cellspacing: 0;
-        background-color: #fff;
-        border: 0;
-        border-top: 5px solid #0165ef;
-        margin: 0 auto;
-        mso-table-lspace: 0;
-        mso-table-rspace: 0;
-        padding: 0 40;
-        text-align: center;
         width: 100%;
+        margin: auto;
+        text-align: center;
+        background-color: #f8f9fb;
       "
-      bgcolor="#ffffff"
-      cellpadding="0"
-      cellspacing="0"
     >
-      <tr>
-        <td
-          class="spacer-lg"
-          style="
-            -premailer-height: 75;
-            -premailer-width: 100%;
-            line-height: 30px;
-            margin: 0 auto;
-            padding: 0;
-          "
-          height="75"
-          width="100%"
-        ></td>
-      </tr>
-      <tr>
-        <td
-          class="spacer-lg"
-          style="
-            -premailer-height: 75;
-            -premailer-width: 100%;
-            line-height: 30px;
-            margin: 0 auto;
-            padding: 0;
-          "
-          height="25"
-          width="100%"
-        ></td>
-      </tr>
-      <tr>
-        <td
-          class="spacer-lg"
-          style="
-            -premailer-height: 75;
-            -premailer-width: 100%;
-            line-height: 30px;
-            margin: 0 auto;
-            padding: 0;
-          "
-          height="50"
-          width="100%"
-        ></td>
-      </tr>
-      <tr>
-        <td
-          class="headline"
-          style="
-            color: #444;
-            font-family: Roboto, Helvetica, Arial, san-serif;
-            font-size: 30px;
-            font-weight: 100;
-            line-height: 36px;
-            margin: 0 auto;
-            padding: 0;
-            text-align: center;
-          "
-          align="center"
-        >
-          Thanks for signing up!<br /><span style="font-size: 18px"
-            >We need a confirmation of your email address to complete your
-            registration.</span
-          >
-        </td>
-      </tr>
-      <tr>
-        <td
-          class="spacer-sm"
-          style="
-            -premailer-height: 20;
-            -premailer-width: 80%;
-            line-height: 10px;
-            margin: 0 auto;
-            padding: 0;
-          "
-          width="100%"
-        ></td>
-      </tr>
-      <tr>
-        <td
-          class="copy"
-          style="
-            color: #666;
-            font-family: Roboto, Helvetica, Arial, san-serif;
-            font-size: 14px;
-            text-align: center;
-            line-height: 20px;
-            margin-top: 20px;
-            padding: 0;
-          "
-          20px!important;
-          align="center"
-        >
-          <br />
-          Click below to confirm your email address. <br />
-        </td>
-      </tr>
-      <tr>
-        <td
-          class="spacer-sm"
-          style="
-            -premailer-height: 20;
-            -premailer-width: 100%;
-            line-height: 10px;
-            margin: 0 auto;
-            padding: 0;
-          "
-          height="20"
-          width="100%"
-        ></td>
-      </tr>
-      <tr>
-        <td>
-          <table align="center">
-            <tr>
-              <td
-                align="center"
-                width="160"
-                height="40"
-                class="button"
-                style="
-                  background-color: #0165ef;
-                  border-radius: 2.5px;
-                  display: block;
-                "
-              >
-                <a
-                  href="{link}"
+      <table style="text-align: center; width: 100%">
+        <tr>
+          <td style="height: 6px"></td>
+        </tr>
+        <tr>
+          <td style="text-align: center">
+            <table
+              style="
+                background-color: #ffffff;
+                text-align: center;
+                min-width: 55%;
+                margin: auto;
+                padding: 0 13px;
+              "
+            >
+              <tr>
+                <td style="height: 20px"></td>
+              </tr>
+              <tr>
+                <td>
+                  <table style="width: 100%">
+                    <tr>
+                      <td style="text-align: center">
+                        <img
+                          src="https://app.hyperswitch.io/email-assets/HyperswitchLogo.png"
+                          alt="Hyperswitch"
+                          style="
+                            text-align: center;
+                            height: 1.3rem;
+                            width: auto;
+                          "
+                        />
+                      </td>
+                    </tr>
+                  </table>
+                </td>
+              </tr>
+              <tr>
+                <td style="height: 40px"></td>
+              </tr>
+              <tr>
+                <td
+                  style="
+                    font-size: 2.01rem;
+                    font-weight: 600;
+                    line-height: 2.5rem;
+                    color: #111326;
+                    min-width: 500px;
+                  "
+                >
+                  Thanks for signing up with Hyperswitch!
+                </td>
+              </tr>
+              <tr>
+                <td style="height: 10px"></td>
+              </tr>
+              <tr>
+                <td
+                  style="
+                    color: #666666;
+                    font-size: 1.02rem;
+                    font-weight: 400;
+                    line-height: 1.4rem;
+                    min-width: 450px;
+                  "
+                >
+                  <table
+                    style="
+                      width: 50%;
+                      min-width: 350px;
+                      text-align: center;
+                      margin: auto;
+                    "
+                  >
+                    <tr>
+                      <td>
+                        Confirm your email address to complete your registration
+                        by clicking the button below.
+                      </td>
+                    </tr>
+                  </table>
+                </td>
+              </tr>
+              <tr>
+                <td style="height: 30px"></td>
+              </tr>
+              <tr>
+                <td>
+                  <a
+                    href="{link}"
+                    style="
+                      text-decoration: none;
+                      border: none;
+                      border-radius: 64px;
+                      font-size: 1.03rem;
+                      color: #ffffff;
+                      font-weight: 500;
+                      line-height: 1.5rem;
+                      width: 55%;
+                      padding: 1rem 3rem;
+                      background: #0070ff;
+                      min-width: 18rem;
+                    "
+                  >
+                    Confirm your email address
+                  </a>
+                </td>
+              </tr>
+              <tr>
+                <td style="height: 70px"></td>
+              </tr>
+              <tr>
+                <td
                   style="
-                    width: 100%;
-                    display: inline-block;
-                    text-decoration: none;
-                    font-weight: medium;
-                    color: #fff;
-                    font-family: Roboto, Helvetica, Arial, san-serif;
-                    font-size: 14px;
-                    text-align: center;
-                    line-height: 40px;
+                    font-size: 12px;
+                    line-height: 1rem;
+                    font-weight: 400;
+                    color: #111326b2;
                   "
-                  >Verify Email Now</a
                 >
-              </td>
-            </tr>
-          </table>
-        </td>
-      </tr>
-      <tr>
-        <td
-          class="spacer-lg"
-          style="
-            -premailer-height: 75;
-            -premailer-width: 100%;
-            line-height: 30px;
-            margin: 0 auto;
-            padding: 0;
-          "
-          height="75"
-          width="100%"
-        ></td>
-      </tr>
-      <tr>
-        <td
-          class="headline"
-          style="
-            color: #444;
-            font-family: Roboto, Helvetica, Arial, san-serif;
-            font-size: 18px;
-            font-weight: 100;
-            line-height: 36px;
-            margin: 0 auto;
-            padding: 0;
-            text-align: center;
-          "
-          align="center"
-        >
-          Thanks,<br />
-          Team Hyperswitch
-        </td>
-      </tr>
-      <tr>
-        <td
-          class="spacer-lg"
-          style="
-            -premailer-height: 75;
-            -premailer-width: 100%;
-            line-height: 30px;
-            margin: 0 auto;
-            padding: 0;
-          "
-          height="75"
-          width="100%"
-        ></td>
-      </tr>
-      <tr>
-        <td
-          class="spacer-lg"
-          style="
-            -premailer-height: 75;
-            -premailer-width: 100%;
-            line-height: 30px;
-            margin: 0 auto;
-            padding: 0;
-          "
-          height="75"
-          width="100%"
-        ></td>
-      </tr>
-    </table>
-  </div>
-</body>
+                  Follow us on
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <a
+                    href="https://github.com/juspay/hyperswitch"
+                    target="_blank"
+                  >
+                    <img
+                      src="https://app.hyperswitch.io/email-assets/Github.png"
+                      alt="Github"
+                      height="15"
+                    />
+                  </a>
+                  <a href="https://x.com/hyperswitchio?s=21" target="_blank">
+                    <img
+                      src="https://app.hyperswitch.io/email-assets/Twitter.png"
+                      alt="Twitter"
+                      height="15"
+                    />
+                  </a>
+                  <a
+                    href="https://www.linkedin.com/company/hyperswitch/"
+                    target="_blank"
+                  >
+                    <img
+                      src="https://app.hyperswitch.io/email-assets/Linkedin-Dark.png"
+                      alt="LinkedIn"
+                      height="15"
+                    />
+                  </a>
+                </td>
+              </tr>
+              <tr>
+                <td style="height: 20px"></td>
+              </tr>
+            </table>
+          </td>
+        </tr>
+        <tr>
+          <td style="height: 6px"></td>
+        </tr>
+      </table>
+    </div>
+  </body>
+</html>
diff --git a/crates/router/src/services/email/types.rs b/crates/router/src/services/email/types.rs
index ee51d976b40..47da21aec98 100644
--- a/crates/router/src/services/email/types.rs
+++ b/crates/router/src/services/email/types.rs
@@ -76,7 +76,7 @@ pub mod html {
             EmailBody::MagicLink { link, user_name } => {
                 format!(
                     include_str!("assets/magic_link.html"),
-                    user_name = user_name,
+                    username = user_name,
                     link = link
                 )
             }

## Type of Change
<!-- Put an `x` in the boxes that apply -->

- [ ] Bugfix
- [ ] New feature
- [x] Enhancement
- [ ] Refactoring
- [ ] Dependency updates
- [ ] Documentation
- [ ] CI/CD

## Description
<!-- Describe your changes in detail -->

- Updated the HTML templates to new designs in backend
- Look at the below screenshots

- Old
![image](https://github.com/juspay/hyperswitch/assets/96485413/4814c8b8-e23f-4425-873c-7095549df599)
![image](https://github.com/juspay/hyperswitch/assets/96485413/fc1aba32-1c63-4267-ae75-6e79214c7395)
![WhatsApp Image 2024-05-27 at 5 16 33 PM (1)](https://github.com/juspay/hyperswitch/assets/96485413/a3816df5-86df-4441-889c-71fcdd08bc00)




- New
![image](https://github.com/juspay/hyperswitch/assets/96485413/3101e0e4-03f4-4517-a89a-ce98ca89b7b7)
![image](https://github.com/juspay/hyperswitch/assets/96485413/d29196aa-3ace-4e56-9bd8-82b0d2c774d1)
![image](https://github.com/juspay/hyperswitch/assets/96485413/68e76207-cb4e-4c08-95d7-f3918f2b583c)
![image](https://github.com/juspay/hyperswitch/assets/96485413/c9ed3328-05cf-498a-a5c3-c271f3a3100c)
![image](https://github.com/juspay/hyperswitch/assets/96485413/bea24333-e621-45bb-8253-4df73c196b72)
![image](https://github.com/juspay/hyperswitch/assets/96485413/b27af83e-be9d-4b55-af2c-3fd194a7a60e)
![image](https://github.com/juspay/hyperswitch/assets/96485413/55d33dde-b77e-459e-835c-399252c77427)
![WhatsApp Image 2024-05-27 at 5 16 32 PM (2)](https://github.com/juspay/hyperswitch/assets/96485413/10ce352c-7329-4ca7-8390-d75adcc1c67c)
![WhatsApp Image 2024-05-27 at 5 16 32 PM (1)](https://github.com/juspay/hyperswitch/assets/96485413/a21e8e82-69ae-4f30-86bb-7e7484b00b4e)
![WhatsApp Image 2024-05-27 at 5 16 32 PM](https://github.com/juspay/hyperswitch/assets/96485413/de46fccb-1756-4dbf-91df-de794db86ec5)
![WhatsApp Image 2024-05-27 at 5 41 57 PM](https://github.com/juspay/hyperswitch/assets/96485413/cdb9bfdb-213c-43f1-b712-4515d2e3348c)




### Additional Changes

- [ ] This PR modifies the API contract
- [ ] This PR modifies the database schema
- [ ] This PR modifies application configuration/environment variables

<!--
Provide links to the files with corresponding changes.

Following are the paths where you can find config files:
1. `config`
2. `crates/router/src/configs`
3. `loadtest/config`
-->


## Motivation and Context
<!--
Why is this change required? What problem does it solve?
If it fixes an open issue, please link to the issue here.

If you don't have an issue, we'd recommend starting with one first so the PR
can focus on the implementation (unless it is an obvious bug or documentation fix
that will have little conversation).
-->
- Currently used email templates were following Juspay old email structure, modified them to the new updated designs

## How did you test it?
<!--
Did you write an integration/unit/API test to verify the code changes?
Or did you test this change manually (provide relevant screenshots)?
-->
- Tested using AWS SES email service & Postdrop, attached the screenshots

Please find below curls for same : 

curl --location 'http://localhost:8080/user/connect_account' \
--header 'Content-Type: application/json' \
--data-raw '{
    "email": "gitanjli524@gmail.com"
}'


curl --location 'http://localhost:8080/user/user/invite_multiple?is_token_only=true' \
--header 'Content-Type: application/json' \
--header 'Authorization: Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoiNGMyMjUyMTktZGVjNC00M2VlLTgyOTktMTBjMDRmYzkxYWYzIiwibWVyY2hhbnRfaWQiOiJtZXJjaGFudF8xNzA2ODY5OTYzIiwicm9sZV9pZCI6Im9yZ19hZG1pbiIsImV4cCI6MTcxNjk4MTMwNSwib3JnX2lkIjoib3JnX2dMbEJuQzgwVTgxNzlVTnozdm5sIn0.JsZr4aSFm_2C8si9byvS02kIAaYvpNNF_xidZSRm1sU' \
--header 'Cookie: login_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoiNGMyMjUyMTktZGVjNC00M2VlLTgyOTktMTBjMDRmYzkxYWYzIiwibWVyY2hhbnRfaWQiOiJtZXJjaGFudF8xNzA2ODY5OTYzIiwicm9sZV9pZCI6Im9yZ19hZG1pbiIsImV4cCI6MTcxNjk4MTMwNSwib3JnX2lkIjoib3JnX2dMbEJuQzgwVTgxNzlVTnozdm5sIn0.JsZr4aSFm_2C8si9byvS02kIAaYvpNNF_xidZSRm1sU' \
--data-raw '[
    {
        "email": "gitanjli524+098763@gmail.com",
        "name": "25",
        "role_id": "merchant_view_only"
    }
]'


curl --location 'http://localhost:8080/user/forgot_password' \
--header 'Content-Type: application/json' \
--header 'Authorization: Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoiZDM2NzMyMTUtYWU3NS00NGMzLWJiYzEtMGY3YmMxYmYwMjdmIiwibWVyY2hhbnRfaWQiOiJtZXJjaGFudF8xNzEyMjE0NDE5Iiwicm9sZV9pZCI6Im9yZ19hZG1pbiIsImV4cCI6MTcxMjM4NzMyOSwib3JnX2lkIjoib3JnXzhLb2lWNmhrcG9KSGZNcllER1ZhIn0.H2G9oGp_JBoz3k5S7fMvaaJ9T0cG5VtUjM0hU3ltM3g' \
--data-raw '{
    "email": "gitanjli524@gmail.com"
}'


## Checklist
<!-- Put an `x` in the boxes that apply -->

- [x] I formatted the code `cargo +nightly fmt --all`
- [ ] I addressed lints thrown by `cargo clippy`
- [x] I reviewed the submitted code
- [ ] I added unit tests for my changes where possible
