diff --git a/src/components/common/ModalAuthenticate/ModalAuthenticate.tsx b/src/components/common/ModalAuthenticate/ModalAuthenticate.tsx
index 31ca3fb81..b35258da5 100644
--- a/src/components/common/ModalAuthenticate/ModalAuthenticate.tsx
+++ b/src/components/common/ModalAuthenticate/ModalAuthenticate.tsx
@@ -1,5 +1,5 @@
 import classNames from 'classnames'
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import ModalCommon from '../ModalCommon/ModalCommon'
 import FormLogin from './components/FormLogin/FormLogin'
 import FormRegister from './components/FormRegister/FormRegister'
@@ -8,11 +8,20 @@ import s from './ModalAuthenticate.module.scss'
 interface Props {
     visible: boolean,
     closeModal: () => void,
+    mode?: '' | 'register'
 }
 
-const ModalAuthenticate = ({ visible, closeModal }: Props) => {
+const ModalAuthenticate = ({ visible, mode, closeModal }: Props) => {
     const [isLogin, setIsLogin] = useState<boolean>(true)
 
+    useEffect(() => {
+        if (mode === 'register') {
+            setIsLogin(false)
+        } else {
+            setIsLogin(true)
+        }
+    }, [mode])
+
     const onSwitch = () => {
         setIsLogin(!isLogin)
     }
diff --git a/src/components/modules/account/AccountSignIn/AccountSignIn.module.scss b/src/components/modules/account/AccountSignIn/AccountSignIn.module.scss
index 751dcf87f..e613992bc 100644
--- a/src/components/modules/account/AccountSignIn/AccountSignIn.module.scss
+++ b/src/components/modules/account/AccountSignIn/AccountSignIn.module.scss
@@ -22,11 +22,13 @@
         }
         .dontHaveAccount{
             @apply flex justify-center font-bold;
-            div{
-                color:var(--text-active);
-            }
-            span{
+            button {
+                all: unset;
                 color:var(--primary);
+                cursor: pointer;
+                &:focus-visible {
+                    outline: 2px solid var(--text-active);
+                }
             }
         }
   
diff --git a/src/components/modules/account/AccountSignIn/AccountSignIn.tsx b/src/components/modules/account/AccountSignIn/AccountSignIn.tsx
index d1de1dffe..32e7fa646 100644
--- a/src/components/modules/account/AccountSignIn/AccountSignIn.tsx
+++ b/src/components/modules/account/AccountSignIn/AccountSignIn.tsx
@@ -1,10 +1,11 @@
-import React,{memo} from "react"
+import React,{memo, useState} from "react"
 import { ButtonCommon, StaticImage } from "src/components/common";
 import s from './AccountSignIn.module.scss';
 import {LANGUAGE} from 'src/utils/language.utils';
 import AccountSignInImg from '../../../../../public/assets/images/accountsignin.png'
-import Link from 'next/link';
 import { useRouter } from 'next/router';
+import ModalAuthenticate from "src/components/common/ModalAuthenticate/ModalAuthenticate";
+import { useModalCommon } from "src/components/hooks";
 
 interface AccountSignIn {
 
@@ -12,12 +13,12 @@ interface AccountSignIn {
 
 const AccountSignIn = memo(({ } : AccountSignIn) => {
     const router = useRouter();
+    const { visible: visibleModalAuthen, closeModal: closeModalAuthen, openModal: openModalAuthen } = useModalCommon({ initialValue: false })
+    const [isModeAuthenSignup, setIsModeAuthenSignup] = useState<boolean>(false)
 
-    function openLogin(){
-        router.push({
-            pathname: `${router.pathname}/query`,
-            search: '?openLogin=true'
-          });
+    const openModalSignup = () => {
+        setIsModeAuthenSignup(true)
+        openModalAuthen()
     }
 
     return (
@@ -31,13 +32,14 @@ const AccountSignIn = memo(({ } : AccountSignIn) => {
                         Sign in to get more interesting <br/> features
                     </div>
                     <div className={s.btn}>
-                        <ButtonCommon size="default" type = 'primary' onClick={openLogin}>{LANGUAGE.BUTTON_LABEL.SIGNIN}</ButtonCommon>
+                        <ButtonCommon size="default" type = 'primary' onClick={openModalAuthen}>{LANGUAGE.BUTTON_LABEL.SIGNIN}</ButtonCommon>
                     </div>
                     <div className={s.dontHaveAccount}>
-                        <div>Don't have an account? &nbsp;</div> <span><a><Link href="/"> Create Account</Link></a></span>
+                        <div>Don't have an account? &nbsp;</div> <span><button onClick={openModalSignup}>Create Account</button></span>
                     </div>
                 </div>
             </div>
+            <ModalAuthenticate visible={visibleModalAuthen} closeModal={closeModalAuthen} mode={isModeAuthenSignup ? 'register' : ''} />
        </>
     )
 });