diff --git a/backend/spring-boot/Dockerfile b/backend/spring-boot/Dockerfile
index 7daffc8d..ebee47f3 100644
--- a/backend/spring-boot/Dockerfile
+++ b/backend/spring-boot/Dockerfile
@@ -1,5 +1,10 @@
 FROM maven:3.9.6-amazoncorretto-21-debian AS build
 
+RUN apt-get update; apt-get install -y curl \
+    && curl -sL https://deb.nodesource.com/setup_20.x | bash - \
+    && apt-get install -y nodejs \
+    && curl -L https://www.npmjs.com/install.sh | sh
+
 WORKDIR /app
 
 COPY pom.xml .
diff --git a/backend/spring-boot/pom.xml b/backend/spring-boot/pom.xml
index d33e5616..ed40b25c 100644
--- a/backend/spring-boot/pom.xml
+++ b/backend/spring-boot/pom.xml
@@ -30,6 +30,7 @@
     <maven-compiler-plugin.version>3.13.0</maven-compiler-plugin.version>
     <spotless.version>2.43.0</spotless.version>
     <google-java-format.version>1.17.0</google-java-format.version>
+    <exec-maven-plugin.version>3.5.0</exec-maven-plugin.version>
   </properties>
 
   <dependencies>
@@ -224,6 +225,45 @@
           </execution>
         </executions>
       </plugin>
+      <plugin>
+        <groupId>org.codehaus.mojo</groupId>
+        <artifactId>exec-maven-plugin</artifactId>
+        <version>${exec-maven-plugin.version}</version>
+        <executions>
+          <execution>
+            <id>generate verify-email.html</id>
+            <goals>
+              <goal>exec</goal>
+            </goals>
+            <phase>generate-resources</phase>
+            <configuration>
+              <executable>npx</executable>
+              <arguments>
+                <argument>mjml</argument>
+                <argument>src/main/resources/templates/email/verify-email.mjml</argument>
+                <argument>-o</argument>
+                <argument>src/main/resources/templates/email/verify-email.html</argument>
+              </arguments>
+            </configuration>
+          </execution>
+          <execution>
+            <id>generate reset-password.html</id>
+            <goals>
+              <goal>exec</goal>
+            </goals>
+            <phase>generate-resources</phase>
+            <configuration>
+              <executable>npx</executable>
+              <arguments>
+                <argument>mjml</argument>
+                <argument>src/main/resources/templates/email/reset-password.mjml</argument>
+                <argument>-o</argument>
+                <argument>src/main/resources/templates/email/reset-password.html</argument>
+              </arguments>
+            </configuration>
+          </execution>
+        </executions>
+      </plugin>
     </plugins>
   </build>
 
diff --git a/backend/spring-boot/src/main/java/org/bootstrapbugz/backend/auth/jwt/event/email/ResetPasswordEmail.java b/backend/spring-boot/src/main/java/org/bootstrapbugz/backend/auth/jwt/event/email/ResetPasswordEmail.java
index 083beb2e..0e3a4149 100644
--- a/backend/spring-boot/src/main/java/org/bootstrapbugz/backend/auth/jwt/event/email/ResetPasswordEmail.java
+++ b/backend/spring-boot/src/main/java/org/bootstrapbugz/backend/auth/jwt/event/email/ResetPasswordEmail.java
@@ -20,9 +20,9 @@ public void sendEmail(EmailService emailService, Environment environment, User u
     final var link = environment.getProperty("ui.app.url") + "/auth/reset-password?token=" + token;
     final var body =
         CharStreams.toString(new InputStreamReader(template, StandardCharsets.UTF_8))
-            .replace("$name", user.getUsername())
-            .replace("$link", link)
-            .replace("$appName", Objects.requireNonNull(environment.getProperty("app.name")));
+            .replace("${name}", user.getUsername())
+            .replace("${link}", link)
+            .replace("${appName}", Objects.requireNonNull(environment.getProperty("app.name")));
     emailService.sendHtmlEmail(user.getEmail(), "Reset password", body);
   }
 }
