diff --git a/src/features/HomePage/components/ClearFiltersPopup/styled.tsx b/src/features/HomePage/components/ClearFiltersPopup/styled.tsx
index 690d81cb..fa8971c6 100644
--- a/src/features/HomePage/components/ClearFiltersPopup/styled.tsx
+++ b/src/features/HomePage/components/ClearFiltersPopup/styled.tsx
@@ -23,91 +23,90 @@ export const Modal = styled(BaseModal)`
 `
 
 export const PopupContainer = styled.div`
-display: flex;
-flex-direction: column;
-align-items: center;
-justify-content: center;
-font-style: normal;
-color: #FFFFFF;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-style: normal;
+  color: #FFFFFF;
 
-${isMobileDevice
-    ? css``
-    : css`
-  min-width: 611px;`}
+  ${isMobileDevice
+    ? ''
+    : css`min-width: 611px;`}
 `
 
 export const PopupTitle = styled.div`
-font-weight: 700;
-font-size: 24px;
-line-height: 24px;
-margin-bottom: 45px;
-${isMobileDevice
-    ? css`
-  font-size: 20px;
-  line-height: 24px;
-  margin-bottom: 25px;`
-    : css`
+  font-weight: 700;
   font-size: 24px;
   line-height: 24px;
-  margin-bottom: 45px;`}
+  margin-bottom: 45px;
+
+  ${isMobileDevice
+    ? css`
+      font-size: 20px;
+      line-height: 24px;
+      margin-bottom: 25px;`
+    : css`
+      font-size: 24px;
+      line-height: 24px;
+      margin-bottom: 45px;`}
 `
 
 export const PopupText = styled.div`
-font-weight: 400;
+  font-weight: 400;
 
-${isMobileDevice
+  ${isMobileDevice
     ? css`
-  font-size: 16px;
-  line-height: 22px;
-margin-bottom: 33px;`
+      font-size: 16px;
+      line-height: 22px;
+      margin-bottom: 33px;`
     : css`
-  font-size: 20px;
-  line-height: 28px;
-  margin-bottom: 55px;`}
+      font-size: 20px;
+      line-height: 28px;
+      margin-bottom: 55px;`}
 `
 
 export const ButtonsContainer = styled.div`
-display: flex;
-flex-direction: row;
-align-items: center;
-${isMobileDevice
-    ? css`
-  gap: 15px;`
-    : css`
-  gap: 20px;
-  `}
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  ${isMobileDevice
+    ? css`gap: 15px;`
+    : css`gap: 20px;`}
 `
 
 const Button = styled.button`
-display: flex;
-flex-direction: row;
-justify-content: center;
-align-items: center;
-border-radius: 5px;
-color: #FFFF;
-font-weight: 600;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  border-radius: 5px;
+  color: #FFFF;
+  font-weight: 600;
 
-${isMobileDevice
+  ${isMobileDevice
     ? css`
-  font-size: 16px;
-line-height: 16px;
-width: 149px;
-height: 38px;`
+      font-size: 16px;
+      line-height: 16px;
+      width: 149px;
+      height: 38px;`
     : css`
-  font-size: 20px;
-  line-height: 50px;
-  cursor: pointer;
-  width: 134px;
-  height: 50px;`}
+      font-size: 20px;
+      line-height: 50px;
+      cursor: pointer;
+      width: 134px;
+      height: 50px;`}
 `
 
 export const ConfirmButton = styled(Button)`
-background: #294FC4;
-border: 1px solid #294FC4;
-filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.3));
+  background: #294FC4;
+  border: 1px solid #294FC4;
+  filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.3));
 `
+
 export const CancelButton = styled(Button)`
-border: 1px solid #FFFFFF;
-background: none;
-filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.3));
+  border: 1px solid #FFFFFF;
+  background: none;
+  filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.3));
 `
