diff --git a/FrontEnd/src/global.css b/FrontEnd/src/global.css
index 18708495..80b9f54d 100644
--- a/FrontEnd/src/global.css
+++ b/FrontEnd/src/global.css
@@ -35,6 +35,7 @@
   --about-as-main-background: #0B6C61;
   --star-background: #FFD800;
   --hint-background: #25292C;
+  --light-seashell-background: #F9F5EC;
 
   /* text color*/
   --main-text-color: #292E32;
@@ -44,14 +45,16 @@
   --delete-text-color: #F15831;
   --notification-text-color: #F34444;
   --footer-dark-text-color: #A0ABC0;
+  --link-text-color: #000000;
+  --error-text-color: #F15831;
 
   /* button color*/
   --main-button-color: #1F9A7C;
-  --button-color-hover: #0b6c61 ;
+  --button-color-hover: #0b6c61;
   --light-button-color: #FFFFFF;
 
   /* fonts */
-  --font-main: 'Inter', sans-serif;
+  --font-main: 'Geologica', sans-serif;
   --font-messages: 'Roboto', sans-serif;
   --font-error: 'Roboto', sans-serif;
   --font-logo: 'Geologica', sans-serif;
@@ -111,7 +114,7 @@
   --character-title-85: rgba(0, 0, 0, 0.85);
 
   --wf-base-white: #FFF;
-  
+
   --profile-min-height-block: calc(100vh - 565px);
   --min-height-block-main: calc(100vh - 305px);
   --company-card-color: #FFF;