diff --git a/backend/spring-boot/src/main/java/org/bootstrapbugz/backend/auth/jwt/event/email/VerificationEmail.java b/backend/spring-boot/src/main/java/org/bootstrapbugz/backend/auth/jwt/event/email/VerificationEmail.java
index 1a1c20c6..fc12bb6c 100644
--- a/backend/spring-boot/src/main/java/org/bootstrapbugz/backend/auth/jwt/event/email/VerificationEmail.java
+++ b/backend/spring-boot/src/main/java/org/bootstrapbugz/backend/auth/jwt/event/email/VerificationEmail.java
@@ -20,9 +20,9 @@ public void sendEmail(EmailService emailService, Environment environment, User u
     final var link = environment.getProperty("ui.app.url") + "/auth/verify-email?token=" + token;
     final var body =
         CharStreams.toString(new InputStreamReader(template, StandardCharsets.UTF_8))
-            .replace("$name", user.getUsername())
-            .replace("$link", link)
-            .replace("$appName", Objects.requireNonNull(environment.getProperty("app.name")));
+            .replace("${name}", user.getUsername())
+            .replace("${link}", link)
+            .replace("${appName}", Objects.requireNonNull(environment.getProperty("app.name")));
     emailService.sendHtmlEmail(user.getEmail(), "Verify email", body);
   }
 }
