diff --git a/src/components/forms/forgot-password-form.tsx b/src/components/forms/forgot-password-form.tsx
index 0639d8f..c843ee4 100644
--- a/src/components/forms/forgot-password-form.tsx
+++ b/src/components/forms/forgot-password-form.tsx
@@ -19,7 +19,7 @@ export const ForgotPasswordForm = () => {
 
     return (
         <form onSubmit={handleSubmit(handleForgotSubmit)}
-            className="w-fit xl:w-1/2 xl:p-0 p-10 flex flex-col bg-auth-form justify-center items-center gap-y-[42px] rounded-3xl">
+            className="w-full sm:w-fit sm:min-w-[500px] xl:w-1/2 xl:p-0 p-10 flex flex-col bg-auth-form justify-center items-center gap-y-[42px] rounded-3xl">
             <img src="/svgs/logo/logo.svg" alt="logo" className="auth-logo-size" />
             <div className="flex flex-col xl:-mr-24 w-full md:w-[400px]">
                 <div className="flex flex-col gap-y-5">
diff --git a/src/components/forms/login-form.tsx b/src/components/forms/login-form.tsx
index e81d047..4e5e25d 100644
--- a/src/components/forms/login-form.tsx
+++ b/src/components/forms/login-form.tsx
@@ -20,7 +20,7 @@ export const LoginForm = () => {
     }
     return (
         <form onSubmit={handleSubmit(handleLoginSubmit)}
-            className="w-fit sm:min-w-[500px] xl:w-1/2 xl:p-0 p-10 flex flex-col bg-auth-form justify-center items-center gap-y-[42px] rounded-3xl">
+            className="w-full sm:w-fit sm:min-w-[500px] xl:w-1/2 xl:p-0 p-10 flex flex-col bg-auth-form justify-center items-center gap-y-[42px] rounded-3xl">
             <img src="/svgs/logo/logo.svg" alt="logo" className="auth-logo-size" />
             <div className="flex flex-col xl:-mr-24 w-full md:w-[400px]">
                 <div className="flex flex-col gap-y-5">
diff --git a/src/components/forms/login-with-code-form.tsx b/src/components/forms/login-with-code-form.tsx
index edb3faa..9607212 100644
--- a/src/components/forms/login-with-code-form.tsx
+++ b/src/components/forms/login-with-code-form.tsx
@@ -16,7 +16,7 @@ export const LoginWithCodeForm = () => {
     }
     return (
         <form onSubmit={handleSubmit(handleLoginWithCode)}
-            className="w-fit xl:w-1/2 xl:p-0 p-10 flex flex-col bg-auth-form justify-center items-center gap-y-[42px] rounded-3xl">
+            className="w-full sm:w-fit sm:min-w-[500px] xl:w-1/2 xl:p-0 p-10 flex flex-col bg-auth-form justify-center items-center gap-y-[42px] rounded-3xl">
             <img src="/svgs/logo/logo.svg" alt="logo" className="auth-logo-size" />
             <div className="flex flex-col xl:-mr-24 w-full md:w-[400px]">
                 <div className="flex flex-col gap-y-5">
diff --git a/src/components/forms/register-form.tsx b/src/components/forms/register-form.tsx
index 54de7a3..2618942 100644
--- a/src/components/forms/register-form.tsx
+++ b/src/components/forms/register-form.tsx
@@ -17,7 +17,7 @@ export const RegisterForm = () => {
     }
     return (
         <form onSubmit={handleSubmit(handleRegister)}
-            className="w-fit sm:min-w-[500px] max-h-full overflow-y-auto xl:w-1/2 xl:p-0 xl:py-5 p-10 flex flex-col bg-auth-form items-center  gap-y-[42px] rounded-3x rounded-3xl">
+            className="w-full sm:w-fit sm:min-w-[500px] max-h-screen overflow-y-auto xl:w-1/2 xl:p-0 xl:py-5 p-10 flex flex-col bg-auth-form items-center  gap-y-[42px] rounded-3x rounded-3xl">
             <img src="/svgs/logo/logo.svg" alt="logo" className="auth-logo-size" />
             <div className="flex flex-col w-full md:w-[400px]">
                 <div className="flex flex-col gap-y-5">
diff --git a/src/components/ui/auth/layout.tsx b/src/components/ui/auth/layout.tsx
index e732169..4481923 100644
--- a/src/components/ui/auth/layout.tsx
+++ b/src/components/ui/auth/layout.tsx
@@ -3,7 +3,7 @@ import { Outlet } from "react-router-dom"
 export const AuthLayout = () => {
     return (
         <section
-            className="flex flex-row h-screen p-5 justify-center items-center xl:justify-stretch xl:items-stretch max-h-[750px]">
+            className="flex flex-row min-h-screen p-5 justify-center items-center xl:justify-stretch xl:items-stretch max-h-[750px] overflow-y-hidden">
             <Outlet />
         </section>
     )
diff --git a/src/pages/auth/forgot-password.tsx b/src/pages/auth/forgot-password.tsx
index fec8f6e..f3b7afc 100644
--- a/src/pages/auth/forgot-password.tsx
+++ b/src/pages/auth/forgot-password.tsx
@@ -4,7 +4,7 @@ export const ForgotPassword = () => {
     return (
         <>
             <ForgotPasswordForm />
-            <div className="hidden xl:flex w-1/2 h-full justify-center items-center">
+            <div className="hidden xl:flex w-1/2 h-screen justify-center items-center">
                 <img src="/svgs/auth/forgot-password.svg" alt="forgot password" className="auth-image-desktop" />
             </div>
         </>
diff --git a/src/pages/auth/login-with-code.tsx b/src/pages/auth/login-with-code.tsx
index 1d06985..a129094 100644
--- a/src/pages/auth/login-with-code.tsx
+++ b/src/pages/auth/login-with-code.tsx
@@ -4,7 +4,7 @@ export const LoginWithCode = () => {
     return (
         <>
             <LoginWithCodeForm />
-            <div className="hidden xl:flex w-1/2 h-full justify-center items-center">
+            <div className="hidden xl:flex w-1/2 h-screen justify-center items-center">
                 <img src="/svgs/auth/login-with-code.svg" alt="login with code" className="auth-image-desktop" />
             </div>
         </>
diff --git a/src/pages/auth/login.tsx b/src/pages/auth/login.tsx
index 2596107..edf6f13 100644
--- a/src/pages/auth/login.tsx
+++ b/src/pages/auth/login.tsx
@@ -5,7 +5,7 @@ export const Login = () => {
     return (
         <>
             <LoginForm />
-            <div className="hidden xl:flex w-1/2 h-full justify-center items-center">
+            <div className="hidden xl:flex w-1/2 h-screen justify-center items-center">
                 <img src="/svgs/auth/login.svg" alt="login" className="auth-image-desktop" />
             </div>
         </>
diff --git a/src/pages/auth/register.tsx b/src/pages/auth/register.tsx
index c35887d..9b0b987 100644
--- a/src/pages/auth/register.tsx
+++ b/src/pages/auth/register.tsx
@@ -4,7 +4,7 @@ export const Register = () => {
     return (
         <>
             <RegisterForm />
-            <div className="hidden xl:flex w-1/2 h-full justify-center items-center">
+            <div className="hidden xl:flex w-1/2 h-screen justify-center items-center">
                 <img src="/svgs/auth/register.svg" alt="register" className="auth-image-desktop" />
             </div>
         </>
diff --git a/src/pages/auth/reset-password-code.tsx b/src/pages/auth/reset-password-code.tsx
index 90a9a3e..4479877 100644
--- a/src/pages/auth/reset-password-code.tsx
+++ b/src/pages/auth/reset-password-code.tsx
@@ -6,7 +6,7 @@ export const ResetPasswordCode = () => {
     return (
         <React.Fragment>
             <ResetpasswordCodeForm />
-            <div className="hidden xl:flex w-1/2 h-full justify-center items-center">
+            <div className="hidden xl:flex w-1/2 h-screen justify-center items-center">
                 <img src="/svgs/auth/reset-password-code.svg" alt="send code reset password" className="auth-image-desktop" />
             </div>
         </React.Fragment>
diff --git a/src/pages/auth/reset-password.tsx b/src/pages/auth/reset-password.tsx
index 8905420..ed9334c 100644
--- a/src/pages/auth/reset-password.tsx
+++ b/src/pages/auth/reset-password.tsx
@@ -5,7 +5,7 @@ export const ResetPassword = () => {
     return (
         <React.Fragment>
             <ResetPasswordForm />
-            <div className="hidden xl:flex w-1/2 h-full justify-center items-center">
+            <div className="hidden xl:flex w-1/2 h-screen justify-center items-center">
                 <img src="/svgs/auth/reset-password.svg" alt="reset password" className="auth-image-desktop" />
             </div>
         </React.Fragment>
diff --git a/src/pages/auth/send-code.tsx b/src/pages/auth/send-code.tsx
index bd34b77..54c209d 100644
--- a/src/pages/auth/send-code.tsx
+++ b/src/pages/auth/send-code.tsx
@@ -5,7 +5,7 @@ export const SendCode = () => {
     return (
         <React.Fragment>
             <SendCodeForm />
-            <div className="hidden xl:flex w-1/2 h-full justify-center items-center">
+            <div className="hidden xl:flex w-1/2 h-screen justify-center items-center">
                 <img src="/svgs/auth/send-code.svg" alt="send code" className="auth-image-desktop" />
             </div>
         </React.Fragment>
diff --git a/tailwind.config.js b/tailwind.config.js
index 20165d1..a4939ef 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -9,7 +9,8 @@ module.exports = {
         "auth-form": "#F7F7F9",
         "primary-text-color": "#11212D",
         "secondary-text-color": "#777577",
-        "primary-color": "#015699"
+        "primary-color": "#015699",
+        "secondary-color": "#E6E8EA"
       }
     },
   },