diff --git a/FrontEnd/src/pages/Authorization/AuthorizationPage.jsx b/FrontEnd/src/pages/Authorization/AuthorizationPage.jsx
deleted file mode 100644
index 9631d6b4..00000000
--- a/FrontEnd/src/pages/Authorization/AuthorizationPage.jsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import Login from './Login';
-import classes from './AuthorizationPage.module.css';
-
-const AuthorizationPage = () => {
-
-  return (
-    <div className={classes['auth-page']}>
-      <img className={classes['frame-img-left']}
-        src={`${process.env.REACT_APP_PUBLIC_URL}/img/dots_7x6.png`}
-        alt="dots_7x6.png" />
-      <img className={classes['frame-img-right']}
-        src={`${process.env.REACT_APP_PUBLIC_URL}/img/dots_7x6.png`}
-        alt="dots_7x6.png" />
-      <Login />
-    </div>
-  );
-};
-
-export default AuthorizationPage;
diff --git a/FrontEnd/src/pages/Authorization/AuthorizationPage.module.css b/FrontEnd/src/pages/Authorization/AuthorizationPage.module.css
deleted file mode 100644
index c7788d9c..00000000
--- a/FrontEnd/src/pages/Authorization/AuthorizationPage.module.css
+++ /dev/null
@@ -1,30 +0,0 @@
-.auth-page {
-    display: flex;
-    width: var(--main-block-size);
-    min-height: var(--min-height-block-main);
-    flex-shrink: 0;
-    background: #f1fff7;
-  }
-    
-  .frame-img-left {
-    width: 179px;
-    height: 150px;
-    display: inline-flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 24px;
-    margin: 422px 979px 153px 354px;
-    position: absolute;
-  }
-  
-  .frame-img-right {
-    width: 179px;
-    height: 150px;
-    display: inline-flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 24px;
-    margin: 102px 354px 473px 979px;
-    position: absolute;
-  }
-  
\ No newline at end of file
diff --git a/FrontEnd/src/pages/Authorization/EyeVisible.jsx b/FrontEnd/src/pages/Authorization/EyeVisible.jsx
index c8b28554..07c2d5e7 100644
--- a/FrontEnd/src/pages/Authorization/EyeVisible.jsx
+++ b/FrontEnd/src/pages/Authorization/EyeVisible.jsx
@@ -2,8 +2,8 @@ const EyeVisible = () => {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
     <path d="M7.00008 3.52734C4.7948 3.52734 3.18015 4.6457 2.04129 7C3.18015 9.3543 4.7948 10.4727 7.00008 10.4727C9.20672 10.4727 10.8214 9.3543 11.9589 7C10.82 4.6457 9.20535 3.52734 7.00008 3.52734ZM6.94539 9.40625C5.61648 9.40625 4.53914 8.32891 4.53914 7C4.53914 5.67109 5.61648 4.59375 6.94539 4.59375C8.2743 4.59375 9.35164 5.67109 9.35164 7C9.35164 8.32891 8.2743 9.40625 6.94539 9.40625Z" fill="white"/>
-    <path d="M12.8817 6.64727C11.5856 3.91699 9.6264 2.54297 7.00003 2.54297C4.3723 2.54297 2.41449 3.91699 1.11839 6.64863C1.06641 6.75871 1.03944 6.87894 1.03944 7.00068C1.03944 7.12242 1.06641 7.24265 1.11839 7.35273C2.41449 10.083 4.37367 11.457 7.00003 11.457C9.62777 11.457 11.5856 10.083 12.8817 7.35137C12.9869 7.12988 12.9869 6.87285 12.8817 6.64727ZM7.00003 10.4727C4.79476 10.4727 3.18011 9.3543 2.04124 7C3.18011 4.6457 4.79476 3.52734 7.00003 3.52734C9.20531 3.52734 10.82 4.6457 11.9588 7C10.8213 9.3543 9.20667 10.4727 7.00003 10.4727Z" fill="#1F9A7C"/>
-    <path d="M6.94531 4.59375C5.61641 4.59375 4.53906 5.67109 4.53906 7C4.53906 8.32891 5.61641 9.40625 6.94531 9.40625C8.27422 9.40625 9.35156 8.32891 9.35156 7C9.35156 5.67109 8.27422 4.59375 6.94531 4.59375ZM6.94531 8.53125C6.09903 8.53125 5.41406 7.84629 5.41406 7C5.41406 6.15371 6.09903 5.46875 6.94531 5.46875C7.7916 5.46875 8.47656 6.15371 8.47656 7C8.47656 7.84629 7.7916 8.53125 6.94531 8.53125Z" fill="#1F9A7C"/>
+    <path d="M12.8817 6.64727C11.5856 3.91699 9.6264 2.54297 7.00003 2.54297C4.3723 2.54297 2.41449 3.91699 1.11839 6.64863C1.06641 6.75871 1.03944 6.87894 1.03944 7.00068C1.03944 7.12242 1.06641 7.24265 1.11839 7.35273C2.41449 10.083 4.37367 11.457 7.00003 11.457C9.62777 11.457 11.5856 10.083 12.8817 7.35137C12.9869 7.12988 12.9869 6.87285 12.8817 6.64727ZM7.00003 10.4727C4.79476 10.4727 3.18011 9.3543 2.04124 7C3.18011 4.6457 4.79476 3.52734 7.00003 3.52734C9.20531 3.52734 10.82 4.6457 11.9588 7C10.8213 9.3543 9.20667 10.4727 7.00003 10.4727Z" fill="#B4D27A"/>
+    <path d="M6.94531 4.59375C5.61641 4.59375 4.53906 5.67109 4.53906 7C4.53906 8.32891 5.61641 9.40625 6.94531 9.40625C8.27422 9.40625 9.35156 8.32891 9.35156 7C9.35156 5.67109 8.27422 4.59375 6.94531 4.59375ZM6.94531 8.53125C6.09903 8.53125 5.41406 7.84629 5.41406 7C5.41406 6.15371 6.09903 5.46875 6.94531 5.46875C7.7916 5.46875 8.47656 6.15371 8.47656 7C8.47656 7.84629 7.7916 8.53125 6.94531 8.53125Z" fill="#B4D27A"/>
   </svg>
   );
 };
diff --git a/FrontEnd/src/pages/Authorization/Login.jsx b/FrontEnd/src/pages/Authorization/Login.jsx
deleted file mode 100644
index b5adbf8b..00000000
--- a/FrontEnd/src/pages/Authorization/Login.jsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import LoginPage from './LoginPage';
-import SignUpInvitation from './SignUpInvitation';
-import classes from './Login.module.css';
-
-const Login = () => {
-  return <div className={classes.login}>
-    <LoginPage />
-    <SignUpInvitation />
-  </div>;
-};
-
-export default Login;
diff --git a/FrontEnd/src/pages/Authorization/Login.module.css b/FrontEnd/src/pages/Authorization/Login.module.css
deleted file mode 100644
index 705e7495..00000000
--- a/FrontEnd/src/pages/Authorization/Login.module.css
+++ /dev/null
@@ -1,8 +0,0 @@
-.login {
-  display: inline-flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 32px;
-  margin: 159px 470px 158px 470px;
-  position: relative;
-}
diff --git a/FrontEnd/src/pages/Authorization/LoginPage.jsx b/FrontEnd/src/pages/Authorization/LoginPage.jsx
index ca91560b..6cca5efb 100644
--- a/FrontEnd/src/pages/Authorization/LoginPage.jsx
+++ b/FrontEnd/src/pages/Authorization/LoginPage.jsx
@@ -4,6 +4,7 @@ import { useNavigate, Link } from 'react-router-dom';
 import axios from 'axios';
 import { useStopwatch } from 'react-timer-hook';
 import { toast } from 'react-toastify';
