diff --git a/.env b/.env
index 0c0f604..faa6055 100644
--- a/.env
+++ b/.env
@@ -1 +1,3 @@
-VITE_TOKEN_NAME = 'dsc_token'
\ No newline at end of file
+VITE_TOKEN_NAME = 'dsc_token'
+VITE_REFRESH_TOKEN_NAME = 'dsc_refresh_token'
+VITE_BASE_URL = 'http://192.168.0.235:3500'
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index cd0f660..5e6686a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@headlessui/react": "^2.2.0",
         "@material-tailwind/react": "^2.1.10",
         "@tanstack/react-query": "^5.62.8",
+        "axios": "^1.7.9",
         "formik": "^2.4.6",
         "i18next": "^24.2.0",
         "iconsax-react": "^0.0.8",
@@ -23,6 +24,7 @@
         "react-multi-date-picker": "^4.5.2",
         "react-otp-input": "^3.1.1",
         "react-router-dom": "^7.1.0",
+        "react-spinners": "^0.15.0",
         "react-toastify": "^11.0.2",
         "swiper": "^11.2.1",
         "tailwind-merge": "^2.5.5",
@@ -2227,6 +2229,12 @@
         "node": ">=10"
       }
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
     "node_modules/attr-accept": {
       "version": "2.2.5",
       "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.5.tgz",
@@ -2274,6 +2282,17 @@
         "postcss": "^8.1.0"
       }
     },
+    "node_modules/axios": {
+      "version": "1.7.9",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.9.tgz",
+      "integrity": "sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -2482,6 +2501,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/commander": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@@ -2583,6 +2614,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -2995,6 +3035,26 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.9",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
+      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/foreground-child": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz",
@@ -3012,6 +3072,20 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz",
+      "integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/formik": {
       "version": "2.4.6",
       "resolved": "https://registry.npmjs.org/formik/-/formik-2.4.6.tgz",
@@ -3625,6 +3699,27 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -4089,6 +4184,12 @@
       "integrity": "sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA==",
       "license": "MIT"
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -4330,6 +4431,16 @@
         "react-dom": ">=18"
       }
     },
