diff --git a/src/components/AuthRedirect.tsx b/src/components/AuthRedirect.tsx
index ab99ad9..e4ff1f1 100644
--- a/src/components/AuthRedirect.tsx
+++ b/src/components/AuthRedirect.tsx
@@ -1,19 +1,27 @@
 'use client'
 
+// React Imports
+import { useEffect } from 'react'
+
 // Next Imports
-import { redirect, usePathname } from 'next/navigation'
+import { usePathname, useRouter } from 'next/navigation'
 
 // Config Imports
 import themeConfig from '@configs/themeConfig'
 
 const AuthRedirect = () => {
   const pathname = usePathname()
+  const router = useRouter()
 
-  const redirectUrl = `/login?redirectTo=${pathname}`
-  const login = `/login`
-  const homePage = themeConfig.homePageUrl
+  useEffect(() => {
+    const login = '/login'
+    const homePage = themeConfig.homePageUrl
+    const redirectUrl =
+      pathname === login ? login : pathname === homePage ? login : `/login?redirectTo=${pathname}`
+    router.replace(redirectUrl)
+  }, [pathname, router])
 
-  return redirect(pathname === login ? login : pathname === homePage ? login : redirectUrl)
+  return null
 }
 
 export default AuthRedirect
diff --git a/src/views/Login.tsx b/src/views/Login.tsx
index c11ffae..0942482 100644
--- a/src/views/Login.tsx
+++ b/src/views/Login.tsx
@@ -155,8 +155,9 @@ const Login = ({ mode }: { mode: SystemMode }) => {
     }
   }
 
-  const onOtpSubmit = async () => {
-    if (otp.length !== 6) {
+  const onOtpSubmit = async (otpValue?: string) => {
+    const code = otpValue ?? otp
+    if (code.length !== 6) {
       setErrorState({ message: t('errors.incompleteOtp') })
       return
     }
@@ -166,7 +167,7 @@ const Login = ({ mode }: { mode: SystemMode }) => {
 
     try {
       const phoneNumber = getValues('phone_number')
-      await login(phoneNumber, otp, tempToken)
+      await login(phoneNumber, code, tempToken)
       
       // Redirect on successful login
       const redirectURL = searchParams.get('redirectTo') ?? '/'
@@ -265,9 +266,12 @@ const Login = ({ mode }: { mode: SystemMode }) => {
                 <OtpContainer>
                   <OTPInput
                     value={otp}
-                    onChange={setOtp}
+                    onChange={(value) => {
+                      setOtp(value)
+                      if (value.length === 6) onOtpSubmit(value)
+                    }}
                     maxLength={6}
-                    containerClassName='flex gap-2'
+                    containerClassName='flex gap-2 ltr:flex-row rtl:flex-row-reverse'
                     render={({ slots }) => (
                       <>
                         {slots.map((slot, idx) => (
@@ -290,7 +294,7 @@ const Login = ({ mode }: { mode: SystemMode }) => {
                   />
                 </OtpContainer>
               </div>
-              <Button fullWidth variant='contained' onClick={onOtpSubmit} disabled={isLoading || otp.length !== 6}>
+              <Button fullWidth variant='contained' onClick={() => onOtpSubmit()} disabled={isLoading || otp.length !== 6}>
                 {isLoading ? <CircularProgress size={24} /> : t('verifyOtp')}
               </Button>
               <Button fullWidth variant='text' onClick={handleBackToPhone} disabled={isLoading}>