diff --git a/.eslintrc.json b/.eslintrc.json
index c5632633..b4fffd45 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -64,6 +64,8 @@
     "class-methods-use-this": "warn",
     "prefer-promise-reject-errors": "warn",
     "react/jsx-one-expression-per-line": "off",
+    "react/destructuring-assignment": "off",
+    "no-unused-expressions": "warn",
     "camelcase": [1, { "properties": "never" }]
   }
 }
diff --git a/src/components/CardsSlider/CardsSlider.css b/src/components/CardsSlider/CardsSlider.css
deleted file mode 100644
index 5f848d29..00000000
--- a/src/components/CardsSlider/CardsSlider.css
+++ /dev/null
@@ -1,4 +0,0 @@
-@import url('./styles/cards-slider.css');
-@import url('./styles/__buttons/cards-slider__buttons.css');
-@import url('./styles/__button/cards-slider__button.css');
-@import url('./styles/__button/_next/cards-slider__button_next.css');
diff --git a/src/components/CardsSlider/CardsSlider.jsx b/src/components/CardsSlider/CardsSlider.jsx
index 896d0b2d..63ffcb79 100644
--- a/src/components/CardsSlider/CardsSlider.jsx
+++ b/src/components/CardsSlider/CardsSlider.jsx
@@ -1,35 +1,27 @@
 import React, { useRef } from 'react';
-import './CardsSlider.css';
+import './CardsSlider.scss';
 
