diff --git a/client/src/app/(auth)/layout.tsx b/client/src/app/(auth)/layout.tsx
index bbf40be2c..d787d73fb 100644
--- a/client/src/app/(auth)/layout.tsx
+++ b/client/src/app/(auth)/layout.tsx
@@ -1,46 +1,67 @@
 'use client';
 
 import { GoogleOAuthProvider } from '@react-oauth/google';
-import { useRouter } from 'next/navigation';
+import { usePathname, useRouter } from 'next/navigation';
 import { ReactNode, useState } from 'react';
-import { ArrowLeft, LogoBig } from '@/shared/assets';
-import { Button, Tabs } from '@/shared/ui';
+import { LogoBig } from '@/shared/assets';
+import { Flex, Tabs } from '@/shared/ui';
 import styles from './styles.module.scss';
 
 export default function AuthLayout({ children }: { children: ReactNode }) {
   const router = useRouter();
+  const pathname = usePathname();
   const options = ['Login', 'Sign Up'];
   const [tab, setTab] = useState(options[0]);
 
+  const handleBack = () => {
+    router.push('/');
+  };
   const handleChange = (option: string) => {
     setTab(option);
     router.push(`/${option.toLowerCase().replace(/\s/g, '')}`);
   };
 
-  const handleBack = () => {
-    router.push('/');
-  };
+  const header = (
+    <header className={styles.header}>
+      <div className={styles.logo} onClick={handleBack}>
+        <LogoBig />
+      </div>
+      <div className={styles.headerNormalizer}>
+        <Tabs options={options} currentTab={tab} onTabChange={handleChange} />
+      </div>
+    </header>
+  );
 
-  return (
-    <GoogleOAuthProvider clientId={`${process.env.NEXT_PUBLIC_GOOGLE_API_OAUTH_TOKEN}`}>
-      <div className={styles.container}>
-        <header className={styles.header}>
-          <div className={styles.headerNormalizer}>
-            <Button onClick={handleBack} typeBtn='tertiary' content='text_button'>
-              <ArrowLeft />
-              <span>Back</span>
-            </Button>
-          </div>
-          <div className={styles.logo}>
-            <LogoBig />
-          </div>
-          <div className={styles.headerNormalizer}>
-            <Tabs options={options} currentTab={tab} onTabChange={handleChange} />
-          </div>
-        </header>
+  const basic = (
+    <div className={styles.container}>
+      {header}
+      <Flex
+        className={styles.children}
+        direction='column'
+        justify='center'
+        align='center'
+        width='100%'
+      >
+        {children}
+      </Flex>
+    </div>
+  );
 
-        <div className={styles.children}>{children}</div>
+  const alternative = (
+    <Flex className={styles.alternative}>
+      <div className={styles.left}>
+        {header}
+        <Flex className={styles.children} direction='column' justify='center' align='center'>
+          {children}
+        </Flex>
       </div>
+      <img className={styles.right} src='https://dummyimage.com/4000x4000' alt='Main image' />
+    </Flex>
+  );
+
+  return (
+    <GoogleOAuthProvider clientId={`${process.env.NEXT_PUBLIC_GOOGLE_API_OAUTH_TOKEN}`}>
+      {pathname === '/login' || pathname === '/signup' ? alternative : basic}
     </GoogleOAuthProvider>
   );
 }
diff --git a/client/src/app/(auth)/login/confirmation/page.tsx b/client/src/app/(auth)/login/confirmation/page.tsx
deleted file mode 100644
index 9756c7b20..000000000
--- a/client/src/app/(auth)/login/confirmation/page.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { IllustrationStatus } from '../../ui';
-
-export default function Confirmation() {
-  return (
-    <IllustrationStatus mainText='Check your email' subText='We sent you the registration link' />
-  );
-}
diff --git a/client/src/app/(auth)/login/page.tsx b/client/src/app/(auth)/login/page.tsx
index dd7f14668..66554bd83 100644
--- a/client/src/app/(auth)/login/page.tsx
+++ b/client/src/app/(auth)/login/page.tsx
@@ -4,11 +4,11 @@ import { useGoogleLogin } from '@react-oauth/google';
 import { useRouter } from 'next/navigation';
 import { SubmitHandler, useForm } from 'react-hook-form';
 
-import { Button, Input, InputPassword, Typography } from '@/shared/ui';
+import { Button, Flex, Input, InputPassword, Typography } from '@/shared/ui';
 
 import { useState } from 'react';
 import styles from '../shared.module.scss';
-import { Github, Google, Login } from '@/shared/assets';
+import { Github, Google, LogoBig } from '@/shared/assets';
 
 interface LoginProps {
   email: string;
@@ -35,66 +35,64 @@ export default function LoginPage() {
 
   return (
     <form className={styles.container} onSubmit={handleSubmit(onSubmit)}>
-      <div className={styles.left}>
-        <div className={styles.interactive_container}>
-          <div className={styles.flex_wrapper}>
-            <Input
-              placeholder='Email'
-              {...register('email', { required: 'Email is required!' })}
-              type='email'
-              error={errors?.email ? errors.email.message : undefined}
-              value={email}
-              onChange={e => setEmail(e.target.value)}
+      <Flex gap={48} direction='column' maxWidth='370px' width='100%'>
+        <Flex className={styles.additional_logo} width='100%' justify='center' align='center'>
+          <LogoBig />
+        </Flex>
+        <Flex direction='column' gap={36}>
+          <Input
+            placeholder='Email'
+            {...register('email', { required: 'Email is required!' })}
+            type='email'
+            error={errors?.email ? errors.email.message : undefined}
+            value={email}
+            onChange={e => setEmail(e.target.value)}
+          />
+
+          <div>
+            <InputPassword
+              placeholder='Password'
+              {...register('password', {
+                required: 'Password is required!',
+                minLength: { value: 8, message: 'Minimum length is 8!' },
+              })}
+              error={errors?.password ? errors.password.message : undefined}
+              value={password}
+              onChange={e => setPassword(e.target.value)}
             />
-            <div>
-              <InputPassword
-                placeholder='Password'
-                {...register('password', {
-                  required: 'Password is required!',
-                  minLength: { value: 8, message: 'Minimum length is 8!' },
-                })}
-                error={errors?.password ? errors.password.message : undefined}
-                value={password}
-                onChange={e => setPassword(e.target.value)}
-              />
-              <div className={styles.forgot_link_wrapper}>
-                <div
-                  className={styles.forgot_link}
-                  onClick={() => router.push('/password/recover')}
-                >
-                  <Typography size='body_s' color='greenBright'>
-                    Forgot Password?
-                  </Typography>
-                </div>
+            <Flex margin='8px 0 0 0' justify='flex-end'>
+              <div className={styles.forgot_link} onClick={() => router.push('/password/recover')}>
+                <Typography size='body_s' color='greenBright'>
+                  Forgot Password?
+                </Typography>
               </div>
-            </div>
+            </Flex>
           </div>
-          <div className={styles.flex_wrapper__s}>
-            <Button type='submit'>Log in</Button>
-            <div className={styles.lines_container}>
-              <div className={styles.line} />
-              <Typography size='body_m' color='greyNormal'>
-                or log in with
-              </Typography>
-              <div className={styles.line} />
-            </div>
+        </Flex>
 
-            <div className={styles.buttons_container}>
-              <button className={styles.button} onClick={() => login()} type='button'>
-                <Google />
-              </button>
-              <button className={styles.button} type='button'>
-                <Github />
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div className={styles.right}>
-        <div className={styles.svg_container}>
-          <Login />
-        </div>
-      </div>
+        <Flex direction='column' gap={24}>
+          <Button type='submit'>Log in</Button>
+
+          <Flex justify='center' align='center' gap={13} className={styles.lines_container}>
+            <div className={styles.line} />
+            <Typography size='body_m' color='greyNormal'>
+              or log in with
+            </Typography>
+            <div className={styles.line} />
+          </Flex>
+
+          <Flex gap={8} justify='center' align='center'>
+            <Button typeBtn='secondary' size='l' width='100%' type='button' onClick={() => login()}>
+              <Google />
+              <Typography>Google</Typography>
+            </Button>
+            <Button typeBtn='secondary' size='l' width='100%' type='button'>
+              <Github />
+              <Typography>Github</Typography>
+            </Button>
+          </Flex>
+        </Flex>
+      </Flex>
     </form>
   );
 }
diff --git a/client/src/app/(auth)/password/confirmation/page.tsx b/client/src/app/(auth)/password/confirmation/page.tsx
index f01203f79..e792e207c 100644
--- a/client/src/app/(auth)/password/confirmation/page.tsx
+++ b/client/src/app/(auth)/password/confirmation/page.tsx
@@ -1,10 +1,18 @@
+'use client';
 import { IllustrationStatus } from '../../ui';
+import { useRouter } from 'next/navigation';
 
 export default function Confirmation() {
+  const router = useRouter();
+  const handleBack = () => {
+    router.push('/');
+  };
   return (
     <IllustrationStatus
       mainText='Check your email'
       subText='If your email is on file, we will send a reset link'
+      buttonText='Back to login'
+      buttonHandler={handleBack}
     />
   );
 }
diff --git a/client/src/app/(auth)/password/expired/page.tsx b/client/src/app/(auth)/password/expired/page.tsx
index 204eca55b..72ef31b86 100644
--- a/client/src/app/(auth)/password/expired/page.tsx
+++ b/client/src/app/(auth)/password/expired/page.tsx
@@ -1,10 +1,18 @@
+'use client';
 import { IllustrationStatus } from '../../ui';
+import { useRouter } from 'next/navigation';
 
 export default function Expired() {
+  const router = useRouter();
+  const handleBack = () => {
+    router.push('/');
+  };
   return (
     <IllustrationStatus
       mainText='Sorry, the link has expired'
       subText='This link expires after 15 minutes and can be used once.'
+      buttonText='Back to login'
+      buttonHandler={handleBack}
     />
   );
 }
diff --git a/client/src/app/(auth)/password/password.module.scss b/client/src/app/(auth)/password/password.module.scss
new file mode 100644
index 000000000..fae2c9a11
--- /dev/null
+++ b/client/src/app/(auth)/password/password.module.scss
@@ -0,0 +1,3 @@
+.text_align {
+    text-align: center;
+}
diff --git a/client/src/app/(auth)/password/recover/page.tsx b/client/src/app/(auth)/password/recover/page.tsx
index e5fcdee6b..c6fcc3fb1 100644
--- a/client/src/app/(auth)/password/recover/page.tsx
+++ b/client/src/app/(auth)/password/recover/page.tsx
@@ -3,10 +3,9 @@ import Link from 'next/link';
 import { useState } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { ArrowLeft } from '@/shared/assets';
-import { Button, Input, Typography } from '@/shared/ui';
-import styles from '../shared.module.scss';
+import { Button, Flex, Input, Typography } from '@/shared/ui';
+import styles from '../password.module.scss';
 import { useRouter } from 'next/navigation';
-import clsx from 'clsx';
 
 interface RecoverProps {
   email: string;
@@ -28,46 +27,40 @@ export default function Recover() {
   };
 
   return (
-    <form
-      className={clsx(styles.info, {
-        [styles.width470px]: true,
-      })}
-      onSubmit={handleSubmit(onSubmit)}
-    >
-      <div
-        className={clsx(styles.gapContainer, {
-          [styles.gap8px]: true,
-          [styles.alignText]: true,
-        })}
-      >
-        <Typography color='greenBright' size='heading_m'>
-          Recover Password
-        </Typography>
-        <Typography size='body_m'>
-          Enter the email you used to register and we will send you link to reset your password
-        </Typography>
-      </div>
-      <Input
-        placeholder='Email'
-        {...register('email', { required: 'Email is required!' })}
-        type='email'
-        error={errors?.email ? errors.email.message : undefined}
-        value={email}
-        onChange={e => setEmail(e.target.value)}
-      />
-      <div
-        className={clsx(styles.gapContainer, {
-          [styles.gap8px]: true,
-        })}
-      >
-        <Button width='100%' disabled={!email.length}>
-          Reset password
-        </Button>
-        <Button width='100%' typeBtn='secondary'>
-          <ArrowLeft />
-          <Link href='/login'>Back to Log in</Link>
-        </Button>
-      </div>
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <Flex direction='column' justify='center' align='center' gap={48} maxWidth='370px'>
+        <Flex
+          direction='column'
+          justify='center'
+          align='center'
+          gap={8}
+          className={styles.text_align}
+        >
+          <Typography color='greenBright' size='heading_m'>
+            Recover Password
+          </Typography>
+          <Typography size='body_m'>
+            Enter the email you used to register and we will send you link to reset your password
+          </Typography>
+        </Flex>
+        <Input
+          placeholder='Email'
+          {...register('email', { required: 'Email is required!' })}
+          type='email'
+          error={errors?.email ? errors.email.message : undefined}
+          value={email}
+          onChange={e => setEmail(e.target.value)}
+        />
+        <Flex direction='column' justify='center' align='center' gap={8} width='100%'>
+          <Button width='100%' disabled={!email.length}>
+            Reset password
+          </Button>
+          <Button width='100%' typeBtn='secondary' type='button'>
+            <ArrowLeft />
+            <Link href='/login'>Back to Log in</Link>
+          </Button>
+        </Flex>
+      </Flex>
     </form>
   );
 }
diff --git a/client/src/app/(auth)/password/shared.module.scss b/client/src/app/(auth)/password/shared.module.scss
deleted file mode 100644
index b93c5d063..000000000
--- a/client/src/app/(auth)/password/shared.module.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-.info {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: 48px;
-
-  &.width370px {
-    max-width: 370px;
-  }
-
-  &.width470px {
-    max-width: 470px;
-  }
-}
-
-.gapContainer {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-
-  &.gap8px {
-    gap: 8px;
-  }
-
-  &.gap36px {
-    gap: 36px;
-  }
-
-  &.alignText {
-    text-align: center;
-  }
-}
diff --git a/client/src/app/(auth)/password/update/[id]/[token]/page.tsx b/client/src/app/(auth)/password/update/[id]/[token]/page.tsx
index 06a16af6d..bcd5e91e0 100644
--- a/client/src/app/(auth)/password/update/[id]/[token]/page.tsx
+++ b/client/src/app/(auth)/password/update/[id]/[token]/page.tsx
@@ -1,9 +1,9 @@
 'use client';
-import styles from '../../../shared.module.scss';
-import { Button, InputPassword, Typography } from '@/shared/ui';
-import clsx from 'clsx';
+import styles from '../../../password.module.scss';
+import { Button, Flex, InputPassword, Typography } from '@/shared/ui';
 import { useState } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
+import { useRouter } from 'next/navigation';
 
 interface UpdateProps {
   password: string;
@@ -13,6 +13,7 @@ export default function Update({ params }: { params: { id: string; token: string
   const { id, token } = params;
   const [password, setPassword] = useState('');
   const [repeatPassword, setRepeatPassword] = useState('');
+  const router = useRouter();
 
   const {
     register,
@@ -22,54 +23,49 @@ export default function Update({ params }: { params: { id: string; token: string
 
   const onSubmit: SubmitHandler<UpdateProps> = data => {
     console.log(data, id, token);
+    router.push('/password/success');
   };
 
   return (
-    <form
-      className={clsx(styles.info, {
-        [styles.width370px]: true,
-      })}
-      onSubmit={handleSubmit(onSubmit)}
-    >
-      <div
-        className={clsx(styles.gapContainer, {
-          [styles.gap8px]: true,
-          [styles.alignText]: true,
-        })}
-      >
-        <Typography color='greenBright' size='heading_m'>
-          Recover Password
-        </Typography>
-        <Typography size='body_m'>
-          Enter a new password and confirm it by re-entering it in the appropriate fields
-        </Typography>
-      </div>
-      <div
-        className={clsx(styles.gapContainer, {
-          [styles.gap36px]: true,
-        })}
-      >
-        <InputPassword
-          placeholder='Password'
-          {...register('password', {
-            required: 'You must specify a password',
-            minLength: { value: 8, message: 'Password must have at least 8 characters' },
-          })}
-          error={errors?.password ? errors.password.message : undefined}
-          value={password}
-          onChange={e => setPassword(e.target.value)}
-        />
-        <InputPassword
-          placeholder='Confirm Password'
-          {...register('repeatPassword', {
-            validate: value => value === password || 'The passwords do not match',
-          })}
-          error={errors?.repeatPassword ? errors.repeatPassword.message : undefined}
-          value={repeatPassword}
-          onChange={e => setRepeatPassword(e.target.value)}
-        />
-      </div>
-      <Button width='100%'>Reset password</Button>
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <Flex direction='column' justify='center' align='center' gap={48} maxWidth='370px'>
+        <Flex
+          direction='column'
+          justify='center'
+          align='center'
+          gap={8}
+          className={styles.text_align}
+        >
+          <Typography color='greenBright' size='heading_m'>
+            Recover Password
+          </Typography>
+          <Typography size='body_m'>
+            Enter a new password and confirm it by re-entering it in the appropriate fields
+          </Typography>
+        </Flex>
+        <Flex direction='column' justify='center' align='center' gap={36} width='100%'>
+          <InputPassword
+            placeholder='Password'
+            {...register('password', {
+              required: 'You must specify a password',
+              minLength: { value: 8, message: 'Password must have at least 8 characters' },
+            })}
+            error={errors?.password ? errors.password.message : undefined}
+            value={password}
+            onChange={e => setPassword(e.target.value)}
+          />
+          <InputPassword
+            placeholder='Confirm Password'
+            {...register('repeatPassword', {
+              validate: value => value === password || 'The passwords do not match',
+            })}
+            error={errors?.repeatPassword ? errors.repeatPassword.message : undefined}
+            value={repeatPassword}
+            onChange={e => setRepeatPassword(e.target.value)}
+          />
+        </Flex>
+        <Button width='100%'>Reset password</Button>
+      </Flex>
     </form>
   );
 }
diff --git a/client/src/app/(auth)/shared.module.scss b/client/src/app/(auth)/shared.module.scss
index f46e5497f..dd84533e3 100644
--- a/client/src/app/(auth)/shared.module.scss
+++ b/client/src/app/(auth)/shared.module.scss
@@ -1,79 +1,23 @@
 .container {
   width: 100%;
   display: flex;
-  max-width: 1370px;
-
-  @media (width <= 1440px) {
-    max-width: 1104px;
-  }
-}
-
-.left {
-  display: flex;
-  flex-direction: column;
   justify-content: center;
-  width: 50%;
-
-  @media (width <= 1024px) {
-    align-items: center;
-    width: 100%;
-  }
-}
-
-.interactive_container {
-  width: 100%;
-  max-width: 370px;
-  display: flex;
-  gap: 48px;
-  flex-direction: column;
+  align-items: center;
 }
 
-.flex_wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 36px;
-
-  &__s {
+.additional_logo {
+  display: none;
+  @media (width <= 420px) {
     display: flex;
-    flex-direction: column;
-    gap: 24px;
-  }
-}
-
-.right {
-  width: 50%;
-  display: flex;
-  justify-content: flex-end;
-
-  @media (width <= 1024px) {
-    display: none;
   }
 }
 
-.svg_container {
-  max-width: 564px;
-  width: 100%;
-  max-height: 600px;
-  height: 100%;
-}
-
-.forgot_link_wrapper {
-  width: 100%;
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 8px;
-}
-
 .forgot_link {
   cursor: pointer;
 }
 
 .lines_container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
   white-space: nowrap;
-  gap: 13px;
 }
 
 .line {
@@ -81,22 +25,3 @@
   height: 1px;
   background: var(--grey-normal-color);
 }
-
-.buttons_container {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 16px;
-}
-
-.button {
-  background: var(--white-color);
-  cursor: pointer;
-  display: flex;
-  width: 48px;
-  height: 48px;
-  justify-content: center;
-  align-items: center;
-  border-radius: 10px;
-}
diff --git a/client/src/app/(auth)/signup/confirmation/page.tsx b/client/src/app/(auth)/signup/confirmation/page.tsx
index 9756c7b20..b5c534b6f 100644
--- a/client/src/app/(auth)/signup/confirmation/page.tsx
+++ b/client/src/app/(auth)/signup/confirmation/page.tsx
@@ -1,7 +1,18 @@
+'use client';
 import { IllustrationStatus } from '../../ui';
+import { useRouter } from 'next/navigation';
 
 export default function Confirmation() {
+  const router = useRouter();
+  const handleBack = () => {
+    router.push('/');
+  };
   return (
-    <IllustrationStatus mainText='Check your email' subText='We sent you the registration link' />
+    <IllustrationStatus
+      mainText='Check your email'
+      subText='We sent you the registration link'
+      buttonText='Back to login'
+      buttonHandler={handleBack}
+    />
   );
 }
diff --git a/client/src/app/(auth)/signup/page.tsx b/client/src/app/(auth)/signup/page.tsx
index b0c5d6d8a..62890e5cf 100644
--- a/client/src/app/(auth)/signup/page.tsx
+++ b/client/src/app/(auth)/signup/page.tsx
@@ -2,9 +2,9 @@
 
 import { useGoogleLogin } from '@react-oauth/google';
 import { useState } from 'react';
-import { Github, Google, Login } from '@/shared/assets';
+import { Github, Google, LogoBig } from '@/shared/assets';
 import { SubmitHandler, useForm } from 'react-hook-form';
-import { Button, Input, InputPassword, Typography } from '@/shared/ui';
+import { Button, Flex, Input, InputPassword, Typography } from '@/shared/ui';
 import styles from '../shared.module.scss';
 
 interface SignupProps {
@@ -33,63 +33,64 @@ export default function SignupPage() {
 
   return (
     <form className={styles.container} onSubmit={handleSubmit(onSubmit)}>
-      <div className={styles.left}>
-        <div className={styles.interactive_container}>
-          <div className={styles.flex_wrapper}>
-            <Input
-              placeholder='Email'
-              {...register('email', { required: 'You must specify an email' })}
-              type='email'
-              error={errors?.email ? errors.email.message : undefined}
-              value={email}
-              onChange={e => setEmail(e.target.value)}
-            />
-            <InputPassword
-              placeholder='Password'
-              {...register('password', {
-                required: 'You must specify a password',
-                minLength: { value: 8, message: 'Password must have at least 8 characters' },
-              })}
-              error={errors?.password ? errors.password.message : undefined}
-              value={password}
-              onChange={e => setPassword(e.target.value)}
-            />
-            <InputPassword
-              placeholder='Confirm Password'
-              {...register('repeatPassword', {
-                validate: value => value === password || 'The passwords do not match',
-              })}
-              error={errors?.repeatPassword ? errors.repeatPassword.message : undefined}
-              value={repeatPassword}
-              onChange={e => setRepeatPassword(e.target.value)}
-            />
-          </div>
-          <div className={styles.flex_wrapper__s}>
-            <Button type='submit'>Sign Up</Button>
-            <div className={styles.lines_container}>
-              <div className={styles.line} />
-              <Typography size='body_m' color='greyNormal'>
-                or continue with
-              </Typography>
-              <div className={styles.line} />
-            </div>
+      <Flex gap={48} direction='column' maxWidth='370px' width='100%'>
+        <Flex className={styles.additional_logo} width='100%' justify='center' align='center'>
+          <LogoBig />
+        </Flex>
+        <Flex direction='column' gap={36}>
+          <Input
+            placeholder='Email'
+            {...register('email', { required: 'Email is required!' })}
+            type='email'
+            error={errors?.email ? errors.email.message : undefined}
+            value={email}
+            onChange={e => setEmail(e.target.value)}
+          />
 
-            <div className={styles.buttons_container}>
-              <button className={styles.button} onClick={() => login()} type='button'>
-                <Google />
-              </button>
-              <button className={styles.button} type='button'>
-                <Github />
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div className={styles.right}>
-        <div className={styles.svg_container}>
-          <Login />
-        </div>
-      </div>
+          <InputPassword
+            placeholder='Password'
+            {...register('password', {
+              required: 'Password is required!',
+              minLength: { value: 8, message: 'Minimum length is 8!' },
+            })}
+            error={errors?.password ? errors.password.message : undefined}
+            value={password}
+            onChange={e => setPassword(e.target.value)}
+          />
+          <InputPassword
+            placeholder='Confirm Password'
+            {...register('repeatPassword', {
+              validate: value => value === password || 'The passwords do not match',
+            })}
+            error={errors?.repeatPassword ? errors.repeatPassword.message : undefined}
+            value={repeatPassword}
+            onChange={e => setRepeatPassword(e.target.value)}
+          />
+        </Flex>
+
+        <Flex direction='column' gap={24}>
+          <Button type='submit'>Log in</Button>
+
+          <Flex justify='center' align='center' gap={13} className={styles.lines_container}>
+            <div className={styles.line} />
+            <Typography size='body_m' color='greyNormal'>
+              or continue with
+            </Typography>
+            <div className={styles.line} />
+          </Flex>
+
+          <Flex gap={8} justify='center' align='center'>
+            <Button typeBtn='secondary' size='l' width='100%' type='button' onClick={() => login()}>
+              <Google />
+              <Typography>Google</Typography>
+            </Button>
+            <Button typeBtn='secondary' size='l' width='100%' type='button'>
+              <Github />
+              <Typography>Github</Typography>
+            </Button>
+          </Flex>
+        </Flex>
+      </Flex>
     </form>
   );
 }
diff --git a/client/src/app/(auth)/styles.module.scss b/client/src/app/(auth)/styles.module.scss
index 07d5920d9..826ad2ed8 100644
--- a/client/src/app/(auth)/styles.module.scss
+++ b/client/src/app/(auth)/styles.module.scss
@@ -1,5 +1,6 @@
 .logo {
-  @media (width <= 740px) {
+  cursor: pointer;
+  @media (width <= 420px) {
     display: none;
   }
 }
@@ -8,16 +9,17 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-}
 
-.headerNormalizer {
-  width: 144px;
+  @media (width <= 420px) {
+    justify-content: center;
+  }
 }
 
 .container {
   height: 100dvh;
   width: 100%;
   padding: 48px 55px;
+  background: var(--cards-color);
 
   @media (width <= 1120px) {
     padding: 48px 24px;
@@ -28,11 +30,37 @@
   }
 }
 
+.alternative {
+  height: 100dvh;
+  background: var(--cards-color);
+}
+
 .children {
-  width: 100%;
   min-height: calc(100% - 48px);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
+}
+
+.left {
+  width: 50%;
+  height: 100%;
+  padding: 48px 55px;
+
+  @media (width <= 1024px) {
+    width: 100%;
+    padding: 48px 24px;
+  }
+
+  @media (width <= 580px) {
+    padding: 24px;
+  }
+}
+
+.right {
+  width: 50%;
+  height: 100%;
+  object-fit: cover;
+  user-select: none;
+
+  @media (width <= 1024px) {
+    display: none;
+  }
 }
diff --git a/client/src/app/(auth)/ui/illustration/illustration.module.scss b/client/src/app/(auth)/ui/illustration/illustration.module.scss
index e02a97554..28aff1a25 100644
--- a/client/src/app/(auth)/ui/illustration/illustration.module.scss
+++ b/client/src/app/(auth)/ui/illustration/illustration.module.scss
@@ -3,21 +3,3 @@
   max-width: 705px;
   margin-bottom: 56px;
 }
-
-.info {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  gap: 8px;
-  text-align: center;
-}
-
-.buttonWrapper {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-top: 16px;
-}
diff --git a/client/src/app/(auth)/ui/illustration/illustration.tsx b/client/src/app/(auth)/ui/illustration/illustration.tsx
index 7f5119e93..ec360afca 100644
--- a/client/src/app/(auth)/ui/illustration/illustration.tsx
+++ b/client/src/app/(auth)/ui/illustration/illustration.tsx
@@ -1,5 +1,5 @@
 import { Email } from '@/shared/assets';
-import { Button, Typography } from '@/shared/ui';
+import { Button, Flex, Typography } from '@/shared/ui';
 import styles from './illustration.module.scss';
 import { FC } from 'react';
 
@@ -15,18 +15,18 @@ export const IllustrationStatus: FC<ConfirmProps> = props => {
   return (
     <div className={styles.container}>
       <Email />
-      <div className={styles.info}>
+      <Flex justify='center' align='center' direction='column' gap='8px'>
         <Typography size='heading_m'>{mainText}</Typography>
         <Typography size='body_m' color='greyNormal'>
           {subText}
         </Typography>
-      </div>
+      </Flex>
       {buttonText && (
-        <div className={styles.buttonWrapper}>
-          <Button onClick={buttonHandler} width='136px'>
+        <Flex align='center' justify='center'>
+          <Button onClick={buttonHandler} width='136px' typeBtn='tertiary' color='greenBright'>
             {buttonText}
           </Button>
-        </div>
+        </Flex>
       )}
     </div>
   );
diff --git a/client/src/shared/assets/icons/socials/github.tsx b/client/src/shared/assets/icons/socials/github.tsx
index 5eca25836..997ae2334 100644
--- a/client/src/shared/assets/icons/socials/github.tsx
+++ b/client/src/shared/assets/icons/socials/github.tsx
@@ -2,16 +2,16 @@ import { FC, SVGProps } from 'react';
 export const Github: FC<SVGProps<SVGSVGElement>> = props => {
   return (
     <svg
-      width='24'
-      height='28'
-      viewBox='0 0 24 28'
+      width='25'
+      height='24'
+      viewBox='0 0 25 24'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
       {...props}
     >
       <path
-        d='M18.2632 26.8379C19.2193 26.8379 19.0827 28 19.0827 28H6.65291C6.65291 28 6.51632 26.8379 7.47246 26.8379C8.3603 26.8379 8.56519 26.4278 8.56519 26.0177L8.49689 22.5999C3.6479 23.6936 2.62347 20.6859 2.62347 20.6859C1.80392 18.6352 0.711192 18.1568 0.711192 18.1568C-0.927903 17.0631 0.779488 17.0631 0.779488 17.0631C2.55517 17.1998 3.51131 18.8403 3.51131 18.8403C5.01382 21.5062 7.54075 20.7543 8.56519 20.3441C8.70178 19.1821 9.17985 18.4302 9.65792 17.9517C5.76507 17.5416 1.73563 16.0377 1.73563 9.33885C1.73563 7.42489 2.41858 5.8527 3.51131 4.6223C3.30643 4.21216 2.76006 2.43491 3.7162 0.0424555C3.7162 0.0424555 5.15041 -0.436036 8.49689 1.81971C11.3653 0.999437 14.3703 0.999437 17.2387 1.81971C20.5852 -0.436036 22.0194 0.0424555 22.0194 0.0424555C22.9756 2.43491 22.4292 4.21216 22.2243 4.6223C23.317 5.8527 24 7.42489 24 9.33885C24 16.0377 19.9023 17.5416 16.0094 17.9517C16.6924 18.4985 17.2387 19.5922 17.2387 21.2328L17.1704 26.0177C17.1704 26.4278 17.3753 26.8379 18.2632 26.8379Z'
-        fill='#1E1E1E'
+        d='M12.502 2C6.97695 2 2.50195 6.475 2.50195 12C2.50075 14.0992 3.16055 16.1454 4.38777 17.8484C5.61498 19.5515 7.34729 20.8249 9.33895 21.488C9.83895 21.575 10.027 21.275 10.027 21.012C10.027 20.775 10.014 19.988 10.014 19.15C7.50195 19.613 6.85195 18.538 6.65195 17.975C6.53895 17.687 6.05195 16.8 5.62695 16.562C5.27695 16.375 4.77695 15.912 5.61395 15.9C6.40195 15.887 6.96395 16.625 7.15195 16.925C8.05195 18.437 9.48895 18.012 10.064 17.75C10.152 17.1 10.414 16.663 10.702 16.413C8.47695 16.163 6.15195 15.3 6.15195 11.475C6.15195 10.387 6.53895 9.488 7.17695 8.787C7.07695 8.537 6.72695 7.512 7.27695 6.137C7.27695 6.137 8.11395 5.875 10.027 7.163C10.841 6.93706 11.6821 6.82334 12.527 6.825C13.377 6.825 14.227 6.937 15.027 7.162C16.94 5.862 17.777 6.138 17.777 6.138C18.327 7.513 17.977 8.538 17.877 8.788C18.514 9.488 18.902 10.375 18.902 11.475C18.902 15.313 16.565 16.163 14.339 16.413C14.702 16.725 15.015 17.325 15.015 18.263C15.015 19.6 15.002 20.675 15.002 21.013C15.002 21.275 15.19 21.587 15.69 21.487C17.6748 20.8166 19.3995 19.5408 20.6213 17.8389C21.8431 16.1371 22.5005 14.095 22.501 12C22.501 6.475 18.026 2 12.501 2H12.502Z'
+        fill='white'
       />
     </svg>
   );
diff --git a/client/src/shared/assets/icons/socials/google.tsx b/client/src/shared/assets/icons/socials/google.tsx
index c740ce440..a8e6b0135 100644
--- a/client/src/shared/assets/icons/socials/google.tsx
+++ b/client/src/shared/assets/icons/socials/google.tsx
@@ -2,34 +2,34 @@ import { FC, SVGProps } from 'react';
 export const Google: FC<SVGProps<SVGSVGElement>> = props => {
   return (
     <svg
-      width='28'
-      height='28'
-      viewBox='0 0 28 28'
+      width='21'
+      height='20'
+      viewBox='0 0 21 20'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
       {...props}
     >
-      <g clipPath='url(#clip0_310_18292)'>
+      <g clipPath='url(#clip0_5010_12438)'>
         <path
-          d='M6.1439 11.392C7.23192 8.09507 10.3302 5.72727 14 5.72727C15.9727 5.72727 17.7545 6.42727 19.1545 7.57273L23.2273 3.5C20.7455 1.33636 17.5636 0 14 0C8.48175 0 3.73071 3.14801 1.44666 7.75836L6.1439 11.392Z'
+          d='M4.88838 8.13711C5.66553 5.78219 7.87859 4.09091 10.4999 4.09091C11.909 4.09091 13.1817 4.59091 14.1817 5.40909L17.0908 2.5C15.3181 0.954545 13.0453 0 10.4999 0C6.55827 0 3.16467 2.24858 1.5332 5.54169L4.88838 8.13711Z'
           fill='#EA4335'
         />
         <path
-          d='M18.7142 21.0148C17.4427 21.8358 15.8271 22.2729 14 22.2729C10.3442 22.2729 7.25564 19.9232 6.15648 16.646L1.44371 20.2243C3.72493 24.8427 8.47584 28.0001 14 28.0001C17.4216 28.0001 20.6912 26.7838 23.1399 24.4997L18.7142 21.0148Z'
+          d='M13.8654 15.0102C12.9572 15.5967 11.8032 15.9088 10.4981 15.9088C7.88682 15.9088 5.68068 14.2305 4.89556 11.8896L1.5293 14.4456C3.15874 17.7444 6.55225 19.9998 10.4981 19.9998C12.9421 19.9998 15.2775 19.1309 17.0266 17.4994L13.8654 15.0102Z'
           fill='#34A853'
         />
         <path
-          d='M23.1399 24.4996C25.7007 22.1108 27.3636 18.5543 27.3636 14C27.3636 13.1728 27.2364 12.2819 27.0455 11.4546H14V16.8637H21.5091C21.1386 18.6826 20.144 20.0915 18.7142 21.0147L23.1399 24.4996Z'
+          d='M17.0285 17.4995C18.8576 15.7932 20.0455 13.2529 20.0455 9.99982C20.0455 9.40891 19.9545 8.77255 19.8182 8.18164H10.5V12.0453H15.8636C15.599 13.3445 14.8886 14.3508 13.8673 15.0103L17.0285 17.4995Z'
           fill='#4A90E2'
         />
         <path
-          d='M6.15648 16.6458C5.87805 15.8156 5.72727 14.926 5.72727 13.9999C5.72727 13.0879 5.87351 12.2112 6.1439 11.3919L1.44666 7.7583C0.509352 9.63711 0 11.7546 0 13.9999C0 16.2394 0.518911 18.3518 1.44371 20.2241L6.15648 16.6458Z'
+          d='M4.89748 11.8902C4.69861 11.2972 4.59091 10.6618 4.59091 10.0003C4.59091 9.34887 4.69536 8.72265 4.8885 8.13741L1.53333 5.54199C0.863823 6.884 0.5 8.39646 0.5 10.0003C0.5 11.5999 0.870651 13.1088 1.53122 14.4461L4.89748 11.8902Z'
           fill='#FBBC05'
         />
       </g>
       <defs>
-        <clipPath id='clip0_310_18292'>
-          <rect width='28' height='28' fill='white' />
+        <clipPath id='clip0_5010_12438'>
+          <rect width='20' height='20' fill='white' transform='translate(0.5)' />
         </clipPath>
       </defs>
     </svg>
diff --git a/client/src/shared/ui/flex/flex.tsx b/client/src/shared/ui/flex/flex.tsx
index 022c50830..7e8178ffa 100644
--- a/client/src/shared/ui/flex/flex.tsx
+++ b/client/src/shared/ui/flex/flex.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import styles from './flex.module.scss';
+import clsx from 'clsx';
 
 export interface FlexProps {
   /**
@@ -60,6 +61,12 @@ export interface FlexProps {
    */
   shrink?: string | number;
 
+  /**
+   * [props.className] - adds additional classes to base
+
+   */
+  className?: string;
+
   /**
    * props.children - The content to be laid out.
    */
@@ -109,6 +116,7 @@ export const Flex: React.FC<FlexProps> = props => {
     wrap,
     shrink,
     children,
+    className,
   } = props;
 
   const style = {
@@ -128,7 +136,7 @@ export const Flex: React.FC<FlexProps> = props => {
   } as React.CSSProperties;
 
   return (
-    <div className={styles.flexWrapper} style={style}>
+    <div className={clsx(styles.flexWrapper, [className])} style={style}>
       {children}
     </div>
   );