diff --git a/src/assets/icons/iconMenu.svg b/src/assets/icons/iconMenu.svg
new file mode 100644
index 00000000..c1fc5fb6
--- /dev/null
+++ b/src/assets/icons/iconMenu.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="28px" height="28px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 18L20 18" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>
+<path d="M4 12L20 12" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>
+<path d="M4 6L20 6" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/icons/iconSearch.svg b/src/assets/icons/iconSearch.svg
new file mode 100644
index 00000000..ac0c10a9
--- /dev/null
+++ b/src/assets/icons/iconSearch.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.7955 15.8111L21 21M18 10.5C18 14.6421 14.6421 18 10.5 18C6.35786 18 3 14.6421 3 10.5C3 6.35786 6.35786 3 10.5 3C14.6421 3 18 6.35786 18 10.5Z" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/entities/HeaderAccount/HeaderAccount.tsx b/src/entities/HeaderAccount/HeaderAccount.tsx
index a491de62..d09938cb 100644
--- a/src/entities/HeaderAccount/HeaderAccount.tsx
+++ b/src/entities/HeaderAccount/HeaderAccount.tsx
@@ -1,6 +1,7 @@
 import { FC, lazy, useState, Suspense, useEffect } from 'react'
 import { useSelector } from 'react-redux'
 
+import SearchIcon from '@/assets/icons/iconSearch.svg'
 import { getUserAuthStatus } from '@/features/login/model/selectors/getUserAuthStatus'
 import { logout } from '@/features/login/model/services/logout/logout'
 import { loginActions } from '@/features/login/model/slice/loginSlice'
@@ -11,9 +12,11 @@ import PersonIcon from '@/shared/icons/person.svg'
 import PersonAuthIcon from '@/shared/icons/person_auth.svg'
 import ScalesIcon from '@/shared/icons/scales.svg'
 import { useAppDispatch } from '@/shared/libs/hooks/store'
+import { useResize } from '@/shared/libs/hooks/useResize'
 import { Button } from '@/shared/ui/Button/Button'
 import Link from '@/shared/ui/Link/Link'
 import Modal from '@/shared/ui/Modal/Modal'
+import Paragraph from '@/shared/ui/Paragraph/Paragraph'
 import Spinner from '@/shared/ui/Spinner/Spinner'
 
 import styles from './headerAccount.module.scss'
@@ -33,6 +36,8 @@ const HeaderAccount: FC<HeaderAccountProps> = ({ counter, total }) => {
   const [isModalOpen, setIsModalOpen] = useState(false)
   const [isModalClosing, setIsModalClosing] = useState(false)
 
+  const { isScreenLg } = useResize()
+
   const dispatch = useAppDispatch()
   const isAuth = useSelector(getUserAuthStatus)
 
@@ -68,41 +73,48 @@ const HeaderAccount: FC<HeaderAccountProps> = ({ counter, total }) => {
           </Suspense>
         </Modal>
       )}
-      <ul className={styles['header__cart-wrapper']}>
+      <ul className={isScreenLg ? `${styles.headerAccount}` : `${styles.headerAccount__mobile}`}>
+        {!isScreenLg && <SearchIcon className={styles.headerAccount__search} />}
         <li>
-          {isAuth ? (
-            // Временная реализация
-            // TODO заменить на дропдаун на ховер в контекстном меню добавить пункт-кнопку для разлогина пока висит на иконке
-            <Button onClick={onLogout} className={styles.header__cart}>
-              <PersonAuthIcon />
-            </Button>
-          ) : (
-            <Button onClick={handlePersonIconClick} className={styles.header__cart}>
-              <PersonIcon />
-            </Button>
-          )}
+          {/* Временная реализация
+          TODO заменить на дропдаун на ховер в контекстном меню добавить пункт-кнопку для разлогина пока висит на иконке */}
+          <Button
+            onClick={isAuth ? onLogout : handlePersonIconClick}
+            className={isScreenLg ? `${styles.headerAccount__cart}` : `${styles.headerAccount__cartMobile}`}>
+            {isAuth ? <PersonAuthIcon /> : <PersonIcon />}
+          </Button>
         </li>
 