+import classNames from 'classnames';
 
 import validator from 'validator';
 import EyeVisible from './EyeVisible';
@@ -29,7 +30,7 @@ const LoginContent = () => {
 
   const errorMessageTemplates = {
     required: 'Обов’язкове поле',
-    email: 'Електронна пошта не відповідає вимогам',
+    email: 'Введіть адресу електронної пошти у форматі name@example.com',
     unspecifiedError: 'Електронна пошта чи пароль вказані некоректно',
     rateError: 'Небезпечні дії на сторінці. Сторінка заблокована на 10 хвилин',
     blockedUserError: 'Профіль компанії було заблоковано внаслідок розміщення неприйнятного контенту',
@@ -139,112 +140,121 @@ const LoginContent = () => {
   useEffect(() => {}, [disabled]);
 
   return (
-    <div className={classes['login-basic']}>
-      <div className={classes['login-header']}>
-        <p>Вхід на платформу</p>
-      </div>
-      <form onSubmit={handleSubmit(onSubmit)} noValidate>
-        <div className={classes['login-content']}>
-          <div className={classes['login-content__items']}>
-            <div className={classes['login-content__item']}>
-              <label
-                className={`${
-                  errors.email && getValues('email').trim().length === 0
-                    ? classes['error-dot']
-                    : ''
-                }`}
-                htmlFor="email"
-              >
-                Електронна пошта
-              </label>
-              <div className={classes['login-content__email']}>
-                <input
-                  id="email"
-                  type="email"
-                  autoComplete="username"
-                  placeholder="Електронна пошта"
-                  {...register('email', {
-                    required: errorMessageTemplates.required,
-                    validate: (value) =>
-                      validator.isEmail(value) || errorMessageTemplates.email,
-                  })}
-                />
+    <div className={classes['login-page']}>
+      <div className={classes.login}>
+        <div className={classes['login-basic']}>
+          <div className={classes['login-header']}>
+            <p>Вхід на платформу</p>
+          </div>
+            <form onSubmit={handleSubmit(onSubmit)} className={classes['login-form']} noValidate>
+              <div className={classes['login-content']}>
+                <div className={classes['login-content__items']}>
+                  <div className={classes['login-content__item']}>
+                    <label
+                      className={`${
+                        errors.email && getValues('email').trim().length === 0
+                          ? classes['error-dot']
+                          : ''
+                      }`}
+                      htmlFor="email"
+                    >
+                      Електронна пошта
+                    </label>
+                    <div className={classNames(
+                      classes['login-content__email'],
+                      { [classes['login-content__email-error']]: errors.email }
+                    )}>
+                      <input
+                        id="email"
+                        type="email"
+                        autoComplete="username"
+                        placeholder="Введіть свою електронну пошту"
+                        {...register('email', {
+                          required: errorMessageTemplates.required,
+                          validate: (value) =>
+                            validator.isEmail(value) || errorMessageTemplates.email,
+                        })}
+                      />
+                    </div>
+                    <span className={classes['error-message']}>
+                      {errors.email && errors.email.message}
+                      {errors.required && errors.required.message}
+                    </span>
+                  </div>
+                  <div className={classes['login-content__item']}>
+                    <label
+                      className={`${
+                        errors.password && getValues('password').trim().length === 0
+                          ? classes['error-dot']
+                          : ''
+                      }`}
+                      htmlFor="password"
+                    >
+                      Пароль
+                    </label>
+                    <div className={classNames(
+                        classes['login-content__password'],
+                        { [classes['login-content__password-error']]: errors.password },
+                        { [classes['login-content__show-password']]: showPassword }
+                      )}>
+                      <div className={classes['login-content__password__wrapper']}>
+                        <input
+                          id="password"
+                          type={showPassword ? 'text' : 'password'}
+                          autoComplete="current-password"
+                          placeholder="Введіть пароль"
+                          {...register('password', {
+                            required: errorMessageTemplates.required,
+                          })}
+                        />
+                        <span
+                          className={classes['password-visibility']}
+                          onClick={togglePassword}
+                        >
+                          {!showPassword ? <EyeInvisible /> : <EyeVisible />}
+                        </span>
+                      </div>
+                    </div>
+                    <div className={classes['forget-password__wrapper']}>
+                      <span className={classes['error-message']}>
+                        {errors.password && errors.password.message}
+                        {errors.required && errors.required.message}
+                        {errors.unspecifiedError && errors.unspecifiedError.message}
+                      </span>
+                      <Link to="/reset-password" className={classes['forget-password']}>
+                        Забули пароль?
+                      </Link>
+                    </div>
+                  </div>
+                </div>
               </div>
-              <span className={classes['error-message']}>
-                {errors.email && errors.email.message}
-                {errors.required && errors.required.message}
-              </span>
-            </div>
-            <div className={classes['login-content__item']}>
-              <label
-                className={`${
-                  errors.password && getValues('password').trim().length === 0
-                    ? classes['error-dot']
-                    : ''
-                }`}
-                htmlFor="password"
-              >
-                Пароль
-              </label>
-              <div className={classes['login-content__password']}>
-                <div className={classes['login-content__password__wrapper']}>
-                  <input
-                    id="password"
-                    type={showPassword ? 'text' : 'password'}
-                    autoComplete="current-password"
-                    placeholder="Пароль"
-                    {...register('password', {
-                      required: errorMessageTemplates.required,
-                    })}
-                  />
-                  <span
-                    className={classes['password-visibility']}
-                    onClick={togglePassword}
+              <div className={classes['login-footer']}>
+                <div className={classes['login-footer-buttons']}>
+                  <button
+                    disabled={disabled}
+                    type="submit"
+                    className={
+                      disabled
+                        ? classes['login-footer-buttons__signin__disabled']
+                        : classes['login-footer-buttons__signin']
+                    }
                   >
-                    {!showPassword ? <EyeInvisible /> : <EyeVisible />}
-                  </span>
+                    Увійти
+                  </button>
                 </div>
               </div>
-              <span className={classes['error-message']}>
-                {errors.password && errors.password.message}
-                {errors.required && errors.required.message}
-                {errors.unspecifiedError && errors.unspecifiedError.message}
-              </span>
-            </div>
-            <Link to="/reset-password" className={classes['forget-password']}>
-              Забули пароль?
-            </Link>
-          </div>
-        </div>
-        <div className={classes['login-footer']}>
-          <div className={classes['login-footer-buttons']}>
-            <Link to="/">
-              <button
-                type="button"
-                className={classes['login-footer-buttons__main']}
-              >
-                Головна
-              </button>
-            </Link>
-            <button
-              disabled={disabled}
-              type="submit"
-              className={
-                disabled
-                  ? classes['login-footer-buttons__signin__disabled']
-                  : classes['login-footer-buttons__signin']
-              }
-            >
-              Увійти
-            </button>
+                <ReCAPTCHA
+                  ref={reCaptchaRef}
+                  sitekey={process.env.REACT_APP_RECAPTCHA_V2_SITE_KEY}
+                  size="invisible"
+                />
+            </form>
           </div>
+        <div className={classes['login-signup-invitation']}>
+          <p>Вперше на нашому сайті?</p>
+          <Link to="/sign-up">Зареєструйтесь</Link>
         </div>
-        <ReCAPTCHA
-          ref={reCaptchaRef}
-          sitekey={process.env.REACT_APP_RECAPTCHA_V2_SITE_KEY}
-          size="invisible"
-        />
-      </form>
+      </div>
     </div>
   );
 };
diff --git a/FrontEnd/src/pages/Authorization/LoginPage.module.css b/FrontEnd/src/pages/Authorization/LoginPage.module.css
index b67a3336..fbd98396 100644
--- a/FrontEnd/src/pages/Authorization/LoginPage.module.css
+++ b/FrontEnd/src/pages/Authorization/LoginPage.module.css
@@ -1,12 +1,34 @@
+.login-page {
+  display: flex;
+  justify-content: center;
+  width: 100vw;
+  min-height: var(--min-height-block-main);
+  flex-shrink: 0;
+  background: var(--light-seashell-background);
+  padding: 80px 0;
+}
+
+.login {
+  display: flex;
+  align-self: center;
+  flex-direction: column;
+  align-items: center;
+  max-width: 572px;
+  min-width: 345px;
+  gap: 24px;
+}
+
 .login-basic {
   display: flex;
-  width: 572px;
+  width: 375px;
   flex-direction: column;
   align-items: flex-start;
   border-radius: 2px;
   background: #fff;
-  box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05),
-    0px 6px 16px 0px rgba(0, 0, 0, 0.08), 0px 3px 6px -4px rgba(0, 0, 0, 0.12);
+}
+
+.login-form {
+  width: 100%;
 }
 
 .login-header {
@@ -15,59 +37,48 @@
   align-items: center;
   gap: 36px;
   align-self: stretch;
-  background: #fff;
   box-shadow: 0px -1px 0px 0px #f0f0f0 inset;
 }
 
 .login-header p {
-  color: #000000;
+  color: var(--main-text-color);
   font-family: var(--font-main);
   font-size: 16px;
   font-style: normal;
   font-weight: 600;
   line-height: 20px;
   letter-spacing: -0.16px;
-  margin: 0;
 }
 
 .login-content {
   display: flex;
   padding: 24px;
+  gap: 10px;
   flex-direction: column;
-  align-items: flex-start;
-  align-self: stretch;
 }
 
 .login-content__items {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
-  gap: 8px;
+  gap: 24px;
 }
 
 .login-content__item {
   display: flex;
-  width: 524px;
-  height: 60px;
-  padding-bottom: 24px;
+  gap: 4px;
   flex-direction: column;
-  align-items: flex-start;
 }
 
 .login-content__item label {
   display: flex;
-  padding-bottom: 8px;
-  align-items: center;
   gap: 4px;
-  align-self: stretch;
   flex: 1 0 0;
-  color: #292e32;
+  color: var(--main-text-color);
   font-feature-settings: "calt" off;
   font-family: var(--font-main);
   font-size: 14px;
-  font-style: normal;
   font-weight: 400;
-  line-height: 20px;
+  line-height: 22px;
   letter-spacing: -0.14px;
 }
 
@@ -79,20 +90,43 @@
   overflow: hidden;
 }
 
