diff --git a/.github/workflows/pr_closed.yml b/.github/workflows/pr_closed.yml
new file mode 100644
index 00000000..4d08a068
--- /dev/null
+++ b/.github/workflows/pr_closed.yml
@@ -0,0 +1,84 @@
+name: PR_CLOSED DEPLOY AND TG ALERT
+
+on:
+  pull_request:
+    types: [closed]
+    branches:
+    - main
+
+
+jobs:
+  build_and_push_to_docker_hub:
+    name: Push Docker image to Docker Hub
+    if: github.event.pull_request.merged == true
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v2
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v1
+      - name: Login to Docker
+        uses: docker/login-action@v1
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+      - name: Push to Docker Hub
+        uses: docker/build-push-action@v2
+        with:
+          push: true
+          tags: lapkipomoshi/help_paw_f:latest
+
+  deploy:
+    runs-on: ubuntu-latest
+    needs: build_and_push_to_docker_hub
+    steps:
+      - name: executing remote ssh commands to deploy
+        uses: appleboy/ssh-action@master
+        with:
+          host: ${{ secrets.HOST }}
+          username: ${{ secrets.USER }}
+          password: ${{ secrets.PASSWORD }}
+          script: |
+            cd ~/test
+            sudo docker-compose stop
+            rm .env
+            touch .env
+            echo DB_ENGINE=${{ secrets.DB_ENGINE }} >> .env
+            echo DB_NAME=${{ secrets.DB_NAME }} >> .env
+            echo POSTGRES_USER=${{ secrets.POSTGRES_USER }} >> .env
+            echo POSTGRES_PASSWORD=${{ secrets.POSTGRES_PASSWORD }} >> .env
+            echo DB_HOST=${{ secrets.DB_HOST }} >> .env
+            echo DB_PORT=${{ secrets.DB_PORT }} >> .env
+            echo D_KEY=${{ secrets.D_KEY }} >> .env
+            echo LOCAL=${{ secrets.LOCAL }} >> .env
+            echo BOT=${{ secrets.BOT }} >> .env
+            echo ALERT_CHANNEL=${{ secrets.ALERT_CHANNEL }} >> .env
+            echo EMAIL_HOST=${{ secrets.EMAIL_HOST }} >> .env
+            echo EMAIL_PORT=${{ secrets.EMAIL_PORT }} >> .env
+            echo EMAIL_HOST_USER=${{ secrets.EMAIL_HOST_USER }} >> .env
+            echo EMAIL_HOST_PASSWORD=${{ secrets.EMAIL_HOST_PASSWORD }} >> .env
+            echo EMAIL_USE_SSL=${{ secrets.EMAIL_USE_SSL }} >> .env
+            echo EMAIL_USE_TLS=${{ secrets.EMAIL_USE_TLS }} >> .env
+            echo DEBUG=${{ secrets.DEBUG }} >> .env
+            echo EMAIL_BACKEND_TYPE=${{ secrets.EMAIL_BACKEND_TYPE }} >> .env
+            sudo docker-compose pull
+            sudo docker-compose up -d
+
+  send_message:
+    runs-on: ubuntu-latest
+    needs: deploy
+    steps:
+      - name: send message
+        if: github.event.pull_request.merged == true
+        uses: appleboy/telegram-action@master
+        with:
+          to: ${{ secrets.ALERT_CHANNEL }}
+          token: ${{ secrets.BOT }}
+          message: FRONTEND - ${{ github.event_name }} ветки ${{ github.head_ref }} успешно смержен в ${{ github.base_ref }}, LAPKIPOMOSHI.RU обновлен и перезапущен
+      - name: send message merged
+        if: github.event.pull_request.merged == false
+        uses: appleboy/telegram-action@master
+        with:
+          to: ${{ secrets.ALERT_CHANNEL }}
+          token: ${{ secrets.BOT }}
+          message: FRONTEND - ${{ github.event_name }} ветки ${{ github.head_ref }} в ${{ github.base_ref }} закрыт без мержа, деплой не производился.
diff --git a/.github/workflows/pr_closed_test.yml b/.github/workflows/pr_closed_test.yml
new file mode 100644
index 00000000..23205c2b
--- /dev/null
+++ b/.github/workflows/pr_closed_test.yml
@@ -0,0 +1,85 @@
+name: PR_CLOSED DEPLOY AND TG ALERT
+
+on:
+  pull_request:
+    types: [closed]
+    branches:
+    - test
+
+
+jobs:
+  build_and_push_to_docker_hub:
+    name: Push Docker image to Docker Hub
+    if: github.event.pull_request.merged == true
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v2
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v1
+      - name: Login to Docker
+        uses: docker/login-action@v1
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+      - name: Push to Docker Hub
+        uses: docker/build-push-action@v2
+        with:
+          push: true
+          tags: lapkipomoshi/help_paw_f:test
+
+  deploy:
+    runs-on: ubuntu-latest
+    needs: build_and_push_to_docker_hub
+    steps:
+      - name: executing remote ssh commands to deploy
+        uses: appleboy/ssh-action@master
+        with:
+          host: ${{ secrets.TEST_HOST }}
+          username: ${{ secrets.USER }}
+          password: ${{ secrets.PASSWORD }}
+          script: |
+            cd ~/test
+            sudo docker-compose stop
+            rm .env
+            touch .env
+            echo DB_ENGINE=${{ secrets.DB_ENGINE }} >> .env
+            echo DB_NAME=${{ secrets.DB_NAME }} >> .env
+            echo POSTGRES_USER=${{ secrets.POSTGRES_USER }} >> .env
+            echo POSTGRES_PASSWORD=${{ secrets.POSTGRES_PASSWORD }} >> .env
+            echo DB_HOST=${{ secrets.DB_HOST }} >> .env
+            echo DB_PORT=${{ secrets.DB_PORT }} >> .env
+            echo D_KEY=${{ secrets.D_KEY }} >> .env
+            echo LOCAL=${{ secrets.LOCAL }} >> .env
+            echo BOT=${{ secrets.BOT }} >> .env
+            echo ALERT_CHANNEL=${{ secrets.ALERT_CHANNEL }} >> .env
+            echo EMAIL_HOST=${{ secrets.EMAIL_HOST }} >> .env
+            echo EMAIL_PORT=${{ secrets.EMAIL_PORT }} >> .env
+            echo EMAIL_HOST_USER=${{ secrets.EMAIL_HOST_USER }} >> .env
+            echo EMAIL_HOST_PASSWORD=${{ secrets.EMAIL_HOST_PASSWORD }} >> .env
+            echo EMAIL_USE_SSL=${{ secrets.EMAIL_USE_SSL }} >> .env
+            echo EMAIL_USE_TLS=${{ secrets.EMAIL_USE_TLS }} >> .env
+            echo DEBUG=${{ secrets.TEST_DEBUG }} >> .env
+            echo EMAIL_BACKEND_TYPE=${{ secrets.EMAIL_BACKEND_TYPE }} >> .env
+            echo REACT_APP_SERVER_TYPE=${{ secrets.REACT_APP_SERVER_TYPE_TEST }} >> .env
+            sudo docker-compose pull
+            sudo docker-compose up -d
+
+  send_message:
+    runs-on: ubuntu-latest
+    needs: deploy
+    steps:
+      - name: send message
+        if: github.event.pull_request.merged == true
+        uses: appleboy/telegram-action@master
+        with:
+          to: ${{ secrets.ALERT_CHANNEL }}
+          token: ${{ secrets.BOT }}
+          message: FRONTEND - ${{ github.event_name }} ветки ${{ github.head_ref }} успешно смержен в ${{ github.base_ref }}, TEST обновлен и перезапущен
+      - name: send message merged
+        if: github.event.pull_request.merged == false
+        uses: appleboy/telegram-action@master
+        with:
+          to: ${{ secrets.ALERT_CHANNEL }}
+          token: ${{ secrets.BOT }}
+          message: FRONTEND - ${{ github.event_name }} ветки ${{ github.head_ref }} в ${{ github.base_ref }} закрыт без мержа, деплой не производился.
diff --git a/.github/workflows/pr_opened.yml b/.github/workflows/pr_opened.yml
new file mode 100644
index 00000000..a9b423d0
--- /dev/null
+++ b/.github/workflows/pr_opened.yml
@@ -0,0 +1,19 @@
+name: PR_OPENED TG ALERT
+
+on:
+  pull_request:
+    types: [opened]
+    branches:
+    - main
+    - test
+
+jobs:
+  send_message:
+    runs-on: ubuntu-latest
+    steps:
+      - name: send message
+        uses: appleboy/telegram-action@master
+        with:
+          to: ${{ secrets.ALERT_CHANNEL }}
+          token: ${{ secrets.BOT }}
+          message: FRONTEND - ${{ github.actor }} открыл ${{ github.event_name }} ветки ${{ github.head_ref }} в ${{ github.base_ref }}
diff --git a/src/components/CardsSlider/CardsSlider.jsx b/src/components/CardsSlider/CardsSlider.jsx
index 63ffcb79..fabf5c2d 100644
--- a/src/components/CardsSlider/CardsSlider.jsx
+++ b/src/components/CardsSlider/CardsSlider.jsx
@@ -1,7 +1,7 @@
 import React, { useRef } from 'react';
 import './CardsSlider.scss';
 