-const CardsSlider = ({
-  children, listLength, columnGap = 24, cardWidth = 200,
-}) => {
-  const slider = useRef(null); // элемент слайдера
+const CardsSlider = ({ children, isButtonsHidden = false }) => {
+  const defaultScrollPixelsAmount = 350;
 
-  let position = 0; // смещение карточек в слайдере при листании
+  const sliderContainerRef = useRef(null);
 
-  const handlePrev = () => { // показать предыдущие карточки
-    if (position < 0) position += 200;
-    slider.current.childNodes.forEach((element) => {
-      element.style = `transform: translateX(${position}px)`;
-    });
-  };
+  const handleSliderScroll = (direction) => {
+    return () => {
+      const scrollPixelsAmount = direction === 'left' ? -defaultScrollPixelsAmount : defaultScrollPixelsAmount;
 
-  const handleNext = () => { // показать следующие карточки
-    if (position >= (-(listLength - 7) * (columnGap + cardWidth))) position -= (columnGap + cardWidth);
-    slider.current.childNodes.forEach((element) => {
-      element.style = `transform: translateX(${position}px)`;
-    });
+      sliderContainerRef.current.scrollBy({ behavior: 'smooth', left: scrollPixelsAmount });
+    };
   };
 
   return (
     <>
-      <ul className='cards-slider' ref={slider} style={{ columnGap: `${columnGap}px` }}>
+      <ul className='cards-slider' ref={sliderContainerRef}>
         {children}
       </ul>
-      <div className='cards-slider__buttons'>
-        <button className='cards-slider__button' type='button' onClick={handlePrev} />
-        <button className='cards-slider__button cards-slider__button_next' type='button' onClick={handleNext} />
+      <div className={`cards-slider__buttons ${isButtonsHidden && 'cards-slider__buttons_hidden'}`}>
+        <button className='cards-slider__button' type='button' onClick={handleSliderScroll('left')} />
+        <button className='cards-slider__button cards-slider__button_next' type='button' onClick={handleSliderScroll('right')} />
       </div>
     </>
   );
diff --git a/src/components/CardsSlider/CardsSlider.scss b/src/components/CardsSlider/CardsSlider.scss
new file mode 100644
index 00000000..ecf0c8e4
--- /dev/null
+++ b/src/components/CardsSlider/CardsSlider.scss
@@ -0,0 +1,4 @@
+@import url('./styles/cards-slider.scss');
+@import url('./styles/__buttons/cards-slider__buttons.scss');
+@import url('./styles/__button/cards-slider__button.scss');
+@import url('./styles/__button/_next/cards-slider__button_next.scss');
diff --git a/src/components/CardsSlider/styles/__button/_next/cards-slider__button_next.css b/src/components/CardsSlider/styles/__button/_next/cards-slider__button_next.scss
similarity index 100%
rename from src/components/CardsSlider/styles/__button/_next/cards-slider__button_next.css
rename to src/components/CardsSlider/styles/__button/_next/cards-slider__button_next.scss
diff --git a/src/components/CardsSlider/styles/__button/cards-slider__button.css b/src/components/CardsSlider/styles/__button/cards-slider__button.scss
similarity index 70%
rename from src/components/CardsSlider/styles/__button/cards-slider__button.css
rename to src/components/CardsSlider/styles/__button/cards-slider__button.scss
index c0d33168..0cbbe10d 100644
--- a/src/components/CardsSlider/styles/__button/cards-slider__button.css
+++ b/src/components/CardsSlider/styles/__button/cards-slider__button.scss
@@ -2,16 +2,16 @@
   width: 49px;
   height: 49px;
   margin: 0 9px 0 0;
-  background-color: rgba(0,0,0,0);
+  background-color: rgba(0, 0, 0, 0);
   background-image: url('../../../../images/slider__button.svg');
   background-position: center;
   background-size: 41px;
   background-repeat: no-repeat;
   border: none;
   cursor: pointer;
-  transition-duration: .7s;
-}
+  transition-duration: 0.7s;
 
-.cards-slider__button:hover {
-  opacity: .77;
+  &:hover {
+    opacity: 0.77;
+  }
 }
diff --git a/src/components/CardsSlider/styles/__buttons/cards-slider__buttons.css b/src/components/CardsSlider/styles/__buttons/cards-slider__buttons.css
deleted file mode 100644
index 16bc1726..00000000
--- a/src/components/CardsSlider/styles/__buttons/cards-slider__buttons.css
+++ /dev/null
@@ -1,4 +0,0 @@
-.cards-slider__buttons {
-  display: flex;
-  margin: 0 0 28px 667px;
-}
\ No newline at end of file
diff --git a/src/components/CardsSlider/styles/__buttons/cards-slider__buttons.scss b/src/components/CardsSlider/styles/__buttons/cards-slider__buttons.scss
new file mode 100644
index 00000000..e818de03
--- /dev/null
+++ b/src/components/CardsSlider/styles/__buttons/cards-slider__buttons.scss
@@ -0,0 +1,11 @@
+.cards-slider__buttons {
+  margin-bottom: 40px;
+
+  &_hidden {
+    display: none;
+  }
+
+  @media (min-width: 768px) {
+    margin-bottom: 80px;
+  }
+}
diff --git a/src/components/CardsSlider/styles/cards-slider.css b/src/components/CardsSlider/styles/cards-slider.css
deleted file mode 100644
index a6a1fcc2..00000000
--- a/src/components/CardsSlider/styles/cards-slider.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.cards-slider {
-  display: flex;
-  width: 100%;
-  margin: 32px 0 40px;
-  padding: 0 0 0 132px;
-  list-style-type: none;
-}
diff --git a/src/components/CardsSlider/styles/cards-slider.scss b/src/components/CardsSlider/styles/cards-slider.scss
new file mode 100644
index 00000000..86605593
--- /dev/null
+++ b/src/components/CardsSlider/styles/cards-slider.scss
@@ -0,0 +1,20 @@
+.cards-slider {
+  margin: 0;
+  display: flex;
+  white-space: nowrap;
+  overflow-y: hidden;
+  width: 100%;
+  padding: 0 16px;
+  box-sizing: border-box;
+  list-style-type: none;
+  column-gap: 38px;
+  overflow: hidden;
+
+  @media (min-width: 768px) {
+    padding: 20px 0 44px 44px;
+  }
+
+  @media (min-width: 1440px) {
+    padding-left: 132px;
+  }
+}
diff --git a/src/components/DetailsCard/DetailsCard.jsx b/src/components/DetailsCard/DetailsCard.jsx
index cbdda363..ffe35c68 100644
--- a/src/components/DetailsCard/DetailsCard.jsx
+++ b/src/components/DetailsCard/DetailsCard.jsx
@@ -3,13 +3,11 @@ import './DetailsCard.css';
 import PlusMinus from './svg/PlusMinus';
 import Arrow from './svg/Arrow';
 
-const DetailsCard = ({
-  children, title, isOpen, textStyle = 'faq', iconType = 'plus-minus',
-}) => {
+const DetailsCard = ({ children, title, isOpen, iconType, titleClasses }) => {
   return (
     <details className='details-card' open={isOpen}>
-      <summary className={`details-card__summary details-card__summary_style_${textStyle}`}>
-        <p className={`details-card__title details-card__title_style_${textStyle}`}>{title}</p>
+      <summary className='details-card__summary'>
+        <p className={`details-card__title ${titleClasses}`}>{title}</p>
         {iconType === 'plus-minus' && <PlusMinus />}
         {iconType === 'arrow' && <Arrow />}
       </summary>
diff --git a/src/components/DetailsCard/styles/__summary/details-card__summary.css b/src/components/DetailsCard/styles/__summary/details-card__summary.css
index 1813efe2..df8fe085 100644
--- a/src/components/DetailsCard/styles/__summary/details-card__summary.css
+++ b/src/components/DetailsCard/styles/__summary/details-card__summary.css
@@ -1,20 +1,9 @@
 .details-card__summary {
   display: flex;
   width: 100%;
-  padding: 24px 28px 20px 40px;
   justify-content: space-between;
   align-items: center;
   background-color: var(--color-background-additional);
   cursor: pointer;
   box-sizing: border-box;
 }
-
-.details-card__summary_style_shelter-pets {
-  margin-left: 132px;
-  border-radius: 20px;
-  transition-duration: .5s;
-}
-
-.shelter-pets__summary_style_shelter-pets:hover {
-  opacity: .77;
-}
diff --git a/src/components/DetailsCard/styles/__title/details-card__title.css b/src/components/DetailsCard/styles/__title/details-card__title.css
index d4cfb99f..2dfbec25 100644
--- a/src/components/DetailsCard/styles/__title/details-card__title.css
+++ b/src/components/DetailsCard/styles/__title/details-card__title.css
@@ -1,16 +1,4 @@
 .details-card__title {
-  width: 890px;
   margin: 0;
   padding: 0;
-  font-size: 24px;
-  line-height: 29px;
-}
-
-.details-card__title_style_faq {
-  font-weight: 500;
-  font-family: var(--font-family-title);
-}
-
-.details-card__title_style_shelter-pets {
-  font-weight: 400;
 }
diff --git a/src/components/DetailsCard/svg/Arrow.css b/src/components/DetailsCard/svg/Arrow.css
index f3d8cdbd..537952d6 100644
--- a/src/components/DetailsCard/svg/Arrow.css
+++ b/src/components/DetailsCard/svg/Arrow.css
@@ -1,22 +1,22 @@
-.arrow {
-  width: 37px;
-  height: 22px;
-  transition: transform .7s;
+.caret {
+  width: 24px;
+  height: 24px;
+  transition: transform 0.7s;
 }
 
-.arrow path {
-  transition-duration: .3s;
+.caret path {
+  transition-duration: 0.3s;
   fill: var(--color-text-base);
 }
 
-.details-card:hover .arrow path {
+.details-card:hover .caret path {
   fill: var(--color-accent-hover);
 }
 
-.details-card__summary:focus .arrow path {
+.details-card__summary:focus .caret path {
   fill: var(--color-accent-pressed);
 }
 
-.details-card[open] .arrow {
+.details-card[open] .caret {
   transform: rotate(180deg);
 }
diff --git a/src/components/DetailsCard/svg/Arrow.jsx b/src/components/DetailsCard/svg/Arrow.jsx
index c8c4a7d8..84922613 100644
--- a/src/components/DetailsCard/svg/Arrow.jsx
+++ b/src/components/DetailsCard/svg/Arrow.jsx
@@ -3,7 +3,7 @@ import './Arrow.css';
 
 const Arrow = () => {
   return (
-    <svg className='arrow' width='36' height='21' viewBox='0 0 36 21' fill='none' xmlns='http://www.w3.org/2000/svg'>
+    <svg className='caret' width='36' height='21' viewBox='0 0 36 21' fill='none' xmlns='http://www.w3.org/2000/svg'>
       <path
         d={`M34.9204 1.25245C35.7015 2.0335 35.7015 3.29983 34.9204 4.08088L19.4155 19.5858C18.6345 20.3668 17.3681 20.3668 16.5871
       19.5858L1.08218 4.08088C0.301133 3.29983 0.301134 2.0335 1.08218 1.25245L1.50792 0.826714C2.28897 0.0456657 3.5553 0.0456657 4.33635
diff --git a/src/components/InfoTooltip/InfoTooltip.jsx b/src/components/InfoTooltip/InfoTooltip.jsx
index 61977250..5acfe438 100644
--- a/src/components/InfoTooltip/InfoTooltip.jsx
+++ b/src/components/InfoTooltip/InfoTooltip.jsx
@@ -38,7 +38,7 @@ const InfoTooltip = ({ isOpen, image, message, onClose }) => {
           src={image}
         />
 
-        <p className='popup__text'>{message}</p>
+        <h3 className='popup__text standard-font standard-font_type_h3'>{message}</h3>
 
         <button
           type='button'
diff --git a/src/components/InfoTooltip/InfoTooltip.scss b/src/components/InfoTooltip/InfoTooltip.scss
index 60fe8344..1856a663 100644
--- a/src/components/InfoTooltip/InfoTooltip.scss
+++ b/src/components/InfoTooltip/InfoTooltip.scss
@@ -13,6 +13,7 @@ $images-path: '../../images';
   visibility: hidden;
   opacity: 0;
   transition: visibility 0.5s, opacity 0.5s ease-in-out;
+  z-index: 1;
 
   &_opened {
     display: flex;
@@ -24,7 +25,7 @@ $images-path: '../../images';
 
 .popup__container {
   width: 100%;
-  max-width: 636px;
+  max-width: 576px;
   height: fit-content;
   background-color: var(--color-background-additional);
   border-radius: 30px;
@@ -32,37 +33,32 @@ $images-path: '../../images';
   flex-direction: column;
   align-items: center;
   position: relative;
-  padding: 77px 82px 88px;
+  padding: 75px 100px 60px;
 }
 
 .popup__image {
-  width: 248px;
-  height: 248px;
+  width: 90px;
+  height: 90px;
+  margin-bottom: 35px;
 }
 
 .popup__text {
-  font-family: var(--font-family-title);
-  font-style: normal;
-  font-weight: 600;
-  font-size: 40px;
-  line-height: 49px;
   text-align: center;
-  color: var(--color-text-base);
 }
 
 .popup__button-close {
   background-image: url('#{$images-path}/icons/ic_button_close.svg');
   background-size: contain;
   border: none;
-  width: 36px;
-  height: 36px;
+  width: 28px;
+  height: 28px;
   background-color: rgba(0, 0, 0, 0);
   padding: 0;
   margin: 0;
   transition: opacity 0.2s;
   position: absolute;
-  top: 36px;
-  right: 36px;
+  top: 28px;
+  right: 28px;
 
   &:hover {
     opacity: 0.6;
diff --git a/src/components/ProfilePopup/ProfilePopup.jsx b/src/components/ProfilePopup/ProfilePopup.jsx
index 902a7f12..31dfbd88 100644
--- a/src/components/ProfilePopup/ProfilePopup.jsx
+++ b/src/components/ProfilePopup/ProfilePopup.jsx
@@ -1,24 +1,41 @@
-import React, { useContext } from 'react';
-import './ProfilePopup.css';
+import React, { useContext, useEffect, useRef } from 'react';
+import './ProfilePopup.scss';
 import { Link } from 'react-router-dom';
 import CurrentUserContext from '../../contexts/CurrentUserContext';
 
 function ProfilePopup({ isOpen, closeProfilePopup }) {
   const currentUser = useContext(CurrentUserContext);
   const { username, email } = currentUser;
+  const ref = useRef(null);
+
+  const handleOverlayClose = (e) => {
+    const popup = e.target.classList;
+    if ((ref.current && !ref.current.contains(e.target) || popup.contains('profile-popup_opened') || popup.contains('profile-popup__button-close'))) {
+      closeProfilePopup();
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('click', handleOverlayClose, true);
+    return () => {
+      document.removeEventListener('click', handleOverlayClose, true);
+    };
+  }, [closeProfilePopup]);
 
   return (
-    <div className={`profile-popup ${isOpen && 'profile-popup_opened'}`}>
-      <Link className='profile-popup__name' to='/profile' onClick={closeProfilePopup}>{username}</Link>
-      <p className='profile-popup__email'>{email}</p>
-      <Link className='profile-popup__link' to='/profile/edit' onClick={closeProfilePopup}>Редактировать профиль</Link>
-      <Link className='profile-popup__link' to='/profile/edit/password' onClick={closeProfilePopup}>Изменить пароль</Link>
-      <Link className='profile-popup__button' to='/profile/sign-out' onClick={closeProfilePopup}>Выйти</Link>
-      <button
-        type='button'
-        className='profile-popup__button-close'
-        onClick={closeProfilePopup}
-      />
+    <div className={`profile-popup ${isOpen && 'profile-popup_opened'}`} ref={ref}>
+      <div className='profile-popup__container'>
+        <Link className='profile-popup__name' to='/profile' onClick={closeProfilePopup}>{username}</Link>
+        <p className='profile-popup__email'>{email}</p>
+        <Link className='profile-popup__link' to='/profile/edit' onClick={closeProfilePopup}>Редактировать профиль</Link>
+        <Link className='profile-popup__link' to='/profile/edit/password' onClick={closeProfilePopup}>Изменить пароль</Link>
+        <Link className='profile-popup__button' to='/profile/sign-out' onClick={closeProfilePopup}>Выйти</Link>
+        <button
+          type='button'
+          className='profile-popup__button-close'
+          onClick={closeProfilePopup}
+        />
+      </div>
     </div>
   );
 }
diff --git a/src/components/ProfilePopup/ProfilePopup.css b/src/components/ProfilePopup/ProfilePopup.scss
similarity index 86%
rename from src/components/ProfilePopup/ProfilePopup.css
rename to src/components/ProfilePopup/ProfilePopup.scss
index a9a6dba8..c8aa81ee 100644
--- a/src/components/ProfilePopup/ProfilePopup.css
+++ b/src/components/ProfilePopup/ProfilePopup.scss
@@ -1,27 +1,34 @@
 .profile-popup {
-  width: 100%;
-  max-width: 281px;
-  display: flex;
-  flex-direction: column;
-  background: var(--color-background-additional);
-  box-shadow: 4px 4px 17px rgba(23, 23, 23, 0.12);
-  border-radius: 30px;
-  overflow-wrap: break-word;
+  width: 100vw;
+  height: 100vh;
   position: absolute;
-  right: 148px;
+  left: 963px;
   top: 88px;
   visibility: hidden;
   opacity: 0;
   transition: visibility 0.5s, opacity 0.5s ease-in-out;
-  padding: 20px 24px;
   z-index: 3;
+
+  &_opened {
+    display: flex;
+    visibility: visible;
+    opacity: 1;
+    z-index: 3;
+  }
 }
 
-.profile-popup_opened {
+.profile-popup__container {
   display: flex;
-  visibility: visible;
-  opacity: 1;
-  z-index: 3;
+  flex-direction: column;
+  width: 100%;
+  max-width: 281px;
+  height: fit-content;
+  background: var(--color-background-additional);
+  box-shadow: 4px 4px 17px rgba(23, 23, 23, 0.12);
+  border-radius: 30px;
+  overflow-wrap: break-word;
+  padding: 20px 24px;
+  position: relative;
 }
 
 .profile-popup__name {
@@ -86,9 +93,9 @@
   position: absolute;
   top: 14px;
   right: 19px;
-}
 
-.profile-popup__button-close:hover {
-  opacity: 0.6;
-  cursor: pointer;
+  &:hover {
+    opacity: 0.6;
+    cursor: pointer;
+  }
 }
diff --git a/src/components/ProtectedRoute.jsx b/src/components/ProtectedRoute.jsx
deleted file mode 100644
index 6fc662d6..00000000
--- a/src/components/ProtectedRoute.jsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { Navigate } from 'react-router-dom';
-
-const ProtectedRoute = ({ component: Component, ...props }) => {
-  const [loggedIn, setLoggedIn] = useState(true);
-
-  useEffect(() => {
-    if (!localStorage.getItem('access')) {
-      setLoggedIn(false);
-    }
-  }, []);
-
-  return (
-    loggedIn ? <Component {...props} /> : <Navigate to='/' replace />
-  );
-};
-
-export default ProtectedRoute;
diff --git a/src/components/ShelterCard/ShelterCard.css b/src/components/ShelterCard/ShelterCard.css
deleted file mode 100644
index 37466002..00000000
--- a/src/components/ShelterCard/ShelterCard.css
+++ /dev/null
@@ -1,7 +0,0 @@
-@import url('./styles/shelter-card.scss');
-@import url('./styles/__image/shelter-card__image.css');
-@import url('./styles/__title/shelter-card__title.css');
-@import url('./styles/__address/shelter-card__address.css');
-@import url('./styles/__working-hours/shelter-card__working-hours.css');
-@import url('./styles/__hours/shelter-card__hours.css');
-@import url('./styles/__logo/shelter-card__logo.css');
diff --git a/src/components/ShelterCard/ShelterCard.jsx b/src/components/ShelterCard/ShelterCard.jsx
index a3d848dc..336df24b 100644
--- a/src/components/ShelterCard/ShelterCard.jsx
+++ b/src/components/ShelterCard/ShelterCard.jsx
@@ -1,22 +1,18 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import './ShelterCard.css';
+import './ShelterCard.scss';
 
-const ShelterCard = ({
-  id, name, address, workingFromHour, workingToHour, logo, profileImage,
-}) => {
+const ShelterCard = ({ id, name, address, workingFromHour, workingToHour, logo, profileImage }) => {
   return (
     <Link className='shelter-card' to={`/shelters/${id}/about`}>
       <img className='shelter-card__image' src={profileImage} alt='фото' />
-      <h3 className='shelter-card__title'>{name}</h3>
-      <p className='shelter-card__address'>{address}</p>
-      <p className='shelter-card__working-hours'>
-        Часы работы:
-        {' '}
-        <span className='shelter-card__hours'>
-          {`${workingFromHour} - ${workingToHour}`}
-        </span>
-      </p>
+      <div className='shelter-card__content-container'>
+        <h3 className='shelter-card__title standard-font_type_h4'>{name}</h3>
+        <p className='shelter-card__address standard-font_type_small'>{address}</p>
+        <p className='shelter-card__working-hours standard-font_type_small'>
+          Часы работы:&nbsp;<span className='shelter-card__hours'>{`${workingFromHour} - ${workingToHour}`}</span>
+        </p>
+      </div>
       <img className='shelter-card__logo' src={logo} alt='логотип' />
     </Link>
   );
diff --git a/src/components/ShelterCard/ShelterCard.scss b/src/components/ShelterCard/ShelterCard.scss
new file mode 100644
index 00000000..381aea68
--- /dev/null
+++ b/src/components/ShelterCard/ShelterCard.scss
@@ -0,0 +1,9 @@
+@import url('./styles/shelter-card.scss');
+@import url('./styles/__image/shelter-card__image.scss');
+
+@import url('./styles/__content-container/shelter-card__content-container.scss');
+@import url('./styles/__title/shelter-card__title.scss');
+@import url('./styles/__address/shelter-card__address.scss');
+@import url('./styles/__working-hours/shelter-card__working-hours.scss');
+@import url('./styles/__hours/shelter-card__hours.scss');
+@import url('./styles/__logo/shelter-card__logo.css');
diff --git a/src/components/ShelterCard/ShelterCard.test.jsx b/src/components/ShelterCard/ShelterCard.test.jsx
new file mode 100644
index 00000000..07a66bff
--- /dev/null
+++ b/src/components/ShelterCard/ShelterCard.test.jsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { BrowserRouter as Router } from 'react-router-dom';
+import ShelterCard from './ShelterCard';
+
+describe('ShelterCard', () => {
+  const mockProps = {
+    id: '1',
+    name: 'Test Shelter',
+    address: 'Test Address',
+    workingFromHour: '09:00',
+    workingToHour: '18:00',
+    logo: 'logo.jpg',
+    profileImage: 'image.jpg',
+  };
+
+  const { workingFromHour, workingToHour } = mockProps;
+
+  it('renders correctly with the provided props', () => {
+    const { getByText, getByAltText } = render(
+      <Router>
+        <ShelterCard {...mockProps} />
+      </Router>
+    );
+
+    expect(getByText(mockProps.name)).toBeInTheDocument();
+    expect(getByText(mockProps.address)).toBeInTheDocument();
+    expect(getByAltText('фото').getAttribute('src')).toBe(mockProps.profileImage);
+    expect(getByAltText('логотип').getAttribute('src')).toBe(mockProps.logo);
+
+    const workingHoursElement = getByText('Часы работы:');
+    expect(workingHoursElement).toBeInTheDocument();
+
+    const workingHoursText = getByText(new RegExp(`${workingFromHour} - ${workingToHour}`));
+    expect(workingHoursText).toBeInTheDocument();
+  });
+
+  it('renders a link with the correct route', () => {
+    const { container } = render(
+      <Router>
+        <ShelterCard {...mockProps} />
+      </Router>
+    );
+    const linkElement = container.querySelector('a');
+
+    expect(linkElement).toHaveAttribute('href', `/shelters/${mockProps.id}/about`);
+  });
+});
diff --git a/src/components/ShelterCard/styles/__address/shelter-card__address.css b/src/components/ShelterCard/styles/__address/shelter-card__address.css
deleted file mode 100644
index c3c9fdee..00000000
--- a/src/components/ShelterCard/styles/__address/shelter-card__address.css
+++ /dev/null
@@ -1,8 +0,0 @@
-.shelter-card__address {
-  margin: 8px 20px 16px;
-  padding: 0;
-  font-size: 16px;
-  line-height: 19px;
-  font-weight: 400;
-  color: var(--color-text-additional);
-}
\ No newline at end of file
diff --git a/src/components/ShelterCard/styles/__address/shelter-card__address.scss b/src/components/ShelterCard/styles/__address/shelter-card__address.scss
new file mode 100644
index 00000000..0a6d5b4e
--- /dev/null
+++ b/src/components/ShelterCard/styles/__address/shelter-card__address.scss
@@ -0,0 +1,12 @@
+.shelter-card__address {
+  margin: 0 0 8px;
+  max-height: 38px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: wrap;
+  color: var(--color-text-additional);
+
+  @media (min-width: 768px) {
+    margin-bottom: 16px;
+  }
+}
diff --git a/src/components/ShelterCard/styles/__content-container/shelter-card__content-container.scss b/src/components/ShelterCard/styles/__content-container/shelter-card__content-container.scss
new file mode 100644
index 00000000..1371e667
--- /dev/null
+++ b/src/components/ShelterCard/styles/__content-container/shelter-card__content-container.scss
@@ -0,0 +1,8 @@
+.shelter-card__content-container {
+  padding: 16px;
+  box-sizing: border-box;
+
+  @media (min-width: 768px) {
+    padding: 20px 20px 24px;
+  }
+}
diff --git a/src/components/ShelterCard/styles/__hours/shelter-card__hours.css b/src/components/ShelterCard/styles/__hours/shelter-card__hours.scss
similarity index 100%
rename from src/components/ShelterCard/styles/__hours/shelter-card__hours.css
rename to src/components/ShelterCard/styles/__hours/shelter-card__hours.scss
diff --git a/src/components/ShelterCard/styles/__image/shelter-card__image.css b/src/components/ShelterCard/styles/__image/shelter-card__image.css
deleted file mode 100644
index 9f676a07..00000000
--- a/src/components/ShelterCard/styles/__image/shelter-card__image.css
+++ /dev/null
@@ -1,6 +0,0 @@
-.shelter-card__image {
-  width: 100%;
-  height: 159px;
-  object-fit: cover;
-  margin: 0 0 20px;
-}
diff --git a/src/components/ShelterCard/styles/__image/shelter-card__image.scss b/src/components/ShelterCard/styles/__image/shelter-card__image.scss
new file mode 100644
index 00000000..c10d3551
--- /dev/null
+++ b/src/components/ShelterCard/styles/__image/shelter-card__image.scss
@@ -0,0 +1,11 @@
+.shelter-card__image {
+  width: 190px;
+  height: 159px;
+  object-fit: cover;
+  object-position: center;
+  border-radius: 20px 20px 0 0;
+
+  @media (min-width: 530px) {
+    width: 251px;
+  }
+}
diff --git a/src/components/ShelterCard/styles/__title/shelter-card__title.css b/src/components/ShelterCard/styles/__title/shelter-card__title.css
deleted file mode 100644
index c6eea16d..00000000
--- a/src/components/ShelterCard/styles/__title/shelter-card__title.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.shelter-card__title {
-  margin: 0 20px;
-  padding: 0;
-  font-size: 20px;
-  line-height: 24px;
-  font-weight: 500;
-}
\ No newline at end of file
diff --git a/src/components/ShelterCard/styles/__title/shelter-card__title.scss b/src/components/ShelterCard/styles/__title/shelter-card__title.scss
new file mode 100644
index 00000000..a7f87835
--- /dev/null
+++ b/src/components/ShelterCard/styles/__title/shelter-card__title.scss
@@ -0,0 +1,6 @@
+.shelter-card__title {
+  margin: 0 0 8px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
diff --git a/src/components/ShelterCard/styles/__working-hours/shelter-card__working-hours.css b/src/components/ShelterCard/styles/__working-hours/shelter-card__working-hours.css
deleted file mode 100644
index 122e28fc..00000000
--- a/src/components/ShelterCard/styles/__working-hours/shelter-card__working-hours.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.shelter-card__working-hours {
-  margin: 0 20px;
-  padding: 0;
-  font-size: 16px;
-  line-height: 19px;
-  font-weight: 400;
-}
\ No newline at end of file
diff --git a/src/components/ShelterCard/styles/__working-hours/shelter-card__working-hours.scss b/src/components/ShelterCard/styles/__working-hours/shelter-card__working-hours.scss
new file mode 100644
index 00000000..d2358e24
--- /dev/null
+++ b/src/components/ShelterCard/styles/__working-hours/shelter-card__working-hours.scss
@@ -0,0 +1,5 @@
+.shelter-card__working-hours {
+  margin: 0;
+  padding: 0;
+  white-space: nowrap;
+}
diff --git a/src/components/ShelterCard/styles/shelter-card.scss b/src/components/ShelterCard/styles/shelter-card.scss
index 607621ba..bed4de8f 100644
--- a/src/components/ShelterCard/styles/shelter-card.scss
+++ b/src/components/ShelterCard/styles/shelter-card.scss
@@ -2,17 +2,15 @@
   display: flex;
   flex-direction: column;
   position: relative;
-  width: 255px;
-  padding-bottom: 23px;
+  width: 192px;
+  height: 273px;
   background-color: var(--color-background-additional);
   border: 1px solid var(--color-accent-base);
   border-radius: 20px;
   box-sizing: border-box;
-  overflow: hidden;
   color: var(--color-text-base);
   text-decoration: none;
   transition-duration: 1.5s;
-  box-sizing: border-box;
 
   &:hover {
     transform: scale(1.12);
@@ -21,4 +19,9 @@
   &:focus {
     border-color: var(--color-accent-pressed);
   }
+
+  @media (min-width: 530px) {
+    width: 253px;
+    height: 308px;
+  }
 }
diff --git a/src/contexts/App.js b/src/contexts/App.js
new file mode 100644
index 00000000..d08a64d0
--- /dev/null
+++ b/src/contexts/App.js
@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const AppContext = createContext();
+
+export default AppContext;
diff --git a/src/hooks/useValidation.js b/src/hooks/useValidation.js
index 14d25558..ebae6d43 100644
--- a/src/hooks/useValidation.js
+++ b/src/hooks/useValidation.js
@@ -1,4 +1,3 @@
-/* eslint-disable no-unused-expressions */
 /* eslint-disable no-restricted-syntax */
 /* eslint-disable guard-for-in */
 import { useEffect, useState } from 'react';
diff --git a/src/modules/Faq/Faq.css b/src/modules/Faq/Faq.css
index 2f766655..fd39cbea 100644
--- a/src/modules/Faq/Faq.css
+++ b/src/modules/Faq/Faq.css
@@ -1,16 +1,18 @@
 .faq {
   display: flex;
-  width: 1440px;
-  padding: 0 262px 80px 126px;
+  padding: 64px 308px 120px 132px;
   flex-direction: column;
   background-color: var(--color-background-base);
   box-sizing: border-box;
 }
 
+.section-title {
+  margin-bottom: 44px;
+}
+
 .faq__list {
   display: flex;
   flex-direction: column;
-  width: 1000px;
   margin: 0;
   padding: 0;
   row-gap: 24px;
@@ -30,8 +32,15 @@
 }
 
 .faq__item {
-  width: 100%;
+  width: 1000px;
+  box-sizing: border-box;
   margin: 0 auto 0 0;
   border-radius: 20px;
   overflow: hidden;
+  padding: 20px 24px 21px 40px;
+  background-color: var(--color-background-additional);
+}
+
+.faq__title {
+  font-weight: 500;
 }
diff --git a/src/modules/Faq/Faq.jsx b/src/modules/Faq/Faq.jsx
index 69f156dd..2421ab2d 100644
--- a/src/modules/Faq/Faq.jsx
+++ b/src/modules/Faq/Faq.jsx
@@ -9,17 +9,20 @@ const Faq = ({ faqList }) => {
       <section className='faq' id='faq'>
         <h2 className='section-title'>Часто задаваемые вопросы</h2>
         <ul className='faq__list'>
-          {faqList && faqList.length !== 0
-            ? faqList.map((card) => { // список карточек с часто задаваемыми вопросами
+          {faqList && faqList.length !== 0 ? (
+            // список карточек с часто задаваемыми вопросами
+            faqList.map((card) => {
               return (
                 <li className='faq__item' key={card.id}>
-                  <DetailsCard title={card.question} isOpen={false} textStyle='faq' iconType='plus-minus'>
+                  <DetailsCard title={card.question} isOpen={false} iconType='plus-minus' titleClasses='standard-font_type_h3 faq__title'>
                     <p className='faq__text'>{card.answer}</p>
                   </DetailsCard>
                 </li>
               );
             })
-            : <p>Не удалось загрузить список вопросов</p>}
+          ) : (
+            <p>Не удалось загрузить список вопросов</p>
+          )}
         </ul>
       </section>
     </MainContainer>
diff --git a/src/modules/GreenShelters/GreenShelters.jsx b/src/modules/GreenShelters/GreenShelters.jsx
deleted file mode 100644
index dc8d458b..00000000
--- a/src/modules/GreenShelters/GreenShelters.jsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-
-const GreenShelters = () => {
-  return (
-    <section className='shelters-slider-section'>
-      Зелёные приюты
-    </section>
-  );
-};
-
-export default GreenShelters;
diff --git a/src/components/NestedRoutesMenu/NestedRoutesMenu.css b/src/modules/NestedRoutesMenu/NestedRoutesMenu.css
similarity index 100%
rename from src/components/NestedRoutesMenu/NestedRoutesMenu.css
rename to src/modules/NestedRoutesMenu/NestedRoutesMenu.css
diff --git a/src/components/NestedRoutesMenu/NestedRoutesMenu.jsx b/src/modules/NestedRoutesMenu/NestedRoutesMenu.jsx
similarity index 99%
rename from src/components/NestedRoutesMenu/NestedRoutesMenu.jsx
rename to src/modules/NestedRoutesMenu/NestedRoutesMenu.jsx
index 481e7e7e..9349462b 100644
--- a/src/components/NestedRoutesMenu/NestedRoutesMenu.jsx
+++ b/src/modules/NestedRoutesMenu/NestedRoutesMenu.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { NavLink } from 'react-router-dom';
 import './NestedRoutesMenu.css';
 import Question from './svg/Question';
diff --git a/src/components/NestedRoutesMenu/svg/Question.css b/src/modules/NestedRoutesMenu/svg/Question.css
similarity index 100%
rename from src/components/NestedRoutesMenu/svg/Question.css
rename to src/modules/NestedRoutesMenu/svg/Question.css
diff --git a/src/components/NestedRoutesMenu/svg/Question.jsx b/src/modules/NestedRoutesMenu/svg/Question.jsx
similarity index 100%
rename from src/components/NestedRoutesMenu/svg/Question.jsx
rename to src/modules/NestedRoutesMenu/svg/Question.jsx
diff --git a/src/modules/NewsSection/NewsSection.jsx b/src/modules/NewsSection/NewsSection.jsx
index bdaf8e23..30576240 100644
--- a/src/modules/NewsSection/NewsSection.jsx
+++ b/src/modules/NewsSection/NewsSection.jsx
@@ -1,53 +1,81 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
 import './NewsSection.scss';
 import NewBigCard from '../../components/NewBigCard/NewBigCard';
 import NewCard from '../../components/NewCard/NewCard';
+import AppContext from '../../contexts/App';
 import newsApi from './api';
 
-const NewsSection = ({ shelterId }) => {
+const NewsSection = ({ shelterId = null }) => {
+  const app = useContext(AppContext);
   const [newsList, setNewsList] = useState([]); // список новостей
 
-  useEffect(() => {
+  const fetchNews = (fetchShelterId) => {
     newsApi
-      .getNews({ shelterId, amount: 4 }) // загрузка статей
+      .getNews({ shelterId: fetchShelterId, amount: 4 }) // загрузка статей
       .then((res) => {
-        setNewsList(res.results);
+        const resNews = res.results;
+        setNewsList(resNews);
+        if (shelterId) {
+          if (!app.shelterNewsById) {
+            app.shelterNewsById = {};
+          }
+          app.shelterNewsById[fetchShelterId] = resNews;
+        } else {
+          app.portalNews = resNews;
+        }
       })
       .catch((err) => {
         throw new Error(err);
       });
+  };
+
+  const setShelterNews = () => {
+    if (app.shelterNewsById && app.shelterNewsById[shelterId]) {
+      setNewsList(app.shelterNewsById[shelterId]);
+    } else {
+      fetchNews(shelterId);
+    }
+  };
+
+  const setPortalNews = () => {
+    if (app.portalNews) {
+      setNewsList(app.portalNews);
+    } else {
+      fetchNews(null);
+    }
+  };
+
+  useEffect(() => {
+    shelterId ? setShelterNews() : setPortalNews();
   }, []);
 
   return (
     <div className='news-section'>
-      {newsList && newsList.length !== 0
-        ? (
-          <NewBigCard
-            id={newsList[0].id}
-            header={newsList[0].header}
-            publicationDate={newsList[0].pub_date}
-            shelter={newsList[0].shelter}
-            description={newsList[0].description}
-            mainPhoto={newsList[0].profile_image}
-          />
-        )
-        : <p>Новостей нет</p>}
+      {newsList && newsList.length !== 0 ? (
+        <NewBigCard
+          id={newsList[0].id}
+          header={newsList[0].header}
+          publicationDate={newsList[0].pub_date}
+          shelter={newsList[0].shelter}
+          description={newsList[0].description}
+          mainPhoto={newsList[0].profile_image}
+        />
+      ) : (
+        <p>Новостей нет</p>
+      )}
       <ul className='news-section__column'>
-        {newsList && newsList.length > 1 && newsList.map((card, index) => {
-          return (
-            (index !== 0 && index < 4) && (
-              <li className='news-section__item' key={card.id}>
-                <NewCard
-                  id={card.id}
-                  header={card.header}
-                  publicationDate={card.pub_date}
-                  shelter={card.shelter}
-                  image={card.profile_image}
-                />
-              </li>
-            )
-          );
-        })}
+        {newsList &&
+          newsList.length > 1 &&
+          newsList.map((card, index) => {
+            return (
+              index !== 0 &&
+              index < 4 && (
+                <li className='news-section__item' key={card.id}>
+                  <NewCard id={card.id} header={card.header} publicationDate={card.pub_date} shelter={card.shelter} image={card.profile_image} />
+                </li>
+              )
+            );
+          })}
       </ul>
     </div>
   );
diff --git a/src/modules/RedShelters/RedShelters.jsx b/src/modules/RedShelters/RedShelters.jsx
deleted file mode 100644
index a1204910..00000000
--- a/src/modules/RedShelters/RedShelters.jsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-
-const RedShelters = () => {
-  return (
-    <section className='shelters-slider-section'>
-      Красные приюты
-    </section>
-  );
-};
-
-export default RedShelters;
diff --git a/src/modules/ShelterList/ShelterList.jsx b/src/modules/ShelterList/ShelterList.jsx
new file mode 100644
index 00000000..3b76109c
--- /dev/null
+++ b/src/modules/ShelterList/ShelterList.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import CardsSlider from '../../components/CardsSlider/CardsSlider';
+
+const ShelterList = ({ shelters, isDataLoading }) => {
+  return (
+    <>
+      {isDataLoading && <p>Загрузка...</p>}
+      {!isDataLoading && (
+        <CardsSlider isButtonsHidden={shelters.length === 0}>
+          {shelters.length > 0 ? shelters : <p>На данный момент таких приютов нет, попробуйте помочь приютам другого цвета, спасибо за ваше неравнодушие</p>}
+        </CardsSlider>
+      )}
+    </>
+  );
+};
+
+export default ShelterList;
diff --git a/src/modules/SheltersOnMain/SheltersOnMain.jsx b/src/modules/SheltersOnMain/SheltersOnMain.jsx
index 4ddb48b9..ae2f07a4 100644
--- a/src/modules/SheltersOnMain/SheltersOnMain.jsx
+++ b/src/modules/SheltersOnMain/SheltersOnMain.jsx
@@ -18,7 +18,6 @@ const SheltersOnMain = ({ sheltersList }) => {
   });
 
   const handleAddShelterButton = () => {
-    // eslint-disable-next-line no-unused-expressions
     username ? navigate('/add-shelter') : setIsOpenPopup(true);
   };
 
@@ -32,7 +31,6 @@ const SheltersOnMain = ({ sheltersList }) => {
       <section
         className='shelters-on-main'
         onClick={() => {
-          // eslint-disable-next-line no-unused-expressions
           isOpenPopup && setIsOpenPopup(false);
         }}
       >
diff --git a/src/modules/YellowShelters/YellowShelters.jsx b/src/modules/YellowShelters/YellowShelters.jsx
deleted file mode 100644
index c11567e8..00000000
--- a/src/modules/YellowShelters/YellowShelters.jsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-
-const YellowShelters = () => {
-  return (
-    <section className='shelters-slider-section'>
-      Жёлтые приюты
-    </section>
-  );
-};
-
-export default YellowShelters;
diff --git a/src/pages/AddShelterPage/AddShelterPage.jsx b/src/pages/AddShelterPage/AddShelterPage.jsx
index 30f3dfd0..20ad9ce5 100644
--- a/src/pages/AddShelterPage/AddShelterPage.jsx
+++ b/src/pages/AddShelterPage/AddShelterPage.jsx
@@ -1,14 +1,16 @@
-import React, { useState } from 'react';
+import React, { useState, useContext } from 'react';
 import { useNavigate } from 'react-router-dom';
 import './AddShelterPage.scss';
 import OwnerStep from './components/OwnerStep';
 import ShelterStep from './components/ShelterStep';
 import MainContainer from '../../components/MainContainer/MainContainer';
+import CurrentUserContext from '../../contexts/CurrentUserContext';
 import addShelterApi from './api';
 import imageSuccess from '../../images/icons/ic_success.svg';
 import imageError from '../../images/icons/ic_error.svg';
 
-const AddShelterPage = ({ currentUser, openPopup, setPopupImage, setMessage }) => {
+const AddShelterPage = ({ openPopup, setPopupImage, setMessage }) => {
+  const currentUser = useContext(CurrentUserContext);
   const navigate = useNavigate(); // подключение программной навигации
 
   const [step, setStep] = useState(1);
diff --git a/src/pages/AddShelterPage/components/ShelterStep.jsx b/src/pages/AddShelterPage/components/ShelterStep.jsx
index fe921fe6..ba1da1cb 100644
--- a/src/pages/AddShelterPage/components/ShelterStep.jsx
+++ b/src/pages/AddShelterPage/components/ShelterStep.jsx
@@ -80,7 +80,7 @@ const ShelterStep = ({ handleBack, setShelter }) => {
       <label className='add-shelter-form__caption'>Часы приюта*</label>
       <div className='add-shelter-form__clock'>
         <input
-          className={`add-shelter-form__time-input ${(startTime.dirty && startTime.invalidText) && 'add-shelter-form__time-input_invalid'}`}
+          className={`add-shelter-form__time-input ${startTime.dirty && startTime.invalidText && 'add-shelter-form__time-input_invalid'}`}
           value={startTime.value}
           onChange={startTime.onChange}
           onBlur={startTime.onBlur}
@@ -91,7 +91,7 @@ const ShelterStep = ({ handleBack, setShelter }) => {
         />
         <p>-</p>
         <input
-          className={`add-shelter-form__time-input ${(finishTime.dirty && finishTime.invalidText) && 'add-shelter-form__time-input_invalid'}`}
+          className={`add-shelter-form__time-input ${finishTime.dirty && finishTime.invalidText && 'add-shelter-form__time-input_invalid'}`}
           value={finishTime.value}
           onChange={finishTime.onChange}
           onBlur={finishTime.onBlur}
@@ -118,7 +118,7 @@ const ShelterStep = ({ handleBack, setShelter }) => {
       </div>
       <label className='add-shelter-form__caption'>Описание приюта*</label>
       <textarea
-        className={`add-shelter-form__textarea ${(description.dirty && description.invalidText) && 'add-shelter-form__textarea_invalid'}`}
+        className={`add-shelter-form__textarea ${description.dirty && description.invalidText && 'add-shelter-form__textarea_invalid'}`}
         value={description.value}
         onChange={description.onChange}
         onBlur={description.onBlur}
@@ -140,12 +140,12 @@ const ShelterStep = ({ handleBack, setShelter }) => {
         </label>
         <p className='register__text'>
           Я согласен с
-          <Link className='register__link' to='/' target='_blank'>
+          <Link className='register__link' to='/privacy' target='_blank'>
             {' '}
             Политикой конфиденциальности{' '}
           </Link>
           и
-          <Link className='register__link' to='/' target='_blank'>
+          <Link className='register__link' to='/terms' target='_blank'>
             {' '}
             Условиями использования сервиса
           </Link>
@@ -163,9 +163,7 @@ const ShelterStep = ({ handleBack, setShelter }) => {
           />
           <span className='checkbox' />
         </label>
-        <p className='register__text'>
-          Я оповещён, что один пользователь может зарегистрировать только один приют
-        </p>
+        <p className='register__text'>Я оповещён, что один пользователь может зарегистрировать только один приют</p>
       </div>
       <div className='add-shelter-form__buttons'>
         <Button disabled={isInvalid} submit>
diff --git a/src/pages/App/App.jsx b/src/pages/App/App.jsx
index 2c0ad977..84acf843 100644
--- a/src/pages/App/App.jsx
+++ b/src/pages/App/App.jsx
@@ -1,13 +1,12 @@
 import React, { useEffect, useState } from 'react';
-import { Navigate, Route, Routes, useNavigate } from 'react-router-dom';
+import { Route, Routes, useNavigate, Navigate } from 'react-router-dom';
 import './App.scss';
-import ProtectedRoute from '../../components/ProtectedRoute';
+import ProtectedRoute from './ProtectedRoute';
 import Header from '../../modules/Header/Header';
 import Footer from '../../modules/Footer/Footer';
 import MainPage from '../MainPage/MainPage';
 import MapPage from '../MapPage/MapPage';
 import SheltersListPage from '../SheltersListPage/SheltersListPage';
-import * as sheltersListModules from '../SheltersListPage/modules';
 import ShelterPage from '../ShelterPage/ShelterPage';
 import * as shelterModules from '../ShelterPage/modules';
 import PetPage from '../PetPage/PetPage';
@@ -27,6 +26,8 @@ import EditProfilePage from '../EditProfilePage/EditProfilePage';
 import SignOutPage from '../SignOutPage/SignOutPage';
 import ChangePasswordPage from '../ChangePasswordPage/ChangePasswordPage';
 import ActivateUserPage from '../ActivateUserPage/ActivateUserPage';
+import PrivacyPolicyPage from '../PrivacyPolicyPage/PrivacyPolicyPage';
+import TermsPage from '../TermsPage/TermsPage';
 import ActivateEmailPage from '../ActivateEmailPage/ActivateEmailPage';
 import InfoTooltip from '../../components/InfoTooltip/InfoTooltip';
 import CurrentUserContext from '../../contexts/CurrentUserContext';
@@ -34,17 +35,14 @@ import * as auth from './api/auth';
 import imageSuccess from '../../images/icons/ic_success.svg';
 import imageError from '../../images/icons/ic_error.svg';
 import getUserInfo from './api/userApi';
+import AppContext from '../../contexts/App';
 
 const App = () => {
   const navigate = useNavigate();
 
+  const [app] = useState({});
   const [loggedIn, setLoggedIn] = useState(false); // пользователь вошёл в учётную запись?
-  const [currentUser, setCurrentUser] = useState({
-    username: '',
-    email: '',
-    id: '',
-    donations_sum: '',
-  });
+  const [currentUser, setCurrentUser] = useState({ username: '', email: '', id: '', donations_sum: '' });
 
   const [infoTooltipOpen, setInfoTooltipOpen] = useState(false);
   const [infoTooltipImage, setInfoTooltipImage] = useState(null);
@@ -88,10 +86,10 @@ const App = () => {
         setInfoTooltipImage(imageSuccess);
         setMessage('Спасибо за регистрацию! Для активации аккаунта перейдите по ссылке, отправленной на вашу почту.');
         setInfoTooltipOpen(true);
-        setTimeout(closeInfoTooltip, 2000);
+        setTimeout(closeInfoTooltip, 15000);
         setTimeout(() => {
           navigate('/');
-        }, 2000);
+        }, 1000);
       })
       .catch((res) => {
         setInfoTooltipImage(imageError);
@@ -101,7 +99,7 @@ const App = () => {
           setMessage('Что-то пошло не так! Попробуйте ещё раз.');
         }
         setInfoTooltipOpen(true);
-        setTimeout(closeInfoTooltip, 2000);
+        setTimeout(closeInfoTooltip, 15000);
       });
   };
 
@@ -117,86 +115,82 @@ const App = () => {
         setInfoTooltipImage(imageSuccess);
         setMessage('Добро пожаловать на сайт!');
         setInfoTooltipOpen(true);
-        setTimeout(closeInfoTooltip, 2000);
+        setTimeout(closeInfoTooltip, 15000);
         setTimeout(() => {
           navigate('/');
-        }, 2000);
+        }, 1000);
       })
       .catch(() => {
         setInfoTooltipImage(imageError);
         setMessage('Вы ввели неверный e-mail или пароль!');
         setInfoTooltipOpen(true);
-        setTimeout(closeInfoTooltip, 2000);
+        setTimeout(closeInfoTooltip, 15000);
       });
   };
 
   return (
     <CurrentUserContext.Provider value={currentUser}>
-      <div className='page'>
-        <Header />
-        <Routes>
-          <Route path='/' element={<MainPage />} />
-          <Route path='/shelters' element={<MapPage />} />
-          <Route path='/shelters/list' element={<SheltersListPage />}>
-            <Route path='red' element={<sheltersListModules.RedShelters />} />
-            <Route path='yellow' element={<sheltersListModules.YellowShelters />} />
-            <Route path='green' element={<sheltersListModules.GreenShelters />} />
-          </Route>
-          <Route path='/shelters/:id' element={<ShelterPage />}>
-            <Route path='about' element={<shelterModules.AboutShelter />} />
-            <Route path='how-to-help' element={<shelterModules.HelpToShelter />} />
-            <Route path='news' element={<shelterModules.ShelterNews />} />
-            <Route path='pets' element={<shelterModules.ShelterPets />} />
-            <Route path='pets/:type' element={<shelterModules.ShelterSamePets />} />
-            <Route path='vacancies' element={<shelterModules.ShelterVacancies />} />
-          </Route>
-          <Route
-            path='/add-shelter'
-            element={
-              <ProtectedRoute
-                loggedIn={loggedIn}
-                component={AddShelterPage}
-                currentUser={currentUser}
-                openPopup={setInfoTooltipOpen}
-                setPopupImage={setInfoTooltipImage}
-                setMessage={setMessage}
-              />
-            }
-          />
-          <Route path='/pets/:id' element={<PetPage />} />
-          <Route path='/papers' element={<PapersPage />} />
-          <Route path='/papers/:id' element={<PaperPage />} />
-          <Route path='/news' element={<NewsPage />} />
-          <Route path='/news/:id' element={<NewPage />} />
-
-          <Route exact path='/sign-in' element={loggedIn ? <Navigate to='/' /> : <LoginPage onLogin={handleLogin} />} />
-
-          <Route exact path='/sign-up' element={loggedIn ? <Navigate to='/' /> : <RegisterPage onRegister={handleRegister} />} />
-
-          <Route exact path='/sign-up/confirm' element={loggedIn ? <Navigate to='/' /> : <SignUpConfirm />} />
-
-          <Route exact path='/password-recovery' element={loggedIn ? <Navigate to='/' /> : <PasswordRecovery />} />
-
-          <Route exact path='/password-reset' element={<NewPassword />} />
-
-          <Route exact path='/activate/:uid/:token/' element={<ActivateUserPage />} />
-
-          <Route exact path='/email-reset/:uid/:token/:new_email' element={<ActivateEmailPage onUpdateCurrentUser={setCurrentUser} />} />
-
-          <Route path='/profile' element={<ProtectedRoute loggedIn={loggedIn} component={ProfilePage} />} />
-
-          <Route path='/profile/edit' element={<ProtectedRoute loggedIn={loggedIn} component={EditProfilePage} onUpdateCurrentUser={setCurrentUser} />} />
-
-          <Route path='/profile/sign-out' element={<ProtectedRoute loggedIn={loggedIn} component={SignOutPage} onSignOut={handleSignOut} />} />
-
-          <Route path='/profile/edit/password' element={<ProtectedRoute loggedIn={loggedIn} component={ChangePasswordPage} />} />
-
-          <Route path='*' element={<NotFoundPage />} />
-        </Routes>
-        <Footer />
-
-        <InfoTooltip isOpen={infoTooltipOpen} image={infoTooltipImage} message={message} onClose={closeInfoTooltip} />
-      </div>
+      <AppContext.Provider value={app}>
+        <div className='page'>
+          <Header />
+          <Routes>
+            <Route path='/' element={<MainPage />} />
+            <Route path='/shelters'>
+              <Route index element={<MapPage />} />
+              <Route path='list' element={<Navigate to='/shelters/list/red' replace />} />
+              <Route path='list/:color' element={<SheltersListPage />} />
+              <Route path=':id' element={<ShelterPage />}>
+                <Route path='about' element={<shelterModules.AboutShelter />} />
+                <Route path='how-to-help' element={<shelterModules.HelpToShelter />} />
+                <Route path='news' element={<shelterModules.ShelterNews />} />
+                <Route path='pets' element={<shelterModules.ShelterPets />} />
+                <Route path='pets/:type' element={<shelterModules.ShelterSamePets />} />
+                <Route path='vacancies' element={<shelterModules.ShelterVacancies />} />
+              </Route>
+            </Route>
+
+            <Route
+              path='/add-shelter'
+              element={
+                <ProtectedRoute
+                  condition={loggedIn}
+                  component={AddShelterPage}
+                  openPopup={setInfoTooltipOpen}
+                  setPopupImage={setInfoTooltipImage}
+                  setMessage={setMessage}
+                />
+              }
+            />
+            <Route path='/pets/:id' element={<PetPage />} />
+            <Route path='/papers' element={<PapersPage />} />
+            <Route path='/papers/:id' element={<PaperPage />} />
+            <Route path='/news' element={<NewsPage />} />
+            <Route path='/news/:id' element={<NewPage />} />
+
+            <Route path='/privacy' element={<PrivacyPolicyPage />} />
+            <Route path='/terms' element={<TermsPage />} />
+
+            <Route exact path='/sign-in' element={<ProtectedRoute condition={!loggedIn} component={LoginPage} onLogin={handleLogin} />} />
+            <Route exact path='/sign-up' element={<ProtectedRoute condition={!loggedIn} component={RegisterPage} onRegister={handleRegister} />} />
+            <Route exact path='/sign-up/confirm' element={<ProtectedRoute condition={!loggedIn} component={SignUpConfirm} />} />
+            <Route exact path='/password-recovery' element={<ProtectedRoute condition={!loggedIn} component={PasswordRecovery} />} />
+
+            <Route exact path='/activate/:uid/:token/' element={<ActivateUserPage />} />
+            <Route exact path='/password-reset' element={<NewPassword />} />
+            <Route exact path='/email-reset/:uid/:token/:new_email' element={<ActivateEmailPage onUpdateCurrentUser={setCurrentUser} />} />
+
+            <Route path='/profile' element={<ProtectedRoute condition={loggedIn} component={ProfilePage} />} />
+            <Route path='/profile/edit' element={<ProtectedRoute condition={loggedIn} component={EditProfilePage} onUpdateCurrentUser={setCurrentUser} />} />
+            <Route path='/profile/sign-out' element={<ProtectedRoute condition={loggedIn} component={SignOutPage} onSignOut={handleSignOut} />} />
+            <Route path='/profile/edit/password' element={<ProtectedRoute condition={loggedIn} component={ChangePasswordPage} />} />
+
+            <Route path='*' element={<NotFoundPage />} />
+          </Routes>
+          <Footer />
+
+          <InfoTooltip isOpen={infoTooltipOpen} image={infoTooltipImage} message={message} onClose={closeInfoTooltip} />
+        </div>
+      </AppContext.Provider>
     </CurrentUserContext.Provider>
   );
 };
diff --git a/src/pages/App/ProtectedRoute.jsx b/src/pages/App/ProtectedRoute.jsx
new file mode 100644
index 00000000..361cbfbc
--- /dev/null
+++ b/src/pages/App/ProtectedRoute.jsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { Navigate } from 'react-router-dom';
+
+const ProtectedRoute = ({ condition, component: Component, ...props }) => {
+  return (
+    condition ? <Component {...props} /> : <Navigate to='/' replace />
+  );
+};
+
+export default ProtectedRoute;
diff --git a/src/pages/App/styles/standard-font.scss b/src/pages/App/styles/standard-font.scss
index 6f667cd2..af8aabc7 100644
--- a/src/pages/App/styles/standard-font.scss
+++ b/src/pages/App/styles/standard-font.scss
@@ -102,7 +102,7 @@
         );
       }
       &_h3 {
-        @include font-size-style(24px, 29px, 600);
+        @include font-size-style(24px, 29px, 500);
       }
       &_h4 {
         @include font-size-style(20px, 24px, 500);
diff --git a/src/pages/ChangePasswordPage/ChangePasswordPage.jsx b/src/pages/ChangePasswordPage/ChangePasswordPage.jsx
index d051801e..49173bfe 100644
--- a/src/pages/ChangePasswordPage/ChangePasswordPage.jsx
+++ b/src/pages/ChangePasswordPage/ChangePasswordPage.jsx
@@ -32,14 +32,14 @@ const ChangePasswordPage = () => {
         setInfoTooltipImage(imageSuccess);
         setMessage('Ссылка для сброса пароля отправлена на вашу почту!');
         setInfoTooltipOpen(true);
-        setTimeout(closeInfoTooltip, 2000);
-        setTimeout(() => { navigate('/'); }, 2000);
+        setTimeout(closeInfoTooltip, 15000);
+        setTimeout(() => { navigate('/'); }, 15000);
       })
       .catch(() => {
         setInfoTooltipImage(imageError);
         setMessage('Что-то пошло не так! Попробуйте ещё раз.');
         setInfoTooltipOpen(true);
-        setTimeout(closeInfoTooltip, 2000);
+        setTimeout(closeInfoTooltip, 15000);
       });
   };
 
@@ -69,6 +69,7 @@ const ChangePasswordPage = () => {
         isOpen={infoTooltipOpen}
         image={infoTooltipImage}
         message={message}
+        onClose={closeInfoTooltip}
       />
     </MainContainer>
   );
diff --git a/src/pages/EditProfilePage/EditProfilePage.jsx b/src/pages/EditProfilePage/EditProfilePage.jsx
index 11158c52..7ff3d994 100644
--- a/src/pages/EditProfilePage/EditProfilePage.jsx
+++ b/src/pages/EditProfilePage/EditProfilePage.jsx
@@ -128,13 +128,13 @@ const EditProfilePage = ({ onUpdateCurrentUser }) => {
           setInfoTooltipImage(imageSuccess);
           setMessage('Письмо для активации нового email отправлено.');
           setInfoTooltipOpen(true);
-          setTimeout(closeInfoTooltip, 2000);
+          setTimeout(closeInfoTooltip, 15000);
         })
         .catch(() => {
           setInfoTooltipImage(imageError);
           setMessage('Что-то пошло не так! Попробуйте ещё раз.');
           setInfoTooltipOpen(true);
-          setTimeout(closeInfoTooltip, 2000);
+          setTimeout(closeInfoTooltip, 15000);
         });
     }
 
@@ -145,13 +145,13 @@ const EditProfilePage = ({ onUpdateCurrentUser }) => {
           setInfoTooltipImage(imageSuccess);
           setMessage('Вы успешно изменили данные!');
           setInfoTooltipOpen(true);
-          setTimeout(closeInfoTooltip, 2000);
+          setTimeout(closeInfoTooltip, 15000);
         })
         .catch(() => {
           setInfoTooltipImage(imageError);
           setMessage('Что-то пошло не так! Попробуйте ещё раз.');
           setInfoTooltipOpen(true);
-          setTimeout(closeInfoTooltip, 2000);
+          setTimeout(closeInfoTooltip, 15000);
         });
     }
 
@@ -162,13 +162,13 @@ const EditProfilePage = ({ onUpdateCurrentUser }) => {
           setInfoTooltipImage(imageSuccess);
           setMessage('Вы успешно изменили данные! Письмо для активации нового email отправлено.');
           setInfoTooltipOpen(true);
-          setTimeout(closeInfoTooltip, 2000);
+          setTimeout(closeInfoTooltip, 15000);
         })
         .catch(() => {
           setInfoTooltipImage(imageError);
           setMessage('Что-то пошло не так! Попробуйте ещё раз.');
           setInfoTooltipOpen(true);
-          setTimeout(closeInfoTooltip, 2000);
+          setTimeout(closeInfoTooltip, 15000);
         });
     }
   };
@@ -231,6 +231,7 @@ const EditProfilePage = ({ onUpdateCurrentUser }) => {
           isOpen={infoTooltipOpen}
           image={infoTooltipImage}
           message={message}
+          onClose={closeInfoTooltip}
         />
       </MainContainer>
     </CurrentUserContext.Provider>
diff --git a/src/pages/LoginPage/LoginPage.jsx b/src/pages/LoginPage/LoginPage.jsx
index 0e4b2a3f..4063cb94 100644
--- a/src/pages/LoginPage/LoginPage.jsx
+++ b/src/pages/LoginPage/LoginPage.jsx
@@ -25,7 +25,7 @@ const LoginPage = ({ onLogin }) => {
 
   const [disabled, setDisabled] = useState(false);
 
-  const handleEmailValidate = (e) => {
+  const handleEmailChange = (e) => {
     const input = e.target;
     const validEmail = EMAIL_REGEX.test(input.value);
     setIsValidEmail(validEmail);
@@ -39,12 +39,7 @@ const LoginPage = ({ onLogin }) => {
     }
   };
 
-  const handleEmailChange = (e) => {
-    const input = e.target;
-    setUserEmail(input.value);
-  };
-
-  const handlePasswordValidate = (e) => {
+  const handlePasswordChange = (e) => {
     const input = e.target;
     setIsValidPassword(input.validity.valid);
     setUserPassword(input.value);
@@ -55,19 +50,14 @@ const LoginPage = ({ onLogin }) => {
     }
   };
 
-  const handlePasswordChange = (e) => {
-    const input = e.target;
-    setUserPassword(input.value);
-  };
-
   const handleSubmit = (e) => {
-    const input = e.target;
     e.preventDefault();
     onLogin({
       password: userPassword,
       email: userEmail,
     });
-    input.reset();
+    setUserEmail('');
+    setUserPassword('');
     setDisabled(true);
   };
 
@@ -100,7 +90,6 @@ const LoginPage = ({ onLogin }) => {
                     value={userEmail || ''}
                     spanText={emailError}
                     onChange={handleEmailChange}
-                    onBlur={handleEmailValidate}
                   />
 
                   <PasswordInput
@@ -108,7 +97,6 @@ const LoginPage = ({ onLogin }) => {
                     errorMessage={passwordError}
                     value={userPassword || ''}
                     onChange={handlePasswordChange}
-                    onBlur={handlePasswordValidate}
                   />
 
                   <Button className='user-form__button-submit_login' submit disabled={disabled}>Войти</Button>
diff --git a/src/pages/MainPage/MainPage.jsx b/src/pages/MainPage/MainPage.jsx
index 49b24eb3..d2f8b8af 100644
--- a/src/pages/MainPage/MainPage.jsx
+++ b/src/pages/MainPage/MainPage.jsx
@@ -1,44 +1,62 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
 import './MainPage.scss';
 import Banner from '../../modules/Banner/Banner';
 import Promo from '../../modules/Promo/Promo';
 import SheltersOnMain from '../../modules/SheltersOnMain/SheltersOnMain';
 import PapersOnMain from '../../modules/PapersOnMain/PapersOnMain';
 import Faq from '../../modules/Faq/Faq';
+import AppContext from '../../contexts/App';
 import mainApi from './api';
 
 const MainPage = () => {
+  const app = useContext(AppContext);
   const [sheltersList, setSheltersList] = useState([]); // список приютов на главной странице
   const [papersList, setPapersList] = useState([]); // список полезных статей на главной странице
   const [faqList, setFaqList] = useState([]); // список часто задаваемых вопросов
 
-  useEffect(() => {
+  const setSheltersByApi = () => {
     mainApi
       .getSheltersOnMain(3) // загрузка карточек с приютами на главной странице
-      .then((shelters) => {
-        setSheltersList(shelters.results);
+      .then((res) => {
+        const shelters = res.results;
+        setSheltersList(shelters);
+        app.sheltersOnMain = shelters;
       })
       .catch((err) => {
         throw new Error(err);
       });
+  };
 
+  const setPapersByApi = () => {
     mainApi
       .getPapersOnMain(3) // загрузка карточек с полезными статьями на главной странице
-      .then((papers) => {
-        setPapersList(papers.results);
+      .then((res) => {
+        const papers = res.results;
+        setPapersList(papers);
+        app.papersOnMain = papers;
       })
       .catch((err) => {
         throw new Error(err);
       });
+  };
 
+  const setFaqByApi = () => {
     mainApi
       .getFaq(4) // загрузка карточек с часто задаваемыми вопросами
-      .then((faqs) => {
-        setFaqList(faqs.results);
+      .then((res) => {
+        const faqs = res.results;
+        setFaqList(faqs);
+        app.faqsOnMain = faqs;
       })
       .catch((err) => {
         throw new Error(err);
       });
+  };
+
+  useEffect(() => {
+    app.sheltersOnMain ? setSheltersList(app.sheltersOnMain) : setSheltersByApi();
+    app.papersOnMain ? setPapersList(app.papersOnMain) : setPapersByApi();
+    app.faqsOnMain ? setFaqList(app.faqsOnMain) : setFaqByApi();
   }, []);
 
   return (
diff --git a/src/pages/MapPage/MapPage.jsx b/src/pages/MapPage/MapPage.jsx
index 3a407da5..19e0ee6f 100644
--- a/src/pages/MapPage/MapPage.jsx
+++ b/src/pages/MapPage/MapPage.jsx
@@ -48,7 +48,7 @@ const MapPage = () => {
       <main>
         <section className='search-section'>
           <SearchInput />
-          <Link className='search-section__link' to='/shelters/list'>
+          <Link className='search-section__link' to='/shelters/list/red'>
             Показать приюты списком
           </Link>
         </section>
diff --git a/src/pages/NewPage/NewPage.jsx b/src/pages/NewPage/NewPage.jsx
index 27733830..5739904f 100644
--- a/src/pages/NewPage/NewPage.jsx
+++ b/src/pages/NewPage/NewPage.jsx
@@ -30,7 +30,7 @@ const NewPage = () => {
             <img className='new-page__icon' src={dataIcon} alt='дата' />
             <p className='new-page__info'>{newInfo.pub_date}</p>
           </div>
-          <Link className='new-page__info-block new-page__info-block_link' to={newInfo.shelter ? `/shelters/${newInfo.shelter}/news` : '/'}>
+          <Link className='new-page__info-block new-page__info-block_link' to={newInfo.shelter ? `/shelters/${newInfo.shelter.id}/news` : '/'}>
             <img className='new-page__icon' src={selfIcon} alt='приют' />
             <p className='new-page__info'>{newInfo.shelter && newInfo.shelter.name}</p>
           </Link>
diff --git a/src/pages/NewPassword/NewPassword.jsx b/src/pages/NewPassword/NewPassword.jsx
index 8b4b8ea5..63d2bed4 100644
--- a/src/pages/NewPassword/NewPassword.jsx
+++ b/src/pages/NewPassword/NewPassword.jsx
@@ -28,6 +28,11 @@ const NewPassword = () => {
 
   const navigate = useNavigate();
 
+  const closeInfoTooltip = () => {
+    setInfoTooltipOpen(false);
+    setInfoTooltipImage(null);
+  };
+
   const handlePasswordChange = (e) => {
     const input = e.target;
     const validPassword = PASSWORD_REGEX.test(input.value);
@@ -64,8 +69,8 @@ const NewPassword = () => {
         setInfoTooltipOpen(true);
         setTimeout(() => {
           setInfoTooltipOpen(false);
-        }, 2000);
-        setTimeout(() => { navigate('/sign-in'); }, 2000);
+        }, 15000);
+        setTimeout(() => { navigate('/sign-in'); }, 15000);
       })
       .catch(() => {
         setInfoTooltipImage(imageError);
@@ -73,7 +78,7 @@ const NewPassword = () => {
         setInfoTooltipOpen(true);
         setTimeout(() => {
           setInfoTooltipOpen(false);
-        }, 2000);
+        }, 15000);
       });
   };
 
@@ -116,6 +121,7 @@ const NewPassword = () => {
         isOpen={infoTooltipOpen}
         image={infoTooltipImage}
         message={message}
+        onClose={closeInfoTooltip}
       />
     </MainContainer>
   );
diff --git a/src/pages/PapersPage/PapersPage.jsx b/src/pages/PapersPage/PapersPage.jsx
index f4aa71d2..c4a011e6 100644
--- a/src/pages/PapersPage/PapersPage.jsx
+++ b/src/pages/PapersPage/PapersPage.jsx
@@ -1,15 +1,17 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
 import { useMediaQuery } from 'react-responsive';
 import './PapersPage.scss';
 import MainContainer from '../../components/MainContainer/MainContainer';
-import Button from '../../ui/Button/Button';
 import PapersContent from '../../components/PapersContent/PapersContent';
+import Button from '../../ui/Button/Button';
+import AppContext from '../../contexts/App';
 import papersApi from './api';
 
 const initialPapersAmountByBreakpoint = { mobile: 3, tablet: 6, desktop: 9 };
-const papersAmount = 3;
+const additionalPapersAmount = 3;
 
 const PapersPage = () => {
+  const app = useContext(AppContext);
   const [papersList, setPapersList] = useState([]); // список отображаемых карточек со статьями
   const [hasMorePapers, setHasMorePapers] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
@@ -34,21 +36,17 @@ const PapersPage = () => {
     return initialPapersAmountByBreakpoint.desktop;
   };
 
-  const initialPapersAmount = getPapersAmount();
-
-  const fetchPapers = () => {
-    if (isLoading) return;
-
-    setIsLoading(true);
-    setIsError(false);
-
-    const amount = papersList.length === 0 ? initialPapersAmount : papersAmount;
-
+  const setPapersByApi = (amount, currentLength) => {
     papersApi
-      .getPapers(amount, papersList.length)
+      .getPapers(amount, currentLength)
       .then((res) => {
-        setPapersList([...papersList, ...res.results]);
-        setHasMorePapers(Boolean(res.next));
+        const resPapers = res.results;
+        setPapersList([...papersList, ...resPapers]);
+        app.portalPapers = [...papersList, ...resPapers];
+
+        const resNest = Boolean(res.next);
+        setHasMorePapers(resNest);
+        app.hasMorePortalPapers = resNest;
       })
       .catch((err) => {
         setIsError(true);
@@ -59,12 +57,22 @@ const PapersPage = () => {
       });
   };
 
-  const handleClick = () => {
-    fetchPapers();
+  const fetchPapers = () => {
+    if (isLoading) return;
+    const amount = papersList.length === 0 ? getPapersAmount() : additionalPapersAmount;
+
+    setIsLoading(true);
+    setIsError(false);
+    setPapersByApi(amount, papersList.length);
   };
 
   useEffect(() => {
-    fetchPapers();
+    if (app.portalPapers) {
+      setPapersList(app.portalPapers);
+      setHasMorePapers(app.hasMorePortalPapers);
+    } else {
+      fetchPapers();
+    }
   }, []);
 
   return (
@@ -78,7 +86,7 @@ const PapersPage = () => {
         </div>
         <PapersContent isLoading={isLoading} isError={isError} papersList={papersList} />
         {hasMorePapers && (
-          <Button className='papers__load-more-button' onClick={handleClick}>
+          <Button className='papers__load-more-button' onClick={fetchPapers} disabled={isLoading}>
             Больше статей
           </Button>
         )}
diff --git a/src/pages/PasswordRecovery/PasswordRecovery.jsx b/src/pages/PasswordRecovery/PasswordRecovery.jsx
index cdf8b8f3..90518748 100644
--- a/src/pages/PasswordRecovery/PasswordRecovery.jsx
+++ b/src/pages/PasswordRecovery/PasswordRecovery.jsx
@@ -57,8 +57,8 @@ const PasswordRecovery = () => {
         setInfoTooltipImage(imageSuccess);
         setMessage('Ссылка для восстановления пароля отправлена на указанную почту!');
         setInfoTooltipOpen(true);
-        setTimeout(closeInfoTooltip, 2000);
-        setTimeout(() => { navigate('/'); }, 2000);
+        setTimeout(closeInfoTooltip, 15000);
+        setTimeout(() => { navigate('/'); }, 15000);
       })
       .catch((res) => {
         setInfoTooltipImage(imageError);
@@ -68,7 +68,7 @@ const PasswordRecovery = () => {
           setMessage('Что-то пошло не так! Попробуйте ещё раз.');
         }
         setInfoTooltipOpen(true);
-        setTimeout(closeInfoTooltip, 2000);
+        setTimeout(closeInfoTooltip, 15000);
       });
   };
 
@@ -110,6 +110,7 @@ const PasswordRecovery = () => {
         isOpen={infoTooltipOpen}
         image={infoTooltipImage}
         message={message}
+        onClose={closeInfoTooltip}
       />
     </MainContainer>
   );
diff --git a/src/pages/PrivacyPolicyPage/ParagraphList.jsx b/src/pages/PrivacyPolicyPage/ParagraphList.jsx
new file mode 100644
index 00000000..c54d10dc
--- /dev/null
+++ b/src/pages/PrivacyPolicyPage/ParagraphList.jsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+const ParagraphList = ({ description }) => {
+  return description.map((paragraph) => {
+    return (
+      <p key={paragraph} className='standard-font standard-font_type_small'>
+        {paragraph}
+      </p>
+    );
+  });
+};
+
+export default ParagraphList;
diff --git a/src/pages/PrivacyPolicyPage/PrivacyPolicyPage.jsx b/src/pages/PrivacyPolicyPage/PrivacyPolicyPage.jsx
new file mode 100644
index 00000000..2ba817f6
--- /dev/null
+++ b/src/pages/PrivacyPolicyPage/PrivacyPolicyPage.jsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import './PrivacyPolicyPage.scss';
+import DetailsCard from '../../components/DetailsCard/DetailsCard';
+import MainContainer from '../../components/MainContainer/MainContainer';
+import dataPrivacyPolicy from './constants';
+
+const PrivacyPolicyPage = () => {
+  return (
+    <MainContainer base='additional'>
+      <section className='privacy-policy__container'>
+        <h2 className='standard-font_type_h3 privacy-policy__headline'>Политика в отношении обработки персональных данных</h2>
+
+        <ul className='privacy-policy__list'>
+          {dataPrivacyPolicy.map((privacyItem) => {
+            // деструктурируем объект в rendererComponent, чтобы jsx мог отрисовать компонент
+            const { rendererComponent: Component, description } = privacyItem;
+
+            return (
+              <li key={privacyItem.id} className='privacy-policy__item'>
+                <DetailsCard key={privacyItem.id} title={privacyItem.title} isOpen={false} iconType='arrow' titleClasses='standard-font_type_h4'>
+                  <div className='privacy-policy__description-section'>{Component && <Component description={description} />}</div>
+                </DetailsCard>
+              </li>
+            );
+          })}
+        </ul>
+      </section>
+    </MainContainer>
+  );
+};
+
+export default PrivacyPolicyPage;
diff --git a/src/pages/PrivacyPolicyPage/PrivacyPolicyPage.scss b/src/pages/PrivacyPolicyPage/PrivacyPolicyPage.scss
new file mode 100644
index 00000000..6a2117a7
--- /dev/null
+++ b/src/pages/PrivacyPolicyPage/PrivacyPolicyPage.scss
@@ -0,0 +1,5 @@
+@import url('./styles/__container/privacy-policy__container.scss');
+@import url('./styles/__description-section/privacy-policy__description-section.scss');
+@import url('./styles/__headline/privacy-policy__headline.scss');
+@import url('./styles/__list/privacy-policy__list.scss');
+@import url('./styles/__item/privacy-policy__item.scss');
diff --git a/src/pages/PrivacyPolicyPage/Table/Table.jsx b/src/pages/PrivacyPolicyPage/Table/Table.jsx
new file mode 100644
index 00000000..df269e97
--- /dev/null
+++ b/src/pages/PrivacyPolicyPage/Table/Table.jsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import './Table.scss';
+
+const Table = () => {
+  return (
+    <table className='privacy-policy-table standard-font_type_small'>
+      <tbody>
+        <tr>
+          <td className='privacy-policy-table__cell'>Цель обработки</td>
+          <td className='privacy-policy-table__cell'>
+            Информирование Пользователя посредством отправки электронных писем и предоставление доступа Пользователю к сервисам, информации и/или материалам,
+            содержащимся на веб-сайте
+          </td>
+        </tr>
+
+        <tr>
+          <td className='privacy-policy-table__cell'>Персональные данные</td>
+          <td className='privacy-policy-table__cell'>
+            <ul className='privacy-policy-table__list'>
+              <li>фамилия, имя, отчество</li>
+              <li>электронный адрес</li>
+              <li>номера телефонов</li>
+              <li>год, месяц, дата и место рождения</li>
+              <li>фотографии</li>
+            </ul>
+          </td>
+        </tr>
+
+        <tr>
+          <td className='privacy-policy-table__cell'>Правовые основания</td>
+          <td className='privacy-policy-table__cell'>уставные (учредительные) документы Оператора</td>
+        </tr>
+
+        <tr>
+          <td className='privacy-policy-table__cell'>Виды обработки персональных данных</td>
+          <td className='privacy-policy-table__cell'>
+            <ul className='privacy-policy-table__list'>
+              <li>Сбор, запись, систематизация, накопление, хранение, уничтожение и обезличивание персональных данных</li>
+              <li>Отправка информационных писем на адрес электронной почты</li>
+            </ul>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  );
+};
+
+export default Table;
diff --git a/src/pages/PrivacyPolicyPage/Table/Table.scss b/src/pages/PrivacyPolicyPage/Table/Table.scss
new file mode 100644
index 00000000..1fc10873
--- /dev/null
+++ b/src/pages/PrivacyPolicyPage/Table/Table.scss
@@ -0,0 +1,35 @@
+.privacy-policy-table {
+  border-collapse: collapse;
+  width: 920px;
+
+  .privacy-policy-table__cell {
+    border: 0.5px solid var(--color-text-base);
+    padding-top: 8px;
+    padding-bottom: 8px;
+
+    &:nth-child(odd) {
+      width: 170px;
+      padding-left: 20px;
+      padding-right: 16px;
+    }
+
+    &:nth-child(even) {
+      box-sizing: border-box;
+      padding-right: 20px;
+      padding-left: 16px;
+    }
+  }
+
+  tr:first-child td {
+    padding-top: 20px;
+  }
+
+  tr:last-child td {
+    padding-bottom: 20px;
+  }
+
+  .privacy-policy-table__list {
+    padding-left: 23px;
+    list-style-type: disc;
+  }
+}
diff --git a/src/pages/PrivacyPolicyPage/constants.js b/src/pages/PrivacyPolicyPage/constants.js
new file mode 100644
index 00000000..7addd8bc
--- /dev/null
+++ b/src/pages/PrivacyPolicyPage/constants.js
@@ -0,0 +1,355 @@
+import ParagraphList from './ParagraphList';
+import Table from './Table/Table';
+
+const dataPrivacyPolicy = [
+  {
+    id: 1,
+    rendererComponent: ParagraphList,
+    title: '1. Общие положения',
+    description: [
+      `Настоящая политика обработки персональных данных составлена в соответствии 
+    с требованиями Федерального закона 
+  от 27.07.2006. № 152-ФЗ «О персональных данных»
+   (далее — Закон о персональных данных) и определяет 
+   порядок обработки персональных данных и меры по обеспечению 
+   безопасности персональных данных, предпринимаемые Лисюткиным Даниилом Юрьевичем (далее — Оператор).`,
+
+      `1.1. Оператор ставит своей важнейшей 
+   целью и условием осуществления своей деятельности 
+   соблюдение прав и свобод человека и гражданина при 
+   обработке его персональных данных, в том числе защиты 
+   прав на неприкосновенность частной жизни, личную и семейную тайну.`,
+
+      `1.2. Настоящая политика Оператора в отношении обработки
+   персональных данных (далее — Политика) применяется ко всей информации, 
+   которую Оператор может получить о посетителях веб-сайта https://lapkipomoshi.ru/.`,
+    ],
+  },
+
+  {
+    id: 2,
+    rendererComponent: ParagraphList,
+    title: '2. Основные понятия, используемые в Политике',
+    description: [
+      `2.1. Автоматизированная обработка персональных данных —
+    обработка персональных данных с помощью средств вычислительной техники.`,
+
+      `2.2. Блокирование персональных данных — временное
+       прекращение обработки персональных данных (за исключением случаев,
+           если обработка необходима для уточнения персональных данных).`,
+
+      `2.3. Веб-сайт — совокупность графических и информационных
+           материалов, а также программ для ЭВМ и баз данных, обеспечивающих
+           их доступность в сети интернет по сетевому адресу https://lapkipomoshi.ru/.
+           `,
+
+      ` 2.4. Информационная система персональных данных —
+          совокупность содержащихся в базах данных персональных данных и
+          обеспечивающих их обработку информационных технологий и технических средств.
+          `,
+
+      `2.5. Обезличивание персональных данных — действия,
+          в результате которых невозможно определить без использования дополнительной
+          информации принадлежность персональных данных конкретному Пользователю или иному субъекту персональных данных.`,
+
+      `2.6. Обработка персональных данных — любое действие
+      (операция) или совокупность действий (операций), совершаемых с использованием
+      средств автоматизации или без использования таких средств с персональными данными,
+       включая сбор, запись, систематизацию, накопление, хранение, уточнение
+       (обновление, изменение), извлечение, использование, передачу
+       (распространение, предоставление, доступ), обезличивание,
+        блокирование, удаление, уничтожение персональных данных.
+     `,
+
+      `2.7. Оператор — государственный орган,
+      муниципальный орган, юридическое или физическое лицо,
+      самостоятельно или совместно с другими лицами организующие
+      и/или осуществляющие обработку персональных данных, а также
+       определяющие цели обработки персональных данных,
+        состав персональных данных, подлежащих обработке, действия (операции), совершаемые с персональными данными.
+    `,
+
+      `2.8. Персональные данные — любая информация,
+      относящаяся прямо или косвенно к определенному или определяемому Пользователю веб-сайта https://lapkipomoshi.ru/.
+    `,
+
+      `2.9. Персональные данные, разрешенные субъектом персональных данных для распространения,
+       — персональные данные, доступ неограниченного круга лиц к которым предоставлен субъектом персональных данных
+       путем дачи согласия на обработку персональных данных, разрешенных субъектом персональных данных для
+       распространения в порядке, предусмотренном Законом о персональных данных (далее — персональные данные, разрешенные для распространения).
+    `,
+
+      `2.10. Пользователь — любой посетитель веб-сайта https://lapkipomoshi.ru/.
+    `,
+
+      `2.11. Предоставление персональных данных — действия, направленные на раскрытие
+      персональных данных определенному лицу или определенному кругу лиц.
+    `,
+    ],
+  },
+
+  {
+    id: 3,
+    rendererComponent: ParagraphList,
+    title: '3. Основные права и обязанности Оператора',
+    description: [
+      `3.1. Оператор имеет право:
+    `,
+
+      '— получать от субъекта персональных данных достоверные информацию и/или документы, содержащие персональные данные;',
+
+      `— в случае отзыва субъектом персональных данных согласия на обработку персональных данных, 
+      а также, направления обращения с требованием о прекращении обработки персональных данных, 
+      Оператор вправе продолжить обработку персональных данных без согласия субъекта персональных 
+      данных при наличии оснований, указанных в Законе о персональных данных;
+      `,
+
+      `— самостоятельно определять состав и перечень мер, необходимых и достаточных для обеспечения 
+      выполнения обязанностей, предусмотренных Законом о персональных данных и принятыми в соответствии 
+      с ним нормативными правовыми актами, если иное не предусмотрено Законом о персональных данных или другими федеральными законами.`,
+    ],
+  },
+
+  {
+    id: 4,
+    rendererComponent: ParagraphList,
+    title: '4. Основные права и обязанности субъектов персональных данных',
+    description: [
+      `4.1. Субъекты персональных данных имеют право:
+    `,
+
+      `— получать информацию, касающуюся обработки его персональных данных, за исключением случаев, 
+      предусмотренных федеральными законами. Сведения предоставляются субъекту персональных данных 
+      Оператором в доступной форме, и в них не должны содержаться персональные данные, относящиеся 
+      к другим субъектам персональных данных, за исключением случаев, когда имеются законные основания
+       для раскрытия таких персональных данных. Перечень информации и порядок ее получения установлен Законом о персональных данных;
+    `,
+
+      `— требовать от оператора уточнения его персональных данных, их блокирования или уничтожения в случае, если 
+    персональные данные являются неполными, устаревшими, неточными, незаконно полученными или не являются
+     необходимыми для заявленной цели обработки, а также принимать предусмотренные законом меры по защите своих прав;
+    `,
+
+      `— выдвигать условие предварительного согласия при обработке персональных данных в целях продвижения на рынке товаров, работ и услуг;
+    `,
+
+      `— на отзыв согласия на обработку персональных данных, а также, на направление требования о прекращении обработки персональных данных;
+    `,
+
+      `— обжаловать в уполномоченный орган по защите прав субъектов персональных данных или в судебном порядке 
+      неправомерные действия или бездействие Оператора при обработке его персональных данных;
+      `,
+
+      `— на осуществление иных прав, предусмотренных законодательством РФ.
+      `,
+
+      `4.2. Субъекты персональных данных обязаны:
+      `,
+
+      `— предоставлять Оператору достоверные данные о себе;
+      `,
+
+      `— сообщать Оператору об уточнении (обновлении, изменении) своих персональных данных.
+      `,
+
+      `4.3. Лица, передавшие Оператору недостоверные сведения о себе, либо сведения о другом субъекте персональных 
+      данных без согласия последнего, несут ответственность в соответствии с законодательством РФ.
+      `,
+    ],
+  },
+
+  {
+    id: 5,
+    rendererComponent: ParagraphList,
+    title: '5. Принципы обработки персональных данных',
+    description: [
+      `5.1. Обработка персональных данных осуществляется на законной и справедливой основе.
+    `,
+
+      `5.2. Обработка персональных данных ограничивается достижением конкретных, заранее определенных и законных 
+      целей. Не допускается обработка персональных данных, несовместимая с целями сбора персональных данных.
+    `,
+
+      `5.3. Не допускается объединение баз данных, содержащих персональные данные, обработка которых осуществляется в целях, несовместимых между собой.
+    `,
+
+      '5.4. Обработке подлежат только персональные данные, которые отвечают целям их обработки.',
+
+      `5.5. Содержание и объем обрабатываемых персональных данных соответствуют заявленным целям обработки. 
+      Не допускается избыточность обрабатываемых персональных данных по отношению к заявленным целям их обработки.
+      `,
+
+      `5.6. При обработке персональных данных обеспечивается точность персональных данных, их достаточность, 
+      а в необходимых случаях и актуальность по отношению к целям обработки персональных данных. Оператор 
+      принимает необходимые меры и/или обеспечивает их принятие по удалению или уточнению неполных или неточных данных.`,
+
+      `5.7. Хранение персональных данных осуществляется в форме, позволяющей определить субъекта персональных 
+      данных, не дольше, чем этого требуют цели обработки персональных данных, если срок хранения персональных 
+      данных не установлен федеральным законом, договором, стороной которого, выгодоприобретателем или 
+      поручителем по которому является субъект персональных данных. Обрабатываемые персональные данные уничтожаются либо
+    обезличиваются по достижении целей обработки или в случае утраты необходимости в достижении этих целей, если иное не предусмотрено федеральным законом.`,
+    ],
+  },
+
+  { id: 6, rendererComponent: Table, title: '6. Цели обработки персональных данных', description: [] },
+
+  {
+    id: 7,
+    rendererComponent: ParagraphList,
+    title: '7. Условия обработки персональных данных',
+    description: [
+      `7.1. Обработка персональных данных осуществляется с согласия субъекта персональных данных на обработку его персональных данных.
+    `,
+
+      `7.2. Обработка персональных данных необходима для достижения целей, предусмотренных международным 
+      договором Российской Федерации или законом, для осуществления возложенных законодательством Российской 
+      Федерации на оператора функций, полномочий и обязанностей.
+    `,
+
+      `7.3. Обработка персональных данных необходима для осуществления правосудия, исполнения судебного акта,
+     акта другого органа или должностного лица, подлежащих исполнению в соответствии с законодательством Российской Федерации об исполнительном производстве.
+    `,
+
+      `7.4. Обработка персональных данных необходима для исполнения договора, стороной которого либо
+     выгодоприобретателем или поручителем по которому является субъект персональных данных, а также для
+      заключения договора по инициативе субъекта персональных данных или договора, по которому субъект 
+      персональных данных будет являться выгодоприобретателем или поручителем.
+    `,
+
+      `7.5. Обработка персональных данных необходима для осуществления прав и законных интересов оператора 
+      или третьих лиц либо для достижения общественно значимых целей при условии, что при этом не нарушаются права и свободы субъекта персональных данных.
+    `,
+
+      `7.6. Осуществляется обработка персональных данных, доступ неограниченного круга лиц к которым предоставлен 
+    субъектом персональных данных либо по его просьбе (далее — общедоступные персональные данные).
+    `,
+
+      `7.7. Осуществляется обработка персональных данных, подлежащих опубликованию или обязательному раскрытию в соответствии с федеральным законом.
+    `,
+    ],
+  },
+
+  {
+    id: 8,
+    rendererComponent: ParagraphList,
+    title: '8. Порядок сбора, хранения, передачи и других видов обработки персональных данных',
+    description: [
+      `Безопасность персональных данных, которые обрабатываются Оператором, обеспечивается путем реализации
+       правовых, организационных и технических мер, необходимых для выполнения в полном объеме требований 
+       действующего законодательства в области защиты персональных данных.
+    `,
+
+      `8.1. Оператор обеспечивает сохранность персональных данных и принимает все возможные меры, исключающие 
+    доступ к персональным данным неуполномоченных лиц.`,
+
+      `8.2. Персональные данные Пользователя никогда, ни при каких условиях не будут переданы третьим лицам,
+     за исключением случаев, связанных с исполнением действующего законодательства либо в случае, если 
+     субъектом персональных данных дано согласие Оператору на передачу данных третьему лицу для исполнения обязательств по гражданско-правовому договору.`,
+
+      `8.3. В случае выявления неточностей в персональных данных, Пользователь может актуализировать их 
+     самостоятельно, путем направления Оператору уведомление на адрес электронной почты Оператора 
+     mail@lapki-pomoshi.ru с пометкой «Актуализация персональных данных».
+     `,
+
+      `8.4. Срок обработки персональных данных определяется достижением целей, для которых были собраны
+      персональные данные, если иной срок не предусмотрен договором или действующим законодательством.
+     `,
+
+      `Пользователь может в любой момент отозвать свое согласие на обработку персональных данных, 
+     направив Оператору уведомление посредством электронной почты на электронный адрес Оператора 
+     mail@lapki-pomoshi.ru с пометкой «Отзыв согласия на обработку персональных данных».
+     `,
+
+      `8.5. Вся информация, которая собирается сторонними сервисами, в том числе платежными системами, 
+     средствами связи и другими поставщиками услуг, хранится и обрабатывается указанными лицами (Операторами) 
+     в соответствии с их Пользовательским соглашением и Политикой конфиденциальности. Субъект персональных
+      данных и/или с указанными документами. Оператор не несет ответственность за действия третьих лиц, в том 
+      числе указанных в настоящем пункте поставщиков услуг.
+     `,
+
+      `8.6. Установленные субъектом персональных данных запреты на передачу (кроме предоставления доступа), 
+     а также на обработку или условия обработки (кроме получения доступа) персональных данных, разрешенных 
+     для распространения, не действуют в случаях обработки персональных данных в государственных, 
+     общественных и иных публичных интересах, определенных законодательством РФ.
+     `,
+
+      `8.7. Оператор при обработке персональных данных обеспечивает конфиденциальность персональных данных.
+     `,
+
+      `8.8. Оператор осуществляет хранение персональных данных в форме, позволяющей определить субъекта 
+     персональных данных, не дольше, чем этого требуют цели обработки персональных данных, если срок хранения 
+     персональных данных не установлен федеральным законом, договором, стороной которого, выгодоприобретателем 
+     или поручителем по которому является субъект персональных данных.
+     `,
+
+      `8.9. Условием прекращения обработки персональных данных может являться достижение целей обработки 
+     персональных данных, истечение срока действия согласия субъекта персональных данных, отзыв согласия 
+     субъектом персональных данных или требование о прекращении обработки персональных данных, а также выявление неправомерной обработки персональных данных.
+     `,
+    ],
+  },
+
+  {
+    id: 9,
+    rendererComponent: ParagraphList,
+    title: '9. Перечень действий, производимых Оператором с полученными персональными данными',
+    description: [
+      `9.1. Оператор осуществляет сбор, запись, систематизацию, накопление, хранение, уточнение
+     (обновление, изменение), извлечение, использование, передачу (распространение, предоставление, доступ), 
+     обезличивание, блокирование, удаление и уничтожение персональных данных.
+    `,
+
+      `9.2. Оператор осуществляет автоматизированную обработку персональных данных с получением и/или передачей
+     полученной информации по информационно-телекоммуникационным сетям или без таковой.
+    `,
+    ],
+  },
+
+  {
+    id: 10,
+    rendererComponent: ParagraphList,
+    title: '10. Трансграничная передача персональных данных',
+    description: [
+      `10.1. Оператор до начала осуществления деятельности по трансграничной передаче 
+    персональных данных обязан уведомить уполномоченный орган по защите прав субъектов персональных 
+    данных о своем намерении осуществлять трансграничную передачу персональных данных (такое уведомление 
+        направляется отдельно от уведомления о намерении осуществлять обработку персональных данных).`,
+
+      `10.2. Оператор до подачи вышеуказанного уведомления, обязан получить от органов власти иностранного 
+      государства, иностранных физических лиц, иностранных юридических лиц, которым планируется трансграничная
+       передача персональных данных, соответствующие сведения.
+        `,
+    ],
+  },
+
+  {
+    id: 11,
+    rendererComponent: ParagraphList,
+    title: '11. Конфиденциальность персональных данных',
+    description: [
+      `Оператор и иные лица, получившие доступ к персональным данным, обязаны не раскрывать 
+    третьим лицам и не распространять персональные данные без согласия субъекта персональных данных, если иное не предусмотрено федеральным законом.
+    `,
+    ],
+  },
+
+  {
+    id: 12,
+    rendererComponent: ParagraphList,
+    title: '12. Заключительные положения',
+    description: [
+      `12.1. Пользователь может получить любые разъяснения по интересующим вопросам, 
+    касающимся обработки его персональных данных, обратившись к Оператору с помощью электронной почты mail@lapki-pomoshi.ru.
+    `,
+
+      `12.2. В данном документе будут отражены любые изменения политики обработки персональных данных Оператором. 
+    Политика действует бессрочно до замены ее новой версией.
+    `,
+
+      `12.3. Актуальная версия Политики в свободном доступе расположена в сети Интернет по адресу https://lapkipomoshi.ru/privacy.
+    `,
+    ],
+  },
+];
+
+export default dataPrivacyPolicy;
diff --git a/src/pages/PrivacyPolicyPage/styles/__container/privacy-policy__container.scss b/src/pages/PrivacyPolicyPage/styles/__container/privacy-policy__container.scss
new file mode 100644
index 00000000..413b1df2
--- /dev/null
+++ b/src/pages/PrivacyPolicyPage/styles/__container/privacy-policy__container.scss
@@ -0,0 +1,12 @@
+.privacy-policy__container {
+  background-color: var(--color-background-additional);
+  margin: 20px auto 80px;
+  padding: 40px;
+  border-radius: 20px;
+  width: 550px; //макета на адаптив пока нет, поставила временные значения
+
+  @media (min-width: 1200px) {
+    width: 1096px;
+    margin: 44px auto 80px;
+  }
+}
diff --git a/src/pages/PrivacyPolicyPage/styles/__description-section/privacy-policy__description-section.scss b/src/pages/PrivacyPolicyPage/styles/__description-section/privacy-policy__description-section.scss
new file mode 100644
index 00000000..da0624c0
--- /dev/null
+++ b/src/pages/PrivacyPolicyPage/styles/__description-section/privacy-policy__description-section.scss
@@ -0,0 +1,6 @@
+.privacy-policy__description-section {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 16px 60px 0 0;
+}
diff --git a/src/pages/PrivacyPolicyPage/styles/__headline/privacy-policy__headline.scss b/src/pages/PrivacyPolicyPage/styles/__headline/privacy-policy__headline.scss
new file mode 100644
index 00000000..ea243848
--- /dev/null
+++ b/src/pages/PrivacyPolicyPage/styles/__headline/privacy-policy__headline.scss
@@ -0,0 +1,3 @@
+.privacy-policy__headline {
+  margin: 0 0 32px 0;
+}
diff --git a/src/pages/PrivacyPolicyPage/styles/__item/privacy-policy__item.scss b/src/pages/PrivacyPolicyPage/styles/__item/privacy-policy__item.scss
new file mode 100644
index 00000000..179664e5
--- /dev/null
+++ b/src/pages/PrivacyPolicyPage/styles/__item/privacy-policy__item.scss
@@ -0,0 +1,3 @@
+.privacy-policy__item:not(:last-child) {
+  padding-bottom: 24px;
+}
diff --git a/src/pages/PrivacyPolicyPage/styles/__list/privacy-policy__list.scss b/src/pages/PrivacyPolicyPage/styles/__list/privacy-policy__list.scss
new file mode 100644
index 00000000..02d43e50
--- /dev/null
+++ b/src/pages/PrivacyPolicyPage/styles/__list/privacy-policy__list.scss
@@ -0,0 +1,4 @@
+.privacy-policy__list {
+  list-style-type: none;
+  padding: 0;
+}
diff --git a/src/pages/RegisterPage/RegisterPage.jsx b/src/pages/RegisterPage/RegisterPage.jsx
index 0406619b..cdb1c5c7 100644
--- a/src/pages/RegisterPage/RegisterPage.jsx
+++ b/src/pages/RegisterPage/RegisterPage.jsx
@@ -47,11 +47,12 @@ const RegisterPage = ({ onRegister }) => {
 
   const [isChecked, setIsChecked] = useState(false);
 
-  const handleNameValidate = (e) => {
+  const handleNameChange = (e) => {
     const input = e.target;
     const validName = NAME_REGEX.test(input.value);
     const nameOnlySymbols = SYMBOL.test(input.value);
     setIsValidName(validName);
+    setUserName(input.value);
     if (input.value.length === 0) {
       setNameError(NAME_NOT_FOUND);
       setIsValidName(false);
@@ -71,15 +72,11 @@ const RegisterPage = ({ onRegister }) => {
     }
   };
 
-  const handleNameChange = (e) => {
-    const input = e.target;
-    setUserName(input.value);
-  };
-
-  const handleEmailValidate = (e) => {
+  const handleEmailChange = (e) => {
     const input = e.target;
     const validEmail = EMAIL_REGEX.test(input.value);
     setIsValidEmail(validEmail);
+    setUserEmail(input.value);
     if (input.value.length === 0) {
       setEmailError(EMAIL_NOT_FOUND);
     } else if (input.value === userPassword) {
@@ -92,16 +89,12 @@ const RegisterPage = ({ onRegister }) => {
     }
   };
 
-  const handleEmailChange = (e) => {
-    const input = e.target;
-    setUserEmail(input.value);
-  };
-
-  const handlePasswordValidate = (e) => {
+  const handlePasswordChange = (e) => {
     const input = e.target;
     const validPassword = PASSWORD_REGEX.test(input.value);
     const passwordOnlyNumbers = NUMBER.test(input.value);
     setIsValidPassword(input.validity.valid);
+    setUserPassword(input.value);
     if (input.value.length === 0) {
       setPasswordError(PASSWORD_NOT_FOUND);
     } else if (input.value === userEmail) {
@@ -124,11 +117,6 @@ const RegisterPage = ({ onRegister }) => {
     }
   };
 
-  const handlePasswordChange = (e) => {
-    const input = e.target;
-    setUserPassword(input.value);
-  };
-
   const handleSubmit = (evt) => {
     evt.preventDefault();
     onRegister({
@@ -175,7 +163,6 @@ const RegisterPage = ({ onRegister }) => {
                     pattern='[A-Za-zа-яА-ЯёЁ\d-\s]*$'
                     value={userName || ''}
                     onChange={handleNameChange}
-                    onBlur={handleNameValidate}
                   />
 
                   <Input
@@ -188,7 +175,6 @@ const RegisterPage = ({ onRegister }) => {
                     value={userEmail || ''}
                     spanText={emailError}
                     onChange={handleEmailChange}
-                    onBlur={handleEmailValidate}
                   />
 
                   <PasswordInput
@@ -201,7 +187,6 @@ const RegisterPage = ({ onRegister }) => {
                     maxLength='101'
                     isValid={isValidPassword}
                     onChange={handlePasswordChange}
-                    onBlur={handlePasswordValidate}
                   />
 
                   <div className='register__privacy'>
@@ -215,7 +200,7 @@ const RegisterPage = ({ onRegister }) => {
                       {' '}
                       <Link
                         className='register__link standard-font standard-font_type_small'
-                        to='/'
+                        to='/privacy'
                         target='_blank'
                       >
                         Политикой конфиденциальности
@@ -225,7 +210,7 @@ const RegisterPage = ({ onRegister }) => {
                       {' '}
                       <Link
                         className='register__link standard-font standard-font_type_small'
-                        to='/'
+                        to='/terms'
                         target='_blank'
                       >
                         Условиями использования сервиса
diff --git a/src/pages/ShelterPage/ShelterPage.jsx b/src/pages/ShelterPage/ShelterPage.jsx
index ddf32ad7..b367ae50 100644
--- a/src/pages/ShelterPage/ShelterPage.jsx
+++ b/src/pages/ShelterPage/ShelterPage.jsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { Outlet, useParams } from 'react-router-dom';
 import './ShelterPage.css';
 import MainContainer from '../../components/MainContainer/MainContainer';
-import NestedRoutesMenu from '../../components/NestedRoutesMenu/NestedRoutesMenu';
+import NestedRoutesMenu from '../../modules/NestedRoutesMenu/NestedRoutesMenu';
 import shelterApi from './api';
 import { shelterLinkList } from '../../utils/constants';
 
diff --git a/src/pages/SheltersListPage/SheltersListPage.jsx b/src/pages/SheltersListPage/SheltersListPage.jsx
index b2a17cb5..b0110197 100644
--- a/src/pages/SheltersListPage/SheltersListPage.jsx
+++ b/src/pages/SheltersListPage/SheltersListPage.jsx
@@ -1,12 +1,53 @@
-import React from 'react';
-import { Link, Outlet } from 'react-router-dom';
+import React, { useEffect, useState } from 'react';
+import { Link, useParams } from 'react-router-dom';
 import './SheltersListPage.css';
 import MainContainer from '../../components/MainContainer/MainContainer';
-import NestedRoutesMenu from '../../components/NestedRoutesMenu/NestedRoutesMenu';
+import NestedRoutesMenu from '../../modules/NestedRoutesMenu/NestedRoutesMenu';
 import SearchInput from '../../components/SearchInput/SearchInput';
+import ShelterCard from '../../components/ShelterCard/ShelterCard';
+import ShelterList from '../../modules/ShelterList/ShelterList';
 import { colorLinkList } from '../../utils/constants';
+import mapShelterResponse from './utils/mapShelterResponse';
+import SheltersListApi from './api';
 
 const SheltersListPage = () => {
+  const { color } = useParams();
+
+  const [sheltersList, setSheltersList] = useState([]);
+
+  const [isDataLoading, setIsDataLoading] = useState(true);
+
+  useEffect(() => {
+    const queryParams = color === 'all' ? {} : { warnings: color };
+
+    SheltersListApi.getShelters(queryParams)
+      .then((newSheltersList) => {
+        setSheltersList(newSheltersList.map(mapShelterResponse));
+        setIsDataLoading(false);
+      })
+      .catch((err) => {
+        setIsDataLoading(true);
+        throw new Error(err);
+      });
+  }, [color]);
+
+  // Получение списка приютов и их отображение в виде карточек приютов
+  const shelters = sheltersList.map((shelter) => {
+    return (
+      <li key={shelter.id}>
+        <ShelterCard
+          id={shelter.id}
+          name={shelter.name}
+          address={shelter.address}
+          workingFromHour={shelter.startHour}
+          workingToHour={shelter.finishHour}
+          logo={shelter.logo}
+          profileImage={shelter.profileImage}
+        />
+      </li>
+    );
+  });
+
   return (
     <MainContainer theme='base'>
       <main className='main shelters-list-page'>
@@ -14,13 +55,15 @@ const SheltersListPage = () => {
           <div className='shelter-search__head'>
             <div className='shelter-search__title-block'>
               <h2 className='shelter-search__title'>Все приюты</h2>
-              <Link className='shelter-search__link' to='/shelters'>Показать приюты на карте</Link>
+              <Link className='shelter-search__link' to='/shelters'>
+                Показать приюты на карте
+              </Link>
             </div>
             <SearchInput />
           </div>
           <NestedRoutesMenu linkList={colorLinkList} gap={56} />
         </section>
-        <Outlet />
+        <ShelterList isDataLoading={isDataLoading} shelters={shelters} />
       </main>
     </MainContainer>
   );
diff --git a/src/pages/SheltersListPage/api.js b/src/pages/SheltersListPage/api.js
new file mode 100644
index 00000000..ab20df18
--- /dev/null
+++ b/src/pages/SheltersListPage/api.js
@@ -0,0 +1,26 @@
+import BaseApi from '../../utils/BaseApi';
+import { baseUrl, apiHeaders } from '../../utils/constants';
+
+class SheltersListApi extends BaseApi {
+  constructor({ _baseUrl, _headers }) {
+    super({ _baseUrl });
+    this._headers = _headers;
+  }
+
+  getShelters(queryParams = {}) {
+    const url = `${this._baseUrl}/v1/shelters/?${new URLSearchParams(queryParams)}`;
+
+    return fetch(url, {
+      headers: this._headers,
+    }).then((res) => {
+      return super._processTheResponse(res);
+    });
+  }
+}
+
+const sheltersLisApi = new SheltersListApi({
+  _baseUrl: baseUrl,
+  _headers: apiHeaders,
+});
+
+export default sheltersLisApi;
diff --git a/src/pages/SheltersListPage/modules.js b/src/pages/SheltersListPage/modules.js
deleted file mode 100644
index 9e811b84..00000000
--- a/src/pages/SheltersListPage/modules.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import RedShelters from '../../modules/RedShelters/RedShelters';
-import YellowShelters from '../../modules/YellowShelters/YellowShelters';
-import GreenShelters from '../../modules/GreenShelters/GreenShelters';
-
-export {
-  RedShelters,
-  YellowShelters,
-  GreenShelters,
-};
diff --git a/src/pages/SheltersListPage/styles/shelter-search.css b/src/pages/SheltersListPage/styles/shelter-search.css
index 8ea3f672..a5e029a1 100644
--- a/src/pages/SheltersListPage/styles/shelter-search.css
+++ b/src/pages/SheltersListPage/styles/shelter-search.css
@@ -1,6 +1,6 @@
 .shelter-search {
   display: flex;
-  width: 1440px;
+  width: 100%;
   padding: 44px 132px 32px;
   flex-direction: column;
   background-color: var(--color-background-base);
diff --git a/src/pages/SheltersListPage/utils/mapShelterResponse.js b/src/pages/SheltersListPage/utils/mapShelterResponse.js
new file mode 100644
index 00000000..e35bda7e
--- /dev/null
+++ b/src/pages/SheltersListPage/utils/mapShelterResponse.js
@@ -0,0 +1,15 @@
+const mapShelterResponse = (res) => {
+  return {
+    id: res.id,
+    profileImage: res.profile_image,
+    address: res.address,
+    name: res.name,
+    startHour: res.working_from_hour,
+    finishHour: res.working_to_hour,
+    webSite: res.web_site,
+    logo: res.logo,
+    warning: res.warning,
+  };
+};
+
+export default mapShelterResponse;
diff --git a/src/pages/TermsPage/TermsPage.jsx b/src/pages/TermsPage/TermsPage.jsx
new file mode 100644
index 00000000..d1aa1827
--- /dev/null
+++ b/src/pages/TermsPage/TermsPage.jsx
@@ -0,0 +1,124 @@
+import React from 'react';
+import './TermsPage.scss';
+import DetailsCard from '../../components/DetailsCard/DetailsCard';
+import MainContainer from '../../components/MainContainer/MainContainer';
+
+const TermsOfServicePage = () => {
+  return (
+    <MainContainer base='additional'>
+      <section className='terms__container main privacy-policy__container'>
+        <ul className='terms__list standard-font_type_small'>
+          <li className='terms__item'>
+            <DetailsCard title='Пользовательское Соглашение' isOpen={false} iconType='arrow' titleClasses='standard-font_type_h4'>
+              <div className='terms__description-container'>
+                <p className='terms__description'>
+                  Настоящее Пользовательское Соглашение (Далее Соглашение) регулирует отношения между владельцем https://lapkipomoshi.ru/ (далее Лапки помощи
+                  или Администрация) с одной стороны и пользователем сайта с другой. Сайт Лапки помощи не является средством массовой информации.
+                </p>
+                <p className='terms__description'>Используя сайт, Вы соглашаетесь с условиями данного соглашения.</p>
+                <p className='terms__description standard-font_type_body'>
+                  Если Вы не согласны с условиями данного соглашения, не используйте сайт Лапки помощи!
+                </p>
+              </div>
+            </DetailsCard>
+          </li>
+
+          <li className='terms__item'>
+            <DetailsCard title='Права и обязанности сторон' isOpen={false} iconType='arrow' titleClasses='standard-font_type_h4'>
+              <div className='terms__description-container'>
+                <ul className='terms__description'>
+                  <li className='standard-font_type_body terms__description-subtitle'> Пользователь имеет право:</li>
+                  <li> - осуществлять поиск информации на сайте</li>
+                  <li> - получать информацию на сайте</li>
+                  <li> - создавать информацию для сайта</li>
+                  <li> - распространять информацию на сайте</li>
+                  <li> - комментировать контент, выложенный на сайте</li>
+                  <li> - изменять рейтинг пользователей </li>
+                  <li> - копировать информацию на другие сайты с указанием источника</li>
+                  <li> - требовать от администрации скрытия любой информации о пользователе</li>
+                  <li> - требовать от администрации скрытия любой информации переданной пользователем сайту</li>
+                  <li> - использовать информацию сайта в личных некоммерческих целях</li>
+                  <li> - использовать информацию сайта в коммерческих целях с разрешения Администрации</li>
+                  <li> - использовать информацию сайта в коммерческих целях с разрешения правообладателей</li>
+                  <li> - использовать информацию сайта в коммерческих целях без специального разрешения</li>
+                </ul>
+
+                <ul className='terms__description'>
+                  <li className='standard-font_type_body terms__description-subtitle'> Администрация имеет право:</li>
+                  <li> - по своему усмотрению и необходимости создавать, изменять, отменять правила</li>
+                  <li> - получать информацию на сайте</li>
+                  <li> - создавать, изменять, удалять информацию</li>
+                  <li> - удалять учетные записи</li>
+                </ul>
+
+                <ul className='terms__description'>
+                  <li className='standard-font_type_body terms__description-subtitle'> Пользователь обязуется:</li>
+                  <li> - обеспечить достоверность предоставляемой информации</li>
+                  <li> - обеспечивать сохранность личных данных от доступа третьих лиц</li>
+                  <li> - обновлять Персональные данные, предоставленные при регистрации, в случае их изменения</li>
+                  <li> - при копировании информации с других источников, включать в её состав информацию об авторе</li>
+                  <li>
+                    - не распространять информацию, которая направлена на пропаганду войны, разжигание национальной, расовой или религиозной ненависти и вражды,
+                    а также иной информации, за распространение которой предусмотрена уголовная или административная ответственность
+                  </li>
+                  <li> - не нарушать работоспособность сайта</li>
+                  <li> - не совершать действия, направленные на введение других Пользователей в заблуждение</li>
+                  <li>
+                    - не размещать материалы рекламного, эротического, порнографического или оскорбительного характера, а также иную информацию, размещение
+                    которой запрещено или противоречит нормам действующего законодательства РФ
+                  </li>
+                  <li> - не использовать скрипты (программы) для автоматизированного сбора информации и/или взаимодействия с Сайтом и его Сервисами</li>
+                </ul>
+
+                <ul className='terms__description terms__description-subtitle'>
+                  <li className='standard-font_type_body'> Администрация обязуется:</li>
+                  <li> - поддерживать работоспособность сайта за исключением случаев, когда это невозможно по независящим от Администрации причинам.</li>
+                  <li> - осуществлять разностороннюю защиту учетной записи Пользователя</li>
+                  <li>
+                    - защищать информацию, распространение которой ограничено или запрещено законами путем вынесения предупреждения либо удалением учетной
+                    записи пользователя, нарушившего правила
+                  </li>
+                  <li>
+                    - предоставить всю доступную информацию о Пользователе уполномоченным на то органам государственной власти в случаях, установленных законом
+                  </li>
+                </ul>
+              </div>
+            </DetailsCard>
+          </li>
+
+          <li className='terms__item'>
+            <DetailsCard title='Ответственность сторон' isOpen={false} iconType='arrow' titleClasses='standard-font_type_h4'>
+              <div className='terms__description-container'>
+                <ul className='terms__description'>
+                  <li> - пользователь лично несет полную ответственность за распространяемую им информацию</li>
+                  <li> - администрация не несет никакой ответственности за достоверность информации, скопированной из других источников</li>
+                  <li> - администрация не несёт ответственность за несовпадение ожидаемых Пользователем и реально полученных услуг</li>
+                  <li> - администрация не несет никакой ответственности за услуги, предоставляемые третьими лицами</li>
+                  <li>
+                    - в случае возникновения форс-мажорной ситуации (боевые действия, чрезвычайное положение, стихийное бедствие и т. д.) Администрация не
+                    гарантирует сохранность информации, размещённой Пользователем, а также бесперебойную работу информационного ресурса
+                  </li>
+                </ul>
+              </div>
+            </DetailsCard>
+          </li>
+
+          <li className='terms__item'>
+            <DetailsCard title='Условия действия Соглашения' isOpen={false} iconType='arrow' titleClasses='standard-font_type_h4'>
+              <div className='terms__description-container'>
+                <ul className='terms__description'>
+                  <li>Данное Соглашение вступает в силу при любом использовании данного сайта.</li>
+                  <li>Соглашение перестает действовать при появлении его новой версии.</li>
+                  <li>Администрация оставляет за собой право в одностороннем порядке изменять данное соглашение по своему усмотрению.</li>
+                  <li>Администрация не оповещает пользователей об изменении в Соглашении.</li>
+                </ul>
+              </div>
+            </DetailsCard>
+          </li>
+        </ul>
+      </section>
+    </MainContainer>
+  );
+};
+
+export default TermsOfServicePage;
diff --git a/src/pages/TermsPage/TermsPage.scss b/src/pages/TermsPage/TermsPage.scss
new file mode 100644
index 00000000..2fa9e5ce
--- /dev/null
+++ b/src/pages/TermsPage/TermsPage.scss
@@ -0,0 +1,6 @@
+@import url('./styles/__container/terms__container.scss');
+@import url('./styles/__description-container/terms__description-container.scss');
+@import url('./styles/__description/terms__description.scss');
+@import url('./styles/__item/terms__item.scss');
+@import url('./styles/__list/terms__list.scss');
+@import url('./styles/__description-subtitle/terms__description-subtitle.scss');
diff --git a/src/pages/TermsPage/styles/__container/terms__container.scss b/src/pages/TermsPage/styles/__container/terms__container.scss
new file mode 100644
index 00000000..b772add3
--- /dev/null
+++ b/src/pages/TermsPage/styles/__container/terms__container.scss
@@ -0,0 +1,13 @@
+.terms__container {
+  box-sizing: border-box;
+  background-color: var(--color-background-additional);
+  margin: 20px auto 80px;
+  padding: 40px;
+  border-radius: 20px;
+  width: 550px; //макета на адаптив пока нет, поставила временные значения
+
+  @media (min-width: 1200px) {
+    width: 1176px;
+    margin: 44px auto 80px;
+  }
+}
diff --git a/src/pages/TermsPage/styles/__description-container/terms__description-container.scss b/src/pages/TermsPage/styles/__description-container/terms__description-container.scss
new file mode 100644
index 00000000..20d4bed8
--- /dev/null
+++ b/src/pages/TermsPage/styles/__description-container/terms__description-container.scss
@@ -0,0 +1,7 @@
+.terms__description-container {
+  background-color: var(--color-background-additional);
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 16px 60px 0 0;
+}
diff --git a/src/pages/TermsPage/styles/__description-subtitle/terms__description-subtitle.scss b/src/pages/TermsPage/styles/__description-subtitle/terms__description-subtitle.scss
new file mode 100644
index 00000000..1b7b6756
--- /dev/null
+++ b/src/pages/TermsPage/styles/__description-subtitle/terms__description-subtitle.scss
@@ -0,0 +1,3 @@
+.terms__description-subtitle {
+  margin-bottom: 8px;
+}
diff --git a/src/pages/TermsPage/styles/__description/terms__description.scss b/src/pages/TermsPage/styles/__description/terms__description.scss
new file mode 100644
index 00000000..3e9cff4e
--- /dev/null
+++ b/src/pages/TermsPage/styles/__description/terms__description.scss
@@ -0,0 +1,5 @@
+.terms__description {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
diff --git a/src/pages/TermsPage/styles/__item/terms__item.scss b/src/pages/TermsPage/styles/__item/terms__item.scss
new file mode 100644
index 00000000..a925951e
--- /dev/null
+++ b/src/pages/TermsPage/styles/__item/terms__item.scss
@@ -0,0 +1,3 @@
+.terms__item:not(:last-child) {
+  padding-bottom: 24px;
+}
diff --git a/src/pages/TermsPage/styles/__list/terms__list.scss b/src/pages/TermsPage/styles/__list/terms__list.scss
new file mode 100644
index 00000000..4e8d547e
--- /dev/null
+++ b/src/pages/TermsPage/styles/__list/terms__list.scss
@@ -0,0 +1,6 @@
+.terms__list {
+  width: 100%;
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
diff --git a/src/templates/chageEmailTemplate.html b/src/templates/chageEmailTemplate.html
new file mode 100644
index 00000000..b5c42dc4
--- /dev/null
+++ b/src/templates/chageEmailTemplate.html
@@ -0,0 +1,343 @@
+<!DOCTYPE html>
+<html lang="ru">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width">
+    <title>Изменение Email</title>
+    <style>
+      @import url('https://fonts.googleapis.com/css2?family=Montserrat Alternates:wght@400;500;600;700&display=swap');
+      @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap');
+
+      img {
+        border: none;
+        -ms-interpolation-mode: bicubic;
+        max-width: 100%;
+      }
+
+      body {
+        background-color: #ffffff;
+        font-family: 'Montserrat Alternates', Arial, sans-serif;
+        color: #111c2c;
+        -webkit-font-smoothing: antialiased;
+        margin: 0;
+        padding: 0;
+        -ms-text-size-adjust: 100%;
+        -webkit-text-size-adjust: 100%;
+      }
+
+      table {
+        border-collapse: separate;
+        border-spacing: 0;
+        border: 0;
+        padding: 0;
+        width: 100%;
+      }
+
+      td {
+        padding: 0;
+      }
+
+      .body {
+        width: 100%;
+      }
+
+      .container {
+        display: block;
+        margin: 0 auto;
+        max-width: 700px;
+        width: 100%;
+      }
+
+      .content {
+        box-sizing: border-box;
+        display: block;
+        margin: 0 auto;
+        width: 100%;
+        max-width: 700px;
+      }
+
+      .header {
+        background-color: #fef4e8;
+        width: 100%;
+        max-width: 580px;
+        padding: 40px 60px;
+      }
+
+      .header-image-content {
+        width: 92px;
+        height: 60px;
+      }
+
+      .header-image {
+        width: 60px;
+        height: 60px;
+      }
+
+      .header-title {
+        font-size: 40px;
+        font-weight: 600;
+        margin: 0;
+      }
+
+      .wrapper {
+        box-sizing: border-box;
+        padding: 0;
+      }
+
+      .main {
+        width: 100%;
+        padding: 44px 60px 60px;
+      }
+
+      .title {
+        font-size: 24px;
+        font-weight: 500;
+        text-align: center;
+        margin: 0 0 36px;
+      }
+
+      .text {
+        font-family: 'Inter', Arial, sans-serif;
+        font-size: 16px;
+        font-weight: 400;
+        margin: 0 0 12px;
+      }
+
+      .link {
+        text-decoration: underline;
+        color: #111c2c;
+      }
+
+      .user-data {
+        margin-top: 32px;
+        margin-bottom: 32px;
+      }
+
+      .user-data__title {
+        font-family: 'Inter', Arial, sans-serif;
+        font-size: 20px;
+        line-height: 24px;
+        font-weight: 500;
+        max-width: 515px;
+        margin: 0 0 20px;
+      }
+
+      .user-data__text {
+        font-family: 'Inter', Arial, sans-serif;
+        font-size: 18px;
+        font-weight: 400;
+        line-height: 28px;
+        margin: 0 0 12px;
+      }
+
+      .user-data__text:last-of-type {
+        margin-bottom: 0;
+      }
+
+      .user-data__span {
+        font-family: 'Inter', Arial, sans-serif;
+        font-size: 20px;
+        line-height: 24px;
+        font-weight: 500;
+      }
+
+      .bye-content {
+        max-width: 430px;
+        margin-top: 44px;
+      }
+
+      .text-bye {
+        font-family: 'Inter', Arial, sans-serif;
+        font-size: 18px;
+        line-height: 28px;
+        font-weight: 400;
+        margin: 0 0 4px;
+        max-width: 378px;
+      }
+
+      .text-bye:last-of-type {
+        margin-bottom: 0;
+      }
+
+      .bye-image {
+        width: 32px;
+        height: 32px;
+      }
+
+      .footer {
+        background-color: #fef4e8;
+        clear: both;
+        width: 100%;
+        max-width: 580px;
+        padding: 40px 60px;
+      }
+
+      .footer__header {
+        font-size: 18px;
+        font-weight: 700;
+        margin-top: 0;
+        margin-bottom: 12px;
+      }
+
+      .footer__text-about {
+        color: #818181;
+        font-size: 14px;
+        font-weight: 400;
+        max-width: 149px;
+        margin: 0 29px 0 0;
+      }
+
+      .footer__email {
+        font-family: 'Inter', Arial, sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        max-width: 229px;
+        margin: 0 29px 0 0;
+      }
+
+      .footer__icon-block {
+        padding-right: 24px;
+      }
+
+      .footer__icon-block:last-of-type {
+        padding-right: 0;
+      }
+
+      .footer__icon-link {
+        transition-duration: 0.5s;
+      }
+
+      .footer__icon-link:hover {
+        opacity: 0.5;
+      }
+
+      .footer__icon {
+        width: 32px;
+        height: 32px;
+      }
+    </style>
+  </head>
+  <body>
+    <table class="body">
+      <tr>
+        <td class="container">
+          <div class="content">
+            <div class="header">
+              <table>
+                <tr>
+                  <td class="header-image-content">
+                    <img src="./icons/ic_paw.svg" class="header-image" alt="Логотип Лапки помощи" />
+                  </td>
+                  <td>
+                    <p class="header-title">Лапки помощи</p>
+                  </td>
+                </tr>
+              </table>
+            </div>
+
+            <table class="main">
+              <tr>
+                <td class="wrapper">
+                  <table>
+                    <tr>
+                      <td>
+                        <h1 class="title">Изменение Email</h1>
+                        <p class="text">Здравствуйте, Имя Отчество!</p>
+                        <p class="text">
+                          Вы успешно изменили адрес электронной почты для доступа к учетной записи на сайте «<a
+                            href="https://lapkipomoshi.ru/"
+                            target="_blank"
+                            class="link"
+                            >Лапки помощи</a
+                          >».
+                        </p>
+
+                        <div class="user-data">
+                          <table>
+                            <tbody>
+                              <tr>
+                                <td>
+                                  <p class="user-data__title">Ваши обновленные учетные данные для входа в личный кабинет сайта «Лапки помощи».</p>
+                                </td>
+                              </tr>
+
+                              <tr>
+                                <td>
+                                  <p class="user-data__text"><span class="user-data__span">Ваш логин: </span>mail@gmail.com</p>
+                                  <p class="user-data__text"><span class="user-data__span">Ваш пароль: </span>435sfd8</p>
+                                </td>
+                              </tr>
+                            </tbody>
+                          </table>
+                        </div>
+
+                        <p class="text">
+                          Если вы не пытались зарегистрироваться на сайте «Лапки помощи», то просто проигнорируйте это письмо. Возможно, кто-то совершил ошибку.
+                        </p>
+
+                        <div class="bye-content">
+                          <table>
+                            <tbody>
+                              <tr>
+                                <td>
+                                  <p class="text-bye">Спасибо</p>
+                                  <p class="text-bye">Искренне ваша, команда «Лапки помощи»</p>
+                                </td>
+                                <td>
+                                  <img src="./icons/ic_paw.svg" class="bye-image" alt="Логотип Лапки помощи" />
+                                </td>
+                              </tr>
+                            </tbody>
+                          </table>
+                        </div>
+                      </td>
+                    </tr>
+                  </table>
+                </td>
+              </tr>
+            </table>
+
+            <div class="footer">
+              <table>
+                <tr>
+                  <td>
+                    <p class="footer__header">Лапки помощи</p>
+                  </td>
+                </tr>
+
+                <tr>
+                  <td>
+                    <p class="footer__text-about">Сервис для помощи приютам</p>
+                  </td>
+
+                  <td>
+                    <p class="footer__email">Служба поддержки:</p>
+                    <p class="footer__email">info@lapki.ru</p>
+                  </td>
+
+                  <td class="footer__icon-block">
+                    <a class="footer__icon-link" href="" target="_blank">
+                      <img src="./icons/footer__icon_classmates.svg" class="footer__icon" alt="одноклассники" />
+                    </a>
+                  </td>
+
+                  <td class="footer__icon-block">
+                    <a class="footer__icon-link" href="" target="_blank">
+                      <img src="./icons/footer__icon_vk.svg" class="footer__icon" alt="вконтакте" />
+                    </a>
+                  </td>
+
+                  <td class="footer__icon-block">
+                    <a class="footer__icon-link" href="" target="_blank">
+                      <img src="./icons/footer__icon_telegram.svg" class="footer__icon" alt="телеграм" />
+                    </a>
+                  </td>
+                </tr>
+              </table>
+            </div>
+          </div>
+        </td>
+      </tr>
+    </table>
+  </body>
+</html>
diff --git a/src/templates/changePasswordTemplate.html b/src/templates/changePasswordTemplate.html
new file mode 100644
index 00000000..9e194381
--- /dev/null
+++ b/src/templates/changePasswordTemplate.html
@@ -0,0 +1,343 @@
+<!DOCTYPE html>
+<html lang="ru">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width">
+    <title>Изменение пароля</title>
+    <style>
+      @import url('https://fonts.googleapis.com/css2?family=Montserrat Alternates:wght@400;500;600;700&display=swap');
+      @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap');
+
+      img {
+        border: none;
+        -ms-interpolation-mode: bicubic;
+        max-width: 100%;
+      }
+
+      body {
+        background-color: #ffffff;
+        font-family: 'Montserrat Alternates', Arial, sans-serif;
+        color: #111c2c;
+        -webkit-font-smoothing: antialiased;
+        margin: 0;
+        padding: 0;
+        -ms-text-size-adjust: 100%;
+        -webkit-text-size-adjust: 100%;
+      }
+
+      table {
+        border-collapse: separate;
+        border-spacing: 0;
+        border: 0;
+        padding: 0;
+        width: 100%;
+      }
+
+      td {
+        padding: 0;
+      }
+
+      .body {
+        width: 100%;
+      }
+
+      .container {
+        display: block;
+        margin: 0 auto;
+        max-width: 700px;
+        width: 100%;
+      }
+
+      .content {
+        box-sizing: border-box;
+        display: block;
+        margin: 0 auto;
+        width: 100%;
+        max-width: 700px;
+      }
+
+      .header {
+        background-color: #fef4e8;
+        width: 100%;
+        max-width: 580px;
+        padding: 40px 60px;
+      }
+
+      .header-image-content {
+        width: 92px;
+        height: 60px;
+      }
+
+      .header-image {
+        width: 60px;
+        height: 60px;
+      }
+
+      .header-title {
+        font-size: 40px;
+        font-weight: 600;
+        margin: 0;
+      }
+
+      .wrapper {
+        box-sizing: border-box;
+        padding: 0;
+      }
+
+      .main {
+        width: 100%;
+        padding: 44px 60px 60px;
+      }
+
+      .title {
+        font-size: 24px;
+        font-weight: 500;
+        text-align: center;
+        margin: 0 0 36px;
+      }
+
+      .text {
+        font-family: 'Inter', Arial, sans-serif;
+        font-size: 16px;
+        font-weight: 400;
+        margin: 0 0 12px;
+      }
+
+      .link {
+        text-decoration: underline;
+        color: #111c2c;
+      }
+
+      .user-data {
+        margin-top: 32px;
+        margin-bottom: 32px;
+      }
+
+      .user-data__title {
+        font-family: 'Inter', Arial, sans-serif;
+        font-size: 20px;
+        line-height: 24px;
+        font-weight: 500;
+        max-width: 515px;
+        margin: 0 0 20px;
+      }
+
+      .user-data__text {
+        font-family: 'Inter', Arial, sans-serif;
+        font-size: 18px;
+        font-weight: 400;
+        line-height: 28px;
+        margin: 0 0 12px;
+      }
+
+      .user-data__text:last-of-type {
+        margin-bottom: 0;
+      }
+
+      .user-data__span {
+        font-family: 'Inter', Arial, sans-serif;
+        font-size: 20px;
+        line-height: 24px;
+        font-weight: 500;
+      }
+
+      .bye-content {
+        max-width: 430px;
+        margin-top: 44px;
+      }
+
+      .text-bye {
+        font-family: 'Inter', Arial, sans-serif;
+        font-size: 18px;
+        line-height: 28px;
+        font-weight: 400;
+        margin: 0 0 4px;
+        max-width: 378px;
+      }
+
+      .text-bye:last-of-type {
+        margin-bottom: 0;
+      }
+
+      .bye-image {
+        width: 32px;
+        height: 32px;
+      }
+
+      .footer {
+        background-color: #fef4e8;
+        clear: both;
+        width: 100%;
+        max-width: 580px;
+        padding: 40px 60px;
+      }
+
+      .footer__header {
+        font-size: 18px;
+        font-weight: 700;
+        margin-top: 0;
+        margin-bottom: 12px;
+      }
+
+      .footer__text-about {
+        color: #818181;
+        font-size: 14px;
+        font-weight: 400;
+        max-width: 149px;
+        margin: 0 29px 0 0;
+      }
+
+      .footer__email {
+        font-family: 'Inter', Arial, sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        max-width: 229px;
+        margin: 0 29px 0 0;
+      }
+
+      .footer__icon-block {
+        padding-right: 24px;
+      }
+
+      .footer__icon-block:last-of-type {
+        padding-right: 0;
+      }
+
+      .footer__icon-link {
+        transition-duration: 0.5s;
+      }
+
+      .footer__icon-link:hover {
+        opacity: 0.5;
+      }
+
+      .footer__icon {
+        width: 32px;
+        height: 32px;
+      }
+    </style>
+  </head>
+  <body>
+    <table class="body">
+      <tr>
+        <td class="container">
+          <div class="content">
+            <div class="header">
+              <table>
+                <tr>
+                  <td class="header-image-content">
+                    <img src="./icons/ic_paw.svg" class="header-image" alt="Логотип Лапки помощи" />
+                  </td>
+                  <td>
+                    <p class="header-title">Лапки помощи</p>
+                  </td>
+                </tr>
+              </table>
+            </div>
+
+            <table class="main">
+              <tr>
+                <td class="wrapper">
+                  <table>
+                    <tr>
+                      <td>
+                        <h1 class="title">Изменение пароля</h1>
+                        <p class="text">Здравствуйте, Имя Отчество!</p>
+                        <p class="text">
+                          Вы успешно установили новый пароль для доступа к учетной записи на сайте «<a
+                            href="https://lapkipomoshi.ru/"
+                            target="_blank"
+                            class="link"
+                            >Лапки помощи</a
+                          >».
+                        </p>
+
+                        <div class="user-data">
+                          <table>
+                            <tbody>
+                              <tr>
+                                <td>
+                                  <p class="user-data__title">Ваши обновленные учетные данные для входа в личный кабинет сайта «Лапки помощи».</p>
+                                </td>
+                              </tr>
+
+                              <tr>
+                                <td>
+                                  <p class="user-data__text"><span class="user-data__span">Ваш логин: </span>mail@gmail.com</p>
+                                  <p class="user-data__text"><span class="user-data__span">Ваш пароль: </span>435sfd8</p>
+                                </td>
+                              </tr>
+                            </tbody>
+                          </table>
+                        </div>
+
+                        <p class="text">
+                          Если вы не пытались зарегистрироваться на сайте «Лапки помощи», то просто проигнорируйте это письмо. Возможно, кто-то совершил ошибку.
+                        </p>
+
+                        <div class="bye-content">
+                          <table>
+                            <tbody>
+                              <tr>
+                                <td>
+                                  <p class="text-bye">Спасибо</p>
+                                  <p class="text-bye">Искренне ваша, команда «Лапки помощи»</p>
+                                </td>
+                                <td>
+                                  <img src="./icons/ic_paw.svg" class="bye-image" alt="Логотип Лапки помощи" />
+                                </td>
+                              </tr>
+                            </tbody>
+                          </table>
+                        </div>
+                      </td>
+                    </tr>
+                  </table>
+                </td>
+              </tr>
+            </table>
+
+            <div class="footer">
+              <table>
+                <tr>
+                  <td>
+                    <p class="footer__header">Лапки помощи</p>
+                  </td>
+                </tr>
+
+                <tr>
+                  <td>
+                    <p class="footer__text-about">Сервис для помощи приютам</p>
+                  </td>
+
+                  <td>
+                    <p class="footer__email">Служба поддержки:</p>
+                    <p class="footer__email">info@lapki.ru</p>
+                  </td>
+
+                  <td class="footer__icon-block">
+                    <a class="footer__icon-link" href="" target="_blank">
+                      <img src="./icons/footer__icon_classmates.svg" class="footer__icon" alt="одноклассники" />
+                    </a>
+                  </td>
+
+                  <td class="footer__icon-block">
+                    <a class="footer__icon-link" href="" target="_blank">
+                      <img src="./icons/footer__icon_vk.svg" class="footer__icon" alt="вконтакте" />
+                    </a>
+                  </td>
+
+                  <td class="footer__icon-block">
+                    <a class="footer__icon-link" href="" target="_blank">
+                      <img src="./icons/footer__icon_telegram.svg" class="footer__icon" alt="телеграм" />
+                    </a>
+                  </td>
+                </tr>
+              </table>
+            </div>
+          </div>
+        </td>
+      </tr>
+    </table>
+  </body>
+</html>
diff --git a/src/templates/emailConfirmationTemplate.html b/src/templates/emailConfirmationTemplate.html
new file mode 100644
index 00000000..cdcb4638
--- /dev/null
+++ b/src/templates/emailConfirmationTemplate.html
@@ -0,0 +1,360 @@
+<!DOCTYPE html>
+<html lang="ru">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width">
+    <title>Подтверждение email</title>
+    <style>
+      @import url('https://fonts.googleapis.com/css2?family=Montserrat Alternates:wght@400;500;600;700&display=swap');
+      @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap');
+
+      img {
+        border: none;
+        -ms-interpolation-mode: bicubic;
+        max-width: 100%;
+      }
+
+      body {
+        background-color: #ffffff;
+        font-family: 'Montserrat Alternates', Arial, sans-serif;
+        color: #111c2c;
+        -webkit-font-smoothing: antialiased;
+        margin: 0;
+        padding: 0;
+        -ms-text-size-adjust: 100%;
+        -webkit-text-size-adjust: 100%;
+      }
+
+      table {
+        border-collapse: separate;
+        border-spacing: 0;
+        border: 0;
+        padding: 0;
+        width: 100%;
+      }
+
+      td {
+        padding: 0;
+      }
+
+      .body {
+        width: 100%;
+      }
+
+      .container {
+        display: block;
+        margin: 0 auto;
+        max-width: 700px;
+        width: 100%;
+      }
+
+      .content {
+        box-sizing: border-box;
+        display: block;
+        margin: 0 auto;
+        width: 100%;
+        max-width: 700px;
+      }
+
+      .header {
+        background-color: #fef4e8;
+        width: 100%;
+        max-width: 580px;
+        padding: 40px 60px;
+      }
+
+      .header-image-content {
+        width: 92px;
+        height: 60px;
+      }
+
+      .header-image {
+        width: 60px;
+        height: 60px;
+      }
+
+      .header-title {
+        font-size: 40px;
+        font-weight: 600;
+        margin: 0;
+      }
+
+      .wrapper {
+        box-sizing: border-box;
+        padding: 0;
+      }
+
+      .main {
+        width: 100%;
+        padding: 44px 60px 60px;
+      }
+
+      .title {
+        font-size: 24px;
+        font-weight: 500;
+        text-align: center;
+        margin: 0 0 36px;
+      }
+
+      .text {
+        font-family: 'Inter', Arial, sans-serif;
+        font-size: 16px;
+        font-weight: 400;
+        margin: 0 0 12px;
+      }
+
+      .link {
+        text-decoration: underline;
+        color: #111c2c;
+      }
+
+      .btn {
+        box-sizing: border-box;
+        width: 100%;
+        margin: 32px auto;
+      }
+
+      .btn table {
+        width: auto;
+        margin-left: auto;
+        margin-right: auto;
+      }
+
+      .btn table td {
+        border-radius: 12px;
+        text-align: center;
+      }
+
+      .btn a {
+        border-radius: 12px;
+        box-sizing: border-box;
+        cursor: pointer;
+        display: inline-block;
+        font-size: 18px;
+        font-weight: 600;
+        line-height: 20px;
+        margin: 0;
+        padding: 16px 32px;
+        text-decoration: none;
+      }
+
+      .btn-primary table td {
+        background-color: #f0924f;
+      }
+
+      .btn-primary a {
+        background-color: #f0924f;
+        border-color: #f0924f;
+        color: #ffffff;
+      }
+
+      .btn-primary table td:hover {
+        background-color: rgba(240, 146, 79, 0.77);
+      }
+
+      .btn-primary a:hover {
+        background-color: rgba(240, 146, 79, 0.77);
+        border-color: rgba(240, 146, 79, 0.77);
+      }
+
+      .link-time {
+        font-weight: 600;
+      }
+
+      .bye-content {
+        max-width: 430px;
+        margin-top: 44px;
+      }
+
+      .text-bye {
+        font-family: 'Inter', Arial, sans-serif;
+        font-size: 18px;
+        line-height: 28px;
+        font-weight: 400;
+        margin: 0 0 4px;
+        max-width: 378px;
+      }
+
+      .text-bye:last-of-type {
+        margin-bottom: 0;
+      }
+
+      .bye-image {
+        width: 32px;
+        height: 32px;
+      }
+
+      .footer {
+        background-color: #fef4e8;
+        clear: both;
+        width: 100%;
+        max-width: 580px;
+        padding: 40px 60px;
+      }
+
+      .footer__header {
+        font-size: 18px;
+        font-weight: 700;
+        margin-top: 0;
+        margin-bottom: 12px;
+      }
+
+      .footer__text-about {
+        color: #818181;
+        font-size: 14px;
+        font-weight: 400;
+        max-width: 149px;
+        margin: 0 29px 0 0;
+      }
+
+      .footer__email {
+        color: #111c2c;
+        font-family: 'Inter', Arial, sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        max-width: 229px;
+        margin: 0 29px 0 0;
+      }
+
+      .footer__icon-block {
+        padding-right: 24px;
+      }
+
+      .footer__icon-block:last-of-type {
+        padding-right: 0;
+      }
+
+      .footer__icon-link {
+        transition-duration: 0.5s;
+      }
+
+      .footer__icon-link:hover {
+        opacity: 0.5;
+      }
+
+      .footer__icon {
+        width: 32px;
+        height: 32px;
+      }
+    </style>
+  </head>
+  <body>
+    <table class="body">
+      <tr>
+        <td class="container">
+          <div class="content">
+            <div class="header">
+              <table>
+                <tr>
+                  <td class="header-image-content">
+                    <img src="./icons/ic_paw.svg" class="header-image" alt="Логотип Лапки помощи" />
+                  </td>
+                  <td>
+                    <p class="header-title">Лапки помощи</p>
+                  </td>
+                </tr>
+              </table>
+            </div>
+
+            <table class="main">
+              <tr>
+                <td class="wrapper">
+                  <table>
+                    <tr>
+                      <td>
+                        <h1 class="title">Подтверждение Email</h1>
+                        <p class="text">Здравствуйте, Имя Отчество!</p>
+                        <p class="text">
+                          Мы недавно получили запрос на создание Аккаунта на сайте «<a href="https://lapkipomoshi.ru/" target="_blank" class="link"
+                            >Лапки помощи</a
+                          >».
+                        </p>
+                        <p class="text">Чтобы проверить, что Вы совершили данный запрос, мы послали Вам данное подтверждающее письмо.</p>
+
+                        <table class="btn btn-primary">
+                          <tbody>
+                            <tr>
+                              <td>
+                                <table>
+                                  <tbody>
+                                    <tr>
+                                      <td><a href="" target="_blank">Подтвердить Email и активировать Аккаунт</a></td>
+                                    </tr>
+                                  </tbody>
+                                </table>
+                              </td>
+                            </tr>
+                          </tbody>
+                        </table>
+
+                        <p class="text"><span class="link-time">Обратите внимание:</span> срок действия ссылки 24 часа.</p>
+                        <p class="text">
+                          Если вы не пытались зарегистрироваться на сайте «Лапки помощи», то просто проигнорируйте это письмо. Возможно, кто-то совершил ошибку.
+                        </p>
+
+                        <div class="bye-content">
+                          <table>
+                            <tbody>
+                              <tr>
+                                <td>
+                                  <p class="text-bye">Спасибо</p>
+                                  <p class="text-bye">Искренне ваша, команда «Лапки помощи»</p>
+                                </td>
+                                <td>
+                                  <img src="./icons/ic_paw.svg" class="bye-image" alt="Логотип Лапки помощи" />
+                                </td>
+                              </tr>
+                            </tbody>
+                          </table>
+                        </div>
+                      </td>
+                    </tr>
+                  </table>
+                </td>
+              </tr>
+            </table>
+
+            <div class="footer">
+              <table>
+                <tr>
+                  <td>
+                    <p class="footer__header">Лапки помощи</p>
+                  </td>
+                </tr>
+
+                <tr>
+                  <td>
+                    <p class="footer__text-about">Сервис для помощи приютам</p>
+                  </td>
+
+                  <td>
+                    <p class="footer__email">Служба поддержки:</p>
+                    <p class="footer__email">info@lapki.ru</p>
+                  </td>
+
+                  <td class="footer__icon-block">
+                    <a class="footer__icon-link" href="" target="_blank">
+                      <img src="./icons/footer__icon_classmates.svg" class="footer__icon" alt="одноклассники" />
+                    </a>
+                  </td>
+
+                  <td class="footer__icon-block">
+                    <a class="footer__icon-link" href="" target="_blank">
+                      <img src="./icons/footer__icon_vk.svg" class="footer__icon" alt="вконтакте" />
+                    </a>
+                  </td>
+
+                  <td class="footer__icon-block">
+                    <a class="footer__icon-link" href="" target="_blank">
+                      <img src="./icons/footer__icon_telegram.svg" class="footer__icon" alt="телеграм" />
+                    </a>
+                  </td>
+                </tr>
+              </table>
+            </div>
+          </div>
+        </td>
+      </tr>
+    </table>
+  </body>
+</html>
diff --git a/src/templates/icons/footer__icon_classmates.svg b/src/templates/icons/footer__icon_classmates.svg
new file mode 100644
index 00000000..25b20afc
--- /dev/null
+++ b/src/templates/icons/footer__icon_classmates.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="28" viewBox="0 0 18 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.4735 18.2656C13.9323 19.2172 11.8117 19.5945 10.411 19.7367L11.5867 20.8633L15.8785 25.0359C17.4479 26.6 14.8942 29.0445 13.3079 27.5352C12.2335 26.4742 10.6585 24.943 9.01605 23.3461L4.72417 27.5297C3.13792 29.0336 0.58417 26.5672 2.17042 25.0305C3.26167 23.9695 4.8198 22.4383 6.4623 20.8578L7.62105 19.7312C6.2373 19.5891 4.08292 19.2336 2.5248 18.2602C0.691045 17.1117 -0.11333 16.4391 0.59542 15.0336C1.01167 14.2352 2.15354 13.5625 3.66667 14.7219C3.66667 14.7219 5.70855 16.3023 9.0048 16.3023C12.301 16.3023 14.3429 14.7219 14.3429 14.7219C15.856 13.568 16.9923 14.2352 17.4142 15.0336C18.1117 16.4391 17.3073 17.1117 15.4735 18.2656ZM1.70355 7.09297C1.70355 3.17188 4.98292 0 8.99917 0C13.0154 0 16.2948 3.17188 16.2948 7.09297C16.2948 10.9977 13.0154 14.1695 8.99917 14.1695C4.98292 14.1695 1.70355 10.9977 1.70355 7.09297ZM5.41605 7.09297C5.41605 9.0125 7.0248 10.5766 8.99917 10.5766C10.9735 10.5766 12.5823 9.0125 12.5823 7.09297C12.5823 5.15703 10.9735 3.59297 8.99917 3.59297C7.0248 3.59297 5.41605 5.15703 5.41605 7.09297Z" fill="#F0924F"/>
+</svg>
diff --git a/src/templates/icons/footer__icon_telegram.svg b/src/templates/icons/footer__icon_telegram.svg
new file mode 100644
index 00000000..a72eb5fe
--- /dev/null
+++ b/src/templates/icons/footer__icon_telegram.svg
@@ -0,0 +1,3 @@
+<svg width="28" height="24" viewBox="0 0 28 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25.5541 0.95576L1.91411 10.0718C0.300777 10.7198 0.310111 11.6198 1.61811 12.0211L7.68744 13.9144L21.7301 5.05443C22.3941 4.65043 23.0008 4.86776 22.5021 5.31043L11.1248 15.5784H11.1221L11.1248 15.5798L10.7061 21.8358C11.3194 21.8358 11.5901 21.5544 11.9341 21.2224L14.8821 18.3558L21.0141 22.8851C22.1448 23.5078 22.9568 23.1878 23.2381 21.8384L27.2634 2.86776C27.6754 1.21576 26.6328 0.46776 25.5541 0.95576V0.95576Z" fill="#F0924F"/>
+</svg>
diff --git a/src/templates/icons/footer__icon_vk.svg b/src/templates/icons/footer__icon_vk.svg
new file mode 100644
index 00000000..d4278277
--- /dev/null
+++ b/src/templates/icons/footer__icon_vk.svg
@@ -0,0 +1,3 @@
+<svg width="30" height="18" viewBox="0 0 30 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M29.2938 1.25C29.5163 0.545 29.2938 0.0324998 28.3094 0.0324998H25.0362C24.2106 0.0324998 23.8294 0.48125 23.6069 0.96125C23.6069 0.96125 21.9231 5.06125 19.5719 7.71937C18.8094 8.48812 18.46 8.74438 18.0469 8.74438C17.8244 8.74438 17.5381 8.48812 17.5381 7.78375V1.21688C17.5381 0.384375 17.2844 0 16.585 0H11.4375C10.9288 0 10.6112 0.384375 10.6112 0.76875C10.6112 1.56938 11.7869 1.76187 11.9137 4.00375V8.875C11.9137 9.93188 11.7263 10.125 11.31 10.125C10.1981 10.125 7.4975 5.99312 5.8775 1.285C5.5625 0.3525 5.2425 0 4.41625 0H1.11188C0.15875 0 0 0.448125 0 0.92875C0 1.79375 1.11188 6.14938 5.17875 11.9144C7.87937 15.8519 11.7237 17.9681 15.1869 17.9681C17.2844 17.9681 17.5381 17.4875 17.5381 16.6869V13.7081C17.5381 12.7475 17.7288 12.5875 18.3962 12.5875C18.8725 12.5875 19.7306 12.8431 21.6688 14.7331C23.8925 16.975 24.2738 18 25.5131 18H28.7856C29.7388 18 30.1838 17.5194 29.9294 16.5906C29.6437 15.6619 28.5631 14.3169 27.165 12.7156C26.4025 11.8194 25.2587 10.8263 24.9094 10.3456C24.4331 9.705 24.56 9.44875 24.9094 8.8725C24.8775 8.8725 28.8813 3.17125 29.2938 1.2475" fill="#F0924F"/>
+</svg>
diff --git a/src/templates/icons/ic_paw.svg b/src/templates/icons/ic_paw.svg
new file mode 100644
index 00000000..95810620
--- /dev/null
+++ b/src/templates/icons/ic_paw.svg
@@ -0,0 +1,3 @@
+<svg width="40" height="36" viewBox="0 0 40 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.0006 15.5006C13.7967 15.5006 5.0006 25.0912 5.0006 31.1451C5.0006 33.8716 7.09513 35.5005 10.6053 35.5005C14.4209 35.5005 16.9404 33.5412 20.0006 33.5412C23.0873 33.5412 25.6139 35.5005 29.3959 35.5005C32.9061 35.5005 35.0006 33.8716 35.0006 31.1451C35.0006 25.0912 26.2045 15.5006 20.0006 15.5006ZM8.49435 14.5154C7.68185 11.8084 5.17872 10.0552 2.90372 10.599C0.628725 11.1427 -0.556432 13.7779 0.256068 16.4849C1.06857 19.192 3.57169 20.9451 5.84669 20.4013C8.12169 19.8576 9.30685 17.2224 8.49435 14.5154ZM15.1131 12.892C17.5303 12.256 18.7397 8.99039 17.8147 5.59821C16.8897 2.20602 14.1803 -0.0275742 11.7631 0.608363C9.34591 1.2443 8.13654 4.50993 9.06154 7.90211C9.98654 11.2943 12.6967 13.5287 15.1131 12.892ZM37.0967 10.5998C34.8217 10.056 32.3193 11.8091 31.5061 14.5162C30.6936 17.2232 31.8787 19.8584 34.1537 20.4021C36.4287 20.9459 38.9311 19.1927 39.7443 16.4857C40.5568 13.7787 39.3717 11.1435 37.0967 10.5998ZM24.8881 12.892C27.3053 13.5279 30.0147 11.2943 30.9397 7.90211C31.8647 4.50993 30.6553 1.24508 28.2381 0.608363C25.8209 -0.0283555 23.1115 2.20602 22.1865 5.59821C21.2615 8.99039 22.4709 12.256 24.8881 12.892Z" fill="#F0924F"/>
+</svg>
diff --git a/src/templates/resetPasswordTemplate.html b/src/templates/resetPasswordTemplate.html
new file mode 100644
index 00000000..4d309e2a
--- /dev/null
+++ b/src/templates/resetPasswordTemplate.html
@@ -0,0 +1,359 @@
+<!DOCTYPE html>
+<html lang="ru">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width">
+    <title>Восстановление пароля</title>
+    <style>
+      @import url('https://fonts.googleapis.com/css2?family=Montserrat Alternates:wght@400;500;600;700&display=swap');
+      @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap');
+
+      img {
+        border: none;
+        -ms-interpolation-mode: bicubic;
+        max-width: 100%;
+      }
+
+      body {
+        background-color: #ffffff;
+        font-family: 'Montserrat Alternates', Arial, sans-serif;
+        color: #111c2c;
+        -webkit-font-smoothing: antialiased;
+        margin: 0;
+        padding: 0;
+        -ms-text-size-adjust: 100%;
+        -webkit-text-size-adjust: 100%;
+      }
+
+      table {
+        border-collapse: separate;
+        border-spacing: 0;
+        border: 0;
+        padding: 0;
+        width: 100%;
+      }
+
+      td {
+        padding: 0;
+      }
+
+      .body {
+        width: 100%;
+      }
+
+      .container {
+        display: block;
+        margin: 0 auto;
+        max-width: 700px;
+        width: 100%;
+      }
+
+      .content {
+        box-sizing: border-box;
+        display: block;
+        margin: 0 auto;
+        width: 100%;
+        max-width: 700px;
+      }
+
+      .header {
+        background-color: #fef4e8;
+        width: 100%;
+        max-width: 580px;
+        padding: 40px 60px;
+      }
+
+      .header-image-content {
+        width: 92px;
+        height: 60px;
+      }
+
+      .header-image {
+        width: 60px;
+        height: 60px;
+      }
+
+      .header-title {
+        font-size: 40px;
+        font-weight: 600;
+        margin: 0;
+      }
+
+      .wrapper {
+        box-sizing: border-box;
+        padding: 0;
+      }
+
+      .main {
+        width: 100%;
+        padding: 44px 60px 60px;
+      }
+
+      .title {
+        font-size: 24px;
+        font-weight: 500;
+        text-align: center;
+        margin: 0 0 36px;
+      }
+
+      .text {
+        font-family: 'Inter', Arial, sans-serif;
+        font-size: 16px;
+        font-weight: 400;
+        margin: 0 0 12px;
+      }
+
+      .link {
+        text-decoration: underline;
+        color: #111c2c;
+      }
+
+      .btn {
+        box-sizing: border-box;
+        width: 100%;
+        margin: 32px auto;
+      }
+
+      .btn table {
+        width: auto;
+        margin-left: auto;
+        margin-right: auto;
+      }
+
+      .btn table td {
+        border-radius: 12px;
+        text-align: center;
+      }
+
+      .btn a {
+        border-radius: 12px;
+        box-sizing: border-box;
+        cursor: pointer;
+        display: inline-block;
+        font-size: 18px;
+        font-weight: 600;
+        line-height: 20px;
+        margin: 0;
+        padding: 16px 32px;
+        text-decoration: none;
+      }
+
+      .btn-primary table td {
+        background-color: #f0924f;
+      }
+
+      .btn-primary a {
+        background-color: #f0924f;
+        border-color: #f0924f;
+        color: #ffffff;
+      }
+
+      .btn-primary table td:hover {
+        background-color: rgba(240, 146, 79, 0.77);
+      }
+
+      .btn-primary a:hover {
+        background-color: rgba(240, 146, 79, 0.77);
+        border-color: rgba(240, 146, 79, 0.77);
+      }
+
+      .link-time {
+        font-weight: 600;
+      }
+
+      .bye-content {
+        max-width: 430px;
+        margin-top: 44px;
+      }
+
+      .text-bye {
+        font-family: 'Inter', Arial, sans-serif;
+        font-size: 18px;
+        line-height: 28px;
+        font-weight: 400;
+        margin: 0 0 4px;
+        max-width: 378px;
+      }
+
+      .text-bye:last-of-type {
+        margin-bottom: 0;
+      }
+
+      .bye-image {
+        width: 32px;
+        height: 32px;
+      }
+
+      .footer {
+        background-color: #fef4e8;
+        clear: both;
+        width: 100%;
+        max-width: 580px;
+        padding: 40px 60px;
+      }
+
+      .footer__header {
+        font-size: 18px;
+        font-weight: 700;
+        margin-top: 0;
+        margin-bottom: 12px;
+      }
+
+      .footer__text-about {
+        color: #818181;
+        font-size: 14px;
+        font-weight: 400;
+        max-width: 149px;
+        margin: 0 29px 0 0;
+      }
+
+      .footer__email {
+        color: #111c2c;
+        font-family: 'Inter', Arial, sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        max-width: 229px;
+        margin: 0 29px 0 0;
+      }
+
+      .footer__icon-block {
+        padding-right: 24px;
+      }
+
+      .footer__icon-block:last-of-type {
+        padding-right: 0;
+      }
+
+      .footer__icon-link {
+        transition-duration: 0.5s;
+      }
+
+      .footer__icon-link:hover {
+        opacity: 0.5;
+      }
+
+      .footer__icon {
+        width: 32px;
+        height: 32px;
+      }
+    </style>
+  </head>
+  <body>
+    <table class="body">
+      <tr>
+        <td class="container">
+          <div class="content">
+            <div class="header">
+              <table>
+                <tr>
+                  <td class="header-image-content">
+                    <img src="./icons/ic_paw.svg" class="header-image" alt="Логотип Лапки помощи" />
+                  </td>
+                  <td>
+                    <p class="header-title">Лапки помощи</p>
+                  </td>
+                </tr>
+              </table>
+            </div>
+
+            <table class="main">
+              <tr>
+                <td class="wrapper">
+                  <table>
+                    <tr>
+                      <td>
+                        <h1 class="title">Восстановление пароля</h1>
+                        <p class="text">Здравствуйте, Имя Отчество!</p>
+                        <p class="text">
+                          Вы не смогли войти на сайт «<a href="https://lapkipomoshi.ru/" target="_blank" class="link">Лапки помощи</a>» и запросили
+                          восстановление пароля.
+                        </p>
+                        <p class="text">Перейдите по этой ссылке и придумайте новый пароль.</p>
+
+                        <table class="btn btn-primary">
+                          <tbody>
+                            <tr>
+                              <td>
+                                <table>
+                                  <tbody>
+                                    <tr>
+                                      <td><a href="" target="_blank">Изменить пароль</a></td>
+                                    </tr>
+                                  </tbody>
+                                </table>
+                              </td>
+                            </tr>
+                          </tbody>
+                        </table>
+
+                        <p class="text"><span class="link-time">Обратите внимание:</span> срок действия ссылки 24 часа.</p>
+                        <p class="text">
+                          Если вы не пытались зарегистрироваться на сайте «Лапки помощи», то просто проигнорируйте это письмо. Возможно, кто-то совершил ошибку.
+                        </p>
+
+                        <div class="bye-content">
+                          <table>
+                            <tbody>
+                              <tr>
+                                <td>
+                                  <p class="text-bye">Спасибо</p>
+                                  <p class="text-bye">Искренне ваша, команда «Лапки помощи»</p>
+                                </td>
+                                <td>
+                                  <img src="./icons/ic_paw.svg" class="bye-image" alt="Логотип Лапки помощи" />
+                                </td>
+                              </tr>
+                            </tbody>
+                          </table>
+                        </div>
+                      </td>
+                    </tr>
+                  </table>
+                </td>
+              </tr>
+            </table>
+
+            <div class="footer">
+              <table>
+                <tr>
+                  <td>
+                    <p class="footer__header">Лапки помощи</p>
+                  </td>
+                </tr>
+
+                <tr>
+                  <td>
+                    <p class="footer__text-about">Сервис для помощи приютам</p>
+                  </td>
+
+                  <td>
+                    <p class="footer__email">Служба поддержки:</p>
+                    <p class="footer__email">info@lapki.ru</p>
+                  </td>
+
+                  <td class="footer__icon-block">
+                    <a class="footer__icon-link" href="" target="_blank">
+                      <img src="./icons/footer__icon_classmates.svg" class="footer__icon" alt="одноклассники" />
+                    </a>
+                  </td>
+
+                  <td class="footer__icon-block">
+                    <a class="footer__icon-link" href="" target="_blank">
+                      <img src="./icons/footer__icon_vk.svg" class="footer__icon" alt="вконтакте" />
+                    </a>
+                  </td>
+
+                  <td class="footer__icon-block">
+                    <a class="footer__icon-link" href="" target="_blank">
+                      <img src="./icons/footer__icon_telegram.svg" class="footer__icon" alt="телеграм" />
+                    </a>
+                  </td>
+                </tr>
+              </table>
+            </div>
+          </div>
+        </td>
+      </tr>
+    </table>
+  </body>
+</html>
diff --git a/src/templates/successRegistrationTemplate.html b/src/templates/successRegistrationTemplate.html
new file mode 100644
index 00000000..69e41867
--- /dev/null
+++ b/src/templates/successRegistrationTemplate.html
@@ -0,0 +1,416 @@
+<!DOCTYPE html>
+<html lang="ru">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width">
+    <title>Успешная регистрация</title>
+    <style>
+      @import url('https://fonts.googleapis.com/css2?family=Montserrat Alternates:wght@400;500;600&display=swap');
+      @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
+
+      img {
+        border: none;
+        -ms-interpolation-mode: bicubic;
+        max-width: 100%;
+      }
+
+      body {
+        background-color: #ffffff;
+        font-family: 'Montserrat Alternates', Arial, sans-serif;
+        color: #111c2c;
+        -webkit-font-smoothing: antialiased;
+        margin: 0;
+        padding: 0;
+        -ms-text-size-adjust: 100%;
+        -webkit-text-size-adjust: 100%;
+      }
+
+      table {
+        border-collapse: separate;
+        border-spacing: 0;
+        border: 0;
+        padding: 0;
+        width: 100%;
+      }
+
+      td {
+        padding: 0;
+      }
+
+      .body {
+        width: 100%;
+      }
+
+      .container {
+        display: block;
+        margin: 0 auto;
+        max-width: 700px;
+        width: 100%;
+      }
+
+      .content {
+        box-sizing: border-box;
+        display: block;
+        margin: 0 auto;
+        width: 100%;
+        max-width: 700px;
+      }
+
+      .header {
+        background-color: #fef4e8;
+        width: 100%;
+        max-width: 580px;
+        padding: 40px 60px;
+      }
+
+      .header-image-content {
+        width: 92px;
+        height: 60px;
+      }
+
+      .header-image {
+        width: 60px;
+        height: 60px;
+      }
+
+      .header-title {
+        font-size: 40px;
+        font-weight: 600;
+        margin: 0;
+      }
+
+      .wrapper {
+        box-sizing: border-box;
+        padding: 0;
+      }
+
+      .main {
+        width: 100%;
+        padding: 44px 60px 60px;
+      }
+
+      .title {
+        font-size: 24px;
+        font-weight: 500;
+        text-align: center;
+        margin: 0 0 36px;
+      }
+
+      .text {
+        font-family: 'Inter', Arial, sans-serif;
+        font-size: 16px;
+        font-weight: 400;
+        margin: 0 0 12px;
+      }
+
+      .link {
+        text-decoration: underline;
+        color: #111c2c;
+      }
+
+      .btn {
+        box-sizing: border-box;
+        width: 100%;
+        margin: 32px auto;
+      }
+
+      .btn table {
+        width: auto;
+        margin-left: auto;
+        margin-right: auto;
+      }
+
+      .btn table td {
+        border-radius: 12px;
+        text-align: center;
+      }
+
+      .btn a {
+        border-radius: 12px;
+        box-sizing: border-box;
+        cursor: pointer;
+        display: inline-block;
+        font-size: 18px;
+        font-weight: 600;
+        line-height: 20px;
+        margin: 0;
+        padding: 16px 32px;
+        text-decoration: none;
+      }
+
+      .btn-primary table td {
+        background-color: #f0924f;
+      }
+
+      .btn-primary a {
+        background-color: #f0924f;
+        border-color: #f0924f;
+        color: #ffffff;
+      }
+
+      .btn-primary table td:hover {
+        background-color: rgba(240, 146, 79, 0.77);
+      }
+
+      .btn-primary a:hover {
+        background-color: rgba(240, 146, 79, 0.77);
+        border-color: rgba(240, 146, 79, 0.77);
+      }
+
+      .user-data__title {
+        font-family: 'Inter', Arial, sans-serif;
+        font-size: 20px;
+        line-height: 24px;
+        font-weight: 500;
+        max-width: 515px;
+        margin: 0 0 20px;
+      }
+
+      .user-data__text {
+        font-family: 'Inter', Arial, sans-serif;
+        font-size: 18px;
+        font-weight: 400;
+        line-height: 28px;
+        margin: 0 0 12px;
+      }
+
+      .user-data__text:last-of-type {
+        margin-bottom: 0;
+      }
+
+      .user-data__span {
+        font-family: 'Inter', Arial, sans-serif;
+        font-size: 20px;
+        line-height: 24px;
+        font-weight: 500;
+      }
+
+      .validity-content {
+        margin-top: 32px;
+      }
+
+      .link-time {
+        font-weight: 600;
+      }
+
+      .bye-content {
+        max-width: 430px;
+        margin-top: 44px;
+      }
+
+      .text-bye {
+        font-family: 'Inter', Arial, sans-serif;
+        font-size: 18px;
+        line-height: 28px;
+        font-weight: 400;
+        margin: 0 0 4px;
+        max-width: 378px;
+      }
+
+      .text-bye:last-of-type {
+        margin-bottom: 0;
+      }
+
+      .bye-image {
+        width: 32px;
+        height: 32px;
+      }
+
+      .footer {
+        background-color: #fef4e8;
+        clear: both;
+        width: 100%;
+        max-width: 580px;
+        padding: 40px 60px;
+      }
+
+      .footer__header {
+        font-size: 18px;
+        font-weight: 700;
+        margin-top: 0;
+        margin-bottom: 12px;
+      }
+
+      .footer__text-about {
+        color: #818181;
+        font-size: 14px;
+        font-weight: 400;
+        max-width: 149px;
+        margin: 0 29px 0 0;
+      }
+
+      .footer__email {
+        font-family: 'Inter', Arial, sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        max-width: 229px;
+        margin: 0 29px 0 0;
+      }
+
+      .footer__icon-block {
+        padding-right: 24px;
+      }
+
+      .footer__icon-block:last-of-type {
+        padding-right: 0;
+      }
+
+      .footer__icon-link {
+        transition-duration: 0.5s;
+      }
+
+      .footer__icon-link:hover {
+        opacity: 0.5;
+      }
+
+      .footer__icon {
+        width: 32px;
+        height: 32px;
+      }
+    </style>
+  </head>
+  <body>
+    <table class="body">
+      <tr>
+        <td class="container">
+          <div class="content">
+            <div class="header">
+              <table>
+                <tr>
+                  <td class="header-image-content">
+                    <img src="./icons/ic_paw.svg" class="header-image" alt="Логотип Лапки помощи" />
+                  </td>
+                  <td>
+                    <p class="header-title">Лапки помощи</p>
+                  </td>
+                </tr>
+              </table>
+            </div>
+
+            <table class="main">
+              <tr>
+                <td class="wrapper">
+                  <table>
+                    <tr>
+                      <td>
+                        <h1 class="title">Успешная регистрация!</h1>
+                        <p class="text">Здравствуйте, Имя Отчество!</p>
+                        <p class="text">
+                          Поздравляем Вас с успешной регистрацией на сайте «<a href="https://lapkipomoshi.ru/" target="_blank" class="link">Лапки помощи</a>».
+                        </p>
+                        <p class="text">Для авторизации перейдите по ссылке:</p>
+
+                        <table class="btn btn-primary">
+                          <tbody>
+                            <tr>
+                              <td>
+                                <table>
+                                  <tbody>
+                                    <tr>
+                                      <td><a href="" target="_blank">Войти на сайт</a></td>
+                                    </tr>
+                                  </tbody>
+                                </table>
+                              </td>
+                            </tr>
+                          </tbody>
+                        </table>
+
+                        <div class="user-data">
+                          <table>
+                            <tbody>
+                              <tr>
+                                <td>
+                                  <p class="user-data__title">Ваши учетные данные для входа в личный кабинет сайта «Лапки помощи».</p>
+                                </td>
+                              </tr>
+
+                              <tr>
+                                <td>
+                                  <p class="user-data__text"><span class="user-data__span">Ваш логин: </span>mail@gmail.com</p>
+                                </td>
+                              </tr>
+
+                              <tr>
+                                <td>
+                                  <p class="user-data__text"><span class="user-data__span">Ваш пароль: </span>435sfd8</p>
+                                </td>
+                              </tr>
+                            </tbody>
+                          </table>
+                        </div>
+
+                        <div class="validity-content">
+                          <p class="text"><span class="link-time">Обратите внимание:</span> срок действия ссылки 24 часа.</p>
+                          <p class="text">
+                            Если вы не пытались зарегистрироваться на сайте «Лапки помощи», то просто проигнорируйте это письмо. Возможно, кто-то совершил
+                            ошибку.
+                          </p>
+                        </div>
+
+                        <div class="bye-content">
+                          <table>
+                            <tbody>
+                              <tr>
+                                <td>
+                                  <p class="text-bye">Спасибо</p>
+                                  <p class="text-bye">Искренне ваша, команда «Лапки помощи»</p>
+                                </td>
+                                <td>
+                                  <img src="./icons/ic_paw.svg" class="bye-image" alt="Логотип Лапки помощи" />
+                                </td>
+                              </tr>
+                            </tbody>
+                          </table>
+                        </div>
+                      </td>
+                    </tr>
+                  </table>
+                </td>
+              </tr>
+            </table>
+
+            <div class="footer">
+              <table>
+                <tr>
+                  <td>
+                    <p class="footer__header">Лапки помощи</p>
+                  </td>
+                </tr>
+
+                <tr>
+                  <td>
+                    <p class="footer__text-about">Сервис для помощи приютам</p>
+                  </td>
+
+                  <td>
+                    <p class="footer__email">Служба поддержки:</p>
+                    <p class="footer__email">info@lapki.ru</p>
+                  </td>
+
+                  <td class="footer__icon-block">
+                    <a class="footer__icon-link" href="" target="_blank">
+                      <img src="./icons/footer__icon_classmates.svg" class="footer__icon" alt="одноклассники" />
+                    </a>
+                  </td>
+
+                  <td class="footer__icon-block">
+                    <a class="footer__icon-link" href="" target="_blank">
+                      <img src="./icons/footer__icon_vk.svg" class="footer__icon" alt="вконтакте" />
+                    </a>
+                  </td>
+
+                  <td class="footer__icon-block">
+                    <a class="footer__icon-link" href="" target="_blank">
+                      <img src="./icons/footer__icon_telegram.svg" class="footer__icon" alt="телеграм" />
+                    </a>
+                  </td>
+                </tr>
+              </table>
+            </div>
+          </div>
+        </td>
+      </tr>
+    </table>
+  </body>
+</html>
diff --git a/src/ui/Input/Input.jsx b/src/ui/Input/Input.jsx
index 7a8b06fb..168dfb8c 100644
--- a/src/ui/Input/Input.jsx
+++ b/src/ui/Input/Input.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import './Input.scss';
 
 function Input({
-  labelText, inputName, inputType, spanText, onBlur, onChange, minLength, maxLength, errorMessage, isValid, value,
+  labelText, inputName, inputType, spanText, onChange, minLength, maxLength, errorMessage, isValid, value,
 }) {
   return (
     <div className='input__wrapper'>
@@ -15,7 +15,6 @@ function Input({
         maxLength={maxLength}
         value={value}
         required
-        onBlur={onBlur}
         onChange={onChange}
       />
       <span className='input__error standard-font standard-font_type_smallest'>{spanText}</span>
diff --git a/src/ui/Input/Input.scss b/src/ui/Input/Input.scss
index 083998a8..9d0f9468 100644
--- a/src/ui/Input/Input.scss
+++ b/src/ui/Input/Input.scss
@@ -20,6 +20,10 @@
   border-radius: 8px;
   padding: 8px 16px;
 
+  &:-webkit-autofill {
+    -webkit-box-shadow: 0 0 0 1000px white inset;
+  }
+
   &:focus {
     outline: none;
   }
diff --git a/src/ui/PasswordInput/PasswordInput.jsx b/src/ui/PasswordInput/PasswordInput.jsx
index 8372d43f..b3c96710 100644
--- a/src/ui/PasswordInput/PasswordInput.jsx
+++ b/src/ui/PasswordInput/PasswordInput.jsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import './PasswordInput.scss';
 
 function PasswordInput({
-  spanText, minLength, maxLength, onChange, onBlur, errorMessage, isValid, spanPrompt,
+  spanText, minLength, maxLength, onChange, errorMessage, isValid, spanPrompt,
 }) {
   const [isOpen, setIsOpen] = useState(false);
   function showPassword() {
@@ -35,7 +35,6 @@ function PasswordInput({
           minLength={minLength}
           maxLength={maxLength}
           onChange={onChange}
-          onBlur={onBlur}
         />
         <button className={`password-visibility ${isOpen && 'password-visibility_opened'}`} type='button' onClick={showPassword} />
       </div>
diff --git a/src/ui/PasswordInput/PasswordInput.scss b/src/ui/PasswordInput/PasswordInput.scss
index ac170722..990fefb8 100644
--- a/src/ui/PasswordInput/PasswordInput.scss
+++ b/src/ui/PasswordInput/PasswordInput.scss
@@ -46,6 +46,10 @@ $images-path: '../../images';
   border: none;
   border-radius: 8px;
 
+  &:-webkit-autofill {
+    -webkit-box-shadow: 0 0 0 1000px white inset;
+  }
+
   &:focus {
     outline: none;
   }
diff --git a/src/utils/constants.js b/src/utils/constants.js
index 9510fd3b..0409e09e 100644
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
@@ -13,18 +13,23 @@ export const shelterLinkList = [
 
 export const colorLinkList = [
   {
-    to: 'red',
+    to: '/shelters/list/red',
     caption: 'Красные',
     explanation: 'Красные приюты - те, которым для сбора нужной суммы не хватает больше всего. Им особенно нужна ваша помощь!',
   },
   {
-    to: 'yellow',
+    to: '/shelters/list/yellow',
     caption: 'Жёлтые',
     explanation: 'Жёлтые приюты - те, которым для сбора нужной суммы не хватает совсем чуть-чуть. Возможно, именно вы поможете закрыть сбор!',
   },
   {
-    to: 'green',
+    to: '/shelters/list/green',
     caption: 'Зелёные',
     explanation: 'Зелёные приюты - те, у которых успешно закрыт сбор материальных средств. Но вы так же можете оказать им нематериальную помощь!',
   },
+  {
+    to: '/shelters/list/all',
+    caption: 'Все приюты',
+    explanation: 'Все приюты – это список всех имеющихся на сайте приютов.',
+  },
 ];