-.login-content__email input {
-  font-family: var(--font-messages);
+.login-content__email input,
+.login-content__password input {
+  font-family: var(--font-main);
+  color: var(--main-text-color);
+  border-radius: 2px;
+  border: 1px solid #d9d9d9;
   font-size: 14px;
-  font-style: normal;
   font-weight: 400;
   display: flex;
-  padding: 5px 12px;
-  align-items: center;
   align-self: stretch;
   gap: 4px;
   flex: 1 0 0;
+}
+
+.login-content__email input {
+  padding: 9px 12px;
+}
+
+.login-content__password input {
+  border: none;
+}
+
+.login-content__password {
+  display: flex;
+  padding: 8px 12px;
+  align-items: center;
+  gap: 4px;
+  align-self: stretch;
   border-radius: 2px;
   border: 1px solid #d9d9d9;
   background: #fff;
+  overflow: hidden;
+}
+
+.login-content__email-error input,
+.login-content__password-error {
+  border: 1px solid #F15831
 }
 
 .login-content__email input::placeholder,
@@ -103,27 +137,19 @@
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
-  line-height: 20px;
+  line-height: 22px;
   letter-spacing: -0.14px;
 }
 
-.login-content__email input:focus,
+.login-content__email input:focus-within,
 .login-content__password:focus-within {
   border-radius: 2px;
   border: 1px solid #1f9a7c;
   background: #fff;
 }
 
