diff --git a/src/features/Burger/styled.tsx b/src/features/Burger/styled.tsx
index 58b28480..278f2aba 100644
--- a/src/features/Burger/styled.tsx
+++ b/src/features/Burger/styled.tsx
@@ -11,7 +11,7 @@ const BurgerRow = styled.div`
   transform-origin: 1px;
   background: #666666;
 
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
     display: none;
   }
 `
@@ -46,7 +46,7 @@ export const StyledBurger = styled.div<{open: boolean}>`
     transform: ${({ open }) => (open ? 'rotate(-45deg)' : 'rotate(0)')};
   }
 
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
     background-size: 100%;
     background-image: url(/images/userAccount.svg);
   }
diff --git a/src/features/Combobox/styled.tsx b/src/features/Combobox/styled.tsx
index 6a62b02b..d773d775 100644
--- a/src/features/Combobox/styled.tsx
+++ b/src/features/Combobox/styled.tsx
@@ -21,7 +21,7 @@ export const ComboboxStyled = styled(Combobox)`
   ${wrapperStyles}
   position: relative;
 
-  @media${devices.laptop} {
+  @media ${devices.laptop} {
     margin-top: 12px;
 
     ${Label} {
@@ -33,7 +33,7 @@ export const ComboboxStyled = styled(Combobox)`
     }
   }
 
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
     margin-top: -8px;
   }
 `
@@ -46,7 +46,7 @@ export const ComboboxInputStyled = styled(ComboboxInput)`
     opacity: 0;
   }
 
-  @media${devices.laptop} {
+  @media ${devices.laptop} {
 
     margin-left: -105px;
     padding-right: 4px;
@@ -63,7 +63,7 @@ export const ComboboxInputStyled = styled(ComboboxInput)`
     }
   }
 
-  @media${devices.mobile} {
+  @media ${devices.mobile} {
     text-align: center;
     font-size: 14px;
   }
@@ -88,7 +88,7 @@ export const ComboboxListStyled = styled(ComboboxList)`
  ${customScrollbar}
  ${customStylesMixin}
 
- @media${devices.laptop} {
+ @media ${devices.laptop} {
    left: -33px;
    min-width: calc(100% + 58px);
  }
diff --git a/src/features/Common/Button/styled.tsx b/src/features/Common/Button/styled.tsx
index 81c0ab9f..9cfa7f83 100644
--- a/src/features/Common/Button/styled.tsx
+++ b/src/features/Common/Button/styled.tsx
@@ -35,7 +35,7 @@ export const solidButtonStyles = css`
   border-color: transparent;
   background: ${({ theme: { colors } }) => colors.primary};
 
-  @media${devices.mobile} {
+  @media ${devices.mobile} {
     width: 335px;
     height: 40px;
   }
diff --git a/src/features/Common/Checkbox/styled.tsx b/src/features/Common/Checkbox/styled.tsx
index 7ae9326b..09d653bb 100644
--- a/src/features/Common/Checkbox/styled.tsx
+++ b/src/features/Common/Checkbox/styled.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components/macro'
 import { devices } from 'config/devices'
 
 export const Wrapper = styled.div`
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
     position: absolute;
     left: 0;
     top: 0;
@@ -47,7 +47,7 @@ export const Input = styled.input`
     background-image: url(/images/checkboxChecked.svg);
   }
 
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
     &+${Label}::before {
       width: 288px;
       height: 100px;
diff --git a/src/features/Common/Input/styled.tsx b/src/features/Common/Input/styled.tsx
index 8845c953..7ad21285 100644
--- a/src/features/Common/Input/styled.tsx
+++ b/src/features/Common/Input/styled.tsx
@@ -43,7 +43,7 @@ export const Label = styled.label<LabelProps>`
   color: ${({ theme: { colors } }) => colors.secondary};
   width: ${({ labelWidth }) => (labelWidth ? `${labelWidth}px` : '')};
 
- @media${devices.laptop} {
+ @media ${devices.laptop} {
     display: none;
   }
 `
@@ -81,7 +81,7 @@ export const inputStyles = css<InputProps>`
     -webkit-text-fill-color: ${({ theme: { colors } }) => colors.text};
   }
 
-  @media${devices.laptop} {
+  @media ${devices.laptop} {
     margin-left: 5px;
     width: 100%;
     font-size: 20px;
@@ -95,7 +95,7 @@ export const InputStyled = styled.input<InputProps>`
     opacity: 0;
   }
 
-  @media${devices.laptop} {
+  @media ${devices.laptop} {
     ::placeholder {
       opacity: 1;
       font-style: normal;
@@ -108,7 +108,7 @@ export const InputStyled = styled.input<InputProps>`
     }
   }
 
-  @media${devices.mobile} {
+  @media ${devices.mobile} {
     font-size: 14px;
 
     ::placeholder {
@@ -122,7 +122,7 @@ export const InputWrapper = styled.div<WrapperProps>`
   ${wrapperStyles}
   
 
-  @media${devices.mobile} {
+  @media ${devices.mobile} {
     height: 40px;
     margin-top: 0;
     position: relative;
@@ -135,11 +135,11 @@ export const Column = styled.div`
   display: flex;
   flex-direction: column;
 
-  @media${devices.laptop} {
+  @media ${devices.laptop} {
     max-width: 415px;
   }
 
-  @media${devices.mobile} {
+  @media ${devices.mobile} {
     width: 335px;
     position: relative;
   }
@@ -165,7 +165,7 @@ export const Error = styled(T9n)<ErrorProps>`
       : ''
   )}
 
-  @media${devices.mobile} {
+  @media ${devices.mobile} {
     margin-top: 0;
   }
 `
diff --git a/src/features/Common/Radio/styled.tsx b/src/features/Common/Radio/styled.tsx
index 0b09ee4d..47fddc14 100644
--- a/src/features/Common/Radio/styled.tsx
+++ b/src/features/Common/Radio/styled.tsx
@@ -4,7 +4,7 @@ import { devices } from 'config/devices'
 
 export const Wrapper = styled.div`
 
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
     position: absolute;
     left: 0;
     top: 0;
@@ -50,7 +50,7 @@ export const Input = styled.input`
     background-image: url(/images/radioChecked.svg);
   }
 
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
     &+${Label}::before {
       width: 163px;
       height: 100px;
diff --git a/src/features/Common/SportName/index.tsx b/src/features/Common/SportName/index.tsx
index 406db984..9bf3cccc 100644
--- a/src/features/Common/SportName/index.tsx
+++ b/src/features/Common/SportName/index.tsx
@@ -10,7 +10,7 @@ export const SportName = styled(T9n)<{ color: string }>`
   letter-spacing: 0.02em;
   text-transform: uppercase;
 
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
     font-size: 10px;
     margin-right: 5px;
   }
diff --git a/src/features/Common/customScrollbar/index.tsx b/src/features/Common/customScrollbar/index.tsx
index 411e0edc..44b1efb8 100644
--- a/src/features/Common/customScrollbar/index.tsx
+++ b/src/features/Common/customScrollbar/index.tsx
@@ -12,7 +12,7 @@ export const customScrollbar = css`
     border-radius: 6px;
     background: #3F3F3F;
 
-    @media${devices.tablet} {
+    @media ${devices.tablet} {
       background-color: rgba(255, 255, 255, 0.5);
     }
   }
@@ -26,7 +26,7 @@ export const customScrollbar = css`
     background: transparent;
   }
 
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
     background-color: #3F3F3F;
   }
 `
diff --git a/src/features/Header/index.tsx b/src/features/Header/index.tsx
index 27bc4943..93e11454 100644
--- a/src/features/Header/index.tsx
+++ b/src/features/Header/index.tsx
@@ -56,6 +56,12 @@ export const Header = () => (
         <SearchWrapper>
           <Search />
         </SearchWrapper>
+        <FilterWrapper>
+          <DateFilter />
+        </FilterWrapper>
+        <FilterWrapper>
+          <MatchStatusFilter />
+        </FilterWrapper>
       </Fragment>
     </Switch>
   </Wrapper>
diff --git a/src/features/Header/styled.tsx b/src/features/Header/styled.tsx
index c34fd75f..9bb0e33f 100644
--- a/src/features/Header/styled.tsx
+++ b/src/features/Header/styled.tsx
@@ -20,7 +20,7 @@ export const Wrapper = styled.header`
   padding-top: 16px;
   margin-bottom: 30px;
 
-  @media${devices.laptop} {
+  @media ${devices.laptop} {
     padding-top: 11px;
     margin-bottom: 0;
   }
@@ -39,7 +39,7 @@ export const SearchWrapper = styled(FilterWrapper)`
   margin-right: 16px;
   display: flex;
 
-  @media${devices.desktop} {
+  @media ${devices.desktop} {
     width: 51px;
     margin-right: 9px;
 
@@ -56,14 +56,14 @@ export const SearchWrapper = styled(FilterWrapper)`
 export const SportFilterWrapper = styled(FilterWrapper)`
   width: 400px;
 
-  @media${devices.desktop} {
+  @media ${devices.desktop} {
     width: 350px;
   }
 
-  @media${devices.laptop} {
+  @media ${devices.laptop} {
     width: 234px;
   }
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
     position: fixed;
     bottom: 0;
     width: 100%;
@@ -75,7 +75,7 @@ export const MenuWrapper = styled.div`
   display: flex;
   margin-right: 57px;
 
-  @media${devices.laptop} {
+  @media ${devices.laptop} {
     margin-right: 14px;
   }
 `
diff --git a/src/features/HeaderFilters/components/DateFilter/styled.tsx b/src/features/HeaderFilters/components/DateFilter/styled.tsx
index 799cd968..6883e50a 100644
--- a/src/features/HeaderFilters/components/DateFilter/styled.tsx
+++ b/src/features/HeaderFilters/components/DateFilter/styled.tsx
@@ -13,7 +13,7 @@ export const Wrapper = styled.div<Props>`
   display: flex;
   box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
 
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
     width: auto;
   }
 
@@ -44,7 +44,7 @@ export const DateButton = styled.button`
   background-color: #3F3F3F;
   color: #999999;
 
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
     background-color: transparent;
     color: #fff;
   }
@@ -64,7 +64,7 @@ export const Day = styled.span`
   font-size: 38px;
   letter-spacing: -0.03em;
 
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
     font-weight: 600;
     font-size: 14px;
 }
@@ -74,7 +74,7 @@ export const Month = styled.span`
   font-weight: bold;
   font-size: 14px;
 
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
     font-weight: 600;
     margin-right: 4px;
 }
@@ -87,7 +87,7 @@ export const MonthYearWrapper = styled.div`
   flex-direction: column;
   justify-content: space-between;
 
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
     flex-direction: row;
     align-items: center;
   }
@@ -98,7 +98,7 @@ export const Year = styled.span`
   font-weight: 300;
   font-size: 14px;
 
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
     font-weight: 600;
   }
 `
@@ -109,7 +109,7 @@ const Arrow = styled.div`
   margin: auto;
   background-color: #222222;
 
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
     height: 0;
   }
 
@@ -129,7 +129,7 @@ export const ArrowLeft = styled(Arrow)`
     top: 19px;
     left: 17px;
 
-    @media${devices.tablet} {
+    @media ${devices.tablet} {
       top: 5px;
       left: 8px;
     }
@@ -142,7 +142,7 @@ export const ArrowRight = styled(Arrow)`
     top: 19px;
     right: 17px;
 
-    @media${devices.tablet} {
+    @media ${devices.tablet} {
       top: 5px;
       right: 8px;
     }
@@ -163,7 +163,7 @@ export const Button = styled.button<ButtonProps>`
   cursor: pointer;
   background-color: #3F3F3F;
 
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
     border-radius: 50%;
     width: 23px;
   }
diff --git a/src/features/HeaderFilters/components/MatchStatusFilter/styled.tsx b/src/features/HeaderFilters/components/MatchStatusFilter/styled.tsx
index f65ea059..e90421cc 100644
--- a/src/features/HeaderFilters/components/MatchStatusFilter/styled.tsx
+++ b/src/features/HeaderFilters/components/MatchStatusFilter/styled.tsx
@@ -33,7 +33,7 @@ export const RadioButton = styled.button.attrs(({ selected }: RadioButtonProps)
         background-color: #666666;
         color: #ffffff;
 
-        @media${devices.tablet} {
+        @media ${devices.tablet} {
           :first-child {
             background-color: #CC0000;
           }
@@ -66,7 +66,7 @@ export const RadioButton = styled.button.attrs(({ selected }: RadioButtonProps)
     border-right: 1px solid #222222;
   }
 
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
     width: 105px;
     height: 30px;
     font-size: 13px;
diff --git a/src/features/HeaderFilters/components/SportTypeFilter/styled.tsx b/src/features/HeaderFilters/components/SportTypeFilter/styled.tsx
index 09376960..7877645b 100644
--- a/src/features/HeaderFilters/components/SportTypeFilter/styled.tsx
+++ b/src/features/HeaderFilters/components/SportTypeFilter/styled.tsx
@@ -8,7 +8,7 @@ export const Wrapper = styled.div`
   position: relative;
   border-right: 1px solid #222222;
 
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
     border-right: 0;
   }
 
@@ -29,7 +29,7 @@ export const SportList = styled.ul`
   box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
   z-index: 1;
 
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
     top: -144px;
     width: 100%;
     background-color: #3F3F3F;
diff --git a/src/features/HeaderFilters/components/TournamentFilter/styled.tsx b/src/features/HeaderFilters/components/TournamentFilter/styled.tsx
index 4a8aea9c..be0ba84c 100644
--- a/src/features/HeaderFilters/components/TournamentFilter/styled.tsx
+++ b/src/features/HeaderFilters/components/TournamentFilter/styled.tsx
@@ -12,13 +12,13 @@ export const ListWrapper = styled.div`
   overflow-y: scroll;
   z-index: 2;
 
-  @media${devices.laptop} {
+  @media ${devices.laptop} {
     right: 0;
     bottom: -1px;
     left: auto;
   }
 
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
     width: 200%;
     left: -100%;
     top: calc(-92vh + 36px);
@@ -49,7 +49,7 @@ export const DropdownButton = styled.button<Props>`
   background-repeat: no-repeat;
   background-position: 113px;
 
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
     background: transparent;
     font-weight: 500;
     font-size: 14px;
@@ -91,7 +91,7 @@ export const Arrows = styled.span<Props>`
   background-repeat: no-repeat;
   background-position: center;
 
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
     display: none;
   }
 
diff --git a/src/features/HeaderFilters/components/TournamentList/styled.tsx b/src/features/HeaderFilters/components/TournamentList/styled.tsx
index 93f5eeed..91994d9b 100644
--- a/src/features/HeaderFilters/components/TournamentList/styled.tsx
+++ b/src/features/HeaderFilters/components/TournamentList/styled.tsx
@@ -11,7 +11,7 @@ export const ListItem = styled(Item)`
   background-color: #666;
   cursor: pointer;
 
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
     background-color:  #3F3F3F;
   }
 
diff --git a/src/features/HomePage/styled.tsx b/src/features/HomePage/styled.tsx
index 5ba8b001..0624c43f 100644
--- a/src/features/HomePage/styled.tsx
+++ b/src/features/HomePage/styled.tsx
@@ -5,11 +5,11 @@ import { devices } from 'config/devices'
 export const Content = styled.main`
   margin-top: 75px;
   padding: 0 16px;
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
     margin-top: 12px;
   }
 
-  @media${devices.mobile} {
+  @media ${devices.mobile} {
     padding: 0;
   }
 `
diff --git a/src/features/Login/styled.tsx b/src/features/Login/styled.tsx
index 1c867ea3..41a4a795 100644
--- a/src/features/Login/styled.tsx
+++ b/src/features/Login/styled.tsx
@@ -12,11 +12,11 @@ export const CenterBlock = styled.div`
   justify-content: flex-start;
   margin-top: 140px;
 
-  @media${devices.laptop} {
+  @media ${devices.laptop} {
     margin-top: 177px;
   }
 
-  @media${devices.mobile} {
+  @media ${devices.mobile} {
     margin-top: 150px;
   }
 `
@@ -28,13 +28,13 @@ export const Form = styled.form<{forRegPage?: boolean}>`
   flex-direction: column;
   align-items: center;
 
-  @media${devices.laptop} {
+  @media ${devices.laptop} {
     margin: ${({ forRegPage }) => (forRegPage ? '75px 0 140px 0' : '80px 0 140px 0')};
   }
   
   
 
-  @media${devices.mobile} {
+  @media ${devices.mobile} {
     width: auto;
     margin: 50px 0 140px 0;
   }
@@ -50,12 +50,12 @@ export const BlockTitle = styled.span`
   margin-bottom: 20px;
   transition: color 0.3s ease-in-out;
 
-  @media${devices.laptop} {
+  @media ${devices.laptop} {
     max-height: 24px;
     margin-bottom: 23px;
   }
 
-  @media${devices.mobile} {
+  @media ${devices.mobile} {
     font-size: 24px;
     margin-bottom: 20px;
   }
@@ -69,11 +69,11 @@ export const ButtonsBlock = styled.div<{forSubsPage?: boolean}>`
   margin-bottom: ${({ forSubsPage }) => (forSubsPage ? '96px' : '')};
   position: relative;
 
-  @media${devices.laptop} {
+  @media ${devices.laptop} {
     margin-top: ${({ forSubsPage }) => (forSubsPage ? '80px' : '32px')};
   }
 
-  @media${devices.mobile} {
+  @media ${devices.mobile} {
     bottom: ${({ forSubsPage }) => (forSubsPage ? '20px' : '10px')};
     margin-bottom: ${({ forSubsPage }) => (forSubsPage ? '0' : '')};
     position: ${({ forSubsPage }) => (forSubsPage ? 'absolute' : 'relative')};
@@ -87,7 +87,7 @@ export const RegisterButton = styled(Link)`
   align-items: center;
   justify-content: center;
 
-  @media${devices.mobile} {
+  @media ${devices.mobile} {
     width: 335px;
     height: 40px;
     margin-top: 10px;
diff --git a/src/features/Logo/index.tsx b/src/features/Logo/index.tsx
index 7781823f..c7de862d 100644
--- a/src/features/Logo/index.tsx
+++ b/src/features/Logo/index.tsx
@@ -15,7 +15,7 @@ export const Logo = styled.div<TLogo>`
   background-repeat: no-repeat;
   background-image: url(/images/logo.svg);
 
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
     width: ${({ width }) => width}px;
     height: ${({ height }) => height}px;
     display: flex;
diff --git a/src/features/MainWrapper/index.tsx b/src/features/MainWrapper/index.tsx
index 02a0fbe3..d012b6fd 100644
--- a/src/features/MainWrapper/index.tsx
+++ b/src/features/MainWrapper/index.tsx
@@ -6,7 +6,7 @@ export const MainWrapper = styled.div`
   width: 100%;
   padding-left: 80px;
 
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
     padding: 0
   }
 `
diff --git a/src/features/MatchCard/CardSoon/index.tsx b/src/features/MatchCard/CardSoon/index.tsx
index 5c9c2eb5..14b1d3fd 100644
--- a/src/features/MatchCard/CardSoon/index.tsx
+++ b/src/features/MatchCard/CardSoon/index.tsx
@@ -28,7 +28,7 @@ const TeamLogos = styled.div`
   display: flex;
   padding-left: 24px;
 
-  @media${devices.mobile} {
+  @media ${devices.mobile} {
     justify-content: space-between;
     padding-right: 20px;
   }
@@ -41,7 +41,7 @@ const TeamLogo = styled.img`
     margin-left: 8px;
   }
 
-  @media${devices.mobile} {
+  @media ${devices.mobile} {
     width: 134px;
   }
 
diff --git a/src/features/MatchCard/styled.tsx b/src/features/MatchCard/styled.tsx
index 18adce1e..2ff4a5a9 100644
--- a/src/features/MatchCard/styled.tsx
+++ b/src/features/MatchCard/styled.tsx
@@ -20,15 +20,15 @@ export const CardWrapper = styled.li.attrs({
   transition: border 0.5s ease-out;
   margin-right: 16px;
 
-  @media${devices.laptop} {
+  @media ${devices.laptop} {
     width: 279px;
     height: 279px;
   }
 
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
     height: 299px;
   }
-  @media${devices.mobile} {
+  @media ${devices.mobile} {
     width: 100%;
     margin-bottom: 10px;
   }
@@ -43,7 +43,7 @@ export const PreviewWrapper = styled.div`
   flex-direction: column-reverse;
   height: 147px;
 
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
     height: 208px;
   }
 `
@@ -71,7 +71,7 @@ export const MatchDate = styled.div`
   color: white;
   background: #6D6D6D;
 
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
     top: 10px;
     left: 20px;
     width: auto;
@@ -89,7 +89,7 @@ export const Info = styled.div`
   overflow: hidden;
   white-space: nowrap;
 
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
     padding: 13px 18px 17px 18px;
   }
 `
@@ -98,7 +98,7 @@ export const TournamentName = styled.span`
   color: rgba(255, 255, 255, 0.5);
   font-size: 10px;
 
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
     margin-top: 10px;
   }
 `
@@ -106,7 +106,7 @@ export const TournamentName = styled.span`
 export const Teams = styled.div`
   margin-top: 21px;
 
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
     margin-top: 0;
   }
 `
@@ -168,9 +168,12 @@ export const CardHoverWrapper = styled(CardWrapper)`
   cursor: pointer;
   height: 288px;
 
-  @media${devices.laptop} {
+  @media ${devices.laptop} {
     height: 279px;
   }
+  @media ${devices.tablet} {
+    height: 299px;
+  }
 `
 
 export const CardHoverInner = styled.div`
diff --git a/src/features/MatchPage/MatchProfileCard/styled.tsx b/src/features/MatchPage/MatchProfileCard/styled.tsx
index ed32d6e0..3b840879 100644
--- a/src/features/MatchPage/MatchProfileCard/styled.tsx
+++ b/src/features/MatchPage/MatchProfileCard/styled.tsx
@@ -12,7 +12,7 @@ export const Wrapper = styled.div`
   color: white;
   min-height: 28px;
 
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
     order: 2;
     font-size: 16px;
     padding: 15px 20px 0 20px;
@@ -41,7 +41,7 @@ export const Dash = styled.span`
   height: fit-content;
   align-self: center;
 
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
     width: 16px;
     border-bottom: 1px solid white;
     margin: 0 4px;
@@ -52,7 +52,7 @@ export const Score = styled.div`
   display: flex;
   margin: 0 20px;
 
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
     margin: 0 10px;
     color: #EACB6F;
   }
@@ -67,7 +67,7 @@ export const Tournament = styled.div`
   margin-left: 48px;
   color: #666666;
 
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
     width: 100%;
     margin-left: 0;
     margin-top: 4px;
diff --git a/src/features/MatchPage/styled.tsx b/src/features/MatchPage/styled.tsx
index 71d1f9b1..8c843c62 100644
--- a/src/features/MatchPage/styled.tsx
+++ b/src/features/MatchPage/styled.tsx
@@ -4,11 +4,11 @@ import { devices } from 'config/devices'
 export const MainWrapper = styled.div`
   margin: 63px 16px 0 16px;
 
-  @media${devices.laptop} {
+  @media ${devices.laptop} {
     margin: 0px 16px;
   }
 
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
     display: flex;
     flex-direction: column;
     margin: 0 0 16px 0;
@@ -22,7 +22,7 @@ export const Container = styled.div`
   display: flex;
   flex-direction: column;
 
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
     order: 1;
     margin-top: 0;
   }
diff --git a/src/features/Matches/styled.tsx b/src/features/Matches/styled.tsx
index 0e407c71..e9b4a96d 100644
--- a/src/features/Matches/styled.tsx
+++ b/src/features/Matches/styled.tsx
@@ -5,7 +5,7 @@ import { devices } from 'config/devices'
 export const Section = styled.section`
   margin-bottom: 30px;
 
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
     width: 100%;
   }
 `
@@ -18,7 +18,7 @@ export const Title = styled.h2`
   letter-spacing: -0.02em;
   color: #fff;
 
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
     display: none;
   }
 `
diff --git a/src/features/MatchesGrid/styled.tsx b/src/features/MatchesGrid/styled.tsx
index b28df056..b211769b 100644
--- a/src/features/MatchesGrid/styled.tsx
+++ b/src/features/MatchesGrid/styled.tsx
@@ -7,14 +7,14 @@ export const Wrapper = styled.ul`
   grid-template-columns: repeat(6, 288px);
   grid-gap: 13px;
  
-  @media${devices.large} {
+  @media ${devices.large} {
     grid-template-columns: repeat(auto-fit, minmax(270px, 280px ));
   }
 
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
     justify-content: center;
   }
-  @media${devices.mobile} {
+  @media ${devices.mobile} {
     grid-template-columns: repeat(auto-fit, minmax(279px, 1fr ));
   }
 `
diff --git a/src/features/MatchesSlider/styled.tsx b/src/features/MatchesSlider/styled.tsx
index 0097e88f..f0d7f0dc 100644
--- a/src/features/MatchesSlider/styled.tsx
+++ b/src/features/MatchesSlider/styled.tsx
@@ -16,7 +16,7 @@ export const Slides = styled.ul`
     display: none;
   }
 
-  @media${devices.mobile} {
+  @media ${devices.mobile} {
     flex-direction: column;
   }
 `
diff --git a/src/features/Menu/styled.tsx b/src/features/Menu/styled.tsx
index dc2120c8..f3ce2bd6 100644
--- a/src/features/Menu/styled.tsx
+++ b/src/features/Menu/styled.tsx
@@ -14,7 +14,7 @@ export const Wrapper = styled.nav`
   margin-left: 90px;
   margin-right: 14px;
 
-  @media${devices.desktop} {
+  @media ${devices.desktop} {
     margin-left: 23px;
     margin-right: 10px;
   }
@@ -30,13 +30,13 @@ export const MenuList = styled.ul`
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
   z-index: 1;
 
-  @media${devices.laptop} {
+  @media ${devices.laptop} {
     top: 55px;
     left: 0;
     width: 288px;
   }
 
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
     right: 0;
     left: auto;
     z-index: 3;
@@ -52,11 +52,11 @@ export const MenuList = styled.ul`
     transform: translate(-50%, -50%) rotate(45deg);
     background-color: #666;
 
-    @media${devices.laptop} {
+    @media ${devices.laptop} {
       left: 4%;
     }
 
-    @media${devices.tablet} {
+    @media ${devices.tablet} {
       left: 97%;
     }
   }
diff --git a/src/features/ProfileCard/styled.tsx b/src/features/ProfileCard/styled.tsx
index aff52091..763b848d 100644
--- a/src/features/ProfileCard/styled.tsx
+++ b/src/features/ProfileCard/styled.tsx
@@ -1,11 +1,24 @@
 import styled from 'styled-components/macro'
 
+import { devices } from 'config/devices'
+
 import { ProfileTypes } from 'config'
 
 export const Wrapper = styled.div`
   display: flex;
   margin-left: 70px;
   margin-bottom: 50px;
+
+  @media ${devices.laptop} {
+    margin-top: 30px;
+    margin-left: 23px;
+  }
+
+  @media ${devices.laptop} {
+    margin-top: 14px;
+    margin-left: 20px;
+    margin-bottom: 20px;
+  }
 `
 
 export const Name = styled.h1`
@@ -15,6 +28,11 @@ export const Name = styled.h1`
   font-weight: bold;
   letter-spacing: 0.02em;
   color: #fff;
+
+  @media ${devices.tablet} {
+    font-size: 22px;
+    line-height: 21px;
+  }
 `
 
 export const Logo = styled.img<{ profileType: number }>`
@@ -58,6 +76,14 @@ export const AddToFavButton = styled.button`
     width: 18px;
     height: 18px;
   }
+
+  @media ${devices.tablet} {
+    line-height: 13px;
+
+    svg {
+      display: none;
+    }
+  }
 `
 
 export const InFavorites = styled(AddToFavButton)`
@@ -70,6 +96,15 @@ export const InfoItems = styled.div`
   margin-left: 20px;
   display: flex;
   align-items: center;
+  
+  @media ${devices.laptop} {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  @media ${devices.tablet} {
+    margin-left: 10px;
+  }
 `
 
 export const InfoItem = styled.div`
@@ -77,4 +112,10 @@ export const InfoItem = styled.div`
   font-size: 16px;
   letter-spacing: 0.02em;
   color: rgba(255, 255, 255, 0.5);
+  margin-right: 5px;
+
+  @media ${devices.tablet} {
+    font-size: 11px;
+    line-height: 10px;
+  }
 `
diff --git a/src/features/Register/components/AdditionalSubscription/styled.tsx b/src/features/Register/components/AdditionalSubscription/styled.tsx
index 60f09838..86747286 100644
--- a/src/features/Register/components/AdditionalSubscription/styled.tsx
+++ b/src/features/Register/components/AdditionalSubscription/styled.tsx
@@ -14,7 +14,7 @@ export const PriceItem = styled.div`
   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
   border-radius: 2px;
 
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
     width: 162px;
     height: 100px;
     padding: 12px 5px;
@@ -31,7 +31,7 @@ export const PriceItemTitle = styled.span`
   color: ${({ theme: { colors } }) => colors.text};
   margin: 3px 5px 0 0;
 
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
    text-align: center;
    line-height: 18px;
   }
diff --git a/src/features/Register/components/Price/styled.tsx b/src/features/Register/components/Price/styled.tsx
index d89b2393..5dc20474 100644
--- a/src/features/Register/components/Price/styled.tsx
+++ b/src/features/Register/components/Price/styled.tsx
@@ -6,7 +6,7 @@ export const PriceWrapper = styled.div`
   display: flex;
   align-items: flex-start;
 
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
     justify-content: center;
    }
 `
@@ -18,7 +18,7 @@ export const PriceAmount = styled.span`
   line-height: 40px;
   color: ${({ theme: { colors } }) => colors.text};
 
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
     font-size: 36px;
   }
 `
@@ -32,7 +32,7 @@ export const PriceDetails = styled.span`
   color: ${({ theme: { colors } }) => colors.text};
   text-transform: uppercase;
 
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
     font-size: 11px;
   }
 `
diff --git a/src/features/Register/components/RegistrationSuccessful/styled.tsx b/src/features/Register/components/RegistrationSuccessful/styled.tsx
index 98bcb13b..212dd0a9 100644
--- a/src/features/Register/components/RegistrationSuccessful/styled.tsx
+++ b/src/features/Register/components/RegistrationSuccessful/styled.tsx
@@ -12,14 +12,14 @@ export const Container = styled.div`
   align-items: center;
   margin-top: 80px;
 
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
 
     ${BlockTitle} {
       text-align: center;
     }
   }
   
-  @media${devices.mobile} {
+  @media ${devices.mobile} {
     margin-top: 20px;
   }
 `
@@ -32,7 +32,7 @@ export const GreenTick = styled.div`
   background-position-y: -98px;
   background-position-x: center;
 
-  @media${devices.mobile} {
+  @media ${devices.mobile} {
    margin: 30px 0 100px 0 ;
   }
 `
diff --git a/src/features/Register/components/SubscriptionsStep/index.tsx b/src/features/Register/components/SubscriptionsStep/index.tsx
index 04c6804f..7a5cf418 100644
--- a/src/features/Register/components/SubscriptionsStep/index.tsx
+++ b/src/features/Register/components/SubscriptionsStep/index.tsx
@@ -54,15 +54,15 @@ export const SubscriptionStep = () => {
         </PricesBlock>
       </SubscriptionsBlock>
       <ButtonsBlock forSubsPage>
-        <ButtonSolid>
-          <T9n t='subscription_done' />
-        </ButtonSolid>
         <TotalInfoBlock>
           <TotalInfoText>Базовая + 2 дополнительно <T9n t='subscription_for' />
             <TotalPriceAmmount>6997</TotalPriceAmmount>
             <TotalPriceDetails>₽ / МЕС</TotalPriceDetails>
           </TotalInfoText>
         </TotalInfoBlock>
+        <ButtonSolid>
+          <T9n t='subscription_done' />
+        </ButtonSolid>
       </ButtonsBlock>
     </Fragment>
   )
diff --git a/src/features/Register/components/SubscriptionsStep/styled.tsx b/src/features/Register/components/SubscriptionsStep/styled.tsx
index e3bd3598..253e76d7 100644
--- a/src/features/Register/components/SubscriptionsStep/styled.tsx
+++ b/src/features/Register/components/SubscriptionsStep/styled.tsx
@@ -11,11 +11,11 @@ export const SubscriptionList = styled.ul`
   display: flex;
   margin-top: 40px;
 
-  @media${devices.laptop} {
+  @media ${devices.laptop} {
     margin-top: 27px;
   }
 
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
     margin-top: 30px;
   }
 `
@@ -26,7 +26,7 @@ export const SubscriptionsBlock = styled.div<SubscriptionsBlockProps>`
   align-items: center;
   margin-top: ${({ forAdditionalTitle }) => (forAdditionalTitle ? '75px' : '80px')};
 
-  @media${devices.laptop} {
+  @media ${devices.laptop} {
     margin-top: ${({ forAdditionalTitle, isSubsStep }) => {
     if (forAdditionalTitle) return '42px'
     if (isSubsStep) return '84px'
@@ -34,7 +34,7 @@ export const SubscriptionsBlock = styled.div<SubscriptionsBlockProps>`
   }};
   }
 
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
     margin-top: ${({ forAdditionalTitle, isSubsStep }) => {
     if (forAdditionalTitle) return '42px'
     if (isSubsStep) return '50px'
@@ -54,7 +54,7 @@ export const BlockTitle = styled.span`
   color: ${({ theme: { colors } }) => colors.text};
   transition: color 0.3s ease-in-out;
 
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
     font-size: 24px;
     font-weight: 600px;
   }
@@ -64,11 +64,11 @@ export const AdditionalBlockTitle = styled(BlockTitle)`
   font-size: 32px;
   margin-bottom: 40px;
 
-  @media${devices.laptop} {
+  @media ${devices.laptop} {
     margin-bottom: 30px;
   }
 
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
     font-size: 24px;
     font-weight: 600px;
   }
@@ -88,7 +88,7 @@ export const SubscriptionWrapper = styled.div`
   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
   border-radius: 2px;
 
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
     padding: 0;
     align-items: center;
     justify-content: center;
@@ -116,7 +116,7 @@ export const Row = styled.div<RowProps>`
   left: ${({ isPriceRow }) => (isPriceRow ? '70px' : '')};
   bottom: ${({ isPriceRow }) => (isPriceRow ? '100px' : '')};
 
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
     position: static;
     margin-top: ${({ isPriceRow }) => (isPriceRow ? '9px' : '')};
   }
@@ -128,7 +128,7 @@ export const PricesBlock = styled.div`
   justify-content: space-between;
   position: relative;
 
-  @media${devices.mobile} {
+  @media ${devices.mobile} {
     max-width: 370px;
     overflow-x: auto;
 
@@ -143,9 +143,8 @@ export const TotalInfoBlock = styled.div`
   top: 4px;
   left: 294px;
 
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
     position: static;
-    order: -1;
     margin-bottom: 10px;
     width: 100%;
   }
diff --git a/src/features/Register/styled.tsx b/src/features/Register/styled.tsx
index 41beea05..33c7d9a8 100644
--- a/src/features/Register/styled.tsx
+++ b/src/features/Register/styled.tsx
@@ -60,7 +60,7 @@ export const Card = styled.div`
   }
 
   
-  @media${devices.laptop} {
+  @media ${devices.laptop} {
     margin-top: 17px;
     margin-bottom: 61px;
     width: 482px;
@@ -100,7 +100,7 @@ export const Card = styled.div`
      }
   }
 
-  @media${devices.mobile} {
+  @media ${devices.mobile} {
     width: 375px;
     height: auto;
     border: 0;
@@ -140,7 +140,7 @@ type CustomCenterBlockProps = {
 
 export const CustomCenterBlock = styled(CenterBlock)<CustomCenterBlockProps>`
 
-  @media${devices.laptop} {
+  @media ${devices.laptop} {
     margin-top: ${({ isCardStep, isSubsStep }) => {
     if (isCardStep) return '154px'
     if (isSubsStep) return '89px'
@@ -170,14 +170,14 @@ export const CustomCenterBlock = styled(CenterBlock)<CustomCenterBlockProps>`
       transform: translateY(-50%);
       width: 328px;
 
-      @media${devices.tablet} {
+      @media ${devices.tablet} {
         position: static;
         margin-top: 5px;
       }
     }
   }
 
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
     margin-top: ${({ isCardStep, isSubsStep }) => {
     if (isCardStep) return '154px'
     if (isSubsStep) return '69px'
@@ -189,7 +189,7 @@ export const CustomCenterBlock = styled(CenterBlock)<CustomCenterBlockProps>`
     }  
   }
 
-  @media${devices.mobile} {
+  @media ${devices.mobile} {
     ${InputStyled} {
       text-align: center;
     }
diff --git a/src/features/Search/styled.tsx b/src/features/Search/styled.tsx
index 5214561f..d66da0be 100644
--- a/src/features/Search/styled.tsx
+++ b/src/features/Search/styled.tsx
@@ -21,22 +21,19 @@ export const Form = styled.form<{isMatch: boolean}>`
     margin: 0;
     padding-bottom: 13px;
 
-     @media${devices.desktop} {
+    @media ${devices.desktop} {
         padding-left: 12px;
       }
 
-      @media${devices.tablet} {
+      @media ${devices.tablet} {
         padding-left: 6px;
         height: 12px;
         margin-top: 25px;
         background-color: transparent;
       }
-      @media${devices.mobile} {
-        margin-top: 20px;
-      }
   }
   
-  @media${devices.desktop} {
+  @media ${devices.desktop} {
     width: ${({ isMatch }) => (isMatch ? '244px' : '51px')};
 
     :focus-within {
@@ -46,7 +43,7 @@ export const Form = styled.form<{isMatch: boolean}>`
       }
   }
 
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
     width: 12px;
     :focus-within {
       width: 252px;
@@ -65,14 +62,14 @@ export const Form = styled.form<{isMatch: boolean}>`
       display: none; 
     }
 
-    @media${devices.tablet} {
+    @media ${devices.tablet} {
       font-size: 14px;
     }
   }
 
   ${Label} {
 
-    @media${devices.laptop} {
+    @media ${devices.laptop} {
       display: block;
     }
     ::before {
@@ -83,11 +80,11 @@ export const Form = styled.form<{isMatch: boolean}>`
       background-image: url(/images/search.svg);
       background-repeat: no-repeat;
 
-      @media${devices.desktop} {
+      @media ${devices.desktop} {
         margin-right: 0;
       }
-      @media${devices.tablet} {
-        margin-right: 0;
+      @media ${devices.tablet} {
+        margin-bottom: 2px;
         background-image: url(/images/search-mob.svg);
       }
     }
@@ -97,7 +94,7 @@ export const Form = styled.form<{isMatch: boolean}>`
     ${InputWrapper} {
       padding-left: 0;
 
-      @media${devices.tablet} {
+      @media ${devices.tablet} {
         background-color: #3F3F3F;
       }
     }
@@ -109,7 +106,7 @@ export const Form = styled.form<{isMatch: boolean}>`
     }
   }
 
-  @media${devices.mobile} {
+  @media ${devices.mobile} {
     ${Column} {
       width: auto;
       max-width: 335px;
@@ -126,13 +123,13 @@ export const Results = styled.div`
   overflow-y: auto;
   z-index: 1;
 
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
     position: fixed;
     top: 40px;
     left: 40%;
     width: 50vw;
   }
-  @media${devices.mobile} {
+  @media ${devices.mobile} {
     left: 0;
     width: 100vw;
   }
diff --git a/src/features/ToggleScore/styled.tsx b/src/features/ToggleScore/styled.tsx
index 11353e15..d1bb40c6 100644
--- a/src/features/ToggleScore/styled.tsx
+++ b/src/features/ToggleScore/styled.tsx
@@ -11,7 +11,7 @@ export const Switch = styled.div`
   align-items: center;
   cursor: pointer;
 
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
     position: static;
   }
 `
@@ -24,7 +24,7 @@ export const Title = styled(T9n)`
   color: #999999;
   margin-right: 5px;
 
-  @media${devices.tablet} {
+  @media ${devices.tablet} {
     order: 2;
     margin-right: 0;
     margin-left: 5px;