diff --git a/src/features/HomePage/components/Dropdown/index.tsx b/src/features/HomePage/components/Dropdown/index.tsx
index f259aea9..51d04db3 100644
--- a/src/features/HomePage/components/Dropdown/index.tsx
+++ b/src/features/HomePage/components/Dropdown/index.tsx
@@ -78,14 +78,16 @@ export const DropDown = ({
               labelLexic='all'
             />
           </SearchWithAllContainer>
-          <ClearButtonContainer
-            onClick={clearFilters(filterTitle)}
-          >
-            <T9n
-              className='clear_button'
-              t='clear'
-            />
-          </ClearButtonContainer>
+          {!isEmpty(currentActiveFilter) && (
+            <ClearButtonContainer
+              onClick={clearFilters(filterTitle)}
+            >
+              <T9n
+                className='clear_button'
+                t='clear'
+              />
+            </ClearButtonContainer>
+          )}
         </CommonButtonsBlock>
 
         {map(dropdownList, (filterItem) => {
diff --git a/src/features/HomePage/components/Dropdown/styled.tsx b/src/features/HomePage/components/Dropdown/styled.tsx
index 4cff2a99..95dcd375 100644
--- a/src/features/HomePage/components/Dropdown/styled.tsx
+++ b/src/features/HomePage/components/Dropdown/styled.tsx
@@ -7,56 +7,66 @@ import { isMobileDevice } from 'config/userAgent'
 import { NameStyled } from 'features/Name'
 
 export const DropDownContainer = styled.div`
-${isMobileDevice
-    ? css`
-    border-top: 1px solid #505050;`
+  ${isMobileDevice
+    ? css` border-top: 1px solid #505050;`
     : css`
-    position: absolute;
-    top: 57px;
-    right: -24px;
-    background: #333333;
-    border-radius: 3.5px;
-    z-index: 10;`}
+      position: absolute;
+      top: 57px;
+      right: -24px;
+      background: #333333;
+      border-radius: 3.5px;
+      z-index: 10;`}
 `
 export const FiltersList = styled.ul`
-${customScrollbar}
-overflow-y: auto;
-display: flex;
-flex-direction: column;
-max-height: 500px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  max-height: 500px;
+
+  ${isMobileDevice
+    ? css`
+      @media (orientation: landscape){
+        max-height: 300px;
+      }
+    `
+    : ''}
+
+  ${customScrollbar}
 `
-export const FilterItem = styled.li`
 
-${isMobileDevice
+export const FilterItem = styled.li`
+  ${isMobileDevice
     ? css`
-    max-width: 280px;
-    white-space: nowrap;
-    padding: 10px 0 10px 13px;
-  `
+      max-width: 280px;
+      white-space: nowrap;
+      padding: 10px 0 10px 13px;
+    `
     : css`
-    min-width: 286px;
-    white-space: nowrap;
-    padding: 15px 26px;`}
-:hover {
-  background: rgba(255, 255, 255, 0.2);
-}
+      min-width: 286px;
+      white-space: nowrap;
+      padding: 15px 26px;`}
+
+  :hover {
+    background: rgba(255, 255, 255, 0.2);
+  }
 `
+
 export const Checkbox = styled(BaseCheckbox)`
   display: block;
   text-transform: uppercase;
 
   ${Label} {
-      text-transform: uppercase; 
+      text-transform: uppercase;
       font-weight: 700;
+
     ${isMobileDevice
     ? css`
       font-size: 10px;
-      line-height: 11px;
-      `
+      line-height: 11px;`
     : css`
       font-size: 18px;
-      line-height: 16px;
-      `}
+      line-height: 16px;`}
+
    ${NameStyled} {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -64,152 +74,159 @@ export const Checkbox = styled(BaseCheckbox)`
    }
 
     ${({ checked }) => (checked
-    ? css``
-    : css`
-      color: rgba(255, 255, 255, 0.6);`
-  )}
+    ? ''
+    : css`color: rgba(255, 255, 255, 0.6);`)}
   }
 
   ${CheckboxSvg} {
     margin-right: 8px;
-    
     flex: 0 0 auto;
+
     ${isMobileDevice
     ? css`
       width: 14px;
       height: 14px;
-        `
-    : css` 
+    `
+    : css`
       width: 20px;
-      height: 20px;
-        `}
+      height: 20px;`}
   }
 `
+
 type TCommonButtonsBlock = {
   isArena?: boolean,
 }
 
 export const CommonButtonsBlock = styled.div<TCommonButtonsBlock>`
-display: flex;
-justify-content: space-between;
-${({ isArena }) => (isArena
+  display: flex;
+  justify-content: space-between;
+
+  ${({ isArena }) => (isArena
     ? css`
-    align-items: flex-start;
-    padding: ${isMobileDevice ? '8px 25px 10px 13px' : '24px 26px 15px 26px'};
-    `
+      align-items: flex-start;
+      padding: ${isMobileDevice ? '8px 25px 10px 13px' : '24px 26px 15px 26px'};
+      `
     : css`
-    align-items: center;
-    padding:${isMobileDevice ? '8px 25px 10px 13px' : '15px 26px'};
-    `
-  )}
-`
+      align-items: center;
+      padding:${isMobileDevice ? '8px 25px 10px 13px' : '15px 26px'};`)}
+  `
+
 export const ClearButtonContainer = styled.div`
-${isMobileDevice
+  ${isMobileDevice
     ? css`
-    position: absolute;
-    top: 14px;
-    right: 36px;`
+      position: absolute;
+      top: 14px;
+      right: 36px;`
     : ''}
 
-.clear_button {
-  font-style: normal;
-  ${isMobileDevice
+  .clear_button {
+    ${isMobileDevice
     ? css`
       font-size: 10px;
       line-height: 12px;`
     : css`
       font-size: 18px;
       line-height: 22px;`}
-  font-weight: 400;
-  
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-  color: rgba(255, 255, 255, 0.5);
-  cursor: pointer;
-}
+
+    font-style: normal;
+    font-weight: 400;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    color: rgba(255, 255, 255, 0.5);
+    cursor: pointer;
+  }
 `
+
 export const SearchContainer = styled.div`
-padding-right: ${isMobileDevice ? '0px' : '20px'};
-position: relative;
+  padding-right: ${isMobileDevice ? '0px' : '20px'};
+  position: relative;
 
-:before {
-  content: '';
-  background: url(/images/search.svg) no-repeat;
-  position: absolute;
-  ${isMobileDevice
+  :before {
+    content: '';
+    background: url(/images/search.svg) no-repeat;
+    position: absolute;
+
+    ${isMobileDevice
     ? css`
-    left: 8px;
-    top: 7px;`
+      left: 8px;
+      top: 7px;
+      width: 11px;
+      height: 11px;
+      `
     : css`
-  left: 13px;
-  top: 13px;`}
-  z-index: 2;
-  width: 13px;
-  height: 11px;
-}
+      left: 13px;
+      top: 10px;
+      width: 16px;
+      height: 16px;`}
+
+    z-index: 2;
+  }
 `
 export const SearchInput = styled.input`
-border: none;
-background: transparent;
-outline: none;
-width: 100%;
-background: #292929;
-border-radius: 10px;
-margin-bottom: 15px;
-
-color: #FFFF;
-${isMobileDevice
+  border: none;
+  background: transparent;
+  outline: none;
+  width: 100%;
+  background: #292929;
+  border-radius: 10px;
+  margin-bottom: 15px;
+  color: #FFFF;
+
+  ${isMobileDevice
     ? css`
-  height: 24px;
-  min-width: 242px;
-  padding-left: 23px;`
+    height: 24px;
+    min-width: 242px;
+    padding-left: 23px;`
     : css`
-  min-width: 513px;
-  padding-left: 36px;
-  height: 36px;`}
+    min-width: 513px;
+    padding-left: 36px;
+    height: 36px;`}
 
-::placeholder {
 
-${isMobileDevice
+  ${isMobileDevice
     ? css`
-      font-size: 10px;
-      line-height: 15px;`
-    : css` 
-      font-size: 18px;
-      line-height: 22px;`}
+        font-size: 10px;
+        line-height: 15px;`
+    : css`
+        font-size: 18px;
+        line-height: 22px;`}
 
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
+  ::placeholder {
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
 `
+
 export const SearchWithAllContainer = styled.div`
-flex: 1 1 auto;
+  flex: 1 1 auto;
 `
+
 export const BackButton = styled.div`
-font-style: normal;
-font-weight: 700;
-font-size: 10px;
-line-height: 12px;
-align-items: center;
-letter-spacing: 0.05em;
-text-transform: uppercase;
-color: #FFFFFF;
-cursor: pointer;
-position: absolute;
-top: 12px;
-left: 13px;
-padding-left: 24px;
-:before {
-  content: '';
-  display: block;
-  background: url(/images/arrowUpWhite.svg) center no-repeat;
-  background-size: 12px 12xp;
-  transform: rotate(-90deg);
-  right: 0;
-  width: 12px;
-  height: 12px;
+  font-style: normal;
+  font-weight: 700;
+  font-size: 10px;
+  line-height: 12px;
+  align-items: center;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: #FFFFFF;
+  cursor: pointer;
   position: absolute;
-  top: 0;
-  left: 0;
-}
+  top: 12px;
+  left: 13px;
+  padding-left: 24px;
+
+  :before {
+    content: '';
+    display: block;
+    background: url(/images/arrowUpWhite.svg) center no-repeat;
+    background-size: 12px 12xp;
+    transform: rotate(-90deg);
+    right: 0;
+    width: 12px;
+    height: 12px;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
 `
diff --git a/src/features/HomePage/components/Header/index.tsx b/src/features/HomePage/components/Header/index.tsx
index 21b639ab..de8c84c2 100644
--- a/src/features/HomePage/components/Header/index.tsx
+++ b/src/features/HomePage/components/Header/index.tsx
@@ -15,14 +15,18 @@ import {
   Position,
 } from 'features/ProfileHeader/styled'
 
-export const Header = () => {
+type THeader = {
+  disabled: boolean,
+}
+
+export const Header = ({ disabled }: THeader) => {
   const {
     resetFilters,
     updateDate,
   } = useHeaderFiltersStore()
 
   return (
-    <HeaderStyled>
+    <HeaderStyled disabled={disabled}>
       <Position
         top={client.styles.logoTop}
         left={client.styles.logoLeft}
diff --git a/src/features/HomePage/components/HeaderFilters/index.tsx b/src/features/HomePage/components/HeaderFilters/index.tsx
index a0b34a10..3a573967 100644
--- a/src/features/HomePage/components/HeaderFilters/index.tsx
+++ b/src/features/HomePage/components/HeaderFilters/index.tsx
@@ -1,14 +1,10 @@
-import { isInSportsClient } from 'config/clients'
+import styled from 'styled-components/macro'
 
+import { isInSportsClient } from 'config/clients'
 import { SelectFilter } from 'components/SelectFilter'
 import { useHeaderFiltersStore } from 'features/HeaderFilters'
 import { T9n } from 'features/T9n'
 
-import {
-  Modal as BaseModal,
-} from 'features/AuthServiceApp/components/RegisterPopup/styled'
-import styled from 'styled-components/macro'
-import { ModalWindow } from 'features/Modal/styled'
 import {
   ScArrow,
   ScHeaderFilters,
@@ -17,13 +13,6 @@ import {
 import { ClearFiltersPopup } from '../ClearFiltersPopup'
 import { MatchesFilters } from '../MatchesFilters'
 
-export const Modal = styled(BaseModal)`
-  ${ModalWindow} {
-    min-height: 452px;
-    max-width: 280px;
-    padding: 37px 0 39px 0;
-  }
-`
 const ClearButton = styled.span`
   cursor: pointer;
   position: absolute;
diff --git a/src/features/HomePage/components/MobileMatchesFilters/index.tsx b/src/features/HomePage/components/MobileMatchesFilters/index.tsx
index c0bc47c7..7ceb3083 100644
--- a/src/features/HomePage/components/MobileMatchesFilters/index.tsx
+++ b/src/features/HomePage/components/MobileMatchesFilters/index.tsx
@@ -11,6 +11,7 @@ import {
   ClearButton,
   CloseButton,
   FilterContainer,
+  FiltersCount,
   Modal,
 } from './styled'
 import { DropDown } from '../Dropdown'
@@ -50,7 +51,7 @@ export const MobileMatchesFilters = () => {
         <>
           <FilterContainer active={filtersSize !== 0} onClick={openFilters}>
             <T9n t='filter' />
-            {filtersSize !== 0 && ` ${filtersSize}`}
+            {filtersSize !== 0 && <FiltersCount>{` ${filtersSize}`}</FiltersCount>}
           </FilterContainer>
           <Modal isOpen={isOpen} withCloseButton={false}>
             {isEmpty(isOpenList)
diff --git a/src/features/HomePage/components/MobileMatchesFilters/styled.tsx b/src/features/HomePage/components/MobileMatchesFilters/styled.tsx
index 5f64308a..77b0961f 100644
--- a/src/features/HomePage/components/MobileMatchesFilters/styled.tsx
+++ b/src/features/HomePage/components/MobileMatchesFilters/styled.tsx
@@ -1,27 +1,32 @@
 import styled, { css } from 'styled-components/macro'
 
+import { OutsideClickWrapper } from 'features/OutsideClick'
 import { ModalWindow } from 'features/Modal/styled'
 import {
   Modal as BaseModal,
 } from 'features/AuthServiceApp/components/RegisterPopup/styled'
 
 export const Modal = styled(BaseModal)`
+  ${OutsideClickWrapper} {
+    height: 100%;
+  }
+
   ${ModalWindow} {
     min-height: auto;
-    max-height: 452px;
     max-width: 293px;
     padding: 35px 0 9px 0;
+    top: 4vh;
   }
 `
 
 export const CloseButton = styled.div`
-position: absolute;
-width: 13px;
-height: 13px;
-background:url(/images/closeWhite.svg) no-repeat;
-background-size: 13px;
-top: 13px;
-right: 13px;
+  position: absolute;
+  width: 13px;
+  height: 13px;
+  background:url(/images/closeWhite.svg) no-repeat;
+  background-size: 13px;
+  top: 13px;
+  right: 13px;
 `
 
 type TFilterProps = {
@@ -29,42 +34,47 @@ type TFilterProps = {
 }
 
 export const FilterContainer = styled.div<TFilterProps>`
-font-style: normal;
-font-weight: 700;
-font-size: 10px;
-line-height: 12px;
-letter-spacing: 0.05em;
-text-transform: uppercase;
-color: #FFFFFF;
-padding-left: 22px;
-position: relative;
+  font-style: normal;
+  font-weight: 700;
+  font-size: 10px;
+  line-height: 14px;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: #FFFFFF;
+  padding-left: 22px;
+  position: relative;
 
-:before{
-  content: '';
-  display: block;
-  position: absolute;
-  left: 0;
-  top: 0;
-  width:14px;
-  height: 14px;
-  ${({ active }) => (active
+  :before{
+    content: '';
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width:14px;
+    height: 14px;
+    background-size: 14px 14px;
+
+    ${({ active }) => (active
     ? css`
-  background: url(/images/filter-white.svg) no-repeat;`
+      background: url(/images/filter-white.svg) no-repeat;`
     : css`
-  background: url(/images/filter-gray.svg) no-repeat;`)}
-  background-size: 14px 14px;
-}
+      background: url(/images/filter-gray.svg) no-repeat;`)}
+  }
 `
 
 export const ClearButton = styled.div`
-font-style: normal;
-position: absolute;
-top: 14px;
-right: 36px;
-font-size: 10px;
-line-height: 12px;
-font-weight: 400;
-letter-spacing: 0.05em;
-text-transform: uppercase;
-color: rgba(255,255,255,0.5);
+  font-style: normal;
+  position: absolute;
+  top: 14px;
+  right: 36px;
+  font-size: 10px;
+  line-height: 12px;
+  font-weight: 400;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: rgba(255,255,255,0.5);
+`
+
+export const FiltersCount = styled.span`
+  font-weight: 400;
 `
diff --git a/src/features/HomePage/index.tsx b/src/features/HomePage/index.tsx
index 6f9fd6ca..ef514ee0 100644
--- a/src/features/HomePage/index.tsx
+++ b/src/features/HomePage/index.tsx
@@ -7,6 +7,7 @@ import { ConfirmPopup } from 'features/AuthServiceApp/components/ConfirmPopup'
 import { Matches } from 'features/Matches'
 import {
   HeaderFiltersStore,
+  useHeaderFiltersStore,
 } from 'features/HeaderFilters'
 
 import {
@@ -30,6 +31,7 @@ const Home = () => {
     isShowConfirmPopup,
     setIsOpenDownload,
   } = useHomePage()
+  const { isOpenList } = useHeaderFiltersStore()
 
   return (
     <PageWrapper>
@@ -39,7 +41,7 @@ const Home = () => {
           setIsOpenDownload={setIsOpenDownload}
         />
       ) : (
-        <Header />
+        <Header disabled={Boolean(isOpenList)} />
       )}
       <Main>
         <UserFavorites />
diff --git a/src/features/OutsideClick/index.tsx b/src/features/OutsideClick/index.tsx
index ddfa62aa..ff97d3a1 100644
--- a/src/features/OutsideClick/index.tsx
+++ b/src/features/OutsideClick/index.tsx
@@ -11,7 +11,7 @@ type Props = {
   onClick: (event?: MouseEvent) => void,
 }
 
-const OutsideClickWrapper = styled.div``
+export const OutsideClickWrapper = styled.div``
 
 export const OutsideClick = ({
   children,
diff --git a/src/features/ProfileHeader/styled.tsx b/src/features/ProfileHeader/styled.tsx
index 2c1f2b2f..084bbf3e 100644
--- a/src/features/ProfileHeader/styled.tsx
+++ b/src/features/ProfileHeader/styled.tsx
@@ -44,6 +44,7 @@ export const defaultHeaderStyles = (
 
 type HeaderProps = {
   color?: string,
+  disabled?: boolean,
   headerImage?: string | null,
   height?: number,
   isMatchPage?: boolean,
@@ -63,6 +64,12 @@ export const HeaderStyled = styled.header<HeaderProps>`
     ` : ''
   )}
 
+  ${({ disabled }) => (
+    disabled ? css`
+      pointer-events: none;
+    ` : ''
+  )}
+
   ${({ isMatchPage }) => css`
     ${isMobileDevice
     ? css`
@@ -71,7 +78,6 @@ export const HeaderStyled = styled.header<HeaderProps>`
       `
     : ''}
   `}
-  
 `
 
 type Props = {
@@ -105,7 +111,7 @@ export const HeaderLogo = styled(Logo)`
       transform: translateX(-50%);
       position: absolute;
 
-      ${client.styles.matchPageMobileHeaderLogo}      
+      ${client.styles.matchPageMobileHeaderLogo}
     ` : ''}
   ` : css`
     ${isMobileDevice ? css`
@@ -119,8 +125,6 @@ export const HeaderLogo = styled(Logo)`
       }
     ` : ''}
   `)}
-  
-  
 `
 
 type PositionProps = {