-.login-content__password {
-  display: flex;
-  padding: 4px 12px;
-  align-items: center;
-  gap: 4px;
-  align-self: stretch;
-  border-radius: 2px;
-  border: 1px solid #d9d9d9;
-  background: #fff;
-  overflow: hidden;
+.login-content__show-password {
+  border: 1px solid #B4D27A;
 }
 
 .login-content__password__wrapper {
@@ -133,19 +159,6 @@
   flex: 1 0 0;
 }
 
-.login-content__password input {
-  font-family: var(--font-messages);
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 400;
-  display: flex;
-  align-items: center;
-  align-self: stretch;
-  gap: 4px;
-  flex: 1 0 0;
-  border: none;
-}
-
 .login-content__password input:focus,
 .login-content__email input:focus {
   outline: none;
@@ -166,8 +179,7 @@
 
 .login-footer {
   display: flex;
-  padding: 10px 16px;
-  justify-content: flex-end;
+  padding: 10px 24px;
   align-items: center;
   gap: 8px;
   align-self: stretch;
@@ -190,43 +202,18 @@
   text-decoration: none;
 }
 
-.login-footer-buttons__main {
-  display: flex;
-  padding: 5px 15px;
-  justify-content: center;
-  align-items: center;
-  gap: 10px;
-  border-radius: 4px;
-  border: 1px solid #1f9a7c;
-  background: #fff;
-  cursor: pointer;
-  box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.02);
-  color: var(--primary-green-80, #1f9a7c);
-  text-align: center;
-  font-feature-settings: "calt" off;
-  font-family: var(--font-main);
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 20px;
-  letter-spacing: -0.16px;
-}
-
-
 .login-footer-buttons__signin,
 .login-footer-buttons__signin__disabled {
   display: flex;
-  padding: 5px 15px;
+  padding: 9px 16px;
   justify-content: center;
   align-items: center;
-  gap: 10px;
+  gap: 4px;
   border-radius: 4px;
-  border: 1px solid #1f9a7c;
-  background: #1f9a7c;
+  background: #000000;
   cursor: pointer;
-  box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.04);
 
-  color: #fff;
+  color: var(--light-button-text-color);
   text-align: center;
   font-feature-settings: "calt" off;
   font-family: var(--font-main);
@@ -235,28 +222,24 @@
   font-weight: 600;
   line-height: 20px;
   letter-spacing: -0.16px;
+
 }
 
 .login-footer-buttons__signin__disabled {
-  opacity: 50%;
+  border: 1px solid #BFC6CF;
+  background: #EEEFF1;
+  color: #A3AAB0;
   cursor: default;
 }
 
 .error-message {
-  position: absolute;
-  margin-top: 62px;
-  display: flex;
-  align-items: flex-start;
-  gap: 10px;
   align-self: stretch;
-  flex: 1 0 0;
-  color: #f34444;
+  color: var(--error-text-color);
   font-feature-settings: "calt" off;
-  font-family: var(--font-error);
-  font-size: 14px;
-  font-style: normal;
+  font-family: var(--font-main);
+  font-size: 12px;
   font-weight: 400;
-  line-height: 20px;
+  line-height: 16px;
   letter-spacing: -0.14px;
 }
 
@@ -264,26 +247,33 @@
   position: absolute;
   margin-left: -10px;
   content: "*";
-  color: #ff4d4f;
+  color: var(--error-text-color);
   text-align: right;
-  font-family: var(--font-error);
-  font-size: 14px;
-  font-style: normal;
+  font-family: var(--font-main);
+  font-size: 12px;
   font-weight: 400;
-  line-height: 22.001px;
+}
+
+.forget-password__wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
 }
 
 .forget-password {
   margin: 0;
+  align-self: flex-end;
   text-decoration: none;
-  color: var(--accent-accelerate-1500, #00A3CF);
+  color: var(--link-text-color);
   font-feature-settings: 'calt' off;
   font-family: var(--font-main);
   font-size: 14px;
   font-style: normal;
-  font-weight: 400;
-  line-height: 20px;
+  font-weight: 600;
+  line-height: 22px;
   letter-spacing: -0.14px;
+  text-decoration-line: underline;
+  text-decoration-thickness: 1%;
 }
 
 .forget-password:focus {
@@ -293,3 +283,64 @@
 .password-visibility {
   cursor: pointer;
 }
+
+input:-webkit-autofill,
+input:-webkit-autofill:focus {
+  -webkit-box-shadow: 0 0 0 30px white inset !important;
+}
+
+input:-webkit-autofill {
+  -webkit-text-fill-color: var(--main-text-color) !important;
+}
+
+.login-signup-invitation {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  background: var(--light-seashell-background);
+}
+
+.login-signup-invitation p {
+  margin: 0;
+  color: var(--link-text-color);
+  font-feature-settings: "calt" off;
+  font-family: var(--font-main);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 22px;
+  letter-spacing: -0.14px;
+}
+
+.login-signup-invitation a {
+  color: var(--link-text-color);
+  font-feature-settings: "calt" off;
+  font-family: var(--font-main);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 22px;
+  letter-spacing: -0.14px;
+  text-decoration-line: underline;
+  text-decoration-thickness: 1%;
+}
+
+.login-signup-invitation a:focus {
+  outline: none;
+}
+
+@media only screen and (min-width: 768px) {
+  .login-page {
+    padding: 104px 0;
+  }
+
+  .login-basic {
+    width: 572px;
+  }
+}
+
+@media only screen and (min-width: 1512px) {
+  .login-page {
+    padding: 120px 0;
+  }
+}
diff --git a/FrontEnd/src/pages/Authorization/SignUpInvitation.jsx b/FrontEnd/src/pages/Authorization/SignUpInvitation.jsx
deleted file mode 100644
index bae4e21e..00000000
--- a/FrontEnd/src/pages/Authorization/SignUpInvitation.jsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Link } from 'react-router-dom';
-import classes from './SignUpInvitation.module.css';
-
-const SignUpInvitation = () => {
-    return (
-        <div className={classes['signup-invitation']}>
-            <p>Вперше на нашому сайті?</p>
-            <Link to="/sign-up">Зареєструйтесь</Link>
-        </div>
-    );
-};
-
-export default SignUpInvitation;
diff --git a/FrontEnd/src/pages/Authorization/SignUpInvitation.module.css b/FrontEnd/src/pages/Authorization/SignUpInvitation.module.css
deleted file mode 100644
index b8c7ee0d..00000000
--- a/FrontEnd/src/pages/Authorization/SignUpInvitation.module.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.signup-invitation {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-}
-
-.signup-invitation p {
-    margin: 0;
-  color: #000;
-  font-feature-settings: "calt" off;
-  font-family: var(--font-main);
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 20px; 
-  letter-spacing: -0.14px;
-}
-
-.signup-invitation a {
-  color: var(--accent-accelerate-1500, #00a3cf);
-  font-feature-settings: "calt" off;
-  text-decoration: none;
-  font-family: var(--font-main);
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 20px; 
-  letter-spacing: -0.14px;
-}
-
-.signup-invitation a:focus {
-  outline: none;
-}
diff --git a/FrontEnd/src/pages/SignUp/SignUp/ActivateProfilePage.jsx b/FrontEnd/src/pages/SignUp/SignUp/ActivateProfilePage.jsx
index de99125a..c98cf205 100644
--- a/FrontEnd/src/pages/SignUp/SignUp/ActivateProfilePage.jsx
+++ b/FrontEnd/src/pages/SignUp/SignUp/ActivateProfilePage.jsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import axios from 'axios';
 import { useParams } from 'react-router-dom';
-import AuthorizationPage from '../../../pages/Authorization/AuthorizationPage';
+import LoginPage from '../../../pages/Authorization/LoginPage';
 import styles from './ActivateProfileModal.module.css';
 
 export function ActivationProfilePage() {
@@ -37,7 +37,7 @@ export function ActivationProfilePage() {
 
   return (
     <div>
-      <AuthorizationPage />
+      <LoginPage />
       {modalVisible && (
         <div className={styles['modal']}>
           <div className={styles['modal__overlay']} onClick={closeModal}></div>
diff --git a/FrontEnd/src/routes/ClientRouter.jsx b/FrontEnd/src/routes/ClientRouter.jsx
index 4598d585..311c4fdc 100644
--- a/FrontEnd/src/routes/ClientRouter.jsx
+++ b/FrontEnd/src/routes/ClientRouter.jsx
@@ -6,7 +6,7 @@ import { SWRConfig } from 'swr';
 import 'react-toastify/dist/ReactToastify.css';
 import customTheme from '../pages/CustomThemes/customTheme.js';
 
-import AuthorizationPage from '../pages/Authorization/AuthorizationPage';
+import LoginPage from '../pages/Authorization/LoginPage';
 import CookiesPolicyComponent from '../pages/CookiesPolicyPage/CookiesPolicyComponent';
 import Footer from '../components/Footer/Footer';
 import Header from '../components/Header/Header';
@@ -68,7 +68,7 @@ function ClientRouter() {
         {isAuth ? (
           <Route path="/login" element={<Navigate to="/profile/user-info" />} />
         ) : (
-          <Route path="/login" element={<AuthorizationPage />} />
+          <Route path="/login" element={<LoginPage />} />
         )}
         {isAuth ? (
           <Route