From 4e6a9a79c00246dc4e1c793e9bd88be06137e116 Mon Sep 17 00:00:00 2001
From: Lvyshnevska <lilia.vyshnevska@gmail.com>
Date: Sat, 19 Oct 2024 18:01:28 +0200
Subject: [PATCH 01/12] login desktop styles updated

---
 FrontEnd/src/global.css                       |   9 +-
 .../pages/Authorization/AuthorizationPage.jsx |   6 -
 .../AuthorizationPage.module.css              |  36 +---
 .../src/pages/Authorization/EyeVisible.jsx    |   4 +-
 .../src/pages/Authorization/LoginPage.jsx     |  48 ++---
 .../pages/Authorization/LoginPage.module.css  | 187 ++++++++----------
 .../Authorization/SignUpInvitation.module.css |  19 +-
 7 files changed, 133 insertions(+), 176 deletions(-)

diff --git a/FrontEnd/src/global.css b/FrontEnd/src/global.css
index 18708495a..83d6606ee 100644
--- a/FrontEnd/src/global.css
+++ b/FrontEnd/src/global.css
@@ -44,10 +44,12 @@
   --delete-text-color: #F15831;
   --notification-text-color: #F34444;
   --footer-dark-text-color: #A0ABC0;
+  --link-text-color-new: #000000;
+  --error-text-color-new: #F15831;
 
   /* button color*/
   --main-button-color: #1F9A7C;
-  --button-color-hover: #0b6c61 ;
+  --button-color-hover: #0b6c61;
   --light-button-color: #FFFFFF;
 
   /* fonts */
@@ -55,10 +57,11 @@
   --font-messages: 'Roboto', sans-serif;
   --font-error: 'Roboto', sans-serif;
   --font-logo: 'Geologica', sans-serif;
+  --font-main-new: 'Geologica', sans-serif;
 
   --toastify-color-error: #FFF1F0;
   --toastify-color-success: #F1FFF7;
-  --toastify-font-family: var(--font-main);
+  --toastify-font-family: var(--font-main-new);
   --toastify-close-button: rgba(0, 0, 0, 0.85);
   --toastify-toast-width: 395px;
   --toastify-toast-min-height: 22px;
@@ -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
index 9631d6b4e..4d9c16315 100644
--- a/FrontEnd/src/pages/Authorization/AuthorizationPage.jsx
+++ b/FrontEnd/src/pages/Authorization/AuthorizationPage.jsx
@@ -5,12 +5,6 @@ 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>
   );
diff --git a/FrontEnd/src/pages/Authorization/AuthorizationPage.module.css b/FrontEnd/src/pages/Authorization/AuthorizationPage.module.css
index c7788d9ce..fa3f419a6 100644
--- a/FrontEnd/src/pages/Authorization/AuthorizationPage.module.css
+++ b/FrontEnd/src/pages/Authorization/AuthorizationPage.module.css
@@ -1,30 +1,8 @@
 .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
+  display: flex;
+  width: var(--main-block-size);
+  min-height: var(--min-height-block-main);
+  flex-shrink: 0;
+  background: #F9F5EC;
+  ;
+}
diff --git a/FrontEnd/src/pages/Authorization/EyeVisible.jsx b/FrontEnd/src/pages/Authorization/EyeVisible.jsx
index c8b285549..07c2d5e77 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/LoginPage.jsx b/FrontEnd/src/pages/Authorization/LoginPage.jsx
index ca91560b6..f2ccdc77d 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: 'Профіль компанії було заблоковано внаслідок розміщення неприйнятного контенту',
@@ -137,13 +138,13 @@ const LoginContent = () => {
   };
 
   useEffect(() => {}, [disabled]);
