diff --git a/apps/api/src/mail/emails/otp-email-template.tsx b/apps/api/src/mail/emails/otp-email-template.tsx
new file mode 100644
index 00000000..bcafa17e
--- /dev/null
+++ b/apps/api/src/mail/emails/otp-email-template.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react'
+import { Text, Section } from '@react-email/components'
+import { otpStyle, text, workspaceDetails } from './styles/common-styles'
+import BaseEmailTemplate from './components/base-email-template'
+
+interface OTPEmailTemplateProps {
+  otp: string
+}
+
+export const OTPEmailTemplate = ({ otp }: OTPEmailTemplateProps) => {
+  return (
+    <BaseEmailTemplate
+      previewText="Your One Time Password (OTP) for Keyshade"
+      heading="Your One Time Password (OTP)"
+    >
+      <Text style={text}>Dear User,</Text>
+      <Text style={text}>
+        We’ve sent you this email to verify your Keyshade account. Your One-Time
+        Password (OTP) is:
+      </Text>
+      <Section style={workspaceDetails}>
+        <Text style={otpStyle}>
+          <strong>{otp}</strong>
+        </Text>
+      </Section>
+      <Text style={text}>
+        This OTP will expire in <strong>5 minutes</strong>. Please use it to
+        complete your action on Keyshade.
+      </Text>
+    </BaseEmailTemplate>
+  )
+}
+
+export default OTPEmailTemplate
diff --git a/apps/api/src/mail/emails/styles/common-styles.ts b/apps/api/src/mail/emails/styles/common-styles.ts
index 027deedb..4602388c 100644
--- a/apps/api/src/mail/emails/styles/common-styles.ts
+++ b/apps/api/src/mail/emails/styles/common-styles.ts
@@ -35,10 +35,11 @@ export const text: CSSProperties = {
 
 export const workspaceDetails: CSSProperties = {
   width: '100%',
-  backgroundColor: '#fafafa',
   borderRadius: '5px',
   margin: '20px 0px',
-  padding: '10px 20px'
+  padding: '10px 20px',
+  border: '1px solid #eee',
+  backgroundColor: '#fafafa'
 }
 
 export const workspaceInfo: CSSProperties = {
@@ -60,6 +61,13 @@ export const ctaButton: CSSProperties = {
   borderRadius: '5px'
 }
 
+export const otpStyle: CSSProperties = {
+  ...workspaceInfo,
+  fontSize: '26px',
+  textAlign: 'center',
+  letterSpacing: '8px'
+}
+
 export const footer: CSSProperties = {
   borderTop: '1px solid #eaeaea',
   padding: '20px'
diff --git a/apps/api/src/mail/services/mail.service.ts b/apps/api/src/mail/services/mail.service.ts
index 3a7dca54..e19a56d4 100644
--- a/apps/api/src/mail/services/mail.service.ts
+++ b/apps/api/src/mail/services/mail.service.ts
@@ -8,6 +8,7 @@ import { Transporter, createTransport } from 'nodemailer'
 import RemovedFromWorkspaceEmail from '../emails/workspace-removal'
 import { render } from '@react-email/render'
 import WorkspaceInvitationEmail from '../emails/workspace-invitation'
+import OTPEmailTemplate from '../emails/otp-email-template'
 
 @Injectable()
 export class MailService implements IMailService {
@@ -50,47 +51,25 @@ export class MailService implements IMailService {
   }
 
   async sendOtp(email: string, otp: string): Promise<void> {
-    const subject = 'Your Login OTP'
-    const body = `<!DOCTYPE html>
-        <html>
-        <head>
-           <title>OTP Verification</title>
-        </head>
-        <body>
-           <h1>Welcome to keyshade!</h1>
-           <p>Hello there!</p>
-           <p>We have sent you this email to verify your account.</p>
-           <p>Your One Time Password (OTP) is: <strong>${otp}</strong></p>
-           <p>This OTP will expire in <strong>5 minutes</strong>.</p>
-           <p>Please enter this OTP in the application to verify your account.</p>
-           <p>Thank you for choosing us.</p>
-           <p>Best Regards,</p>
-           <p>keyshade Team</p>
-        </body>
-        </html>
-        `
+    const subject = 'Your One Time Password (OTP) for Keyshade'
+
+    const body = await render(
+      OTPEmailTemplate({
+        otp
+      })
+    )
+
     await this.sendEmail(email, subject, body)
   }
   async sendEmailChangedOtp(email: string, otp: string): Promise<void> {
-    const subject = 'Your OTP for Email Change'
-    const body = `<!DOCTYPE html>
-        <html>
-        <head>
-           <title>OTP Verification</title>
-        </head>
-        <body>
-           <h1>Are you trying to change your email?</h1>
-           <p>Hello there!</p>
-           <p>We have sent you this email to verify your new email.</p>
-           <p>Your One Time Password (OTP) is: <strong>${otp}</strong></p>
-           <p>This OTP will expire in <strong>5 minutes</strong>.</p>
-           <p>Please enter this OTP in the application to verify your new email.</p>
-           <p>Thank you.</p>
-           <p>Best Regards,</p>
-           <p>keyshade Team</p>
-        </body>
-        </html>
-        `
+    const subject = 'Your Keyshade Email Change One Time Password (OTP)'
+
+    const body = await render(
+      OTPEmailTemplate({
+        otp
+      })
+    )
+
     await this.sendEmail(email, subject, body)
   }
   async accountLoginEmail(email: string): Promise<void> {
