diff --git a/src/api/otp/otp.route.ts b/src/api/otp/otp.route.ts
deleted file mode 100644
index 2c35f32..0000000
--- a/src/api/otp/otp.route.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Elysia, t } from "elysia";
-import { renderToStaticMarkup } from "react-dom/server";
-import nodemailer from "nodemailer";
-import OTPEmail from "../../emails/otp";
-import { createElement } from "react";
-
-const transporter = nodemailer.createTransport({
-  host: "smtp.gehenna.sh",
-  port: 465,
-  auth: {
-    user: "makoto",
-    pass: "12345678",
-  },
-});
-
-export const otp = new Elysia({ prefix: "/otp" }).get(
-  "/",
-  async ({ body }) => {
-    // Random between 100,000 and 999,999
-    const otp = ~~(Math.random() * (900_000 - 1)) + 100_000;
-
-    const html = renderToStaticMarkup(createElement(OTPEmail, { otp }));
-
-    await transporter.sendMail({
-      from: "ibuki@gehenna.sh",
-      to: body,
-      subject: "Verify your email address",
-      html,
-    });
-
-    return { success: true };
-  },
-  {
-    body: t.String({ format: "email" }),
-  }
-);
diff --git a/src/emails/auth.tsx b/src/emails/auth.tsx
new file mode 100644
index 0000000..6db98a0
--- /dev/null
+++ b/src/emails/auth.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react'
+import { Tailwind, Section, Text } from '@react-email/components'
+
+export default function AuthEmail({ message, link }: { message: string, link: string }) {
+  return (
+    <Tailwind>
+      <Section className="flex justify-center items-center w-full min-h-screen font-sans">
+        <Section className="flex flex-col items-center w-76 rounded-2xl px-6 py-1 bg-gray-50">
+          <Text className="text-2xl font-medium text-violet-500">
+            {message}
+          </Text>
+          <Text className="text-gray-500 my-0">
+            Use the following Link to {message}
+          </Text>
+          <a href={link} className="text-blue-400 font-bold pt-2">Link</a>
+          <Text className="text-gray-600 text-xs">
+            Thanks
+          </Text>
+        </Section>
+      </Section>
+    </Tailwind>
+  )
+}
+
+AuthEmail.PreviewProps = {
+  link: "https://example.com",
+  message: "Verify your email address"
+}
diff --git a/src/emails/otp.tsx b/src/emails/otp.tsx
deleted file mode 100644
index 1c7e2eb..0000000
--- a/src/emails/otp.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import * as React from 'react'
-import { Tailwind, Section, Text } from '@react-email/components'
-
-export default function OTPEmail({ otp }: { otp: number }) {
-    return (
-        <Tailwind>
-            <Section className="flex justify-center items-center w-full min-h-screen font-sans">
-                <Section className="flex flex-col items-center w-76 rounded-2xl px-6 py-1 bg-gray-50">
-                    <Text className="text-xs font-medium text-violet-500">
-                        Verify your Email Address
-                    </Text>
-                    <Text className="text-gray-500 my-0">
-                        Use the following code to verify your email address
-                    </Text>
-                    <Text className="text-5xl font-bold pt-2">{otp}</Text>
-                    <Text className="text-gray-400 font-light text-xs pb-4">
-                        This code is valid for 10 minutes
-                    </Text>
-                    <Text className="text-gray-600 text-xs">
-                        Thank you joining us
-                    </Text>
-                </Section>
-            </Section>
-        </Tailwind>
-    )
-}
-
-OTPEmail.PreviewProps = {
-    otp: 123456
-}
\ No newline at end of file
diff --git a/src/lib/auth/auth.ts b/src/lib/auth/auth.ts
index 4968c50..26114a2 100644
--- a/src/lib/auth/auth.ts
+++ b/src/lib/auth/auth.ts
@@ -4,6 +4,9 @@ import { db } from "../../db/index";
 import { openAPI } from "better-auth/plugins"
 import { user, account, verification, session } from "../../db/schema";
 import { sendMail } from "../mail";
+import { renderToStaticMarkup } from "react-dom/server";
+import { createElement } from "react";
+import AuthEmail from "../../emails/auth";
 
 export const auth = betterAuth({
   database: drizzleAdapter(db, {
@@ -19,19 +22,23 @@ export const auth = betterAuth({
     enabled: true, // If you want to use email and password auth
     requireEmailVerification: false,
     sendResetPassword: async ({ user, url }, request) => {
+      const subject = "Reset your password";
+      const html = renderToStaticMarkup(createElement(AuthEmail, { message: subject, link: url }));
       await sendMail({
         to: user.email,
-        subject: "Reset your password",
-        text: `Click the link to reset your password: ${url}`,
+        subject: subject,
+        html: html,
       });
     },
   },
   emailVerification: {
     sendVerificationEmail: async ({ user, url, token }, request) => {
+      const subject = "Verify your email address";
+      const html = renderToStaticMarkup(createElement(AuthEmail, { message: subject, link: url }));
       await sendMail({
         to: user.email,
-        subject: "Verify your email address",
-        text: `Click the link to verify your email: ${url}`,
+        subject: subject,
+        html: html,
       });
     },
 
diff --git a/src/lib/mail.ts b/src/lib/mail.ts
index 83757f3..ada3212 100644
--- a/src/lib/mail.ts
+++ b/src/lib/mail.ts
@@ -1,6 +1,6 @@
 import nodemailer from 'nodemailer'
 
-export async function sendMail({ to, subject, text }: { to: string, subject: string, text: string }) {
+export async function sendMail({ to, subject, text, html }: { to: string, subject: string, text?: string, html?: string }) {
   const transporter = nodemailer.createTransport({
     host: process.env.SMTP_HOST!,
     port: +process.env.SMTP_PORT!,
@@ -14,6 +14,7 @@ export async function sendMail({ to, subject, text }: { to: string, subject: str
     from: process.env.SMTP_FROM!,
     to,
     subject,
-    text,
+    text: text,
+    html: html,
   })
 }