diff --git a/app/src/main/java/com/aiosman/riderpro/ui/Navi.kt b/app/src/main/java/com/aiosman/riderpro/ui/Navi.kt
index fc06c6c..319bbe9 100644
--- a/app/src/main/java/com/aiosman/riderpro/ui/Navi.kt
+++ b/app/src/main/java/com/aiosman/riderpro/ui/Navi.kt
@@ -196,13 +196,37 @@ fun NavigationController(
                 AccountProfile(it.arguments?.getString("id")!!)
             }
         }
-        composable(route = NavigationRoute.SignUp.route) {
+        composable(
+            route = NavigationRoute.SignUp.route,
+            enterTransition = {
+                fadeIn(animationSpec = tween(durationMillis = 0))
+            },
+            exitTransition = {
+                fadeOut(animationSpec = tween(durationMillis = 0))
+            }
+        ) {
             SignupScreen()
         }
-        composable(route = NavigationRoute.UserAuth.route) {
+        composable(
+            route = NavigationRoute.UserAuth.route,
+            enterTransition = {
+                fadeIn(animationSpec = tween(durationMillis = 100))
+            },
+            exitTransition = {
+                fadeOut(animationSpec = tween(durationMillis = 100))
+            }
+        ) {
             UserAuthScreen()
         }
-        composable(route = NavigationRoute.EmailSignUp.route) {
+        composable(
+            route = NavigationRoute.EmailSignUp.route,
+            enterTransition = {
+                fadeIn(animationSpec = tween(durationMillis = 100))
+            },
+            exitTransition = {
+                fadeOut(animationSpec = tween(durationMillis = 100))
+            }
+        ) {
             EmailSignupScreen()
         }
         composable(route = NavigationRoute.AccountEdit.route) {
@@ -259,7 +283,10 @@ fun NavigationController(
 
 @OptIn(ExperimentalSharedTransitionApi::class)
 @Composable
-fun Navigation(startDestination: String = NavigationRoute.Login.route,onLaunch: (navController: NavHostController) -> Unit) {
+fun Navigation(
+    startDestination: String = NavigationRoute.Login.route,
+    onLaunch: (navController: NavHostController) -> Unit
+) {
     val navController = rememberNavController()
     LaunchedEffect(Unit) {
         onLaunch(navController)
diff --git a/app/src/main/java/com/aiosman/riderpro/ui/login/login.kt b/app/src/main/java/com/aiosman/riderpro/ui/login/login.kt
index afa383a..732b19d 100644
--- a/app/src/main/java/com/aiosman/riderpro/ui/login/login.kt
+++ b/app/src/main/java/com/aiosman/riderpro/ui/login/login.kt
@@ -18,6 +18,7 @@ import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
@@ -76,7 +77,7 @@ fun LoginPage() {
                         modifier = Modifier
                             .width(162.dp)
                             .height(48.dp),
-                        text = "Login in".uppercase(),
+                        text = stringResource(R.string.login_upper),
                         backgroundImage = R.mipmap.rider_pro_grey_bg_big
                     ) {
                         navController.navigate(
@@ -87,7 +88,7 @@ fun LoginPage() {
                         modifier = Modifier
                             .width(162.dp)
                             .height(48.dp),
-                        text = "Sign In".uppercase(),
+                        text = stringResource(R.string.sign_in_upper),
                         backgroundImage = R.mipmap.rider_pro_red_bg_big
                     ){
                         navController.navigate(
diff --git a/app/src/main/java/com/aiosman/riderpro/ui/login/signup.kt b/app/src/main/java/com/aiosman/riderpro/ui/login/signup.kt
index 6967099..0051071 100644
--- a/app/src/main/java/com/aiosman/riderpro/ui/login/signup.kt
+++ b/app/src/main/java/com/aiosman/riderpro/ui/login/signup.kt
@@ -24,6 +24,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
@@ -154,7 +155,7 @@ fun SignupScreen() {
                         modifier = Modifier
                             .width(345.dp)
                             .height(48.dp),
-                        text = "CONTINUE WITH EMAIL".uppercase(),
+                        text = stringResource(R.string.sign_in_with_email),
                         backgroundImage = R.mipmap.rider_pro_signup_red_bg,
                         leading = {
                             Image(
@@ -197,7 +198,7 @@ fun SignupScreen() {
                             )
                             Spacer(modifier = Modifier.width(8.dp))
                         },
-                        text = "CONTINUE WITH GOOGLE".uppercase(),
+                        text = stringResource(R.string.sign_in_with_google),
                         backgroundImage = R.mipmap.rider_pro_signup_white_bg
                     ) {
                         googleLogin()
@@ -234,7 +235,7 @@ fun SignupScreen() {
                         )
                         Spacer(modifier = Modifier.width(8.dp))
                         Text(
-                            "BACK",
+                            stringResource(R.string.back_upper),
                             color = Color.Black,
                             fontSize = 16.sp,
                             fontWeight = FontWeight.Bold
diff --git a/app/src/main/java/com/aiosman/riderpro/ui/login/userauth.kt b/app/src/main/java/com/aiosman/riderpro/ui/login/userauth.kt
index 4b6fe72..2de5a13 100644
--- a/app/src/main/java/com/aiosman/riderpro/ui/login/userauth.kt
+++ b/app/src/main/java/com/aiosman/riderpro/ui/login/userauth.kt
@@ -2,6 +2,7 @@ package com.aiosman.riderpro.ui.login
 
 import android.widget.Toast
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -45,6 +46,7 @@ import com.aiosman.riderpro.ui.NavigationRoute
 import com.aiosman.riderpro.ui.comment.NoticeScreenHeader
 import com.aiosman.riderpro.ui.composables.ActionButton
 import com.aiosman.riderpro.ui.composables.StatusBarMaskLayout
+import com.aiosman.riderpro.ui.composables.StatusBarSpacer
 import com.aiosman.riderpro.ui.composables.TextInputField
 import com.aiosman.riderpro.ui.modifiers.noRippleClickable
 import com.aiosman.riderpro.utils.GoogleLogin
@@ -64,8 +66,10 @@ fun UserAuthScreen() {
     var emailError by remember { mutableStateOf<String?>(null) }
     var passwordError by remember { mutableStateOf<String?>(null) }
     fun validateForm(): Boolean {
-        emailError = if (email.isEmpty()) context.getString(R.string.text_error_email_required) else null
-        passwordError = if (password.isEmpty()) context.getString(R.string.text_error_password_required) else null
+        emailError =
+            if (email.isEmpty()) context.getString(R.string.text_error_email_required) else null
+        passwordError =
+            if (password.isEmpty()) context.getString(R.string.text_error_password_required) else null
         return emailError == null && passwordError == null
     }
 
@@ -127,108 +131,111 @@ fun UserAuthScreen() {
         }
 
     }
-    StatusBarMaskLayout {
+    Column(
+        horizontalAlignment = Alignment.CenterHorizontally,
+        modifier = Modifier
+            .fillMaxSize()
+            .background(Color.White)
+    ) {
+        StatusBarSpacer()
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(top = 16.dp, start = 16.dp, end = 16.dp)
+        ) {
+            NoticeScreenHeader(stringResource(R.string.login_upper), moreIcon = false)
+        }
         Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .weight(1f)
+                .padding(horizontal = 24.dp),
             horizontalAlignment = Alignment.CenterHorizontally,
         ) {
-            Box(
+            Spacer(modifier = Modifier.padding(48.dp))
+            TextInputField(
                 modifier = Modifier
-                    .fillMaxWidth()
-                    .padding(top = 16.dp, start = 16.dp, end = 16.dp)
-            ) {
-                NoticeScreenHeader(stringResource(R.string.login_upper), moreIcon = false)
-            }
-            Column(
+                    .fillMaxWidth(),
+                text = email,
+                onValueChange = {
+                    email = it
+                },
+                label = stringResource(R.string.login_email_label),
+                hint = stringResource(R.string.text_hint_email),
+                error = emailError
+            )
+            Spacer(modifier = Modifier.padding(16.dp))
+            TextInputField(
                 modifier = Modifier
-                    .fillMaxWidth()
-                    .weight(1f)
-                    .padding(horizontal = 24.dp),
-                horizontalAlignment = Alignment.CenterHorizontally,
+                    .fillMaxWidth(),
+                text = password,
+                onValueChange = {
+                    password = it
+                },
+                password = true,
+                label = stringResource(R.string.login_password_label),
+                hint = stringResource(R.string.text_hint_password),
+                error = passwordError
+            )
+            Spacer(modifier = Modifier.height(32.dp))
+            Row(
+                verticalAlignment = Alignment.CenterVertically
             ) {
-                Spacer(modifier = Modifier.padding(48.dp))
-                TextInputField(
-                    modifier = Modifier
-                        .fillMaxWidth(),
-                    text = email,
-                    onValueChange = {
-                        email = it
-                    },
-                    label = stringResource(R.string.login_email_label),
-                    hint = stringResource(R.string.text_hint_email),
-                    error = emailError
-                )
-                Spacer(modifier = Modifier.padding(16.dp))
-                TextInputField(
-                    modifier = Modifier
-                        .fillMaxWidth(),
-                    text = password,
-                    onValueChange = {
-                        password = it
-                    },
-                    password = true,
-                    label = stringResource(R.string.login_password_label),
-                    hint = stringResource(R.string.text_hint_password),
-                    error = passwordError
-                )
-                Spacer(modifier = Modifier.height(32.dp))
-                Row(
-                    verticalAlignment = Alignment.CenterVertically
-                ) {
-                    CompositionLocalProvider(LocalMinimumInteractiveComponentEnforcement provides false) {
-                        Checkbox(
-                            checked = rememberMe,
-                            onCheckedChange = {
-                                rememberMe = it
-                            },
-                            colors = CheckboxDefaults.colors(
-                                checkedColor = Color.Black
-                            ),
-                        )
-                        Text(
-                            stringResource(R.string.remember_me),
-                            modifier = Modifier.padding(start = 8.dp),
-                            fontSize = 12.sp
-                        )
-                        Spacer(modifier = Modifier.weight(1f))
-                        Text(stringResource(R.string.forgot_password), fontSize = 12.sp)
-                    }
-                }
-                Spacer(modifier = Modifier.height(64.dp))
-                ActionButton(
-                    modifier = Modifier
-                        .width(345.dp)
-                        .height(48.dp),
-                    text = stringResource(R.string.lets_ride_upper),
-                    backgroundImage = R.mipmap.rider_pro_signup_red_bg
-                ) {
-                    onLogin()
-                }
-
-                Spacer(modifier = Modifier.height(48.dp))
-                Text(stringResource(R.string.or_login_with), color = Color(0xFF999999))
-                Spacer(modifier = Modifier.height(16.dp))
-                Row {
-                    Box(
-                        modifier = Modifier
-                            .size(96.dp)
-                            .padding(16.dp)
-                            .border(2.dp, Color(0xFFEBEBEB))
-                            .noRippleClickable {
-                                // login with facebook
-                                googleLogin()
-                            }
-                    ) {
-                        Image(
-                            painter = painterResource(id = R.drawable.rider_pro_google),
-                            contentDescription = "Google",
-                            modifier = Modifier.fillMaxSize()
-                        )
-                    }
+                CompositionLocalProvider(LocalMinimumInteractiveComponentEnforcement provides false) {
+                    Checkbox(
+                        checked = rememberMe,
+                        onCheckedChange = {
+                            rememberMe = it
+                        },
+                        colors = CheckboxDefaults.colors(
+                            checkedColor = Color.Black
+                        ),
+                    )
+                    Text(
+                        stringResource(R.string.remember_me),
+                        modifier = Modifier.padding(start = 8.dp),
+                        fontSize = 12.sp
+                    )
+                    Spacer(modifier = Modifier.weight(1f))
+                    Text(stringResource(R.string.forgot_password), fontSize = 12.sp)
                 }
             }
+            Spacer(modifier = Modifier.height(64.dp))
+            ActionButton(
+                modifier = Modifier
+                    .width(345.dp)
+                    .height(48.dp),
+                text = stringResource(R.string.lets_ride_upper),
+                backgroundImage = R.mipmap.rider_pro_signup_red_bg
+            ) {
+                onLogin()
+            }
 
+            Spacer(modifier = Modifier.height(48.dp))
+            Text(stringResource(R.string.or_login_with), color = Color(0xFF999999))
+            Spacer(modifier = Modifier.height(16.dp))
+            Row {
+                Box(
+                    modifier = Modifier
+                        .size(96.dp)
+                        .padding(16.dp)
+                        .border(2.dp, Color(0xFFEBEBEB))
+                        .noRippleClickable {
+                            // login with facebook
+                            googleLogin()
+                        }
+                ) {
+                    Image(
+                        painter = painterResource(id = R.drawable.rider_pro_google),
+                        contentDescription = "Google",
+                        modifier = Modifier.fillMaxSize()
+                    )
+                }
+            }
         }
+
     }
 
+
 }
 
diff --git a/app/src/main/res/values-zh/strings.xml b/app/src/main/res/values-zh/strings.xml
index a813498..0f2bdc3 100644
--- a/app/src/main/res/values-zh/strings.xml
+++ b/app/src/main/res/values-zh/strings.xml
@@ -29,4 +29,8 @@
     <string name="text_error_password_required">密码是必填项</string>
     <string name="text_hint_email">输入邮箱</string>
     <string name="text_hint_password">输入密码</string>
+    <string name="sign_in_upper">注册</string>
+    <string name="sign_in_with_email">使用邮箱注册</string>
+    <string name="sign_in_with_google">使用 Google 账号登录</string>
+    <string name="back_upper">返回</string>
 </resources>
\ No newline at end of file
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index 86ed4ca..42f69da 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -28,4 +28,8 @@
     <string name="text_error_password_required">Password is required</string>
     <string name="text_hint_email">Enter your email</string>
     <string name="text_hint_password">Enter your password</string>
+    <string name="sign_in_upper">SIGN IN</string>
+    <string name="sign_in_with_email">CONTINUE WITH EMAIL</string>
+    <string name="sign_in_with_google">CONTINUE WITH GOOGLE</string>
+    <string name="back_upper">BACK</string>
 </resources>
\ No newline at end of file