diff --git a/src/app/auth/page.tsx b/src/app/auth/page.tsx
index b8bf877..b6abad6 100644
--- a/src/app/auth/page.tsx
+++ b/src/app/auth/page.tsx
@@ -2,43 +2,71 @@
 import { NextPage } from 'next'
 import Image from 'next/image';
 import LoginStep1 from './components/LoginStep1';
+import { useAuthStore } from './store/AuthStore';
+import { Messages1 } from 'iconsax-react';
+import { clx } from '@/helpers/utils';
 
 const LoginPage: NextPage = () => {
 
+    const { step, phone } = useAuthStore()
+
     return (
         <div className='flex justify-center items-center h-screen'>
             <div className='h-[450px] w-[1000px] border border-border rounded-xl flex p-10 gap-32'>
                 <div className='flex-1'>
                     <div className='text-primary'>
-                        1/2
+                        {step}/2
                     </div>
                     <div className='w-full h-0.5  mt-4 flex items-center'>
                         <div className='size-2 rounded-full bg-primary'></div>
                         <div className='w-1/2 h-full bg-primary'></div>
                         <div className='size-2 rounded-full bg-primary'></div>
 
-                        <div className='w-1/2 h-full bg-primary/40'></div>
-                        <div className='size-2 rounded-full bg-primary/40'></div>
+                        <div className={clx(
+                            'w-1/2 h-full bg-primary/40',
+                            step === 2 && 'bg-primary'
+                        )}></div>
+                        <div className={clx(
+                            'size-2 rounded-full bg-primary/40',
+                            step === 2 && 'bg-primary'
+                        )}></div>
                     </div>
 
-                    <div className='mt-20 flex gap-6'>
-                        <Image
-                            src='/images/mobile.svg'
-                            width={80}
-                            height={131}
-                            alt='phone'
-                        />
+                    {
+                        step === 1 ?
+                            <div className='mt-20 flex gap-6'>
+                                <Image
+                                    src='/images/mobile.svg'
+                                    width={80}
+                                    height={131}
+                                    alt='phone'
+                                />
 
-                        <div>
-                            <div className='text-[#8B8B8B] text-xl'>Wellcome</div>
-                            <div className='mt-2 font-black text-4xl text-[#4F4F4F]'>
-                                خوش آمدید
+                                <div>
+                                    <div className='text-[#8B8B8B] text-xl'>Wellcome</div>
+                                    <div className='mt-2 font-black text-4xl text-[#4F4F4F]'>
+                                        خوش آمدید
+                                    </div>
+                                    <p className='mt-4 text-[#8B8B8B] text-sm'>
+                                        برای دریافت کد فعالسازی شماره همراه یا ایمیل خود را وارد نمایید
+                                    </p>
+                                </div>
                             </div>
-                            <p className='mt-4 text-[#8B8B8B] text-sm'>
-                                برای دریافت کد فعالسازی شماره همراه یا ایمیل خود را وارد نمایید
-                            </p>
-                        </div>
-                    </div>
+                            :
+                            <div className='mt-20 flex gap-6'>
+                                <Messages1 size={90} color='#CCCCCC' />
+
+                                <div>
+                                    <div className='text-[#8B8B8B] text-xl'>activation code</div>
+                                    <div className='mt-2 font-black text-4xl text-[#4F4F4F]'>
+                                        كد فعالسازی
+                                    </div>
+                                    <p className='mt-4 text-[#8B8B8B] text-sm'>
+                                        کد فعالسازی به شماره همراه {phone} ارسال شد
+                                    </p>
+                                </div>
+                            </div>
+                    }
                 </div>
 
                 <LoginStep1 />