+        {isScreenLg && (
+          <li>
+            <Link to={Routes.COMPARE} className={styles.headerAccount__cart}>
+              <ScalesIcon />
+            </Link>
+          </li>
+        )}
+
+        {isScreenLg && (
+          <li>
+            <Link to={Routes.FAVORITES} className={styles.headerAccount__cart}>
+              <HeartIcon />
+            </Link>
+          </li>
+        )}
+
         <li>
-          <Link to={Routes.COMPARE} className={styles.header__cart}>
-            <ScalesIcon />
-          </Link>
-        </li>
-        <li>
-          <Link to={Routes.FAVORITES} className={styles.header__cart}>
-            <HeartIcon />
-          </Link>
-        </li>
-        <li>
-          <Link to={Routes.CART} className={styles.header__cart}>
+          <Link
+            to={Routes.CART}
+            className={isScreenLg ? `${styles.headerAccount__cart}` : `${styles.headerAccount__cartMobile}`}>
             <CartIcon />
-            <div className={styles['header__cart-container']}>
-              <div className={styles['header__counter-container']}>
-                <p className={styles['header__cart-total-text']}>Корзина</p>
-                <p className={styles['header__cart-counter']}>{counter}</p>
+            {isScreenLg && (
+              <div className={styles.headerAccount__cartContainer}>
+                <div className={styles.headerAccount__counterContainer}>
+                  <Paragraph className={styles.headerAccount__cartTotalText}>Корзина</Paragraph>
+                  <Paragraph className={styles.headerAccount__cartCounter}>{counter}</Paragraph>
+                </div>
+                <Paragraph className={styles.headerAccount__cartTotal}>{total}</Paragraph>
               </div>
-              <p className={styles['header__cart-total']}>{total}</p>
-            </div>
+            )}
           </Link>
         </li>
       </ul>
diff --git a/src/entities/HeaderAccount/headerAccount.module.scss b/src/entities/HeaderAccount/headerAccount.module.scss
index 8544af19..cc479828 100644
--- a/src/entities/HeaderAccount/headerAccount.module.scss
+++ b/src/entities/HeaderAccount/headerAccount.module.scss
@@ -1,60 +1,81 @@
 @use '../../shared/styles/utils/variables' as var;
 