-
+  console.log('ERRORS', errors);
   return (
     <div className={classes['login-basic']}>
       <div className={classes['login-header']}>
         <p>Вхід на платформу</p>
       </div>
-      <form onSubmit={handleSubmit(onSubmit)} noValidate>
+      <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']}>
@@ -157,12 +158,15 @@ const LoginContent = () => {
               >
                 Електронна пошта
               </label>
-              <div className={classes['login-content__email']}>
+              <div className={classNames(
+                classes['login-content__email'],
+                { [classes['login-content__email-error']]: errors.email }
+              )}>
                 <input
                   id="email"
                   type="email"
                   autoComplete="username"
-                  placeholder="Електронна пошта"
+                  placeholder="Введіть свою електрону пошту"
                   {...register('email', {
                     required: errorMessageTemplates.required,
                     validate: (value) =>
@@ -186,13 +190,17 @@ const LoginContent = () => {
               >
                 Пароль
               </label>
-              <div className={classes['login-content__password']}>
+              <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="Пароль"
+                    placeholder="Введіть пароль"
                     {...register('password', {
                       required: errorMessageTemplates.required,
                     })}
@@ -205,27 +213,21 @@ const LoginContent = () => {
                   </span>
                 </div>
               </div>
-              <span className={classes['error-message']}>
-                {errors.password && errors.password.message}
-                {errors.required && errors.required.message}
-                {errors.unspecifiedError && errors.unspecifiedError.message}
-              </span>
+              <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>
-            <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"
diff --git a/FrontEnd/src/pages/Authorization/LoginPage.module.css b/FrontEnd/src/pages/Authorization/LoginPage.module.css
index b67a3336f..2c63cec13 100644
--- a/FrontEnd/src/pages/Authorization/LoginPage.module.css
+++ b/FrontEnd/src/pages/Authorization/LoginPage.module.css
@@ -5,8 +5,10 @@
   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 +17,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-family: var(--font-main-new);
   font-size: 14px;
-  font-style: normal;
   font-weight: 400;
-  line-height: 20px;
+  line-height: 22px;
   letter-spacing: -0.14px;
 }
 
@@ -79,51 +70,66 @@
   overflow: hidden;
 }
 
-.login-content__email input {
-  font-family: var(--font-messages);
+.login-content__email input,
+.login-content__password input {
+  font-family: var(--font-main-new);
+  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,
 .login-content__password input::placeholder {
   color: #adb3b9;
   font-feature-settings: "calt" off;
-  font-family: var(--font-main);
+  font-family: var(--font-main-new);
   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 +139,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 +159,7 @@
 
 .login-footer {
   display: flex;
-  padding: 10px 16px;
-  justify-content: flex-end;
+  padding: 10px 24px;
   align-items: center;
   gap: 8px;
   align-self: stretch;
@@ -190,73 +182,44 @@
   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);
+  font-family: var(--font-main-new);
   font-size: 16px;
   font-style: normal;
   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-new);
   font-feature-settings: "calt" off;
-  font-family: var(--font-error);
-  font-size: 14px;
-  font-style: normal;
+  font-family: var(--font-main-new);
+  font-size: 12px;
   font-weight: 400;
-  line-height: 20px;
+  line-height: 16px;
   letter-spacing: -0.14px;
 }
 
@@ -264,26 +227,33 @@
   position: absolute;
   margin-left: -10px;
   content: "*";
-  color: #ff4d4f;
+  color: var(--error-text-color-new);
   text-align: right;
-  font-family: var(--font-error);
-  font-size: 14px;
-  font-style: normal;
+  font-family: var(--font-main-new);
+  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-new);
   font-feature-settings: 'calt' off;
-  font-family: var(--font-main);
+  font-family: var(--font-main-new);
   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 +263,12 @@
 .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;
+}
diff --git a/FrontEnd/src/pages/Authorization/SignUpInvitation.module.css b/FrontEnd/src/pages/Authorization/SignUpInvitation.module.css
index b8c7ee0db..9856dd0c7 100644
--- a/FrontEnd/src/pages/Authorization/SignUpInvitation.module.css
+++ b/FrontEnd/src/pages/Authorization/SignUpInvitation.module.css
@@ -5,27 +5,28 @@
 }
 
 .signup-invitation p {
-    margin: 0;
-  color: #000;
+  margin: 0;
+  color: var(--link-text-color-new);
   font-feature-settings: "calt" off;
-  font-family: var(--font-main);
+  font-family: var(--font-main-new);
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
-  line-height: 20px; 
+  line-height: 22px;
   letter-spacing: -0.14px;
 }
 
 .signup-invitation a {
-  color: var(--accent-accelerate-1500, #00a3cf);
+  color: var(--link-text-color-new);
   font-feature-settings: "calt" off;
-  text-decoration: none;
-  font-family: var(--font-main);
+  font-family: var(--font-main-new);
   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%;
 }
 
 .signup-invitation a:focus {

From d222d972b469606db036b451b0e2648f080537ab Mon Sep 17 00:00:00 2001
From: Lvyshnevska <lilia.vyshnevska@gmail.com>
Date: Sat, 19 Oct 2024 18:10:35 +0200
Subject: [PATCH 02/12] console log removed

---
 FrontEnd/src/pages/Authorization/LoginPage.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/FrontEnd/src/pages/Authorization/LoginPage.jsx b/FrontEnd/src/pages/Authorization/LoginPage.jsx
index f2ccdc77d..55e80d894 100644
--- a/FrontEnd/src/pages/Authorization/LoginPage.jsx
+++ b/FrontEnd/src/pages/Authorization/LoginPage.jsx
@@ -138,7 +138,7 @@ const LoginContent = () => {
   };
 
   useEffect(() => {}, [disabled]);
-  console.log('ERRORS', errors);
+
   return (
     <div className={classes['login-basic']}>
       <div className={classes['login-header']}>

From cd3c44189be299d1939e895829441cb8c80df1c3 Mon Sep 17 00:00:00 2001
From: Lvyshnevska <lilia.vyshnevska@gmail.com>
Date: Sun, 20 Oct 2024 14:38:59 +0200
Subject: [PATCH 03/12] main block sizes

---
 FrontEnd/src/global.css                          | 16 ++++++++++++++++
 .../Authorization/AuthorizationPage.module.css   |  8 +++++++-
 .../src/pages/Authorization/Login.module.css     | 15 +++++++++++----
 .../src/pages/Authorization/LoginPage.module.css |  6 ++++++
 4 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/FrontEnd/src/global.css b/FrontEnd/src/global.css
index 83d6606ee..a6eaf013b 100644
--- a/FrontEnd/src/global.css
+++ b/FrontEnd/src/global.css
@@ -24,6 +24,10 @@
 
 :root {
 
+  --breakpoint-mobile: 375px;
+  --breakpoint-tablet: 768px;
+  --breakpoint-desktop: 1512px;
+
   --main-block-size: 1512px;
 
   /* background color*/
@@ -119,3 +123,15 @@
   --min-height-block-main: calc(100vh - 305px);
   --company-card-color: #FFF;
 }
+
+@media only screen and (min-width: 768px) and (max-width: 1511px) {
+  :root {
+    --main-block-size: 768px;
+  }
+}
+
+@media only screen and (min-width: 375px) and (max-width: 767px) {
+  :root {
+    --main-block-size: 375px;
+  }
+}
diff --git a/FrontEnd/src/pages/Authorization/AuthorizationPage.module.css b/FrontEnd/src/pages/Authorization/AuthorizationPage.module.css
index fa3f419a6..a39431f5a 100644
--- a/FrontEnd/src/pages/Authorization/AuthorizationPage.module.css
+++ b/FrontEnd/src/pages/Authorization/AuthorizationPage.module.css
@@ -1,8 +1,14 @@
 .auth-page {
   display: flex;
+  justify-content: center;
   width: var(--main-block-size);
   min-height: var(--min-height-block-main);
   flex-shrink: 0;
   background: #F9F5EC;
-  ;
+}
+
+@media only screen and (min-width: var(--breakpoint-tablet)) and (max-width: var(--breakpoint-desktop)) {
+  .auth-page {
+    max-width: var(--breakpoint-tablet);
+  }
 }
diff --git a/FrontEnd/src/pages/Authorization/Login.module.css b/FrontEnd/src/pages/Authorization/Login.module.css
index 705e74956..8323e99bf 100644
--- a/FrontEnd/src/pages/Authorization/Login.module.css
+++ b/FrontEnd/src/pages/Authorization/Login.module.css
@@ -1,8 +1,15 @@
 .login {
-  display: inline-flex;
+  display: flex;
+  align-self: center;
   flex-direction: column;
   align-items: center;
-  gap: 32px;
-  margin: 159px 470px 158px 470px;
-  position: relative;
+  min-width: 345px;
+  gap: 24px;
+}
+
+
+@media screen and (min-width: var(--breakpoint-tablet)) and (max-width: var(--breakpoint-desktop)) {
+  .login {
+    min-width: none;
+  }
 }
diff --git a/FrontEnd/src/pages/Authorization/LoginPage.module.css b/FrontEnd/src/pages/Authorization/LoginPage.module.css
index 2c63cec13..12d1fd2a7 100644
--- a/FrontEnd/src/pages/Authorization/LoginPage.module.css
+++ b/FrontEnd/src/pages/Authorization/LoginPage.module.css
@@ -272,3 +272,9 @@ input:-webkit-autofill:focus {
 input:-webkit-autofill {
   -webkit-text-fill-color: var(--main-text-color) !important;
 }
+
+@media screen and (min-width: var(--breakpoint-tablet)) and (max-width: var(--breakpoint-desktop)) {
+  .login-basic {
+    background: red;
+  }
+}

From 8d310c1e513871f1254c5f47fe61681240efbc82 Mon Sep 17 00:00:00 2001
From: Lvyshnevska <lilia.vyshnevska@gmail.com>
Date: Mon, 21 Oct 2024 11:30:02 +0200
Subject: [PATCH 04/12] media query updated

---
 FrontEnd/src/global.css                               | 2 +-
 FrontEnd/src/pages/Authorization/Login.module.css     | 7 ++-----
 FrontEnd/src/pages/Authorization/LoginPage.module.css | 4 ++--
 3 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/FrontEnd/src/global.css b/FrontEnd/src/global.css
index a6eaf013b..70163b9cd 100644
--- a/FrontEnd/src/global.css
+++ b/FrontEnd/src/global.css
@@ -130,7 +130,7 @@
   }
 }
 
-@media only screen and (min-width: 375px) and (max-width: 767px) {
+@media only screen and (max-width: 767px) {
   :root {
     --main-block-size: 375px;
   }
diff --git a/FrontEnd/src/pages/Authorization/Login.module.css b/FrontEnd/src/pages/Authorization/Login.module.css
index 8323e99bf..8861128fe 100644
--- a/FrontEnd/src/pages/Authorization/Login.module.css
+++ b/FrontEnd/src/pages/Authorization/Login.module.css
@@ -3,13 +3,10 @@
   align-self: center;
   flex-direction: column;
   align-items: center;
+  max-width: 572px;
   min-width: 345px;
   gap: 24px;
 }
 
 
-@media screen and (min-width: var(--breakpoint-tablet)) and (max-width: var(--breakpoint-desktop)) {
-  .login {
-    min-width: none;
-  }
-}
+@media only screen and (min-width: 375px) and (max-width: 767px) {}
diff --git a/FrontEnd/src/pages/Authorization/LoginPage.module.css b/FrontEnd/src/pages/Authorization/LoginPage.module.css
index 12d1fd2a7..2c63a77f6 100644
--- a/FrontEnd/src/pages/Authorization/LoginPage.module.css
+++ b/FrontEnd/src/pages/Authorization/LoginPage.module.css
@@ -273,8 +273,8 @@ input:-webkit-autofill {
   -webkit-text-fill-color: var(--main-text-color) !important;
 }
 
-@media screen and (min-width: var(--breakpoint-tablet)) and (max-width: var(--breakpoint-desktop)) {
+@media only screen and (max-width: 767px) {
   .login-basic {
-    background: red;
+    width: 375px;
   }
 }

From cd309d05e1ae7f7e1867d6ab7a05785c732e6eeb Mon Sep 17 00:00:00 2001
From: Lvyshnevska <lilia.vyshnevska@gmail.com>
Date: Mon, 21 Oct 2024 11:40:00 +0200
Subject: [PATCH 05/12] redundant styles removed

---
 FrontEnd/src/global.css | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/FrontEnd/src/global.css b/FrontEnd/src/global.css
index 70163b9cd..54f22e145 100644
--- a/FrontEnd/src/global.css
+++ b/FrontEnd/src/global.css
@@ -24,10 +24,6 @@
 
 :root {
 
-  --breakpoint-mobile: 375px;
-  --breakpoint-tablet: 768px;
-  --breakpoint-desktop: 1512px;
-
   --main-block-size: 1512px;
 
   /* background color*/

From dd4d46c2989cbfe22bda815dc09143535b0664de Mon Sep 17 00:00:00 2001
From: Lvyshnevska <lilia.vyshnevska@gmail.com>
Date: Mon, 21 Oct 2024 11:44:40 +0200
Subject: [PATCH 06/12] login header font updated

---
 FrontEnd/src/pages/Authorization/LoginPage.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/FrontEnd/src/pages/Authorization/LoginPage.module.css b/FrontEnd/src/pages/Authorization/LoginPage.module.css
index 2c63a77f6..36b9151b7 100644
--- a/FrontEnd/src/pages/Authorization/LoginPage.module.css
+++ b/FrontEnd/src/pages/Authorization/LoginPage.module.css
@@ -22,7 +22,7 @@
 
 .login-header p {
   color: var(--main-text-color);
-  font-family: var(--font-main);
+  font-family: var(--font-main-new);
   font-size: 16px;
   font-style: normal;
   font-weight: 600;

From d6e6e078e3074950e7ce408e3bca8869bb61f1c8 Mon Sep 17 00:00:00 2001
From: Lvyshnevska <lilia.vyshnevska@gmail.com>
Date: Tue, 22 Oct 2024 13:00:03 +0200
Subject: [PATCH 07/12] media removed from global, vars updated without -new

---
 FrontEnd/src/global.css | 24 ++++++------------------
 1 file changed, 6 insertions(+), 18 deletions(-)

diff --git a/FrontEnd/src/global.css b/FrontEnd/src/global.css
index 54f22e145..eb65b572d 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;
+  --main-background: #F9F5EC;
 
   /* text color*/
   --main-text-color: #292E32;
@@ -44,8 +45,8 @@
   --delete-text-color: #F15831;
   --notification-text-color: #F34444;
   --footer-dark-text-color: #A0ABC0;
-  --link-text-color-new: #000000;
-  --error-text-color-new: #F15831;
+  --link-text-color: #000000;
+  --error-text-color: #F15831;
 
   /* button color*/
   --main-button-color: #1F9A7C;
@@ -53,15 +54,14 @@
   --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;
-  --font-main-new: 'Geologica', sans-serif;
 
   --toastify-color-error: #FFF1F0;
   --toastify-color-success: #F1FFF7;
-  --toastify-font-family: var(--font-main-new);
+  --toastify-font-family: var(--font-main);
   --toastify-close-button: rgba(0, 0, 0, 0.85);
   --toastify-toast-width: 395px;
   --toastify-toast-min-height: 22px;
@@ -116,18 +116,6 @@
   --wf-base-white: #FFF;
 
   --profile-min-height-block: calc(100vh - 565px);
-  --min-height-block-main: calc(100vh - 305px);
+  --min-height-block-main: 100vh;
   --company-card-color: #FFF;
 }
-
-@media only screen and (min-width: 768px) and (max-width: 1511px) {
-  :root {
-    --main-block-size: 768px;
-  }
-}
-
-@media only screen and (max-width: 767px) {
-  :root {
-    --main-block-size: 375px;
-  }
-}

From 8a472f0d292980fd59b5f6ce4f33c908d8ce3b5b Mon Sep 17 00:00:00 2001
From: Lvyshnevska <lilia.vyshnevska@gmail.com>
Date: Tue, 22 Oct 2024 13:00:46 +0200
Subject: [PATCH 08/12] media, styles updated

---
 .../AuthorizationPage.module.css              |  8 +++----
 .../src/pages/Authorization/Login.module.css  |  3 ---
 .../pages/Authorization/LoginPage.module.css  | 22 +++++++++----------
 .../Authorization/SignUpInvitation.module.css |  8 +++----
 4 files changed, 19 insertions(+), 22 deletions(-)

diff --git a/FrontEnd/src/pages/Authorization/AuthorizationPage.module.css b/FrontEnd/src/pages/Authorization/AuthorizationPage.module.css
index a39431f5a..ec70bc966 100644
--- a/FrontEnd/src/pages/Authorization/AuthorizationPage.module.css
+++ b/FrontEnd/src/pages/Authorization/AuthorizationPage.module.css
@@ -1,14 +1,14 @@
 .auth-page {
   display: flex;
   justify-content: center;
-  width: var(--main-block-size);
+  width: 100%;
   min-height: var(--min-height-block-main);
   flex-shrink: 0;
-  background: #F9F5EC;
+  background: var(--main-background);
 }
 
-@media only screen and (min-width: var(--breakpoint-tablet)) and (max-width: var(--breakpoint-desktop)) {
+@media only screen and (min-width: 768px) and (max-width: 1511px) {
   .auth-page {
-    max-width: var(--breakpoint-tablet);
+    min-width: 768px;
   }
 }
diff --git a/FrontEnd/src/pages/Authorization/Login.module.css b/FrontEnd/src/pages/Authorization/Login.module.css
index 8861128fe..591e421b8 100644
--- a/FrontEnd/src/pages/Authorization/Login.module.css
+++ b/FrontEnd/src/pages/Authorization/Login.module.css
@@ -7,6 +7,3 @@
   min-width: 345px;
   gap: 24px;
 }
-
-
-@media only screen and (min-width: 375px) and (max-width: 767px) {}
diff --git a/FrontEnd/src/pages/Authorization/LoginPage.module.css b/FrontEnd/src/pages/Authorization/LoginPage.module.css
index 36b9151b7..c03bce032 100644
--- a/FrontEnd/src/pages/Authorization/LoginPage.module.css
+++ b/FrontEnd/src/pages/Authorization/LoginPage.module.css
@@ -22,7 +22,7 @@
 
 .login-header p {
   color: var(--main-text-color);
-  font-family: var(--font-main-new);
+  font-family: var(--font-main);
   font-size: 16px;
   font-style: normal;
   font-weight: 600;
@@ -55,7 +55,7 @@
   flex: 1 0 0;
   color: var(--main-text-color);
   font-feature-settings: "calt" off;
-  font-family: var(--font-main-new);
+  font-family: var(--font-main);
   font-size: 14px;
   font-weight: 400;
   line-height: 22px;
@@ -72,7 +72,7 @@
 
 .login-content__email input,
 .login-content__password input {
-  font-family: var(--font-main-new);
+  font-family: var(--font-main);
   color: var(--main-text-color);
   border-radius: 2px;
   border: 1px solid #d9d9d9;
@@ -113,7 +113,7 @@
 .login-content__password input::placeholder {
   color: #adb3b9;
   font-feature-settings: "calt" off;
-  font-family: var(--font-main-new);
+  font-family: var(--font-main);
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
@@ -196,7 +196,7 @@
   color: var(--light-button-text-color);
   text-align: center;
   font-feature-settings: "calt" off;
-  font-family: var(--font-main-new);
+  font-family: var(--font-main);
   font-size: 16px;
   font-style: normal;
   font-weight: 600;
@@ -214,9 +214,9 @@
 
 .error-message {
   align-self: stretch;
-  color: var(--error-text-color-new);
+  color: var(--error-text-color);
   font-feature-settings: "calt" off;
-  font-family: var(--font-main-new);
+  font-family: var(--font-main);
   font-size: 12px;
   font-weight: 400;
   line-height: 16px;
@@ -227,9 +227,9 @@
   position: absolute;
   margin-left: -10px;
   content: "*";
-  color: var(--error-text-color-new);
+  color: var(--error-text-color);
   text-align: right;
-  font-family: var(--font-main-new);
+  font-family: var(--font-main);
   font-size: 12px;
   font-weight: 400;
 }
@@ -244,9 +244,9 @@
   margin: 0;
   align-self: flex-end;
   text-decoration: none;
-  color: var(--link-text-color-new);
+  color: var(--link-text-color);
   font-feature-settings: 'calt' off;
-  font-family: var(--font-main-new);
+  font-family: var(--font-main);
   font-size: 14px;
   font-style: normal;
   font-weight: 600;
diff --git a/FrontEnd/src/pages/Authorization/SignUpInvitation.module.css b/FrontEnd/src/pages/Authorization/SignUpInvitation.module.css
index 9856dd0c7..fd4c4fba8 100644
--- a/FrontEnd/src/pages/Authorization/SignUpInvitation.module.css
+++ b/FrontEnd/src/pages/Authorization/SignUpInvitation.module.css
@@ -6,9 +6,9 @@
 
 .signup-invitation p {
   margin: 0;
-  color: var(--link-text-color-new);
+  color: var(--link-text-color);
   font-feature-settings: "calt" off;
-  font-family: var(--font-main-new);
+  font-family: var(--font-main);
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
@@ -17,9 +17,9 @@
 }
 
 .signup-invitation a {
-  color: var(--link-text-color-new);
+  color: var(--link-text-color);
   font-feature-settings: "calt" off;
-  font-family: var(--font-main-new);
+  font-family: var(--font-main);
   font-size: 14px;
   font-style: normal;
   font-weight: 600;

From 2b2aa6da6a30bfe7c11e4c111cc7b973603db05e Mon Sep 17 00:00:00 2001
From: Lvyshnevska <lilia.vyshnevska@gmail.com>
Date: Tue, 22 Oct 2024 15:45:54 +0200
Subject: [PATCH 09/12] media query removed

---
 .../src/pages/Authorization/AuthorizationPage.module.css    | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/FrontEnd/src/pages/Authorization/AuthorizationPage.module.css b/FrontEnd/src/pages/Authorization/AuthorizationPage.module.css
index ec70bc966..f844ae824 100644
--- a/FrontEnd/src/pages/Authorization/AuthorizationPage.module.css
+++ b/FrontEnd/src/pages/Authorization/AuthorizationPage.module.css
@@ -6,9 +6,3 @@
   flex-shrink: 0;
   background: var(--main-background);
 }
-
-@media only screen and (min-width: 768px) and (max-width: 1511px) {
-  .auth-page {
-    min-width: 768px;
-  }
-}

From 8a2fcac3936e1ded2c13a8754ff6ccaa4207b12d Mon Sep 17 00:00:00 2001
From: Lvyshnevska <lilia.vyshnevska@gmail.com>
Date: Tue, 22 Oct 2024 16:36:34 +0200
Subject: [PATCH 10/12] padding for auth page

---
 FrontEnd/src/global.css                            |  2 +-
 .../Authorization/AuthorizationPage.module.css     | 14 ++++++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/FrontEnd/src/global.css b/FrontEnd/src/global.css
index eb65b572d..ebcab919c 100644
--- a/FrontEnd/src/global.css
+++ b/FrontEnd/src/global.css
@@ -116,6 +116,6 @@
   --wf-base-white: #FFF;
 
   --profile-min-height-block: calc(100vh - 565px);
-  --min-height-block-main: 100vh;
+  --min-height-block-main: calc(100vh - 305px);
   --company-card-color: #FFF;
 }
diff --git a/FrontEnd/src/pages/Authorization/AuthorizationPage.module.css b/FrontEnd/src/pages/Authorization/AuthorizationPage.module.css
index f844ae824..32af55424 100644
--- a/FrontEnd/src/pages/Authorization/AuthorizationPage.module.css
+++ b/FrontEnd/src/pages/Authorization/AuthorizationPage.module.css
@@ -5,4 +5,18 @@
   min-height: var(--min-height-block-main);
   flex-shrink: 0;
   background: var(--main-background);
+  padding: 120px 0;
+}
+
+
+@media only screen and (min-width: 768px) and (max-width: 1511px) {
+  .auth-page {
+    padding: 104px 0;
+  }
+}
+
+@media only screen and (max-width: 767px) {
+  .auth-page {
+    padding: 80px 0;
+  }
 }

From 2bd086f13c3a059edf95589c80c10a0c09488a65 Mon Sep 17 00:00:00 2001
From: Lvyshnevska <lilia.vyshnevska@gmail.com>
Date: Wed, 23 Oct 2024 16:50:54 +0200
Subject: [PATCH 11/12] background color renamed

---
 FrontEnd/src/global.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/FrontEnd/src/global.css b/FrontEnd/src/global.css
index ebcab919c..80b9f54dd 100644
--- a/FrontEnd/src/global.css
+++ b/FrontEnd/src/global.css
@@ -35,7 +35,7 @@
   --about-as-main-background: #0B6C61;
   --star-background: #FFD800;
   --hint-background: #25292C;
-  --main-background: #F9F5EC;
+  --light-seashell-background: #F9F5EC;
 
   /* text color*/
   --main-text-color: #292E32;

From d7bdd2dde0f5e885e673e021c4c3a1907037ac5b Mon Sep 17 00:00:00 2001
From: Lvyshnevska <lilia.vyshnevska@gmail.com>
Date: Thu, 24 Oct 2024 19:03:05 +0200
Subject: [PATCH 12/12] small components moved to login page component, styles
 upd

---
 .../pages/Authorization/AuthorizationPage.jsx |  13 --
 .../AuthorizationPage.module.css              |  22 --
 FrontEnd/src/pages/Authorization/Login.jsx    |  12 -
 .../src/pages/Authorization/Login.module.css  |   9 -
 .../src/pages/Authorization/LoginPage.jsx     | 210 +++++++++---------
 .../pages/Authorization/LoginPage.module.css  |  72 +++++-
 .../pages/Authorization/SignUpInvitation.jsx  |  13 --
 .../Authorization/SignUpInvitation.module.css |  34 ---
 .../SignUp/SignUp/ActivateProfilePage.jsx     |   4 +-
 FrontEnd/src/routes/ClientRouter.jsx          |   4 +-
 10 files changed, 182 insertions(+), 211 deletions(-)
 delete mode 100644 FrontEnd/src/pages/Authorization/AuthorizationPage.jsx
 delete mode 100644 FrontEnd/src/pages/Authorization/AuthorizationPage.module.css
 delete mode 100644 FrontEnd/src/pages/Authorization/Login.jsx
 delete mode 100644 FrontEnd/src/pages/Authorization/Login.module.css
 delete mode 100644 FrontEnd/src/pages/Authorization/SignUpInvitation.jsx
 delete mode 100644 FrontEnd/src/pages/Authorization/SignUpInvitation.module.css

diff --git a/FrontEnd/src/pages/Authorization/AuthorizationPage.jsx b/FrontEnd/src/pages/Authorization/AuthorizationPage.jsx
deleted file mode 100644
index 4d9c16315..000000000
--- a/FrontEnd/src/pages/Authorization/AuthorizationPage.jsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import Login from './Login';
-import classes from './AuthorizationPage.module.css';
-
-const AuthorizationPage = () => {
-
-  return (
-    <div className={classes['auth-page']}>
-      <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 32af55424..000000000
--- a/FrontEnd/src/pages/Authorization/AuthorizationPage.module.css
+++ /dev/null
@@ -1,22 +0,0 @@
-.auth-page {
-  display: flex;
-  justify-content: center;
-  width: 100%;
-  min-height: var(--min-height-block-main);
-  flex-shrink: 0;
-  background: var(--main-background);
-  padding: 120px 0;
-}
-
-
-@media only screen and (min-width: 768px) and (max-width: 1511px) {
-  .auth-page {
-    padding: 104px 0;
-  }
-}
-
-@media only screen and (max-width: 767px) {
-  .auth-page {
-    padding: 80px 0;
-  }
-}
diff --git a/FrontEnd/src/pages/Authorization/Login.jsx b/FrontEnd/src/pages/Authorization/Login.jsx
deleted file mode 100644
index b5adbf8ba..000000000
--- 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 591e421b8..000000000
--- a/FrontEnd/src/pages/Authorization/Login.module.css
+++ /dev/null
@@ -1,9 +0,0 @@
-.login {
-  display: flex;
-  align-self: center;
-  flex-direction: column;
-  align-items: center;
-  max-width: 572px;
-  min-width: 345px;
-  gap: 24px;
-}
diff --git a/FrontEnd/src/pages/Authorization/LoginPage.jsx b/FrontEnd/src/pages/Authorization/LoginPage.jsx
index 55e80d894..6cca5efbe 100644
--- a/FrontEnd/src/pages/Authorization/LoginPage.jsx
+++ b/FrontEnd/src/pages/Authorization/LoginPage.jsx
@@ -140,113 +140,121 @@ const LoginContent = () => {
   useEffect(() => {}, [disabled]);
 
   return (
-    <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 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={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}
+              <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>
-              <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>
-        <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']
-              }
-            >
-              Увійти
-            </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 c03bce032..fbd983960 100644
--- a/FrontEnd/src/pages/Authorization/LoginPage.module.css
+++ b/FrontEnd/src/pages/Authorization/LoginPage.module.css
@@ -1,6 +1,26 @@
+.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;
@@ -273,8 +293,54 @@ input:-webkit-autofill {
   -webkit-text-fill-color: var(--main-text-color) !important;
 }
 
-@media only screen and (max-width: 767px) {
+.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: 375px;
+    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 bae4e21ec..000000000
--- 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 fd4c4fba8..000000000
--- a/FrontEnd/src/pages/Authorization/SignUpInvitation.module.css
+++ /dev/null
@@ -1,34 +0,0 @@
-.signup-invitation {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-}
-
-.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;
-}
-
-.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%;
-}
-
-.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 de99125a0..c98cf2054 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 4598d5854..311c4fdce 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