diff --git a/src/api/users.ts b/src/api/users.ts
index cfc063a..678caf6 100644
--- a/src/api/users.ts
+++ b/src/api/users.ts
@@ -63,6 +63,7 @@ export const registerWithOtp = async (
   re_password: string,
   first_name = "",
   last_name = "",
+  email = "",
 ) => {
   const normalizedMobile = normalizeDigits(mobile)
   const normalizedCode = normalizeDigits(code)
@@ -75,6 +76,7 @@ export const registerWithOtp = async (
       re_password,
       first_name,
       last_name,
+      email,
     }),
   })
   if (!response.ok) throw await buildApiError(response)
diff --git a/src/context/AuthFlowContext.tsx b/src/context/AuthFlowContext.tsx
index 59ae6d6..559f6a9 100644
--- a/src/context/AuthFlowContext.tsx
+++ b/src/context/AuthFlowContext.tsx
@@ -35,6 +35,7 @@ interface SignupDetailsState {
   confirmation: string
   firstName: string
   lastName: string
+  email: string
 }
 
 interface AuthFlowContextValue {
@@ -87,6 +88,7 @@ const defaultSignupDetails: SignupDetailsState = {
   confirmation: "",
   firstName: "",
   lastName: "",
+  email: "",
 }
 
 const AuthFlowContext = createContext<AuthFlowContextValue | null>(null)
diff --git a/src/locales/en.ts b/src/locales/en.ts
index 7230b81..f38c28d 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -68,6 +68,7 @@ export const en = {
     passwordReuse: "New password must be different from your previous password.",
     firstNamePlaceholder: "First name",
     lastNamePlaceholder: "Last name",
+    emailPlaceholder: "Email (optional)",
     enterPassword: "Enter your password",
     verifyNumber: "Verify your number",
     enterMobileDesc: "Enter your mobile number to continue",
diff --git a/src/locales/fa.ts b/src/locales/fa.ts
index 54c7120..138ce5b 100644
--- a/src/locales/fa.ts
+++ b/src/locales/fa.ts
@@ -67,6 +67,7 @@ export const fa = {
     passwordReuse: "رمز عبور جدید نباید با رمز عبور قبلی یکسان باشد.",
     firstNamePlaceholder: "نام",
     lastNamePlaceholder: "نام خانوادگی",
+    emailPlaceholder: "ایمیل (اختیاری)",
     welcome: (title: string = "Qlockifiy") => `به ${title} خوش آمدید`,
     enterPassword: "رمز عبور خود را وارد کنید",
     verifyNumber: "تایید شماره موبایل",
diff --git a/src/pages/auth/SignupOtpPage.tsx b/src/pages/auth/SignupOtpPage.tsx
index aa75d94..fcd7ee2 100644
--- a/src/pages/auth/SignupOtpPage.tsx
+++ b/src/pages/auth/SignupOtpPage.tsx
@@ -132,6 +132,7 @@ export function SignupOtpPage() {
         signupDetails.confirmation,
         signupDetails.firstName,
         signupDetails.lastName,
+        signupDetails.email,
       )
       clearCooldown("signupOtpSend")
       clearSignupDetails()
diff --git a/src/pages/auth/SignupPasswordPage.tsx b/src/pages/auth/SignupPasswordPage.tsx
index a777c27..d3f1103 100644
--- a/src/pages/auth/SignupPasswordPage.tsx
+++ b/src/pages/auth/SignupPasswordPage.tsx
@@ -24,6 +24,7 @@ export function SignupPasswordPage() {
   const isRtl = lang === "fa"
   const [firstName, setFirstName] = useState(signupDetails.firstName)
   const [lastName, setLastName] = useState(signupDetails.lastName)
+  const [email, setEmail] = useState(signupDetails.email)
   const [password, setPassword] = useState(signupDetails.password)
   const [confirmation, setConfirmation] = useState(signupDetails.confirmation)
   const textFallbackDirection = isRtl ? "rtl" : "ltr"
@@ -75,6 +76,7 @@ export function SignupPasswordPage() {
       confirmation,
       firstName: firstName.trim(),
       lastName: lastName.trim(),
+      email: email.trim(),
     })
     setCode("signup", "")
     clearOtpDelivery("signup")
@@ -100,7 +102,7 @@ export function SignupPasswordPage() {
             placeholder={t.login.firstNamePlaceholder}
             dir={firstNameDirection}
             required
-            className={'h-11'}
+            className={`h-11 ${firstNameDirection === "rtl" ? "text-end" : "text-start"}`}
           />
           <Input
             id="signup-last-name"
@@ -109,9 +111,18 @@ export function SignupPasswordPage() {
             placeholder={t.login.lastNamePlaceholder}
             dir={lastNameDirection}
             required
-            className={'h-11'}
+            className={`h-11 ${lastNameDirection === "rtl" ? "text-end" : "text-start"}`}
           />
         </div>
+        <Input
+          id="signup-email"
+          value={email}
+          onChange={(event) => setEmail(event.target.value)}
+          placeholder={t.login.emailPlaceholder}
+          type="email"
+          dir="ltr"
+          className="h-11 text-start"
+        />
         <AuthPasswordField
           id="signup-password"
           value={password}