diff --git a/backend/spring-boot/src/main/resources/templates/email/.gitignore b/backend/spring-boot/src/main/resources/templates/email/.gitignore
new file mode 100644
index 00000000..96c469a5
--- /dev/null
+++ b/backend/spring-boot/src/main/resources/templates/email/.gitignore
@@ -0,0 +1,2 @@
+reset-password.html
+verify-email.html
\ No newline at end of file
diff --git a/backend/spring-boot/src/main/resources/templates/email/reset-password.html b/backend/spring-boot/src/main/resources/templates/email/reset-password.html
deleted file mode 100644
index 07b68bea..00000000
--- a/backend/spring-boot/src/main/resources/templates/email/reset-password.html
+++ /dev/null
@@ -1,371 +0,0 @@
-<!DOCTYPE html>
-<!--suppress HtmlDeprecatedAttribute -->
-<html lang="en">
-<head>
-  <meta content="width=device-width" name="viewport"/>
-  <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
-  <title>Reset password</title>
-  <style>
-    @media only screen and (max-width: 620px) {
-      table[class='body'] h1 {
-        font-size: 28px !important;
-        margin-bottom: 10px !important;
-      }
-
-      table[class='body'] p,
-      table[class='body'] ul,
-      table[class='body'] ol,
-      table[class='body'] td,
-      table[class='body'] span,
-      table[class='body'] a {
-        font-size: 16px !important;
-      }
-
-      table[class='body'] .wrapper,
-      table[class='body'] .content {
-        padding: 0 !important;
-      }
-
-      table[class='body'] .container {
-        padding: 0 !important;
-        width: 100% !important;
-      }
-
-      table[class='body'] .main {
-        border-left-width: 0 !important;
-        border-radius: 0 !important;
-        border-right-width: 0 !important;
-      }
-
-      table[class='body'] .btn table {
-        width: 100% !important;
-      }
-
-      table[class='body'] .btn a {
-        width: 100% !important;
-      }
-    }
-
-    @media all {
-      .ExternalClass p,
-      .ExternalClass span,
-      .ExternalClass font,
-      .ExternalClass td,
-      .ExternalClass div {
-        line-height: 100%;
-      }
-
-      .apple-link a {
-        color: inherit !important;
-        font-family: inherit !important;
-        font-size: inherit !important;
-        font-weight: inherit !important;
-        line-height: inherit !important;
-        text-decoration: none !important;
-      }
-
-      #MessageViewBody a {
-        color: inherit;
-        text-decoration: none;
-        font-size: inherit;
-        font-family: inherit;
-        font-weight: inherit;
-        line-height: inherit;
-      }
-
-      .btn-primary table td:hover {
-        background-color: #34495e !important;
-      }
-
-      .btn-primary a:hover {
-        background-color: #34495e !important;
-        border-color: #34495e !important;
-      }
-    }
-  </style>
-</head>
-<body
-    class=""
-    style="
-      background-color: #f6f6f6;
-      font-family: sans-serif;
-      -webkit-font-smoothing: antialiased;
-      font-size: 14px;
-      line-height: 1.4;
-      margin: 0;
-      padding: 0;
-      -ms-text-size-adjust: 100%;
-      -webkit-text-size-adjust: 100%;
-    "
->
-<span
-    class="preheader"
-    style="
-        color: transparent;
-        display: none;
-        height: 0;
-        max-height: 0;
-        max-width: 0;
-        opacity: 0;
-        overflow: hidden;
-        mso-hide: all;
-        visibility: hidden;
-        width: 0;
-      "
->Reset password</span
->
-<table
-    border="0"
-    cellpadding="0"
-    cellspacing="0"
-    class="body"
-    style="
-        border-collapse: separate;
-        mso-table-lspace: 0;
-        mso-table-rspace: 0;
-        width: 100%;
-        background-color: #f6f6f6;
-      "
->
-  <tr>
-    <td style="font-family: sans-serif; font-size: 14px; vertical-align: top">&nbsp;</td>
-    <td
-        class="container"
-        style="
-            font-family: sans-serif;
-            font-size: 14px;
-            vertical-align: top;
-            display: block;
-            margin: 0 auto;
-            max-width: 580px;
-            padding: 10px;
-            width: 580px;
-          "
-    >
-      <div
-          class="content"
-          style="
-              box-sizing: border-box;
-              display: block;
-              margin: 0 auto;
-              max-width: 580px;
-              padding: 10px;
-            "
-      >
-        <!-- START CENTERED WHITE CONTAINER -->
-        <table
-            class="main"
-            style="
-                border-collapse: separate;
-                mso-table-lspace: 0;
-                mso-table-rspace: 0;
-                width: 100%;
-                background: #ffffff;
-                border-radius: 3px;
-              "
-        >
-          <!-- START MAIN CONTENT AREA -->
-          <tr>
-            <td
-                class="wrapper"
-                style="
-                    font-family: sans-serif;
-                    font-size: 14px;
-                    vertical-align: top;
-                    box-sizing: border-box;
-                    padding: 20px;
-                  "
-            >
-              <table
-                  border="0"
-                  cellpadding="0"
-                  cellspacing="0"
-                  style="
-                      border-collapse: separate;
-                      mso-table-lspace: 0;
-                      mso-table-rspace: 0;
-                      width: 100%;
-                    "
-              >
-                <tr>
-                  <td style="font-family: sans-serif; font-size: 14px; vertical-align: top">
-                    <p
-                        style="
-                            font-family: sans-serif;
-                            font-size: 14px;
-                            font-weight: normal;
-                            margin: 0 0 15px;
-                          "
-                    >
-                      Hi $name,
-                    </p>
-                    <p
-                        style="
-                            font-family: sans-serif;
-                            font-size: 14px;
-                            font-weight: normal;
-                            margin: 0 0 15px;
-                          "
-                    >
-                      In order to reset your password please click the button below.
-                    </p>
-                    <table
-                        border="0"
-                        cellpadding="0"
-                        cellspacing="0"
-                        class="btn btn-primary"
-                        style="
-                            border-collapse: separate;
-                            mso-table-lspace: 0;
-                            mso-table-rspace: 0;
-                            width: 100%;
-                            box-sizing: border-box;
-                          "
-                    >
-                      <tbody>
-                      <tr>
-                        <td
-                            align="left"
-                            style="
-                                  font-family: sans-serif;
-                                  font-size: 14px;
-                                  vertical-align: top;
-                                  padding-bottom: 15px;
-                                "
-                        >
-                          <table
-                              border="0"
-                              cellpadding="0"
-                              cellspacing="0"
-                              style="
-                                    border-collapse: separate;
-                                    mso-table-lspace: 0;
-                                    mso-table-rspace: 0;
-                                    width: auto;
-                                  "
-                          >
-                            <tbody>
-                            <tr>
-                              <td
-                                  style="
-                                          font-family: sans-serif;
-                                          font-size: 14px;
-                                          vertical-align: top;
-                                          background-color: #3498db;
-                                          border-radius: 5px;
-                                          text-align: center;
-                                        "
-                              >
-                                <a
-                                    href="$link"
-                                    rel="noopener noreferrer"
-                                    style="
-                                            display: inline-block;
-                                            color: #ffffff;
-                                            background-color: #3498db;
-                                            border-radius: 5px;
-                                            box-sizing: border-box;
-                                            cursor: pointer;
-                                            text-decoration: none;
-                                            font-size: 14px;
-                                            font-weight: bold;
-                                            margin: 0;
-                                            padding: 12px 25px;
-                                            text-transform: capitalize;
-                                            border: 1px solid #3498db;
-                                          "
-                                    target="_blank"
-                                >Reset password</a
-                                >
-                              </td>
-                            </tr>
-                            </tbody>
-                          </table>
-                        </td>
-                      </tr>
-                      </tbody>
-                    </table>
-                    <p
-                        style="
-                            font-family: sans-serif;
-                            font-size: 14px;
-                            font-weight: normal;
-                            margin: 0 0 15px;
-                          "
-                    >
-                      If you didn't attempt to reset your password you can just delete this
-                      email.
-                    </p>
-                    <p
-                        style="
-                            font-family: sans-serif;
-                            font-size: 14px;
-                            font-weight: normal;
-                            margin: 0 0 15px;
-                          "
-                    >
-                      Cheers, $appName
-                    </p>
-                  </td>
-                </tr>
-              </table>
-            </td>
-          </tr>
-
-          <!-- END MAIN CONTENT AREA -->
-        </table>
-
-        <!-- START FOOTER -->
-        <div
-            class="footer"
-            style="clear: both; margin-top: 10px; text-align: center; width: 100%"
-        >
-          <table
-              border="0"
-              cellpadding="0"
-              cellspacing="0"
-              style="
-                  border-collapse: separate;
-                  mso-table-lspace: 0;
-                  mso-table-rspace: 0;
-                  width: 100%;
-                "
-          >
-            <tr>
-              <td
-                  class="content-block powered-by"
-                  style="
-                      font-family: sans-serif;
-                      vertical-align: top;
-                      padding-bottom: 10px;
-                      padding-top: 10px;
-                      font-size: 12px;
-                      color: #999999;
-                      text-align: center;
-                    "
-              >
-                Powered by
-                <a
-                    href="https://$appName.com"
-                    style="
-                        color: #999999;
-                        font-size: 12px;
-                        text-align: center;
-                        text-decoration: none;
-                      "
-                >$appName</a
-                >.
-              </td>
-            </tr>
-          </table>
-        </div>
-        <!-- END FOOTER -->
-
-        <!-- END CENTERED WHITE CONTAINER -->
-      </div>
-    </td>
-    <td style="font-family: sans-serif; font-size: 14px; vertical-align: top">&nbsp;</td>
-  </tr>
-</table>
-</body>
-</html>
diff --git a/backend/spring-boot/src/main/resources/templates/email/reset-password.mjml b/backend/spring-boot/src/main/resources/templates/email/reset-password.mjml
new file mode 100644
index 00000000..5ae7fbb3
--- /dev/null
+++ b/backend/spring-boot/src/main/resources/templates/email/reset-password.mjml
@@ -0,0 +1,29 @@
+<mjml>
+  <mj-body background-color="#f4f4f4">
+    <mj-section background-color="#ffffff" padding="30px 20px">
+      <mj-column>
+        <mj-text font-size="18px" color="#333333" line-height="1.5">
+          <h2>Password Reset Request</h2>
+          <p>Hi ${name},</p>
+          <p>We received a request to reset the password for your ${appName} account. Please click the button below to reset your password.</p>
+        </mj-text>
+
+        <mj-button href="${link}" background-color="#020617" color="#f8fafc" font-size="16px" padding="15px 0" border-radius="5px">
+          Reset Password
+        </mj-button>
+
+        <mj-text font-size="14px" color="#777777" line-height="1.5" padding-top="20px">
+          If you didn’t request a password reset, please ignore this email.
+        </mj-text>
+      </mj-column>
+    </mj-section>
+
+    <mj-section background-color="#f4f4f4" padding="20px 0">
+      <mj-column>
+        <mj-text font-size="12px" color="#888888" align="center">
+          <p>&copy; ${appName}. All rights reserved.</p>
+        </mj-text>
+      </mj-column>
+    </mj-section>
+  </mj-body>
+</mjml>
diff --git a/backend/spring-boot/src/main/resources/templates/email/verify-email.html b/backend/spring-boot/src/main/resources/templates/email/verify-email.html
deleted file mode 100644
index 7d70ec22..00000000
--- a/backend/spring-boot/src/main/resources/templates/email/verify-email.html
+++ /dev/null
@@ -1,372 +0,0 @@
-<!DOCTYPE html>
-<!--suppress HtmlDeprecatedAttribute -->
-<html lang="en">
-<head>
-  <meta content="width=device-width" name="viewport"/>
-  <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
-  <title>Verify email</title>
-  <style>
-    @media only screen and (max-width: 620px) {
-      table[class='body'] h1 {
-        font-size: 28px !important;
-        margin-bottom: 10px !important;
-      }
-
-      table[class='body'] p,
-      table[class='body'] ul,
-      table[class='body'] ol,
-      table[class='body'] td,
-      table[class='body'] span,
-      table[class='body'] a {
-        font-size: 16px !important;
-      }
-
-      table[class='body'] .wrapper,
-      table[class='body'] .content {
-        padding: 0 !important;
-      }
-
-      table[class='body'] .container {
-        padding: 0 !important;
-        width: 100% !important;
-      }
-
-      table[class='body'] .main {
-        border-left-width: 0 !important;
-        border-radius: 0 !important;
-        border-right-width: 0 !important;
-      }
-
-      table[class='body'] .btn table {
-        width: 100% !important;
-      }
-
-      table[class='body'] .btn a {
-        width: 100% !important;
-      }
-    }
-
-    @media all {
-      .ExternalClass p,
-      .ExternalClass span,
-      .ExternalClass font,
-      .ExternalClass td,
-      .ExternalClass div {
-        line-height: 100%;
-      }
-
-      .apple-link a {
-        color: inherit !important;
-        font-family: inherit !important;
-        font-size: inherit !important;
-        font-weight: inherit !important;
-        line-height: inherit !important;
-        text-decoration: none !important;
-      }
-
-      #MessageViewBody a {
-        color: inherit;
-        text-decoration: none;
-        font-size: inherit;
-        font-family: inherit;
-        font-weight: inherit;
-        line-height: inherit;
-      }
-
-      .btn-primary table td:hover {
-        background-color: #34495e !important;
-      }
-
-      .btn-primary a:hover {
-        background-color: #34495e !important;
-        border-color: #34495e !important;
-      }
-    }
-  </style>
-</head>
-<body
-    class=""
-    style="
-      background-color: #f6f6f6;
-      font-family: sans-serif;
-      -webkit-font-smoothing: antialiased;
-      font-size: 14px;
-      line-height: 1.4;
-      margin: 0;
-      padding: 0;
-      -ms-text-size-adjust: 100%;
-      -webkit-text-size-adjust: 100%;
-    "
->
-<span
-    class="preheader"
-    style="
-        color: transparent;
-        display: none;
-        height: 0;
-        max-height: 0;
-        max-width: 0;
-        opacity: 0;
-        overflow: hidden;
-        mso-hide: all;
-        visibility: hidden;
-        width: 0;
-      "
->Verify email</span
->
-<table
-    border="0"
-    cellpadding="0"
-    cellspacing="0"
-    class="body"
-    style="
-        border-collapse: separate;
-        mso-table-lspace: 0;
-        mso-table-rspace: 0;
-        width: 100%;
-        background-color: #f6f6f6;
-      "
->
-  <tr>
-    <td style="font-family: sans-serif; font-size: 14px; vertical-align: top">&nbsp;</td>
-    <td
-        class="container"
-        style="
-            font-family: sans-serif;
-            font-size: 14px;
-            vertical-align: top;
-            display: block;
-            margin: 0 auto;
-            max-width: 580px;
-            padding: 10px;
-            width: 580px;
-          "
-    >
-      <div
-          class="content"
-          style="
-              box-sizing: border-box;
-              display: block;
-              margin: 0 auto;
-              max-width: 580px;
-              padding: 10px;
-            "
-      >
-        <!-- START CENTERED WHITE CONTAINER -->
-        <table
-            class="main"
-            style="
-                border-collapse: separate;
-                mso-table-lspace: 0;
-                mso-table-rspace: 0;
-                width: 100%;
-                background: #ffffff;
-                border-radius: 3px;
-              "
-        >
-          <!-- START MAIN CONTENT AREA -->
-          <tr>
-            <td
-                class="wrapper"
-                style="
-                    font-family: sans-serif;
-                    font-size: 14px;
-                    vertical-align: top;
-                    box-sizing: border-box;
-                    padding: 20px;
-                  "
-            >
-              <table
-                  border="0"
-                  cellpadding="0"
-                  cellspacing="0"
-                  style="
-                      border-collapse: separate;
-                      mso-table-lspace: 0;
-                      mso-table-rspace: 0;
-                      width: 100%;
-                    "
-              >
-                <tr>
-                  <td style="font-family: sans-serif; font-size: 14px; vertical-align: top">
-                    <p
-                        style="
-                            font-family: sans-serif;
-                            font-size: 14px;
-                            font-weight: normal;
-                            margin: 0 0 15px;
-                          "
-                    >
-                      Hi $name,
-                    </p>
-                    <p
-                        style="
-                            font-family: sans-serif;
-                            font-size: 14px;
-                            font-weight: normal;
-                            margin: 0 0 15px;
-                          "
-                    >
-                      We're excited to have you get started. First, you need to confirm your
-                      account. Just press the button below.
-                    </p>
-                    <table
-                        border="0"
-                        cellpadding="0"
-                        cellspacing="0"
-                        class="btn btn-primary"
-                        style="
-                            border-collapse: separate;
-                            mso-table-lspace: 0;
-                            mso-table-rspace: 0;
-                            width: 100%;
-                            box-sizing: border-box;
-                          "
-                    >
-                      <tbody>
-                      <tr>
-                        <td
-                            align="left"
-                            style="
-                                  font-family: sans-serif;
-                                  font-size: 14px;
-                                  vertical-align: top;
-                                  padding-bottom: 15px;
-                                "
-                        >
-                          <table
-                              border="0"
-                              cellpadding="0"
-                              cellspacing="0"
-                              style="
-                                    border-collapse: separate;
-                                    mso-table-lspace: 0;
-                                    mso-table-rspace: 0;
-                                    width: auto;
-                                  "
-                          >
-                            <tbody>
-                            <tr>
-                              <td
-                                  style="
-                                          font-family: sans-serif;
-                                          font-size: 14px;
-                                          vertical-align: top;
-                                          background-color: #3498db;
-                                          border-radius: 5px;
-                                          text-align: center;
-                                        "
-                              >
-                                <a
-                                    href="$link"
-                                    rel="noopener noreferrer"
-                                    style="
-                                            display: inline-block;
-                                            color: #ffffff;
-                                            background-color: #3498db;
-                                            border-radius: 5px;
-                                            box-sizing: border-box;
-                                            cursor: pointer;
-                                            text-decoration: none;
-                                            font-size: 14px;
-                                            font-weight: bold;
-                                            margin: 0;
-                                            padding: 12px 25px;
-                                            text-transform: capitalize;
-                                            border: 1px solid #3498db;
-                                          "
-                                    target="_blank"
-                                >Verify</a
-                                >
-                              </td>
-                            </tr>
-                            </tbody>
-                          </table>
-                        </td>
-                      </tr>
-                      </tbody>
-                    </table>
-                    <p
-                        style="
-                            font-family: sans-serif;
-                            font-size: 14px;
-                            font-weight: normal;
-                            margin: 0 0 15px;
-                          "
-                    >
-                      If you didn't attempt to verify your email address with our service you
-                      can just delete this email.
-                    </p>
-                    <p
-                        style="
-                            font-family: sans-serif;
-                            font-size: 14px;
-                            font-weight: normal;
-                            margin: 0 0 15px;
-                          "
-                    >
-                      Cheers, $appName
-                    </p>
-                  </td>
-                </tr>
-              </table>
-            </td>
-          </tr>
-
-          <!-- END MAIN CONTENT AREA -->
-        </table>
-
-        <!-- START FOOTER -->
-        <div
-            class="footer"
-            style="clear: both; margin-top: 10px; text-align: center; width: 100%"
-        >
-          <table
-              border="0"
-              cellpadding="0"
-              cellspacing="0"
-              style="
-                  border-collapse: separate;
-                  mso-table-lspace: 0;
-                  mso-table-rspace: 0;
-                  width: 100%;
-                "
-          >
-            <tr>
-              <td
-                  class="content-block powered-by"
-                  style="
-                      font-family: sans-serif;
-                      vertical-align: top;
-                      padding-bottom: 10px;
-                      padding-top: 10px;
-                      font-size: 12px;
-                      color: #999999;
-                      text-align: center;
-                    "
-              >
-                Powered by
-                <a
-                    href="https://$appName.com"
-                    style="
-                        color: #999999;
-                        font-size: 12px;
-                        text-align: center;
-                        text-decoration: none;
-                      "
-                >$appName</a
-                >.
-              </td>
-            </tr>
-          </table>
-        </div>
-        <!-- END FOOTER -->
-
-        <!-- END CENTERED WHITE CONTAINER -->
-      </div>
-    </td>
-    <td style="font-family: sans-serif; font-size: 14px; vertical-align: top">&nbsp;</td>
-  </tr>
-</table>
-</body>
-</html>
diff --git a/backend/spring-boot/src/main/resources/templates/email/verify-email.mjml b/backend/spring-boot/src/main/resources/templates/email/verify-email.mjml
new file mode 100644
index 00000000..90c87f91
--- /dev/null
+++ b/backend/spring-boot/src/main/resources/templates/email/verify-email.mjml
@@ -0,0 +1,29 @@
+<mjml>
+  <mj-body background-color="#f4f4f4">
+    <mj-section background-color="#ffffff" padding="30px 20px">
+      <mj-column>
+        <mj-text font-size="18px" color="#333333" line-height="1.5">
+          <h2>Welcome to ${appName}!</h2>
+          <p>Hi ${name},</p>
+          <p>Thank you for signing up with ${appName}! We are excited to have you on board. To complete your registration and activate your account, please click the button below to verify your email address.</p>
+        </mj-text>
+
+        <mj-button href="${link}" background-color="#020617" color="#f8fafc" font-size="16px" padding="15px 0" border-radius="5px">
+          Verify Your Email
+        </mj-button>
+
+        <mj-text font-size="14px" color="#777777" line-height="1.5" padding-top="20px">
+          If you did not sign up for ${appName}, please ignore this email.
+        </mj-text>
+      </mj-column>
+    </mj-section>
+
+    <mj-section background-color="#f4f4f4" padding="20px 0">
+      <mj-column>
+        <mj-text font-size="12px" color="#888888" align="center">
+          <p>&copy; ${appName}. All rights reserved.</p>
+        </mj-text>
+      </mj-column>
+    </mj-section>
+  </mj-body>
+</mjml>
diff --git a/frontend/svelte-kit/src/routes/auth/confirm-registration/+server.ts b/frontend/svelte-kit/src/routes/auth/verify-email/+server.ts
similarity index 100%
rename from frontend/svelte-kit/src/routes/auth/confirm-registration/+server.ts
rename to frontend/svelte-kit/src/routes/auth/verify-email/+server.ts