-.header {
+.headerAccount {
+  grid-area: account;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+
+  &__mobile {
+    display: flex;
+    align-items: center;
+    gap: 24px;
+  }
+
+  &__search {
+    cursor: pointer;
+
+    &:active {
+      transform: scale(0.9);
+    }
+  }
+
   &__cart {
-    height: 46px;
-    border: 1px solid var.$theme-secondary-color;
     display: flex;
     justify-content: center;
     align-items: center;
+    height: 46px;
+    border: 1px solid var.$theme-secondary-color;
     border-radius: 5px;
-    box-sizing: border-box;
     padding: 10px;
     transition: border 0.25s;
+
+    &:hover {
+      border: 1px solid var.$white;
+    }
   }
 
-  &__cart:hover {
-    border: 1px solid var.$white;
+  &__cartMobile {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0;
+    cursor: pointer;
+
+    &:active {
+      transform: scale(0.9);
+    }
   }
 
-  &__cart-container {
+  &__cartContainer {
     display: flex;
     flex-direction: column;
     margin-left: 10px;
     row-gap: 5px;
   }
 
-  &__cart-counter {
-    margin: 0;
-    padding: 0;
-    font-weight: 600;
+  &__cartCounter {
+    line-height: 14px;
     font-size: 14px;
+    font-weight: 600;
     color: var.$header-color;
   }
 
-  &__cart-total {
-    margin: 0;
-    padding: 0;
-    font-weight: 600;
+  &__cartTotal {
+    line-height: 13px;
     font-size: 13px;
+    font-weight: 600;
     color: var.$white;
   }
 
-  &__cart-total-text {
-    margin: 0;
-    padding: 0;
+  &__cartTotalText {
+    line-height: 13px;
+    font-size: 13px;
     font-weight: 600;
-    font-size: 14px;
     color: var.$header-color;
   }
 
-  &__cart-wrapper {
-    display: flex;
-    column-gap: 5px;
-    margin-left: 129px;
-  }
-
-  &__counter-container {
+  &__counterContainer {
     display: flex;
     column-gap: 5px;
   }
diff --git a/src/features/SearchProduct/ui/SearchProduct.module.scss b/src/features/SearchProduct/ui/SearchProduct.module.scss
index b2279efd..31a51ff2 100644
--- a/src/features/SearchProduct/ui/SearchProduct.module.scss
+++ b/src/features/SearchProduct/ui/SearchProduct.module.scss
@@ -1,14 +1,16 @@
 @use '@/shared/styles/utils/variables' as var;
 
 .form {
+  grid-area: search;
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   width: 100%;
+  max-width: 800px;
   height: 46px;
   background-color: var.$theme-secondary-color;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
   border-radius: 5px;
-  position: relative;
 }
 
 .button {
diff --git a/src/shared/ui/CatalogLink/ui/skeleton/CatalogLinkSkeleton.tsx b/src/shared/ui/CatalogLink/ui/skeleton/CatalogLinkSkeleton.tsx
index 014d2a44..ddb7eb09 100644
--- a/src/shared/ui/CatalogLink/ui/skeleton/CatalogLinkSkeleton.tsx
+++ b/src/shared/ui/CatalogLink/ui/skeleton/CatalogLinkSkeleton.tsx
@@ -3,24 +3,18 @@ import Skeleton from 'react-loading-skeleton'
 import 'react-loading-skeleton/dist/skeleton.css'
 
 interface ICatalogLinkSkeleton {
-  key: number
   width: number
   height: number
 }
 
 /**
  * Компонент CatalogLinkSkeleton - заставка, пока не загрузятся CatalogLink
- * @param {number} key - индекс списка
  * @param {number} width - ширина скелетона
  * @param {number} height  - высота скелетона
  */
 
-const CatalogLinkSkeleton: FC<ICatalogLinkSkeleton> = ({ key, width, height }) => {
-  return (
-    <li key={key}>
-      <Skeleton count={1} height={height} width={width} />
-    </li>
-  )
+const CatalogLinkSkeleton: FC<ICatalogLinkSkeleton> = ({ width, height }) => {
+  return <Skeleton count={1} height={height} width={width} />
 }
 
 export default CatalogLinkSkeleton
diff --git a/src/shared/ui/ContextMenuElement/ContextMenuElement.tsx b/src/shared/ui/ContextMenuElement/ContextMenuElement.tsx
index 16b419ef..283d98aa 100644
--- a/src/shared/ui/ContextMenuElement/ContextMenuElement.tsx
+++ b/src/shared/ui/ContextMenuElement/ContextMenuElement.tsx
@@ -61,6 +61,7 @@ const ContextMenuElement: FC<TContextMenuElement> = ({
 
   return (
     <div
+      tabIndex={0}
       ref={ref}
       className={`${className} ${styles['context-body']} `}
       onMouseEnter={handleMouseEnter}
diff --git a/src/shared/ui/ContextMenuElement/contextMenuElement.module.scss b/src/shared/ui/ContextMenuElement/contextMenuElement.module.scss
index d0a4c6d7..634f3d29 100644
--- a/src/shared/ui/ContextMenuElement/contextMenuElement.module.scss
+++ b/src/shared/ui/ContextMenuElement/contextMenuElement.module.scss
@@ -2,11 +2,11 @@
 
 .context-menu {
   position: absolute;
+  display: none;
   background-color: var.$white;
   box-shadow: 0 0 20px rgb(170 189 206 / 25%);
   border-radius: 5px;
   z-index: 1;
-  display: none;
 }
 
 .context-body {
diff --git a/src/shared/ui/logo/Logo.tsx b/src/shared/ui/logo/Logo.tsx
index 2cb396af..f44e64f4 100644
--- a/src/shared/ui/logo/Logo.tsx
+++ b/src/shared/ui/logo/Logo.tsx
@@ -3,7 +3,6 @@ import { type FC } from 'react'
 import { Routes } from '@/shared/config/routerConfig/routes'
 import Link from '@/shared/ui/Link/Link'
 
-import styles from './logo.module.scss'
 import { TLogoProps } from './model/types/types'
 
 /**
@@ -14,7 +13,7 @@ import { TLogoProps } from './model/types/types'
 
 const Logo: FC<TLogoProps> = ({ image, width, height }) => {
   return (
-    <Link to={Routes.HOME} className={styles.link}>
+    <Link to={Routes.HOME}>
       <img src={image} alt="Logo" style={{ width, height }} />
     </Link>
   )
diff --git a/src/shared/ui/logo/logo.module.scss b/src/shared/ui/logo/logo.module.scss
deleted file mode 100644
index 5b014c2f..00000000
--- a/src/shared/ui/logo/logo.module.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.link {
-  display: flex;
-  margin-right: 92px;
-}
diff --git a/src/widgets/Header/Header.tsx b/src/widgets/Header/Header.tsx
index 7b8ba612..f3b6cb66 100644
--- a/src/widgets/Header/Header.tsx
+++ b/src/widgets/Header/Header.tsx
@@ -3,6 +3,7 @@ import { useEffect, useMemo, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 
 import { AppDispatch } from '@/app/providers/StoreProvider/config/store'
+import MenuIcon from '@/assets/icons/iconMenu.svg'
 import {
   getLoading,
   selectCategories,
@@ -15,6 +16,7 @@ import SearchProduct from '@/features/SearchProduct'
 import { Routes } from '@/shared/config/routerConfig/routes'
 import ArrowIcon from '@/shared/icons/arrow.svg'
 import IconCategories from '@/shared/icons/IconCategories.svg'
+import { useResize } from '@/shared/libs/hooks/useResize'
 import { linkItems } from '@/shared/mockData/catalogListData'
 import { headerAccountData } from '@/shared/mockData/headerAccountData'
 import CatalogLink from '@/shared/ui/CatalogLink/CatalogLink'
@@ -44,16 +46,17 @@ function Header() {
   const [isModalClosing, setIsModalClosing] = useState(false)
   const phoneNumber = coreBaseData.header.support.phone_number
   const logo = coreBaseData.header.main_logo.image
-
   const isCategoriesLoading = useSelector(getLoading)
 
+  const { isScreenLg } = useResize()
+
   const changeModalState = () => {
     setIsModalOpen(!isModalOpen)
   }
 
   const aboutUsNode = useMemo(
     () => (
-      <ul className={styles['header__context-menu-list']}>
+      <ul className={styles.header__contextMenuList}>
         <ListItemLink to={Routes.ABOUT}>О нас</ListItemLink>
         <ListItemLink to={Routes.PRIVACY}>Политика безопасности</ListItemLink>
         <ListItemLink to={Routes.REVIEWS}>Обзоры</ListItemLink>
@@ -65,7 +68,7 @@ function Header() {
 
   const contactNode = useMemo(
     () => (
-      <ul className={styles['header__context-menu-list']}>
+      <ul className={styles.header__contextMenuList}>
         <ListItemLink to={`tel:${phoneNumber}`}>{phoneNumber}</ListItemLink>
         <ListItemButton onClick={changeModalState}>Обратный звонок</ListItemButton>
       </ul>
@@ -75,20 +78,19 @@ function Header() {
 
   const supportNode = useMemo(
     () => (
-      <ul className={styles['header__context-menu-list']}>
-        <li className={styles['header__context-menu-item']}>
-          <Link to={Routes.DELIVERY} className={styles['header__context-menu-link']}>
+      <ul className={styles.header__contextMenuList}>
+        <li className={styles.header__contextMenuItem}>
+          <Link to={Routes.DELIVERY} className={styles.header__contextMenuLink}>
             Информация о доставке
           </Link>
         </li>
-
-        <li className={styles['header__context-menu-item']}>
-          <Link to={Routes.ADD_RETURN} className={styles['header__context-menu-link']}>
+        <li className={styles.header__contextMenuItem}>
+          <Link to={Routes.ADD_RETURN} className={styles.header__contextMenuLink}>
             Возвраты
           </Link>
         </li>
-        <li className={styles['header__context-menu-item']}>
-          <Link to={Routes.VOUCHERS} className={styles['header__context-menu-link']}>
+        <li className={styles.header__contextMenuItem}>
+          <Link to={Routes.VOUCHERS} className={styles.header__contextMenuLink}>
             Подарочные сертификаты
           </Link>
         </li>
@@ -99,7 +101,7 @@ function Header() {
 
   const catalogNode = useMemo(
     () => (
-      <ul className={styles['header__context-menu-list']}>
+      <ul className={`${styles.header__contextMenuList} ${styles.header__contextMenuList_catalog}`}>
         {categories.map(category => (
           <CatalogNodeItem key={category.id} slug={category.slug} name={category.name} id={category.id} />
         ))}
@@ -128,60 +130,72 @@ function Header() {
         </Modal>
       )}
       <header className={styles.header}>
-        <div className={styles.header__container}>
-          <div className={styles['header__row-one']}>
+        <div className={isScreenLg ? `${styles.header__container}` : `${styles.header__containerMobile}`}>
+          {isScreenLg && (
             <nav className={styles.header__nav}>
               <ul className={styles.header__list}>
-                <li className={styles.header__item}>
+                <li>
                   <ContextMenuElement className={styles.header__item} content={aboutUsNode}>
                     О нас
                   </ContextMenuElement>
                 </li>
+
                 {linkItems.map(item => (
                   <NavigationLink key={item.index} label={item.label} to={item.to} />
                 ))}
-                <ContextMenuElement className={styles.header__item} content={supportNode}>
-                  <LightningIcon className={classNames(styles.header__icon, styles.help_icon)} />
-                  Помощь
-                </ContextMenuElement>
+
+                <li>
+                  <ContextMenuElement className={styles.header__item} content={supportNode}>
+                    <LightningIcon className={classNames(styles.header__icon, styles.header__icon_help)} />
+                    Помощь
+                  </ContextMenuElement>
+                </li>
               </ul>
+
               <ContextMenuElement className={styles.header__item} content={contactNode} type="right">
-                <div className={styles['header__phone-wrapper']}>
+                <div className={styles.header__phoneWrapper}>
                   <Paragraph className={styles.header__text}>{coreBaseData.header.support.name}</Paragraph>
                   <Paragraph className={styles.header__item}>{phoneNumber}</Paragraph>
-                  <ArrowIcon className={classNames(styles.header__icon, styles.phone_icon)} />
+                  <ArrowIcon className={classNames(styles.header__icon, styles.header__icon_phone)} />
                 </div>
               </ContextMenuElement>
             </nav>
-          </div>
+          )}
 
-          <div className={styles['header__row-two']}>
+          <div className={isScreenLg ? `${styles.header__logo}` : `${styles.header__logoMobile}`}>
+            {!isScreenLg && <MenuIcon className={styles.header__menuIcon} />}
             {!logo ? (
               <LogoSkeleton width="138px" height="46px" />
             ) : (
               <Logo image={logo} width="138px" height="46px" />
             )}
-            <SearchProduct />
-            <HeaderAccount {...headerAccountData} />
           </div>
 
-          <div className={styles['header__row-three']}>
-            <ContextMenuElement content={catalogNode}>
-              <CatalogLink to={`${Routes.CATEGORIES}`} className={styles['header__catalog-link_main']}>
-                <div className={styles['header__catalog-wrapper']}>
-                  <IconCategories className={styles['header__svg']} />
-                  <Paragraph className={styles['header__catalog-text']}>Все категории</Paragraph>
+          {isScreenLg && <SearchProduct />}
+
+          <HeaderAccount {...headerAccountData} />
+
+          {isScreenLg && (
+            <ContextMenuElement content={catalogNode} className={styles.header__catalog}>
+              <CatalogLink to={`${Routes.CATEGORIES}`} className={styles.header__catalogLinkMain}>
+                <div className={styles.header__catalogWrapper}>
+                  <IconCategories className={styles.header__svg} />
+                  <Paragraph className={styles.header__catalogText}>Все категории</Paragraph>
                 </div>
               </CatalogLink>
             </ContextMenuElement>
+          )}
 
-            <div className={styles['header__tags']}>
+          {isScreenLg && (
+            <div className={styles.header__tags}>
               {isCategoriesLoading ? (
                 <ul className={styles.header__catalogLinkSkeleton}>
                   {Array(4)
                     .fill(0)
                     .map((_, i) => (
-                      <CatalogLinkSkeleton key={i} height={35} width={140} />
+                      <li key={i}>
+                        <CatalogLinkSkeleton height={35} width={140} />
+                      </li>
                     ))}
                 </ul>
               ) : (
@@ -196,7 +210,7 @@ function Header() {
                 ))
               )}
             </div>
-          </div>
+          )}
         </div>
       </header>
     </>
diff --git a/src/widgets/Header/header.module.scss b/src/widgets/Header/header.module.scss
index 68ea857d..678f5aa2 100644
--- a/src/widgets/Header/header.module.scss
+++ b/src/widgets/Header/header.module.scss
@@ -1,154 +1,152 @@
 @use '../../shared/styles/utils/variables' as var;
 
 .header {
-  background-color: var.$theme-primary-color;
-  width: 100%;
   display: flex;
   justify-content: center;
+  width: 100%;
+  background: var.$theme-primary-color;
+  padding: 5px 24px 10px;
 
-  &__svg {
-    margin-right: 8px;
-    transition: fill 0.25s;
-    fill: var.$white;
-  }
-
-  &__catalog-link_main:hover {
-    background-color: var.$white;
-    color: var.$black;
-  }
-
-  &__catalog-link_main:hover &__svg {
-    fill: var.$black;
+  &__container {
+    display: grid;
+    grid-template-columns: clamp(0px, 13%, 300px) 1fr auto;
+    grid-template-areas:
+      '.. nav ..'
+      'logo search account'
+      'catalog tags tags';
+    gap: 5px;
+    width: 100%;
+    max-width: 1422px;
   }
 
-  &__catalog-wrapper {
+  &__containerMobile {
     display: flex;
+    justify-content: space-between;
     align-items: center;
-  }
-
-  &__catalog-text {
-    color: var.$white;
-    font-size: 13px;
-    font-weight: 700;
-    letter-spacing: 0.1px;
-    text-transform: uppercase;
-    transition: color 0.25s;
-  }
-
-  &__catalog-link_main:hover &__catalog-text {
-    color: var.$black;
-  }
-
-  &__container {
-    padding: 0 10px;
-    display: flex;
     width: 100%;
-    max-width: 1420px;
-    flex-direction: column;
-    box-sizing: border-box;
+    min-height: 75px;
   }
 
-  &__item {
-    margin: 0;
-    padding: 0;
-    font-weight: 600;
-    font-size: 13px;
-    color: var.$white;
+  &__nav {
+    grid-area: nav;
     display: flex;
+    justify-content: space-between;
     align-items: center;
-  }
-
-  &__item-icon {
-    width: 20px;
-    height: 20px;
-    object-fit: contain;
-    margin-right: 5px;
-  }
-
-  &__link {
-    color: var.$white;
-    text-decoration: none;
+    width: 100%;
+    max-width: 800px;
   }
 
   &__list {
-    margin: 0;
-    padding: 0;
     display: flex;
-    list-style-type: none;
     align-items: center;
-    column-gap: 25px;
-  }
-
-  &__logo-link {
-    display: flex;
-    width: 138px;
-    height: 46px;
-    margin-right: 92px;
+    gap: 25px;
+    list-style-type: none;
   }
 
-  &__nav {
+  &__item {
     display: flex;
     align-items: center;
-    width: 800px;
-    justify-content: space-between;
-    margin-left: 230px;
+    font-size: 13px;
+    font-weight: 600;
+    color: var.$white;
   }
 
   &__icon {
-    object-fit: contain;
     display: flex;
     justify-content: center;
+    object-fit: contain;
     margin-right: 8px;
 
-    &.phone_icon {
+    &_phone {
       width: 12px;
       height: 12px;
       transform: rotate(90deg);
     }
 
-    &.help_icon {
+    &_help {
       width: 12px;
       height: 15px;
     }
   }
 
-  &__phone-wrapper {
+  &__phoneWrapper {
     display: flex;
-    column-gap: 5px;
     align-items: center;
+    gap: 5px;
   }
 
-  &__row-one {
-    display: flex;
-    margin-bottom: 10px;
-    margin-top: 10px;
+  &__text {
+    font-size: 13px;
+    font-weight: 600;
+    color: var.$header-color;
+  }
+
+  &__menuIcon {
+    cursor: pointer;
+  }
+
+  &__logo {
+    grid-area: logo;
+    width: 100%;
   }
 
-  &__row-three {
+  &__logoMobile {
     display: flex;
-    margin-bottom: 10px;
+    align-items: center;
+    gap: 20px;
+    width: fit-content;
+  }
+
+  &__catalog {
+    grid-area: catalog;
+    max-width: 150px;
   }
 
-  &__row-two {
+  &__catalogLinkMain:hover {
+    background: var.$white;
+    color: var.$black;
+  }
+
+  &__catalogWrapper {
     display: flex;
-    margin-bottom: 10px;
+    align-items: center;
+  }
+
+  &__svg {
+    margin-right: 8px;
+    transition: fill 0.25s;
+    fill: var.$white;
+  }
+
+  &__catalogText {
+    font-size: 13px;
+    font-weight: 700;
+    letter-spacing: 0.1px;
+    text-transform: uppercase;
+    color: var.$white;
+    transition: color 0.25s;
+  }
+
+  &__catalogLinkMain:hover &__svg {
+    fill: var.$black;
+  }
+
+  &__catalogLinkMain:hover &__catalogText {
+    color: var.$black;
   }
 
   &__tags {
+    grid-area: tags;
     display: flex;
     column-gap: 10px;
-    margin-left: 77px;
   }
 
-  &__text {
-    margin: 0;
-    padding: 0;
-    font-weight: 600;
-    font-size: 13px;
-    color: #aaa3f8;
+  &__catalogLinkSkeleton {
+    display: flex;
+    gap: 10px;
   }
 
-  &__context-menu-link {
+  &__contextMenuLink {
     color: var.$body-color;
     text-decoration: none;
     white-space: nowrap;
@@ -158,26 +156,20 @@
     }
   }
 
-  &__context-menu-list {
-    margin: 0;
+  &__contextMenuList {
     display: flex;
     flex-direction: column;
-    list-style-type: none;
-    padding: 20px 40px 20px 20px;
-    row-gap: 15px;
+    gap: 15px;
     max-height: 320px;
-    overflow-y: scroll;
-  }
+    padding: 20px 40px 20px 20px;
 
-  &__context-menu-item {
-    margin: 0;
-    padding: 0;
-    font-weight: 400;
-    font-size: 13px;
+    &_catalog {
+      overflow-y: scroll;
+    }
   }
 
-  &__catalogLinkSkeleton {
-    display: flex;
-    gap: 10px;
+  &__contextMenuItem {
+    font-size: 13px;
+    font-weight: 400;
   }
 }