-const CardsSlider = ({ children, isButtonsHidden = false }) => {
+const CardsSlider = ({ children, isButtonsHidden = false, modifier }) => {
   const defaultScrollPixelsAmount = 350;
 
   const sliderContainerRef = useRef(null);
@@ -16,10 +16,10 @@ const CardsSlider = ({ children, isButtonsHidden = false }) => {
 
   return (
     <>
-      <ul className='cards-slider' ref={sliderContainerRef}>
+      <ul className={`cards-slider cards-slider_${modifier}`} ref={sliderContainerRef}>
         {children}
       </ul>
-      <div className={`cards-slider__buttons ${isButtonsHidden && 'cards-slider__buttons_hidden'}`}>
+      <div className={`cards-slider__buttons cards-slider__buttons_${modifier} ${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/styles/__buttons/cards-slider__buttons.scss b/src/components/CardsSlider/styles/__buttons/cards-slider__buttons.scss
index e818de03..8efc83f5 100644
--- a/src/components/CardsSlider/styles/__buttons/cards-slider__buttons.scss
+++ b/src/components/CardsSlider/styles/__buttons/cards-slider__buttons.scss
@@ -5,7 +5,15 @@
     display: none;
   }
 
+  &_profile {
+    margin-bottom: 0;
+  }
+
   @media (min-width: 768px) {
     margin-bottom: 80px;
+
+    &_profile {
+      margin-bottom: 0;
+    }
   }
 }
diff --git a/src/components/CardsSlider/styles/cards-slider.scss b/src/components/CardsSlider/styles/cards-slider.scss
index 86605593..9b7bce24 100644
--- a/src/components/CardsSlider/styles/cards-slider.scss
+++ b/src/components/CardsSlider/styles/cards-slider.scss
@@ -10,11 +10,27 @@
   column-gap: 38px;
   overflow: hidden;
 
+  &_profile {
+    padding: 0;
+  }
+
   @media (min-width: 768px) {
-    padding: 20px 0 44px 44px;
+    .cards-slider {
+      padding: 20px 0 44px 44px;
+
+      &_profile {
+        padding: 0;
+      }
+    }
   }
 
   @media (min-width: 1440px) {
-    padding-left: 132px;
+    .cards-slider {
+      padding-left: 132px;
+
+      &_profile {
+        padding: 0;
+      }
+    }
   }
 }
diff --git a/src/components/PrivacyCheckbox/PrivacyCheckbox.jsx b/src/components/PrivacyCheckbox/PrivacyCheckbox.jsx
new file mode 100644
index 00000000..0610eabd
--- /dev/null
+++ b/src/components/PrivacyCheckbox/PrivacyCheckbox.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import './PrivacyCheckbox.scss';
+
+const PrivacyCheckbox = ({ onClick }) => {
+  return (
+    <div className='privacy-checkbox'>
+      <label className='privacy-checkbox__container'>
+        <input className='privacy-checkbox__input' type='checkbox' onClick={onClick} />
+        <span className='privacy-checkbox__checkbox' />
+      </label>
+
+      <p className='privacy-checkbox__text standard-font standard-font_type_small'>
+        Я согласен с{' '}
+        <Link className='privacy-checkbox__link standard-font standard-font_type_small' to='/privacy' target='_blank'>
+          Политикой конфиденциальности
+        </Link>{' '}
+        и{' '}
+        <Link className='privacy-checkbox__link standard-font standard-font_type_small' to='/terms' target='_blank'>
+          Условиями использования сервиса
+        </Link>
+      </p>
+    </div>
+  );
+};
+
+export default PrivacyCheckbox;
diff --git a/src/components/PrivacyCheckbox/PrivacyCheckbox.scss b/src/components/PrivacyCheckbox/PrivacyCheckbox.scss
new file mode 100644
index 00000000..522e913f
--- /dev/null
+++ b/src/components/PrivacyCheckbox/PrivacyCheckbox.scss
@@ -0,0 +1,52 @@
+.privacy-checkbox {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-top: 18px;
+  position: relative;
+}
+
+.privacy-checkbox__text {
+  color: var(--color-text-base);
+  margin: 0;
+  width: 367px;
+}
+
+.privacy-checkbox__link {
+  color: var(--color-accent-base);
+  text-decoration: none;
+}
+
+.privacy-checkbox__checkbox:hover {
+  cursor: pointer;
+}
+
+.privacy-checkbox__container > .privacy-checkbox__input {
+  position: absolute;
+  z-index: -1;
+  opacity: 0;
+}
+
+.privacy-checkbox__container > .privacy-checkbox__checkbox {
+  display: inline-flex;
+  align-items: center;
+}
+
+.privacy-checkbox__container > .privacy-checkbox__checkbox::before {
+  content: '';
+  box-sizing: border-box;
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+  border: 1px solid var(--color-text-base);
+  border-radius: 2px;
+  margin-right: 20px;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-color: var(--color-text-light);
+}
+
+.privacy-checkbox__container > .privacy-checkbox__input:checked + .privacy-checkbox__checkbox::before {
+  background-image: url('../../images/register__daw.svg');
+  background-size: 100%;
+}
diff --git a/src/components/ProfileContainer/ProfileContainer.scss b/src/components/ProfileContainer/ProfileContainer.scss
index 26917fd3..38a878dd 100644
--- a/src/components/ProfileContainer/ProfileContainer.scss
+++ b/src/components/ProfileContainer/ProfileContainer.scss
@@ -1,6 +1,6 @@
 .profile-container {
   background-color: var(--color-background-base);
-  padding: 44px 132px 199px;
+  padding: 44px 132px 80px;
   position: relative;
 
   &_edit-profile {
diff --git a/src/components/ProfileSheltersBlock/ProfileSheltersBlock.jsx b/src/components/ProfileSheltersBlock/ProfileSheltersBlock.jsx
index 3d89d25d..eceba253 100644
--- a/src/components/ProfileSheltersBlock/ProfileSheltersBlock.jsx
+++ b/src/components/ProfileSheltersBlock/ProfileSheltersBlock.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import './ProfileSheltersBlock.scss';
 import ShelterCard from '../ShelterCard/ShelterCard';
 import Button from '../../ui/Button/Button';
+import CardsSlider from '../CardsSlider/CardsSlider';
 
 const ProfileSheltersBlock = ({ shelters, sheltersTitle, owner }) => {
   return (
@@ -10,27 +11,30 @@ const ProfileSheltersBlock = ({ shelters, sheltersTitle, owner }) => {
         <div className='profile-shelters__container'>
           <h3 className='profile-shelters__title standard-font standard-font_type_h3'>{sheltersTitle}</h3>
 
-          <ul className='profile-shelters__shelters-container'>
-            {shelters.map((shelter) => {
-              return (
-                <li key={shelter.id}>
-                  <ShelterCard
-                    id={shelter.id}
-                    name={shelter.name}
-                    address={shelter.address}
-                    workingFromHour={shelter.working_from_hour}
-                    workingToHour={shelter.working_to_hour}
-                    workingHours={shelter.working_hours}
-                    logo={shelter.logo}
-                    profileImage={shelter.profile_image}
-                  />
-                </li>
-              );
-            })}
-          </ul>
-
-          {owner && <Button link to='/'>Перейти в приют</Button>}
+          <div className='profile-shelters__shelters'>
+            <CardsSlider modifier='profile'>
+              <ul className='profile-shelters__shelters-container'>
+                {shelters.map((shelter) => {
+                  return (
+                    <li key={shelter.id}>
+                      <ShelterCard
+                        id={shelter.id}
+                        name={shelter.name}
+                        address={shelter.address}
+                        workingFromHour={shelter.working_from_hour}
+                        workingToHour={shelter.working_to_hour}
+                        workingHours={shelter.working_hours}
+                        logo={shelter.logo}
+                        profileImage={shelter.profile_image}
+                      />
+                    </li>
+                  );
+                })}
+              </ul>
+            </CardsSlider>
 
+            {owner && <Button link to='/'>Перейти в приют</Button>}
+          </div>
         </div>
       }
     </div>
diff --git a/src/components/ProfileSheltersBlock/ProfileSheltersBlock.scss b/src/components/ProfileSheltersBlock/ProfileSheltersBlock.scss
index 0889c4d3..d7adf80a 100644
--- a/src/components/ProfileSheltersBlock/ProfileSheltersBlock.scss
+++ b/src/components/ProfileSheltersBlock/ProfileSheltersBlock.scss
@@ -1,9 +1,19 @@
+.profile-shelters__shelters {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
 .profile-shelters__container {
   display: flex;
   flex-direction: column;
   margin-bottom: 44px;
 }
 
+.profile-shelters__container:last-of-type {
+  margin-bottom: 0;
+}
+
 .profile-shelters__title {
   margin-top: 0;
   margin-bottom: 28px;
diff --git a/src/components/ShelterMetricsOverview/ShelterMetricsOverview.jsx b/src/components/ShelterMetricsOverview/ShelterMetricsOverview.jsx
index 6e6c8a8f..683bb159 100644
--- a/src/components/ShelterMetricsOverview/ShelterMetricsOverview.jsx
+++ b/src/components/ShelterMetricsOverview/ShelterMetricsOverview.jsx
@@ -7,7 +7,7 @@ const ShelterMetricsOverview = ({ title, metricValue, actionText, path }) => {
     <div className='shelter-metrics'>
       <h3 className='shelter-metrics__title standard-font_type_h3'>
         {title}
-        {metricValue}
+        <span className='shelter-metrics__metrics-donation-sum'> {metricValue}</span>
       </h3>
 
       <Button link to={path}>
diff --git a/src/components/ShelterMetricsOverview/ShelterMetricsOverview.scss b/src/components/ShelterMetricsOverview/ShelterMetricsOverview.scss
index 5fdae807..d5de8d54 100644
--- a/src/components/ShelterMetricsOverview/ShelterMetricsOverview.scss
+++ b/src/components/ShelterMetricsOverview/ShelterMetricsOverview.scss
@@ -7,3 +7,7 @@
 .shelter-metrics__title {
   margin: 0;
 }
+
+.shelter-metrics__metrics-donation-sum {
+  color: var(--color-accent-base);
+}
diff --git a/src/components/VacancyCard/VacancyCard.jsx b/src/components/VacancyCard/VacancyCard.jsx
index 63573737..383d4f8a 100644
--- a/src/components/VacancyCard/VacancyCard.jsx
+++ b/src/components/VacancyCard/VacancyCard.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useOutletContext } from 'react-router-dom';
 import './VacancyCard.scss';
-import EditPenIcon from '../../images/EditPenIcon/EditPenIcon';
+import EditIcon from '../../images/EditIcon/EditIcon';
 import DeleteIcon from '../../images/DeleteIcon/DeleteIcon';
 
 const VacancyCard = ({ title, salary, schedule, description, education, isLoading }) => {
@@ -18,9 +18,9 @@ const VacancyCard = ({ title, salary, schedule, description, education, isLoadin
 
         {isOwner && (
           <>
-            {/* TODO  <EditPenIcon /> функционал реализую в след PR */}
+            {/* TODO  <EditIcon /> функционал реализую в след PR */}
             <button type='button' className='vacancy-card__icon-button vacancy-card__icon-button_edit'>
-              <EditPenIcon />
+              <EditIcon />
             </button>
             {/* TODO DeleteIcon функционал реализую в след PR */}
             <button type='button' className='vacancy-card__icon-button vacancy-card__title-button_delete'>
diff --git a/src/components/VacancyCard/vacancy-card/__icon-button/vacancy-card__icon-button.scss b/src/components/VacancyCard/vacancy-card/__icon-button/vacancy-card__icon-button.scss
index b2ed4ace..72cb3a95 100644
--- a/src/components/VacancyCard/vacancy-card/__icon-button/vacancy-card__icon-button.scss
+++ b/src/components/VacancyCard/vacancy-card/__icon-button/vacancy-card__icon-button.scss
@@ -20,6 +20,4 @@
 
 .vacancy-card__title-button_delete {
   color: #f0924f;
-  margin-left: 8px;
-  font-size: 22.3px;
 }
diff --git a/src/hooks/useOutsideClick.jsx b/src/hooks/useOutsideClick.jsx
new file mode 100644
index 00000000..d786728c
--- /dev/null
+++ b/src/hooks/useOutsideClick.jsx
@@ -0,0 +1,19 @@
+import { useEffect } from 'react';
+
+const useOutsideClick = (ref, callback) => {
+  const handleClick = (e) => {
+    if (ref.current && !ref.current.contains(e.target)) {
+      callback();
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('click', handleClick);
+
+    return () => {
+      document.removeEventListener('click', handleClick);
+    };
+  }, [ref, callback]);
+};
+
+export default useOutsideClick;
diff --git a/src/images/EditPenIcon/EditPenIcon.jsx b/src/images/EditIcon/EditIcon.jsx
similarity index 89%
rename from src/images/EditPenIcon/EditPenIcon.jsx
rename to src/images/EditIcon/EditIcon.jsx
index 7f0b7943..81a7b53f 100644
--- a/src/images/EditPenIcon/EditPenIcon.jsx
+++ b/src/images/EditIcon/EditIcon.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import './EditPenIcon.scss';
+import './EditIcon.scss';
 
-const EditPenIcon = () => {
+const EditIcon = () => {
   return (
     <svg className='edit-icon' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 49 49' fill='none'>
       <path
@@ -16,4 +16,4 @@ const EditPenIcon = () => {
   );
 };
 
-export default EditPenIcon;
+export default EditIcon;
diff --git a/src/images/EditPenIcon/EditPenIcon.scss b/src/images/EditIcon/EditIcon.scss
similarity index 100%
rename from src/images/EditPenIcon/EditPenIcon.scss
rename to src/images/EditIcon/EditIcon.scss
diff --git a/src/modules/AboutShelter/AboutShelter.jsx b/src/modules/AboutShelter/AboutShelter.jsx
index b9145683..151e6e25 100644
--- a/src/modules/AboutShelter/AboutShelter.jsx
+++ b/src/modules/AboutShelter/AboutShelter.jsx
@@ -5,7 +5,7 @@ import InfoItem from '../../ui/InfoItem/InfoItem';
 import classmatesIcon from '../../images/icons/footer__icon_classmates.svg';
 import vkIcon from '../../images/icons/footer__icon_vk.svg';
 import telegramIcon from '../../images/icons/footer__icon_telegram.svg';
-import EditPenIcon from '../../images/EditPenIcon/EditPenIcon';
+import EditIcon from '../../images/EditIcon/EditIcon';
 import DeleteIcon from '../../images/DeleteIcon/DeleteIcon';
 import ShelterOwnerStatistics from '../ShelterOwnerStatistics/ShelterOwnerStatistics';
 
@@ -34,7 +34,7 @@ const AboutShelter = () => {
               <>
                 {/* TODO  <EditPenIcon /> ведет на 6.2.1.4 в фигме, оно пока не реализовано */}
                 <Link to='/' className='about-shelter__icon-button about-shelter__icon-button_edit'>
-                  <EditPenIcon />
+                  <EditIcon />
                 </Link>
                 {/* TODO  при нажатии попап как на 6.2.1.3 в фигме, попап не сверстан */}
                 <button type='button' className='about-shelter__icon-button about-shelter__title-button_delete'>
@@ -46,7 +46,7 @@ const AboutShelter = () => {
 
           <ul className='shelter-info__list'>
             <InfoItem argument='Адрес'>{shelter.address}</InfoItem>
-            <InfoItem argument='Часы-работы'>{`${shelter.working_from_hour} - ${shelter.working_to_hour}`}</InfoItem>
+            <InfoItem argument='Часы работы'>{`${shelter.working_from_hour} - ${shelter.working_to_hour}`}</InfoItem>
             <InfoItem argument='Номер телефона'>{shelter.phone_number}</InfoItem>
             <InfoItem argument='E-mail'>{shelter.email}</InfoItem>
             {shelter.web_site && (
@@ -87,10 +87,10 @@ const AboutShelter = () => {
       {isOwner && <ShelterOwnerStatistics shelter={shelter} />}
 
       <h3 className='standard-font_type_h3 about-shelter__metrics-dotantion'>
-        Собрано денег за всё время: <span className='color_text_additional'>{shelter.money_collected}</span>
+        Собрано денег за всё время: <span className='about-shelter__metrics-donation-sum'>{shelter.money_collected}</span>
       </h3>
-      <h3 className='standard-font_type_h3 about-shelter__metrics-adopted-animals'>
-        Забрали животных за всё время: <span className='color_text_additional'>{shelter.animals_adopted}</span>
+      <h3 className='standard-font_type_h3 standard-font'>
+        Забрали животных за всё время: <span className='about-shelter__metrics-donation-sum'>{shelter.animals_adopted}</span>
       </h3>
     </section>
   );
diff --git a/src/modules/AboutShelter/AboutShelter.scss b/src/modules/AboutShelter/AboutShelter.scss
index ace28536..53b8b19d 100644
--- a/src/modules/AboutShelter/AboutShelter.scss
+++ b/src/modules/AboutShelter/AboutShelter.scss
@@ -2,8 +2,8 @@
 @import url('./styles/about-shelter/__title-container/about-shelter__title-container.scss');
 @import url('./styles/about-shelter/__description-title-container/about-shelter__description-title-container.scss');
 @import url('./styles/about-shelter/__icon-button/about-shelter__icon-button.scss');
-@import url('./styles/about-shelter/__metrics-adopted-animals/about-shelter__metrics-adopted-animals.scss');
 @import url('./styles/about-shelter/__metrics-dotantion/about-shelter__metrics-dotantion.scss');
+@import url('./styles/about-shelter/__metrics-donation-sum/about-shelter__metrics-donation-sum.scss');
 
 @import url('./styles/shelter-info/shelter-info.css');
 @import url('./styles/shelter-info/__logo/shelter-info__logo.css');
diff --git a/src/modules/AboutShelter/styles/about-shelter/__icon-button/about-shelter__icon-button.scss b/src/modules/AboutShelter/styles/about-shelter/__icon-button/about-shelter__icon-button.scss
index 3e81a5dc..0ce36047 100644
--- a/src/modules/AboutShelter/styles/about-shelter/__icon-button/about-shelter__icon-button.scss
+++ b/src/modules/AboutShelter/styles/about-shelter/__icon-button/about-shelter__icon-button.scss
@@ -19,6 +19,6 @@
 }
 
 .about-shelter__title-button_delete {
-  color: #d83e3e;
+  color: var(--color-verify-invalid);
   margin-left: 8px;
 }
diff --git a/src/modules/AboutShelter/styles/about-shelter/__metrics-adopted-animals/about-shelter__metrics-adopted-animals.scss b/src/modules/AboutShelter/styles/about-shelter/__metrics-adopted-animals/about-shelter__metrics-adopted-animals.scss
deleted file mode 100644
index d7d9e11a..00000000
--- a/src/modules/AboutShelter/styles/about-shelter/__metrics-adopted-animals/about-shelter__metrics-adopted-animals.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.about-shelter__metrics-adopted-animals {
-  margin: 0;
-}
diff --git a/src/modules/AboutShelter/styles/about-shelter/__metrics-donation-sum/about-shelter__metrics-donation-sum.scss b/src/modules/AboutShelter/styles/about-shelter/__metrics-donation-sum/about-shelter__metrics-donation-sum.scss
new file mode 100644
index 00000000..2ad09825
--- /dev/null
+++ b/src/modules/AboutShelter/styles/about-shelter/__metrics-donation-sum/about-shelter__metrics-donation-sum.scss
@@ -0,0 +1,3 @@
+.about-shelter__metrics-donation-sum {
+  color: var(--color-text-additional);
+}
diff --git a/src/modules/ShelterOwnerStatistics/ShelterOwnerStatistics.jsx b/src/modules/ShelterOwnerStatistics/ShelterOwnerStatistics.jsx
index ea7ae10b..9d965ff2 100644
--- a/src/modules/ShelterOwnerStatistics/ShelterOwnerStatistics.jsx
+++ b/src/modules/ShelterOwnerStatistics/ShelterOwnerStatistics.jsx
@@ -2,16 +2,22 @@ import React from 'react';
 import './ShelterOwnerStatistics.scss';
 import ShelterMetricsOverview from '../../components/ShelterMetricsOverview/ShelterMetricsOverview';
 
-// TODO доделать на получение данных с бэка вместо статики, Максим добавит чуть позже поля в shelter, чтобы не делать доп запросы
 // TODO додалеть пути, сейчас эти страницы не сверстаны
+
 const ShelterOwnerStatistics = ({ shelter }) => {
-  console.log(shelter);
+  const metrics = [
+    { title: 'Количество питомцев: ', valueKey: shelter.count_pets, actionText: 'Посмотреть всех питомцев', path: '/' },
+    { title: 'Количество вакансий: ', valueKey: shelter.count_pets, actionText: 'Посмотреть все вакансии', path: '/' },
+    { title: 'Количество тегов: ', valueKey: shelter.count_pets, actionText: 'Посмотреть все теги', path: '/' },
+    { title: 'Количество новостей: ', valueKey: shelter.count_pets, actionText: 'Посмотреть все новости', path: '/' },
+  ];
   return (
     <div className='shelter-owner-statistic'>
-      <ShelterMetricsOverview title='Количество питомцев: ' metricValue='123' actionText='Посмотреть всех питомцев' path='/' />
-      <ShelterMetricsOverview title='Количество вакансий: ' metricValue='32' actionText='Посмотреть все вакансии' path='/' />
-      <ShelterMetricsOverview title='Количество тегов: ' metricValue='1000' actionText='Посмотреть все теги' path='/' />
-      <ShelterMetricsOverview title='Количество новостей: ' metricValue='666' actionText='Посмотреть все новостей' path='/' />
+      {metrics.map((metric) => {
+        return (
+          <ShelterMetricsOverview key={metric.title} title={metric.title} metricValue={metric.valueKey} path={metric.path} actionText={metric.actionText} />
+        );
+      })}
     </div>
   );
 };
diff --git a/src/modules/ShelterVacancies/ShelterVacancies.jsx b/src/modules/ShelterVacancies/ShelterVacancies.jsx
index c0738435..36b226c9 100644
--- a/src/modules/ShelterVacancies/ShelterVacancies.jsx
+++ b/src/modules/ShelterVacancies/ShelterVacancies.jsx
@@ -1,12 +1,20 @@
 import React, { useState, useEffect } from 'react';
 import { useOutletContext } from 'react-router-dom';
 import './ShelterVacancies.scss';
-import VacancyCard from '../../components/VacancyCard/VacancyCard';
+import VacancyList from './VacancyList';
 import Button from '../../ui/Button/Button';
+import AddVacancyForm from './components/AddVacancyForm/AddVacancyForm';
 import shelterVacanciesApi from './api';
+import imageSuccess from '../../images/icons/ic_success.svg';
+import InfoTooltip from '../../components/InfoTooltip/InfoTooltip';
+
+const message = 'Вакансия успешно добавлена!';
 
 const ShelterVacancies = () => {
+  const [infoTooltipOpen, setInfoTooltipOpen] = useState(false);
+
   const [vacanciesList, setVacanciesList] = useState([]);
+  const [isOpenVacancyForm, setIsOpenVacancyForm] = useState(false);
 
   const [isLoading, setIsLoading] = useState(true);
 
@@ -25,35 +33,50 @@ const ShelterVacancies = () => {
       });
   }, [shelter.id]);
 
-  const hasVacancies = vacanciesList.length !== 0;
+  const toggleVacancyForm = () => {
+    setIsOpenVacancyForm((prevOpen) => {
+      return !prevOpen;
+    });
+  };
+
+  const cancelVacancyForm = () => {
+    setIsOpenVacancyForm((prevOpen) => {
+      return !prevOpen;
+    });
+  };
+
+  const closeInfoTooltip = () => {
+    setInfoTooltipOpen(false);
+  };
+
+  const handleSubmit = () => {
+    setIsOpenVacancyForm(false);
+    setInfoTooltipOpen(true);
+
+    setTimeout(() => {
+      closeInfoTooltip();
+    }, 5000);
+  };
+
+  if (isLoading) {
+    return null;
+  }
 
   return (
     <section className='shelter-vacancies'>
       <div className='shelter-vacancies__title-container'>
         <h2 className='shelter-vacancies__title standard-font standard-font_type_h2'>Вакансии приюта «{shelter.name}»</h2>
-        <Button>Добавить вакансию</Button>
+
+        <Button disabled={isOpenVacancyForm} onClick={toggleVacancyForm}>
+          Добавить вакансию
+        </Button>
       </div>
       <h3 className='standard-font_type_h3 shelter-section__subtitle'>Всего вакансий: {vacanciesList.length}</h3>
-      <ul className='vacancies-list'>
-        {hasVacancies ? (
-          vacanciesList.map((card) => {
-            return (
-              <VacancyCard
-                isLoading={isLoading}
-                key={card.id}
-                id={card.id}
-                education={card.education}
-                title={card.position}
-                salary={card.salary}
-                schedule={card.schedule}
-                description={card.description}
-              />
-            );
-          })
-        ) : (
-          <p>У приюта нет активных вакансий</p>
-        )}
-      </ul>
+      <div className='shelter-vacancies__vacancies-container'>
+        <VacancyList vacancies={vacanciesList} isLoading={isLoading} />
+        {isOpenVacancyForm && <AddVacancyForm onChange={cancelVacancyForm} onSubmitSuccess={handleSubmit} />}
+      </div>
+      <InfoTooltip isOpen={infoTooltipOpen} image={imageSuccess} message={message} onClose={closeInfoTooltip} />
     </section>
   );
 };
diff --git a/src/modules/ShelterVacancies/ShelterVacancies.scss b/src/modules/ShelterVacancies/ShelterVacancies.scss
index f36f839d..e05b920b 100644
--- a/src/modules/ShelterVacancies/ShelterVacancies.scss
+++ b/src/modules/ShelterVacancies/ShelterVacancies.scss
@@ -1,10 +1,17 @@
-.vacancies-list {
+.shelter__vacancies-list {
   display: flex;
   margin: 36px 0 0;
   padding: 0;
   flex-direction: column;
   row-gap: 32px;
   list-style-type: none;
+  width: 437px;
+}
+
+.shelter__empty-list {
+  margin: 36px 0 0;
+  padding: 0;
+  width: 437px;
 }
 
 .shelter-section__subtitle {
@@ -27,3 +34,8 @@
   padding: 0 132px 80px;
   box-sizing: border-box;
 }
+
+.shelter-vacancies__vacancies-container {
+  display: flex;
+  gap: 63px;
+}
diff --git a/src/modules/ShelterVacancies/VacancyList.jsx b/src/modules/ShelterVacancies/VacancyList.jsx
new file mode 100644
index 00000000..5b368dd2
--- /dev/null
+++ b/src/modules/ShelterVacancies/VacancyList.jsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import VacancyCard from '../../components/VacancyCard/VacancyCard';
+import './ShelterVacancies.scss';
+
+const VacancyList = ({ vacancies, isLoading }) => {
+  if (!vacancies.length) {
+    return <p className='standard-font shelter__empty-list'>У приюта нет активных вакансий</p>;
+  }
+
+  return (
+    <ul className='shelter__vacancies-list'>
+      {vacancies.map((card) => {
+        return (
+          <VacancyCard
+            isLoading={isLoading}
+            key={card.id}
+            id={card.id}
+            education={card.education}
+            title={card.position}
+            salary={card.salary}
+            schedule={card.schedule}
+            description={card.description}
+          />
+        );
+      })}
+    </ul>
+  );
+};
+
+export default VacancyList;
diff --git a/src/modules/ShelterVacancies/components/AddVacancyForm/AddVacancyForm.jsx b/src/modules/ShelterVacancies/components/AddVacancyForm/AddVacancyForm.jsx
new file mode 100644
index 00000000..deede29b
--- /dev/null
+++ b/src/modules/ShelterVacancies/components/AddVacancyForm/AddVacancyForm.jsx
@@ -0,0 +1,102 @@
+import React, { useEffect, useState } from 'react';
+import './AddVacancyForm.scss';
+import useInput from '../../../../hooks/useInput';
+import DeclarationInput from '../../../../ui/DeclarationInput/DeclarationInput';
+import Select from '../../../../ui/Select/Select';
+import * as regex from '../../../../utils/regex';
+import * as errorMessage from '../../../../utils/errorMessage';
+import { defaultFormValues, shiftOptions, salaryOptions, educationOptions } from './constants';
+import FormActionButtons from './components/FormActionButtons';
+import FormTextarea from './components/FormTextarea';
+import PrivacyCheckbox from '../../../../components/PrivacyCheckbox/PrivacyCheckbox';
+
+const AddVacancyForm = ({ onChange, onSubmitSuccess }) => {
+  const [formValues, setFormValues] = useState(defaultFormValues);
+
+  const jobTitleInput = useInput('', { notEmpty: true, maxLength: 30, regex: regex.NAME_REGEX }, errorMessage.VACANCY_NAME);
+  const salaryInput = useInput('', { notEmpty: true, maxLength: 12, regex: regex.NUMBER }, errorMessage.VACANCY_SALARY);
+  const jobDescriptionInput = useInput('', { notEmpty: true, maxLength: 3000, regex: regex.TEXT }, errorMessage.VACANCY_DESCRIPTION);
+
+  const [isChecked, setIsChecked] = useState(false);
+  const toggleCheckbox = () => {
+    setIsChecked((prev) => {
+      return !prev;
+    });
+  };
+
+  const isSubmitButtonDisabled =
+    jobTitleInput.invalidText ||
+    salaryInput.invalidText ||
+    jobDescriptionInput.invalidText ||
+    !isChecked ||
+    formValues.education.length === 0 ||
+    formValues.is_ndfl.length === 0 ||
+    formValues.schedule.length === 0;
+
+  const handleCancelClick = () => {
+    setFormValues(defaultFormValues);
+    onChange();
+  };
+
+  // TODO написать api для отправки формы как только починят бек
+  const handleSubmit = (evt) => {
+    evt.preventDefault();
+    console.log('submit');
+  };
+
+  const handleDescriptionChange = (evt) => {
+    jobDescriptionInput.onChange(evt);
+
+    setFormValues((prevValues) => {
+      return {
+        ...prevValues,
+        description: evt.target.value,
+      };
+    });
+  };
+
+  useEffect(() => {
+    setFormValues((prevValues) => {
+      return {
+        ...prevValues,
+        salary: salaryInput.value,
+        position: jobTitleInput.value,
+      };
+    });
+  }, [salaryInput.value, jobTitleInput.value]);
+
+  const handleSelectChange = (id, selected) => {
+    setFormValues((prevValues) => {
+      return {
+        ...prevValues,
+        [id]: selected,
+      };
+    });
+  };
+
+  return (
+    <form className='add-vacancy-form__container' onSubmit={handleSubmit}>
+      <DeclarationInput caption='Название вакансии*' inputState={jobTitleInput} type='text' name='jobTitleInput' required />
+
+      <div className='add-vacancy-form__flex-container'>
+        <DeclarationInput caption='Заработная плата*' inputState={salaryInput} type='number' name='salaryInput' required placeholder='₽' />
+
+        <Select label='Тип оплаты*' onChange={handleSelectChange} options={salaryOptions} id='is_ndfl' isMulti={false} required />
+      </div>
+
+      <div className='add-vacancy-form__flex-container'>
+        <Select label='График работы*' onChange={handleSelectChange} options={shiftOptions} id='schedule' isMulti required />
+
+        <Select label='Образование*' onChange={handleSelectChange} options={educationOptions} id='education' isMulti={false} required />
+      </div>
+
+      <FormTextarea jobDescriptionInput={jobDescriptionInput} handleDescriptionChange={handleDescriptionChange} />
+
+      <PrivacyCheckbox onClick={toggleCheckbox} />
+
+      <FormActionButtons isSubmitButtonDisabled={isSubmitButtonDisabled} onClick={handleCancelClick} onSubmitSuccess={onSubmitSuccess} />
+    </form>
+  );
+};
+
+export default AddVacancyForm;
diff --git a/src/modules/ShelterVacancies/components/AddVacancyForm/AddVacancyForm.scss b/src/modules/ShelterVacancies/components/AddVacancyForm/AddVacancyForm.scss
new file mode 100644
index 00000000..92fe583e
--- /dev/null
+++ b/src/modules/ShelterVacancies/components/AddVacancyForm/AddVacancyForm.scss
@@ -0,0 +1,39 @@
+.add-vacancy-form__flex-container {
+  display: flex;
+  gap: 16px;
+  justify-content: space-between;
+}
+
+.add-vacancy-form__container {
+  margin-top: 36px;
+  width: 576px;
+}
+
+.add-shelter-form__submit-buttons {
+  display: flex;
+  gap: 32px;
+  margin-top: 40px;
+}
+
+.add-vacancy-form__description {
+  width: 100%;
+  height: 120px;
+  margin: 0;
+  padding: 16px 10.5px;
+  font-size: 16px;
+  line-height: 19px;
+  font-weight: 400;
+  background-color: var(--color-background-additional);
+  border: 1px solid var(--color-text-additional);
+  border-radius: 8px;
+  box-sizing: border-box;
+  resize: none;
+
+  &_invalid {
+    border-color: var(--color-verify-invalid);
+  }
+}
+
+.add-vacancy-form__desctioption-title {
+  margin-bottom: 10px;
+}
diff --git a/src/modules/ShelterVacancies/components/AddVacancyForm/components/FormActionButtons.jsx b/src/modules/ShelterVacancies/components/AddVacancyForm/components/FormActionButtons.jsx
new file mode 100644
index 00000000..af212987
--- /dev/null
+++ b/src/modules/ShelterVacancies/components/AddVacancyForm/components/FormActionButtons.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import Button from '../../../../../ui/Button/Button';
+
+const FormActionButtons = ({ isSubmitButtonDisabled, onClick, onSubmitSuccess }) => {
+  const handleSubmit = () => {
+    // TODO сделать отправку формы
+    onSubmitSuccess();
+  };
+
+  return (
+    <div className='add-shelter-form__submit-buttons'>
+      <Button submit disabled={isSubmitButtonDisabled} onClick={handleSubmit} onSubmitSuccess={onSubmitSuccess}>
+        Добавить вакансию
+      </Button>
+      <Button onClick={onClick}>Отменить</Button>
+    </div>
+  );
+};
+
+export default FormActionButtons;
diff --git a/src/modules/ShelterVacancies/components/AddVacancyForm/components/FormTextarea.jsx b/src/modules/ShelterVacancies/components/AddVacancyForm/components/FormTextarea.jsx
new file mode 100644
index 00000000..f6999ad1
--- /dev/null
+++ b/src/modules/ShelterVacancies/components/AddVacancyForm/components/FormTextarea.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+const FormTextarea = ({ jobDescriptionInput, handleDescriptionChange }) => {
+  return (
+    <>
+      <p className='add-vacancy-form__desctioption-title'>Обязанности*</p>
+      <textarea
+        className={`add-vacancy-form__description ${jobDescriptionInput.dirty && jobDescriptionInput.invalidText && 'add-vacancy-form__textarea_invalid'}`}
+        value={jobDescriptionInput.value}
+        onChange={handleDescriptionChange}
+        onBlur={jobDescriptionInput.onBlur}
+        name='description'
+        required
+      />
+      <p className='add-shelter-form__error'>{jobDescriptionInput.dirty && jobDescriptionInput.invalidText}</p>
+    </>
+  );
+};
+
+export default FormTextarea;
diff --git a/src/modules/ShelterVacancies/components/AddVacancyForm/constants.js b/src/modules/ShelterVacancies/components/AddVacancyForm/constants.js
new file mode 100644
index 00000000..418a5aae
--- /dev/null
+++ b/src/modules/ShelterVacancies/components/AddVacancyForm/constants.js
@@ -0,0 +1,20 @@
+export const defaultFormValues = { position: '', salary: null, is_ndfl: [], schedule: [], education: [], description: '' };
+
+// TODO бэк сказал сделал эндпоинты для селектов, пока замокала, жду как починят бек
+export const shiftOptions = [
+  { label: 'Полный день', id: 'slug1' },
+  { label: 'Сменный', id: 'slug2' },
+  { label: 'Гибкий', id: 'slug3' },
+  { label: 'Удаленная работа', id: 'slug4' },
+];
+
+export const salaryOptions = [
+  { label: 'На руки', id: '11' },
+  { label: 'с НДФЛ', id: '22' },
+];
+
+export const educationOptions = [
+  { label: 'Не требуется', id: '111' },
+  { label: 'Среднее специальное', id: '222' },
+  { label: 'Высшее', id: '333' },
+];
diff --git a/src/pages/AddShelterPage/components/ShelterStep.jsx b/src/pages/AddShelterPage/components/ShelterStep.jsx
index ba1da1cb..1d865335 100644
--- a/src/pages/AddShelterPage/components/ShelterStep.jsx
+++ b/src/pages/AddShelterPage/components/ShelterStep.jsx
@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from 'react';
-import { Link } from 'react-router-dom';
 import IMask from 'imask';
 import DeclarationInput from '../../../ui/DeclarationInput/DeclarationInput';
 import AddPhotoBlock from '../../../ui/AddPhotoBlock/AddPhotoBlock';
@@ -8,6 +7,7 @@ import CheckboxesSelect from '../../../ui/CheckboxesSelect/CheckboxesSelect';
 import useInput from '../../../hooks/useInput';
 import * as regex from '../../../utils/regex';
 import * as errorMessage from '../../../utils/errorMessage';
+import PrivacyCheckbox from '../../../components/PrivacyCheckbox/PrivacyCheckbox';
 
 // шаг в форме добавления приюта с анкетой о самом приюте
 const ShelterStep = ({ handleBack, setShelter }) => {
@@ -126,31 +126,7 @@ const ShelterStep = ({ handleBack, setShelter }) => {
         required
       />
       <p className='add-shelter-form__error'>{description.dirty && description.invalidText}</p>
-      <div className='register__privacy'>
-        <label className='checkbox__container'>
-          <input
-            className='checkbox__input'
-            name='agreement'
-            type='checkbox'
-            onClick={() => {
-              setIsAgreementChecked(!isAgreementChecked);
-            }}
-          />
-          <span className='checkbox' />
-        </label>
-        <p className='register__text'>
-          Я согласен с
-          <Link className='register__link' to='/privacy' target='_blank'>
-            {' '}
-            Политикой конфиденциальности{' '}
-          </Link>
-          и
-          <Link className='register__link' to='/terms' target='_blank'>
-            {' '}
-            Условиями использования сервиса
-          </Link>
-        </p>
-      </div>
+      <PrivacyCheckbox onClick={setIsAgreementChecked} />
       <div className='register__privacy'>
         <label className='checkbox__container'>
           <input
diff --git a/src/pages/AddShelterPage/styles/add-shelter-form/__column/add-shelter-form__column.css b/src/pages/AddShelterPage/styles/add-shelter-form/__column/add-shelter-form__column.css
index f7be437d..2f66f6bd 100644
--- a/src/pages/AddShelterPage/styles/add-shelter-form/__column/add-shelter-form__column.css
+++ b/src/pages/AddShelterPage/styles/add-shelter-form/__column/add-shelter-form__column.css
@@ -4,4 +4,5 @@
   padding: 0;
   flex-direction: column;
   list-style-type: none;
-}
+  width: 100%;
+}
\ No newline at end of file
diff --git a/src/pages/AddShelterPage/styles/add-shelter-form/__flex/add-shelter-form__flex.css b/src/pages/AddShelterPage/styles/add-shelter-form/__flex/add-shelter-form__flex.css
index 06ceb277..43947d88 100644
--- a/src/pages/AddShelterPage/styles/add-shelter-form/__flex/add-shelter-form__flex.css
+++ b/src/pages/AddShelterPage/styles/add-shelter-form/__flex/add-shelter-form__flex.css
@@ -2,4 +2,5 @@
   display: flex;
   width: 100%;
   justify-content: space-between;
-}
+  gap: 48px;
+}
\ No newline at end of file
diff --git a/src/pages/App/App.jsx b/src/pages/App/App.jsx
index 20592915..070f078f 100644
--- a/src/pages/App/App.jsx
+++ b/src/pages/App/App.jsx
@@ -47,6 +47,8 @@ const App = () => {
   const [infoTooltipImage, setInfoTooltipImage] = useState(null);
   const [message, setMessage] = useState('');
 
+  const [success, setSuccess] = useState(false);
+
   const closeInfoTooltip = () => {
     setInfoTooltipOpen(false);
     setInfoTooltipImage(null);
@@ -84,6 +86,7 @@ const App = () => {
       .then(() => {
         setInfoTooltipImage(imageSuccess);
         setMessage('Спасибо за регистрацию! Для активации аккаунта перейдите по ссылке, отправленной на вашу почту.');
+        setSuccess(true);
         setInfoTooltipOpen(true);
         setTimeout(closeInfoTooltip, 15000);
         setTimeout(() => {
@@ -107,6 +110,7 @@ const App = () => {
       .login({ password, email })
       .then((res) => {
         setLoggedIn(true);
+        setSuccess(true);
         localStorage.setItem('access', res.access);
         localStorage.setItem('refresh', res.refresh);
         tokenCheck();
@@ -169,8 +173,28 @@ const App = () => {
             <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-in'
+              element={
+                <ProtectedRoute
+                  condition={!loggedIn}
+                  component={LoginPage}
+                  onLogin={handleLogin}
+                  isSuccess={success}
+                />
+              }
+            />
+            <Route
+              exact path='/sign-up'
+              element={
+                <ProtectedRoute
+                  condition={!loggedIn}
+                  component={RegisterPage}
+                  onRegister={handleRegister}
+                  isSuccess={success}
+                />
+              }
+            />
             <Route exact path='/sign-up/confirm' element={<ProtectedRoute condition={!loggedIn} component={SignUpConfirm} />} />
             <Route exact path='/password-recovery' element={<ProtectedRoute condition={!loggedIn} component={PasswordRecovery} />} />
 
diff --git a/src/pages/LoginPage/LoginPage.jsx b/src/pages/LoginPage/LoginPage.jsx
index 4063cb94..9be5433e 100644
--- a/src/pages/LoginPage/LoginPage.jsx
+++ b/src/pages/LoginPage/LoginPage.jsx
@@ -11,7 +11,7 @@ import PasswordInput from '../../ui/PasswordInput/PasswordInput';
 import { EMAIL_INVALID, EMAIL_NOT_FOUND, PASSWORD_NOT_FOUND } from '../../utils/errorMessage';
 import { EMAIL_REGEX } from '../../utils/regex';
 
-const LoginPage = ({ onLogin }) => {
+const LoginPage = ({ onLogin,isSuccess }) => {
   const [userEmail, setUserEmail] = useState('');
   const [userPassword, setUserPassword] = useState('');
 
@@ -56,9 +56,11 @@ const LoginPage = ({ onLogin }) => {
       password: userPassword,
       email: userEmail,
     });
-    setUserEmail('');
-    setUserPassword('');
-    setDisabled(true);
+    if (isSuccess) {
+      setUserEmail('');
+      setUserPassword('');
+      setDisabled(true);
+    }
   };
 
   useEffect(() => {
diff --git a/src/pages/PrivacyPolicyPage/constants.js b/src/pages/PrivacyPolicyPage/constants.js
index 7addd8bc..c3c33a41 100644
--- a/src/pages/PrivacyPolicyPage/constants.js
+++ b/src/pages/PrivacyPolicyPage/constants.js
@@ -25,7 +25,6 @@ const dataPrivacyPolicy = [
    которую Оператор может получить о посетителях веб-сайта https://lapkipomoshi.ru/.`,
     ],
   },
-
   {
     id: 2,
     rendererComponent: ParagraphList,
@@ -87,7 +86,6 @@ const dataPrivacyPolicy = [
     `,
     ],
   },
-
   {
     id: 3,
     rendererComponent: ParagraphList,
diff --git a/src/pages/RegisterPage/RegisterPage.jsx b/src/pages/RegisterPage/RegisterPage.jsx
index cdb1c5c7..4e95a5e6 100644
--- a/src/pages/RegisterPage/RegisterPage.jsx
+++ b/src/pages/RegisterPage/RegisterPage.jsx
@@ -7,9 +7,7 @@ import MainContainer from '../../components/MainContainer/MainContainer';
 import Button from '../../ui/Button/Button';
 import Input from '../../ui/Input/Input';
 import PasswordInput from '../../ui/PasswordInput/PasswordInput';
-import {
-  EMAIL_REGEX, NAME_REGEX, NUMBER, PASSWORD_REGEX, SYMBOL,
-} from '../../utils/regex';
+import { EMAIL_REGEX, NAME_REGEX, NUMBER, PASSWORD_REGEX, SYMBOL } from '../../utils/regex';
 import {
   EMAIL_INVALID,
   EMAIL_NOT_FOUND,
@@ -25,8 +23,9 @@ import {
   PASSWORD_SAME_EMAIL,
   NAME_ONLY_SYMBOLS,
 } from '../../utils/errorMessage';
+import PrivacyCheckbox from '../../components/PrivacyCheckbox/PrivacyCheckbox';
 
-const RegisterPage = ({ onRegister }) => {
+const RegisterPage = ({ onRegister, isSuccess }) => {
   const [userName, setUserName] = useState('');
   const [userEmail, setUserEmail] = useState('');
   const [userPassword, setUserPassword] = useState('');
@@ -124,7 +123,9 @@ const RegisterPage = ({ onRegister }) => {
       password: userPassword,
       email: userEmail,
     });
-    setDisabled(true);
+    if (isSuccess) {
+      setDisabled(true);
+    }
   };
 
   const handleChangeCheckbox = () => {
@@ -142,14 +143,12 @@ const RegisterPage = ({ onRegister }) => {
     <MainContainer>
       <main className='main'>
         <section className='register'>
-          <UserContainer
-            containerClass='register'
-          >
+          <UserContainer containerClass='register'>
             <UserForm
               title='Регистрация'
               formClass='register'
               onSubmit={handleSubmit}
-              formChildren={(
+              formChildren={
                 <>
                   <Input
                     labelText='Имя'
@@ -189,49 +188,20 @@ const RegisterPage = ({ onRegister }) => {
                     onChange={handlePasswordChange}
                   />
 
-                  <div className='register__privacy'>
-                    <label className='checkbox__container'>
-                      <input className='checkbox__input' type='checkbox' onClick={handleChangeCheckbox} />
-                      <span className='checkbox' />
-                    </label>
-
-                    <p className='register__text standard-font standard-font_type_small'>
-                      Я согласен с
-                      {' '}
-                      <Link
-                        className='register__link standard-font standard-font_type_small'
-                        to='/privacy'
-                        target='_blank'
-                      >
-                        Политикой конфиденциальности
-                      </Link>
-                      {' '}
-                      и
-                      {' '}
-                      <Link
-                        className='register__link standard-font standard-font_type_small'
-                        to='/terms'
-                        target='_blank'
-                      >
-                        Условиями использования сервиса
-                      </Link>
-                    </p>
-                  </div>
-
-                  <Button className='user-form__button-submit_register' submit disabled={disabled}>Зарегистрироваться</Button>
+                  <PrivacyCheckbox onClick={handleChangeCheckbox} />
+
+                  <Button className='user-form__button-submit_register' submit disabled={disabled}>
+                    Зарегистрироваться
+                  </Button>
 
                   <p className='register__text standard-font standard-font_type_base'>
-                    Уже есть аккаунт?
-                    {' '}
-                    <Link
-                      className='register__link standard-font standard-font_type_base'
-                      to='/sign-in'
-                    >
+                    Уже есть аккаунт?{' '}
+                    <Link className='register__link standard-font standard-font_type_base' to='/sign-in'>
                       Вход
                     </Link>
                   </p>
                 </>
-              )}
+              }
             />
           </UserContainer>
         </section>
diff --git a/src/ui/DeclarationInput/DeclarationInput.jsx b/src/ui/DeclarationInput/DeclarationInput.jsx
index 3a884382..a68fb3a1 100644
--- a/src/ui/DeclarationInput/DeclarationInput.jsx
+++ b/src/ui/DeclarationInput/DeclarationInput.jsx
@@ -1,16 +1,18 @@
 import React from 'react';
 import './DeclarationInput.scss';
 
-const DeclarationInput = ({
-  caption, inputState, type, name, placeholder, required,
-}) => {
+// TODO убрать li,  это форма, а не список. Выше, где используется, заменить ul на form
+
+const DeclarationInput = ({ caption, inputState, type, name, placeholder, required }) => {
   return (
     <li className='declaration-input'>
-      <label className='declaration-input__caption' htmlFor={name}>{caption}</label>
+      <label className='declaration-input__caption' htmlFor={name}>
+        {caption}
+      </label>
       <input
-        className={`declaration-input__input ${(inputState.dirty && inputState.invalidText) && 'declaration-input__input_invalid'}`}
+        className={`declaration-input__input ${inputState.dirty && inputState.invalidText && 'declaration-input__input_invalid'}`}
         value={inputState.value}
-        onChange={(e) => { inputState.onChange(e); }}
+        onChange={inputState.onChange}
         onBlur={inputState.onBlur}
         type={type}
         name={name}
diff --git a/src/ui/DeclarationInput/DeclarationInput.scss b/src/ui/DeclarationInput/DeclarationInput.scss
index d25ecf1a..3436bb6c 100644
--- a/src/ui/DeclarationInput/DeclarationInput.scss
+++ b/src/ui/DeclarationInput/DeclarationInput.scss
@@ -12,7 +12,6 @@
 }
 
 .declaration-input__caption {
-  width: 482px;
   margin: 0 0 8px;
   padding: 0;
   font-size: 16px;
@@ -21,7 +20,6 @@
 }
 
 .declaration-input__input {
-  width: 482px;
   margin: 0;
   padding: 9.5px 16px;
   font-size: 16px;
@@ -39,7 +37,7 @@
 
 .declaration-input__error {
   display: flex;
-  width: 482px;
+
   min-height: 12px;
   margin: 4px 0;
   padding: 0;
diff --git a/src/ui/Select/OptionList.jsx b/src/ui/Select/OptionList.jsx
new file mode 100644
index 00000000..8a5cc81f
--- /dev/null
+++ b/src/ui/Select/OptionList.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import './Select.scss';
+
+const OptionList = ({ options, isMulti, required, onSelectChange, selected }) => {
+  return options.map((option) => {
+    return (
+      <li className='select__checkboxes-item' key={option.id}>
+        <label className='select__check-label' htmlFor={option.id}>
+          <input
+            className='select__checkbox'
+            hidden={!isMulti}
+            type='checkbox'
+            name={option.id}
+            id={option.id}
+            onChange={onSelectChange}
+            checked={selected.includes(option.id)}
+            required={required}
+          />
+
+          {option.label}
+        </label>
+      </li>
+    );
+  });
+};
+
+export default OptionList;
diff --git a/src/ui/Select/Select.jsx b/src/ui/Select/Select.jsx
new file mode 100644
index 00000000..507cf365
--- /dev/null
+++ b/src/ui/Select/Select.jsx
@@ -0,0 +1,102 @@
+/* eslint-disable no-case-declarations */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+
+import React, { useState, useRef } from 'react';
+import './Select.scss';
+import OptionList from './OptionList';
+import Arrow from './svg/Arrow';
+import useOutsideClick from '../../hooks/useOutsideClick';
+
+const Select = ({ label, onChange, options, id: selectId, isMulti, required }) => {
+  const [isSelectOpen, setIsOpenedSelect] = useState(false);
+  const [selected, setSelected] = useState([]);
+  const selectRef = useRef(null);
+
+  const addSelectedItem = (id) => {
+    const newSelected = isMulti ? [...selected, id] : [id];
+    setSelected(newSelected);
+
+    onChange(selectId, newSelected);
+  };
+
+  const deleteSelectedItem = (id) => {
+    const newSelected = selected.filter((item) => {
+      return item !== id;
+    });
+
+    setSelected(newSelected);
+    onChange(selectId, newSelected);
+  };
+
+  const handleSelectChange = (e) => {
+    const { id } = e.target;
+
+    if (selected.includes(id)) {
+      deleteSelectedItem(id);
+    } else {
+      addSelectedItem(id);
+    }
+  };
+
+  const handleDeleteItem = (id) => {
+    deleteSelectedItem(id);
+  };
+
+  const selectedOptions = options.filter((item) => {
+    return selected.includes(item.id);
+  });
+
+  useOutsideClick(selectRef, () => {
+    if (isSelectOpen) {
+      setIsOpenedSelect((prevOpen) => {
+        return !prevOpen;
+      });
+    }
+  });
+
+  return (
+    <div className='select' ref={selectRef}>
+      <label className='select__label standard-font_type_small'>{label}</label>
+
+      <div className='select__container'>
+        {/* TODO после того, как дизайнер отрисует какие должны быть изменения внешнего вида селекта после выбора 
+        большогого количества вариантов, добавить изменения в css. макет 6.2.2.17 */}
+        <div className='select__selected-items-container'>
+          <ul className='select__selected-items-list'>
+            {selectedOptions.length !== 0 &&
+              selectedOptions.map((item) => {
+                return (
+                  <li className='select__selected-item-container' key={item.id}>
+                    <p className='select__selected-item standard-font_type_smallest'>{item.label}</p>
+                    <button
+                      className='select__selected-item-delete'
+                      type='button'
+                      onClick={() => {
+                        handleDeleteItem(item.id);
+                      }}
+                    />
+                  </li>
+                );
+              })}
+          </ul>
+
+          <button
+            className='select__toggle-arrow'
+            type='button'
+            onClick={() => {
+              setIsOpenedSelect(!isSelectOpen);
+            }}
+          >
+            <Arrow />
+          </button>
+        </div>
+        <ul className={`select__checkboxes-container ${isSelectOpen && 'select__checkboxes_opened'}`}>
+          <OptionList options={options} isMulti={isMulti} onSelectChange={handleSelectChange} selected={selected} required={required} />
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default Select;
diff --git a/src/ui/Select/Select.scss b/src/ui/Select/Select.scss
new file mode 100644
index 00000000..898bda44
--- /dev/null
+++ b/src/ui/Select/Select.scss
@@ -0,0 +1,166 @@
+// TODO разнести по папкам
+
+.select {
+  display: flex;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  flex-direction: column;
+  list-style-type: none;
+}
+
+.select__label {
+  width: 100%;
+  margin: 0 0 8px;
+  padding: 0;
+  font-weight: 500;
+}
+
+.select__container {
+  position: relative;
+}
+
+.select__selected-items-container {
+  display: flex;
+  min-height: 40px;
+  padding: 6.5px 10px 6.5px 8px;
+  justify-content: space-between;
+  align-items: center;
+  background-color: var(--color-background-additional);
+  border: 1px solid var(--color-text-additional);
+  border-radius: 8px;
+  box-sizing: border-box;
+}
+
+.select__selected-items-list {
+  display: flex;
+  width: 90%;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  column-gap: 8px;
+  flex-wrap: wrap;
+}
+
+.select__selected-item-container {
+  display: flex;
+  position: relative;
+  padding: 4px 8px;
+  background-color: var(--color-accent-base);
+  border-radius: 8px;
+  box-sizing: border-box;
+  margin-right: 8px;
+}
+
+.select__selected-item-container:nth-child(n + 3) {
+  margin-top: 8px;
+}
+
+.select__selected-item {
+  margin: auto;
+  color: var(--color-background-additional);
+}
+
+.select__selected-item-delete {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  margin: 0;
+  padding: 0;
+  top: -4px;
+  right: -4px;
+  background-color: none;
+  background-image: url('../../images/icons/ic_delete_item_from-input.svg');
+  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.select__toggle-arrow {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  background-color: rgba(0, 0, 0, 0);
+  border: none;
+  box-sizing: border-box;
+}
+
+.select__checkboxes-item {
+  padding: 6px 16px 6px 16px;
+
+  &:first-child {
+    padding: 16px 16px 6px 16px;
+    border-radius: 8px 8px 0 0;
+  }
+
+  &:last-child {
+    padding: 6px 16px 16px 16px;
+    border-radius: 0 0 8px 8px;
+  }
+}
+
+.select__checkboxes-item:hover {
+  background-color: var(--color-accent-disabled);
+}
+
+.select__checkboxes-item:active {
+  background-color: var(--color-accent-hover);
+}
+
+.select__checkboxes-container {
+  padding: 0;
+  display: none;
+  position: absolute;
+  top: 44px;
+  margin: 0;
+  flex-direction: column;
+  background-color: var(--color-background-additional);
+  border: 1px solid var(--color-text-additional);
+  border-radius: 8px;
+  box-sizing: border-box;
+  list-style: none;
+  width: 100%;
+}
+
+.select__checkboxes_opened {
+  display: flex;
+  z-index: 1;
+}
+
+.select__check-label {
+  width: 90%;
+  margin: 0;
+  padding: 0;
+  font-size: 16px;
+  line-height: 19px;
+  font-weight: 400;
+}
+
+.select__checkbox {
+  margin-right: 8px;
+  width: 16px;
+  height: 16px;
+  border-radius: 2px;
+  border: 1px solid var(--color-text-base);
+  box-sizing: border-box;
+}
+
+.select__checkbox:checked {
+  color: var(--color-accent-base);
+  background-color: var(--color-background-additional);
+}
+
+.select__error-message {
+  display: flex;
+  width: 100%;
+  min-height: 12px;
+  margin: 4px 0;
+  padding: 0;
+  font-size: 12px;
+  line-height: 12px;
+  font-weight: 400;
+  color: var(--color-verify-invalid);
+}
diff --git a/src/ui/Select/svg/Arrow.css b/src/ui/Select/svg/Arrow.css
new file mode 100644
index 00000000..bfa59445
--- /dev/null
+++ b/src/ui/Select/svg/Arrow.css
@@ -0,0 +1,16 @@
+.select-arrow {
+  width: 28px;
+  height: 16px;
+  transition: transform .7s;
+  cursor: pointer;
+}
+
+.select-arrow path {
+  transition-duration: .3s;
+  fill: var(--color-text-base);
+}
+
+
+.select-arrow:hover path {
+  fill: var(--color-accent-hover);
+}
\ No newline at end of file
diff --git a/src/ui/Select/svg/Arrow.jsx b/src/ui/Select/svg/Arrow.jsx
new file mode 100644
index 00000000..06f3e1f2
--- /dev/null
+++ b/src/ui/Select/svg/Arrow.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import './Arrow.css';
+
+const Arrow = () => {
+  return (
+    <svg className='select-arrow' width='28' height='16' viewBox='0 0 36 21' fill='none'>
+      <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
+      0.826714L16.5871 13.0775C17.3681 13.8585 18.6345 13.8585 19.4155 13.0775L31.6663 0.826715C32.4473 0.0456676 33.7136 0.0456657 34.4947
+      0.826714L34.9204 1.25245Z`}
+      />
+    </svg>
+  );
+};
+
+export default Arrow;
diff --git a/src/utils/errorMessage.js b/src/utils/errorMessage.js
index 0052512e..ee5782f5 100644
--- a/src/utils/errorMessage.js
+++ b/src/utils/errorMessage.js
@@ -1,3 +1,6 @@
+const tooLong = 'Превышено ограничение по количеству символов';
+const invalidSymbol = 'Использваны недопустимые символы';
+
 // имя
 export const NAME_INVALID = 'Имя может содержать только буквы, пробел или дефис';
 export const NAME_NOT_FOUND = 'Введите имя пользователя';
@@ -91,7 +94,27 @@ export const VKONTAKTE = {
 
 // описание приюта
 export const DESCRIPTION = {
-  NOT_FOUND: 'Опишите приюта',
-  TOO_LONG: 'Превышено ограничение по количеству символов',
-  INVALID: 'Использваны недопустимые символы',
+  NOT_FOUND: 'Опишите приют',
+  TOO_LONG: tooLong,
+  INVALID: invalidSymbol,
+};
+
+// название вакансии
+export const VACANCY_NAME = {
+  NOT_FOUND: 'Введите название вакансии',
+  INVALID: 'В названии могут быть только кириллица, латиница, пробел и знаки: "-", "_"',
+  TOO_LONG: 'Название вакансии не может превышать 30 симоволов',
+};
+
+// заработная плата вакансии приюта
+export const VACANCY_SALARY = {
+  TOO_LONG: tooLong,
+  NOT_FOUND: 'Введите заработную плату',
+};
+
+// описание вакансии приюта
+export const VACANCY_DESCRIPTION = {
+  NOT_FOUND: 'Опишите вакансию',
+  TOO_LONG: tooLong,
+  INVALID: invalidSymbol,
 };