fix: seperated auth pages

src/features/auth/components/StepEnterPassword.tsx

@@ -5,6 +5,7 @@ import { EyeToggleIcon } from '@/components/icons/EyeToggleIcon'
 import InputField from '@/components/input/InputField'
 import { AUTH_PAGE_ELEMENT } from '@/enums'
 import Image from 'next/image'
+import Link from 'next/link'
 import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
@@ -88,14 +89,14 @@ function StepEnterPassword ({
             </button>
           </InputField>
           <div className='inline-flex justify-between items-center w-full pt-3'>
-            <button
+            <Link
+              href={'/auth/forgot-password'}
               id={AUTH_PAGE_ELEMENT.RESET_PASSWORD}
               type='button'
-              onClick={onClick}
               className='text-sm2 cursor-pointer'
             >
               {t('EnterPass.ButtonRecover')}
-            </button>
+            </Link>
 
             <div className='inline-flex justify-between items-center'>
               {/* TODO: customize checkbox */}