+    "node_modules/react-spinners": {
+      "version": "0.15.0",
+      "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.15.0.tgz",
+      "integrity": "sha512-ZO3/fNB9Qc+kgpG3SfdlMnvTX6LtLmTnOogb3W6sXIaU/kZ1ydEViPfZ06kSOaEsor58C/tzXw2wROGQu3X2pA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/react-toastify": {
       "version": "11.0.2",
       "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-11.0.2.tgz",
diff --git a/package.json b/package.json
index 18cf539..6f87376 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "@headlessui/react": "^2.2.0",
     "@material-tailwind/react": "^2.1.10",
     "@tanstack/react-query": "^5.62.8",
+    "axios": "^1.7.9",
     "formik": "^2.4.6",
     "i18next": "^24.2.0",
     "iconsax-react": "^0.0.8",
@@ -25,6 +26,7 @@
     "react-multi-date-picker": "^4.5.2",
     "react-otp-input": "^3.1.1",
     "react-router-dom": "^7.1.0",
+    "react-spinners": "^0.15.0",
     "react-toastify": "^11.0.2",
     "swiper": "^11.2.1",
     "tailwind-merge": "^2.5.5",
diff --git a/src/App.tsx b/src/App.tsx
index 2399287..a76b0a6 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -54,9 +54,6 @@ const App: FC = () => {
 
   }, [])
 
-  console.log('us', isLogin);
-
-
   return (
     <BrowserRouter>
       <QueryClientProvider client={queryClient}>
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index fb4fc65..78b3796 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -1,5 +1,5 @@
 import { ButtonHTMLAttributes, FC, memo, ReactNode } from 'react'
-import ReactLoading from 'react-loading'
+import MoonLoader from "react-spinners/MoonLoader"
 import { XOR } from '../helpers/types'
 import { clx } from '../helpers/utils'
 
@@ -21,7 +21,7 @@ const Button: FC<Props> = memo((props: Props) => {
         <button {...props} className={`${buttonClass} ${props.className}`} >
             {
                 props.isLoading ?
-                    <ReactLoading type='spin' color={'white'} width={20} height={20} />
+                    <MoonLoader color="white" size={20} />
                     :
                     props.label || props.children
             }
diff --git a/src/config/axios.ts b/src/config/axios.ts
new file mode 100644
index 0000000..225c5f9
--- /dev/null
+++ b/src/config/axios.ts
@@ -0,0 +1,27 @@
+import axios from "axios";
+
+const axiosInstance = axios.create({
+  baseURL: import.meta.env.VITE_BASE_URL,
+});
+
+axiosInstance.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    if (error.response.status === 401) {
+      localStorage.removeItem(import.meta.env.VITE_TOKEN_NAME);
+      window.location.href = "/auth";
+    }
+    return Promise.reject(error);
+  }
+);
+
+axiosInstance.interceptors.request.use(async function (config) {
+  const token = localStorage.getItem(import.meta.env.VITE_TOKEN_NAME)
+    ? localStorage.getItem(import.meta.env.VITE_TOKEN_NAME)
+    : "";
+
+  config.headers.Authorization = "Bearer " + token;
+  return config;
+});
+
+export default axiosInstance;
diff --git a/src/config/func.ts b/src/config/func.ts
new file mode 100644
index 0000000..c16ba63
--- /dev/null
+++ b/src/config/func.ts
@@ -0,0 +1,4 @@
+export function isEmail(input: string): boolean {
+  const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+  return emailRegex.test(input);
+}
diff --git a/src/helpers/types.ts b/src/helpers/types.ts
index bb0dd63..d8f7039 100644
--- a/src/helpers/types.ts
+++ b/src/helpers/types.ts
@@ -5,6 +5,16 @@ export type XOR<T, U> = T | U extends object
   : T | U;
 
 export type ItemsSelectType = {
- value: any,
- label: string, 
-}
\ No newline at end of file
+  value: string;
+  label: string;
+};
+
+export type ErrorType = Error & {
+  response?: {
+    data?: {
+      error: {
+        message: string[];
+      };
+    };
+  };
+};
diff --git a/src/index.css b/src/index.css
index dc00132..1fd5cdc 100644
--- a/src/index.css
+++ b/src/index.css
@@ -126,3 +126,8 @@ tbody tr {
 .overflowX::-webkit-scrollbar {
   display: none;
 }
+
+.Toastify__toast {
+  direction: rtl;
+  font-family: "irancell" !important;
+}
diff --git a/src/langs/fa.json b/src/langs/fa.json
index 41674a0..87f4935 100644
--- a/src/langs/fa.json
+++ b/src/langs/fa.json
@@ -35,7 +35,8 @@
     "enter_password_step3": "رمز عبور را وارد کنید",
     "enter_your_password": "رمز عبور خود را وارد کنید.",
     "forgot_password": "فراموشی رمز عبور",
-    "login_with_otp": "ورود با رمز عبور یکبار مصرف"
+    "login_with_otp": "ورود با رمز عبور یکبار مصرف",
+    "otp_sent": "کد تایید ارسال شد"
   },
   "errors": {
     "required": "این فیلد اجباری می باشد"
diff --git a/src/pages/auth/Login.tsx b/src/pages/auth/Login.tsx
index 04c9063..13875fe 100644
--- a/src/pages/auth/Login.tsx
+++ b/src/pages/auth/Login.tsx
@@ -8,7 +8,9 @@ import LoginStep3 from './components/LoginStep3'
 
 const Login: FC = () => {
 
-    const { stepLogin } = useAuthStore()
+    const { stepLogin, phone, email } = useAuthStore()
+
+    console.log(phone, email, stepLogin);
 
 
     return (
@@ -23,11 +25,13 @@ const Login: FC = () => {
                                 stepLogin === 1 ?
                                     <LoginStep1 />
                                     :
-                                    stepLogin === 2 ?
+                                    stepLogin === 2 && !!phone ?
                                         <LoginStep2 />
-                                        : stepLogin === 3 ?
+                                        : stepLogin === 2 && !!email ?
                                             <LoginStep3 />
-                                            : null
+                                            : stepLogin === 3 ?
+                                                <LoginStep3 />
+                                                : null
                             }
                         </div>
 
diff --git a/src/pages/auth/components/LoginStep1.tsx b/src/pages/auth/components/LoginStep1.tsx
index 2951191..9330a59 100644
--- a/src/pages/auth/components/LoginStep1.tsx
+++ b/src/pages/auth/components/LoginStep1.tsx
@@ -9,11 +9,17 @@ import Error from '../../../components/Error'
 import Button from '../../../components/Button'
 import { Link } from 'react-router-dom'
 import { Pages } from '../../../config/Pages'
+import { isEmail } from '../../../config/func'
+import { useCheckHasAccount, useLoginWithOtp } from '../hooks/useAuthData'
+import { toast } from 'react-toastify'
+import { ErrorType } from '../../../helpers/types'
 
 const LoginStep1: FC = () => {
 
     const { t } = useTranslation('global')
-    const { setPhone, phone, setStepLogin } = useAuthStore()
+    const { setPhone, phone, setStepLogin, setEmail } = useAuthStore()
+    const loginWithOtp = useLoginWithOtp()
+    const checkHasAccount = useCheckHasAccount()
 
     const formik = useFormik<LoginType>({
         initialValues: {
@@ -24,8 +30,28 @@ const LoginStep1: FC = () => {
                 .required(t('errors.required'))
         }),
         onSubmit(values) {
-            setPhone(values.phone_email)
-            setStepLogin(2)
+            if (isEmail(values.phone_email)) {
+                setEmail(values.phone_email)
+                checkHasAccount.mutate({ email: values.phone_email }, {
+                    onSuccess() {
+                        setStepLogin(2)
+                    },
+                    onError(error: ErrorType) {
+                        toast.error(error?.response?.data?.error?.message[0])
+                    },
+                })
+            } else {
+                setPhone(values.phone_email)
+                loginWithOtp.mutate({ phone: values.phone_email }, {
+                    onSuccess() {
+                        setStepLogin(2)
+                        toast.success(t('auth.otp_sent'))
+                    },
+                    onError(error: ErrorType) {
+                        toast.error(error?.response?.data?.error?.message[0])
+                    },
+                })
+            }
         },
     })
 
@@ -65,6 +91,7 @@ const LoginStep1: FC = () => {
                 label={t('auth.next')}
                 className='mt-8'
                 onClick={() => formik.handleSubmit()}
+                isLoading={loginWithOtp.isPending || checkHasAccount.isPending}
             />
 
             <div className='mt-6 flex justify-center gap-2 items-center text-sm'>
diff --git a/src/pages/auth/components/LoginStep2.tsx b/src/pages/auth/components/LoginStep2.tsx
index 8acbb0b..0856d98 100644
--- a/src/pages/auth/components/LoginStep2.tsx
+++ b/src/pages/auth/components/LoginStep2.tsx
@@ -1,34 +1,49 @@
-import { FC, useState } from 'react'
+import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import { LoginType } from '../types/AuthTypes'
+import { OtpVerifyType } from '../types/AuthTypes'
 import { useFormik } from 'formik'
 import * as Yup from 'yup'
 import { useAuthStore } from '../store/AuthStore'
 import Button from '../../../components/Button'
 import OTPInput from 'react-otp-input'
 import { useCountDown } from '../../../hooks/useCountDown'
-import ArrowLeftIcon from '../../../assets/images/arrow-left.svg'
+// import ArrowLeftIcon from '../../../assets/images/arrow-left.svg'
 import { Pages } from '../../../config/Pages'
+import { useOtpVerify } from '../hooks/useAuthData'
+import { ErrorType } from '../../../helpers/types'
+import { toast } from 'react-toastify'
 
 const LoginStep2: FC = () => {
 
     const { t } = useTranslation('global')
-    const { setPhone, phone, setStepLogin } = useAuthStore()
-    const [otpValue, setOtpValue] = useState<string>()
+    const { phone, setStepLogin } = useAuthStore()
     const { value } = useCountDown(2, true)
+    const otpVerify = useOtpVerify()
 
-    const formik = useFormik<LoginType>({
+    const formik = useFormik<OtpVerifyType>({
         initialValues: {
-            phone_email: phone,
+            phone: phone,
+            code: ''
         },
         validationSchema: Yup.object({
-            phone_email: Yup.string()
+            code: Yup.string()
                 .required(t('errors.required'))
         }),
         onSubmit(values) {
-            setPhone(values.phone_email)
-            localStorage.setItem(import.meta.env.VITE_TOKEN_NAME, 'token')
-            window.location.href = Pages.dashboard
+            const params: OtpVerifyType = {
+                phone: phone,
+                code: values.code
+            }
+            otpVerify.mutate(params, {
+                onSuccess(data) {
+                    localStorage.setItem(import.meta.env.VITE_TOKEN_NAME, data?.data?.accessToken?.token)
+                    localStorage.setItem(import.meta.env.VITE_REFRESH_TOKEN_NAME, data?.data?.refreshToken?.token)
+                    window.location.href = Pages.dashboard
+                },
+                onError(error: ErrorType) {
+                    toast.error(error?.response?.data?.error?.message[0])
+                },
+            })
         },
     })
 
@@ -59,14 +74,19 @@ const LoginStep2: FC = () => {
                 <div className='mt-2 w-full flex justify-center dltr otp'>
                     <OTPInput
                         shouldAutoFocus
-                        value={otpValue}
+                        value={formik.values.code}
                         numInputs={5}
                         inputType='tel'
-                        onChange={(otp: string) => setOtpValue(otp)}
+                        onChange={(otp: string) => formik.setFieldValue('code', otp)}
                         renderInput={(props) => <input {...props} className='w-full h-[50px] flex-1 mx-2  bg-white border rounded-2.5' />}
                     />
                 </div>
 
+                {
+                    formik.touched.code && formik.errors.code &&
+                    <div className='text-xs mt-2 text-red-500'>{formik.errors.code}</div>
+                }
+
                 <div className='flex mt-4 justify-end'>
                     <div className='flex gap-1 text-description text-xs'>
                         <div>{value}</div>
@@ -81,14 +101,15 @@ const LoginStep2: FC = () => {
                 label={t('auth.login')}
                 className='mt-8'
                 onClick={() => formik.handleSubmit()}
+                isLoading={otpVerify.isPending}
             />
 
-            <div onClick={() => setStepLogin(3)} className='mt-6 cursor-pointer flex gap-2 items-center text-sm'>
+            {/* <div onClick={() => setStepLogin(3)} className='mt-6 cursor-pointer flex gap-2 items-center text-sm'>
                 <p className='text-description'>
                     {t('auth.login_with_password')}
                 </p>
                 <img src={ArrowLeftIcon} className='w-5' />
-            </div>
+            </div> */}
         </div>
     )
 }
diff --git a/src/pages/auth/components/LoginStep3.tsx b/src/pages/auth/components/LoginStep3.tsx
index 041f776..7d82016 100644
--- a/src/pages/auth/components/LoginStep3.tsx
+++ b/src/pages/auth/components/LoginStep3.tsx
@@ -1,7 +1,7 @@
 import { FC } from 'react'
 import Input from '../../../components/Input'
 import { useTranslation } from 'react-i18next'
-import { LoginPasswordType } from '../types/AuthTypes'
+import { LoginWithPasswordType } from '../types/AuthTypes'
 import { useFormik } from 'formik'
 import * as Yup from 'yup'
 import { useAuthStore } from '../store/AuthStore'
@@ -10,24 +10,36 @@ import Button from '../../../components/Button'
 import { Link } from 'react-router-dom'
 import { Pages } from '../../../config/Pages'
 import ArrowLeftIcon from '../../../assets/images/arrow-left.svg'
+import { useLoginWithPassword } from '../hooks/useAuthData'
+import { toast } from 'react-toastify'
+import { ErrorType } from '../../../helpers/types'
 
 const LoginStep3: FC = () => {
 
     const { t } = useTranslation('global')
-    const { setStepLogin } = useAuthStore()
+    const { setStepLogin, email } = useAuthStore()
+    const loginWithPassword = useLoginWithPassword()
 
-    const formik = useFormik<LoginPasswordType>({
+    const formik = useFormik<LoginWithPasswordType>({
         initialValues: {
             password: '',
+            email: email
         },
         validationSchema: Yup.object({
-            phone_email: Yup.string()
+            password: Yup.string()
                 .required(t('errors.required'))
         }),
         onSubmit(values) {
-            console.log(values)
-            localStorage.setItem(import.meta.env.VITE_TOKEN_NAME, 'token')
-            window.location.href = Pages.dashboard
+            loginWithPassword.mutate(values, {
+                onSuccess(data) {
+                    localStorage.setItem(import.meta.env.VITE_TOKEN_NAME, data?.data?.accessToken?.token)
+                    localStorage.setItem(import.meta.env.VITE_REFRESH_TOKEN_NAME, data?.data?.refreshToken?.token)
+                    window.location.href = Pages.dashboard
+                },
+                onError(error: ErrorType) {
+                    toast.error(error?.response?.data?.error?.message[0])
+                },
+            })
 
         },
     })
@@ -51,6 +63,7 @@ const LoginStep3: FC = () => {
                     name='password'
                     onChange={formik.handleChange}
                     value={formik.values.password}
+                    error_text={formik.touched.password && formik.errors.password ? formik.errors.password : ''}
                 />
 
                 {
diff --git a/src/pages/auth/hooks/useAuthData.tsx b/src/pages/auth/hooks/useAuthData.tsx
new file mode 100644
index 0000000..d20ff89
--- /dev/null
+++ b/src/pages/auth/hooks/useAuthData.tsx
@@ -0,0 +1,27 @@
+import { useMutation } from '@tanstack/react-query';
+import * as api from '../service/AuthService'
+import { CheckHasAccountType, LoginWithOtpType, LoginWithPasswordType, OtpVerifyType } from '../types/AuthTypes';
+
+export const useLoginWithPassword = () => {
+    return useMutation({
+        mutationFn: (variables: LoginWithPasswordType) => api.loginWithPassword(variables),
+    });
+};
+
+export const useLoginWithOtp = () => {
+    return useMutation({
+        mutationFn: (variables: LoginWithOtpType) => api.loginWithOtp(variables),
+    });
+};
+
+export const useOtpVerify = () => {
+    return useMutation({
+        mutationFn: (variables: OtpVerifyType) => api.otpVerify(variables),
+    });
+};
+
+export const useCheckHasAccount = () => {
+    return useMutation({
+        mutationFn: (variables: CheckHasAccountType) => api.checkHasAccount(variables),
+    });
+};
\ No newline at end of file
diff --git a/src/pages/auth/service/AuthService.ts b/src/pages/auth/service/AuthService.ts
new file mode 100644
index 0000000..ceaaf6e
--- /dev/null
+++ b/src/pages/auth/service/AuthService.ts
@@ -0,0 +1,26 @@
+import axios from "../../../config/axios";
+import {
+  CheckHasAccountType,
+  LoginWithOtpType,
+  LoginWithPasswordType,
+  OtpVerifyType,
+} from "../types/AuthTypes";
+
+export const loginWithPassword = async (params: LoginWithPasswordType) => {
+  const { data } = await axios.post(`/auth/login/password`, params);
+  return data;
+};
+
+export const loginWithOtp = async (params: LoginWithOtpType) => {
+  const { data } = await axios.post(`/auth/otp/send`, params);
+  return data;
+};
+
+export const otpVerify = async (params: OtpVerifyType) => {
+  const { data } = await axios.post(`/auth/otp/verify`, params);
+  return data;
+};
+export const checkHasAccount = async (params: CheckHasAccountType) => {
+  const { data } = await axios.post(`/auth/check`, params);
+  return data;
+};
diff --git a/src/pages/auth/store/AuthStore.ts b/src/pages/auth/store/AuthStore.ts
index a6cb566..de766e3 100644
--- a/src/pages/auth/store/AuthStore.ts
+++ b/src/pages/auth/store/AuthStore.ts
@@ -6,6 +6,10 @@ export const useAuthStore = create<AuthStoreType>((set) => ({
   setPhone(value) {
     set({ phone: value });
   },
+  email: "",
+  setEmail(value) {
+    set({ email: value });
+  },
   stepLogin: 1,
   setStepLogin(value) {
     set({ stepLogin: value });
diff --git a/src/pages/auth/types/AuthTypes.ts b/src/pages/auth/types/AuthTypes.ts
index d3522b3..9d38abc 100644
--- a/src/pages/auth/types/AuthTypes.ts
+++ b/src/pages/auth/types/AuthTypes.ts
@@ -1,3 +1,5 @@
+import { XOR } from "../../../helpers/types";
+
 export type LoginType = {
   phone_email: string;
 };
@@ -8,6 +10,28 @@ export type LoginPasswordType = {
 export type AuthStoreType = {
   phone: string;
   setPhone: (value: string) => void;
+  email: string;
+  setEmail: (value: string) => void;
   stepLogin: number;
   setStepLogin: (value: number) => void;
 };
+
+export type LoginWithPasswordType = XOR<
+  { email: string },
+  { phone: number }
+> & {
+  password: string;
+};
+
+export type LoginWithOtpType = {
+  phone: string;
+};
+
+export type OtpVerifyType = {
+  phone: string;
+  code: string;
+};
+
+export type CheckHasAccountType = {
+  email: string;
+};