diff --git a/assets/mailer_templates/build_production/workspace_invitation.html b/assets/mailer_templates/build_production/workspace_invitation.html
index 601d4a7e..ccad0909 100644
--- a/assets/mailer_templates/build_production/workspace_invitation.html
+++ b/assets/mailer_templates/build_production/workspace_invitation.html
@@ -42,7 +42,7 @@
      ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏
   </div>
   <div role="article" aria-roledescription="email" aria-label="Confirm to join the workspace" lang="en">
-    <div class="sm-px-4 sm-py-12" style="background-color: #faf5ff; padding: 96px 48px; color: #000">
+    <div class="sm-px-4 sm-py-12" style="background-color: #faf5ff; padding: 96px 48px; font-family: Helvetica, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; color: #000">
       <table align="center" cellpadding="0" cellspacing="0" role="none">
         <tr>
           <td style="width: 552px; max-width: 100%">
@@ -71,12 +71,15 @@
               </tr>
             </table>
             <div style="text-align: center;">
-              <a href="{{ accept_url }}" class="hover-opacity-90" style="margin-top: 32px; margin-bottom: 32px; display: inline-block; height: 34px; width: 60%; cursor: pointer; border-radius: 16px; padding: 16px 24px; color: #f8fafc; text-decoration: none; background-color: #9327ff; font-size: 20px; font-weight: 400; line-height: 34px">
+              <a href="{{ accept_url }}" class="hover-opacity-90" style="margin-top: 32px; margin-bottom: 32px; display: inline-block; width: 60%; cursor: pointer; border-radius: 16px; padding: 16px 24px; color: #f8fafc; text-decoration: none; background-color: #9327ff; font-size: 20px; font-weight: 400; line-height: 20px">
                 <!--[if mso]>
       <i style="mso-font-width: 150%; mso-text-raise: 30px" hidden>&emsp;</i>
     <![endif]-->
                 <span style="mso-text-raise: 16px">
-                        Join workspace
+                        <div style="font-size: 24px; font-weight: 500">
+                            Join workspace
+                            <div style="font-size: 12px">require v0.5.6+ to continue</div>
+                        </div>
                     </span>
                 <!--[if mso]>
       <i hidden style="mso-font-width: 150%;">&emsp;&#8203;</i>
@@ -84,10 +87,10 @@
               </a>
             </div>
             <div style="margin-left: auto; margin-right: auto; width: 70%; text-align: center; font-size: 14px; line-height: 18px; color: #64748b">
-              By clicking "Join workspace" above, you confirm that you have read, understood, and agree to
-              AppFlowy's <a href="https://appflowy.io/terms" style="color: #64748b; text-decoration-line: none">Terms &
+              By clicking "Join workspace" above, you confirm that you have read, understood, and agreed to
+              AppFlowy's <a href="https://appflowy.io/terms/app" style="color: #64748b;">Terms &
                 Conditions</a>
-              and <a href="https://appflowy.io/privacy" style="color: #64748b; text-decoration-line: none;">Privacy
+              and <a href="https://appflowy.io/privacy/app" style="color: #64748b;">Privacy
                 Policy.</a>
             </div>
             <div role="separator" style="background-color: #cbd5e1; height: 1px; line-height: 1px; margin: 24px 20%;">&zwj;</div>
@@ -100,7 +103,7 @@
                 <img src="https://raw.githubusercontent.com/AppFlowy-IO/AppFlowy-Cloud/main/assets/mailer_templates/build_production/images/appflowy-logo.png" width="150px" style="max-width: 100%; vertical-align: middle; line-height: 1;" alt="">
               </a>
             </p>
-            <p style="margin: 0; font-size: 14px; font-weight: 500; color: #000">
+            <p style="margin: 0; font-size: 14px; font-weight: 500; color: #000;">
               Bring projects, knowledge, and teams together with the power of AI.
             </p>
             <p style="cursor: default">
diff --git a/email_template/src/templates/workspace_invitation.html b/email_template/src/templates/workspace_invitation.html
index 05719973..ea312a15 100644
--- a/email_template/src/templates/workspace_invitation.html
+++ b/email_template/src/templates/workspace_invitation.html
@@ -5,7 +5,7 @@ bodyClass: bg-purple-50
 ---
 
 <x-main>
-    <div class="bg-purple-50 sm:px-4 px-12 sm:py-12 py-24 text-black">
+    <div class="bg-purple-50 font-helvetica sm:px-4 px-12 sm:py-12 py-24 text-black">
         <table align="center">
             <tr>
                 <td class="w-[552px] max-w-full">
@@ -42,15 +42,19 @@ bodyClass: bg-purple-50
                         </tr>
                     </table>
                     <x-button align="center"
-                              class="hover:opacity-90 cursor-pointer h-[34px] !text-xl !leading-[34px] !bg-[#9327ff] !font-normal w-[60%] my-8 rounded-2xl"
+                              class="hover:opacity-90 cursor-pointer !text-xl !leading-[20px] !bg-[#9327ff] !font-normal w-[60%] my-8 rounded-2xl"
                               href="{{ acceptUrl }}">
-                        Join workspace
+
+                        <div class="font-medium text-[24px]">
+                            Join workspace
+                            <div class="text-xs">require v0.5.6+ to continue</div>
+                        </div>
                     </x-button>
                     <div class="mx-auto  leading-4.5 text-sm text-slate-500 text-center w-[70%]">
-                        By clicking "Join workspace" above, you confirm that you have read, understood, and agree to
-                        AppFlowy's <a href="https://appflowy.io/terms" class="no-underline text-slate-500">Terms &
+                        By clicking "Join workspace" above, you confirm that you have read, understood, and agreed to
+                        AppFlowy's <a href="https://appflowy.io/terms/app" class="text-slate-500">Terms &
                         Conditions</a>
-                        and <a class="text-slate-500 no-underline" href="https://appflowy.io/privacy">Privacy
+                        and <a class="text-slate-500" href="https://appflowy.io/privacy/app">Privacy
                         Policy.</a>
                     </div>
                     <x-divider space-x="20%"/>
diff --git a/email_template/tailwind.config.js b/email_template/tailwind.config.js
index 1fe84410..54a5ebfe 100644
--- a/email_template/tailwind.config.js
+++ b/email_template/tailwind.config.js
@@ -2,8 +2,8 @@
 module.exports = {
   theme: {
     screens: {
-      sm: {max: '600px'},
-      xs: {max: '425px'},
+      sm: { max: '600px' },
+      xs: { max: '425px' },
     },
     extend: {
       spacing: {
@@ -73,6 +73,7 @@ module.exports = {
         sans: ['ui-sans-serif', 'system-ui', '-apple-system', '"Segoe UI"', 'sans-serif'],
         serif: ['ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
         mono: ['ui-monospace', 'Menlo', 'Consolas', 'monospace'],
+        helvetica: ['Helvetica', 'ui-sans-serif', 'system-ui', '-apple-system', '"Segoe UI"', 'sans-serif'],
       },
       fontSize: {
         0: '0',
@@ -134,4 +135,4 @@ module.exports = {
     require('tailwindcss-box-shadow'),
     require('tailwindcss-email-variants'),
   ],
-}
+};