diff --git a/src/components/Header/Header.module.scss b/src/components/Header/Header.module.scss
index 7443412..2abfdc7 100644
--- a/src/components/Header/Header.module.scss
+++ b/src/components/Header/Header.module.scss
@@ -1,135 +1,219 @@
-.header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid $elemnts-color;
-  position: relative;
-  background-color: $white-color;
-
-  &__menu {
-    display: flex;
-    align-items: center;
-  }
-
-  &__logo {
-    cursor: default;
-    width: 64px;
-    height: 20px;
-    margin-right: 32px;
-    margin-left: 16px;
-
-    @include onDesktop {
-      width: 80px;
-      height: 28px;
-      margin-right: 48px;
-      margin-left: 24px;
-    }
-  }
-
-  &__icons {
-    cursor: default;
-    display: flex;
-
-    &--like {
-      cursor: default;
-      display: none;
-      width: 16px;
-      height: 16px;
-      background-image: url(../../img/headerIcon/like.png);
-      background-size: cover;
-      background-repeat: no-repeat;
-      background-position: center;
-      margin: 16px;
-
-      @include onTablet {
-        margin: 16px;
-        display: block;
-      }
-
-      @include onDesktop {
-        margin: 24px;
-        display: block;
-      }
-    }
-
-    &--basket {
-      cursor: default;
-      display: none;
-      width: 16px;
-      height: 16px;
-      background-image: url(../../img/headerIcon/basket.png);
-      background-size: cover;
-      background-repeat: no-repeat;
-      background-position: center;
-      margin: 16px;
-
-      @include onTablet {
-        margin: 16px;
-        display: block;
-      }
-
-      @include onDesktop {
-        margin: 24px;
-        display: block;
-      }
-    }
-
-    &--menu {
-      width: 16px;
-      height: 16px;
-      background-image: url(../../img/headerIcon/Menu.png);
-      background-size: cover;
-      background-repeat: no-repeat;
-      background-position: center;
-      margin: 16px;
-
-      @include onTablet {
-        display: none;
-      }
-    }
-  }
-
-  &__icon--like {
-    display: block;
-    border-right: 1px solid $elemnts-color;
-    border-left: 1px solid $elemnts-color;
-    display: none;
-
-    @include onTablet {
-      display: block;
-    }
-  }
-
-  &__icon--menu {
-    display: block;
-    border-right: 1px solid $elemnts-color;
-    border-left: 1px solid $elemnts-color;
-
-    @include onTablet {
-      display: none;
-    }
-  }
-  &__icon--basket {
-    cursor: default;
-    position: relative;
-  }
-
-  &__icon--active {
-    &::after {
-      content: '';
-      position: absolute;
-      display: block;
-      width: 100%;
-      height: 3px;
-      background-color: #000;
-
-      @include onTablet {
-        bottom: 0px;
-      }
-
-      @include onDesktop {
-        bottom: 0px;
-      }
-    }
-  }
-}
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid $elemnts-color;
+  position: relative;
+  background-color: $white-color;
+  z-index: 5;
+
+  
+
+  &__menu {
+    display: flex;
+    align-items: center;
+  }
+
+  &__logo {
+    cursor: default;
+    width: 64px;
+    height: 20px;
+    margin-right: 32px;
+    margin-left: 16px;
+
+    @include onDesktop {
+      width: 80px;
+      height: 28px;
+      margin-right: 48px;
+      margin-left: 24px;
+    }
+  }
+
+  &__icons {
+    cursor: default;
+    display: flex;
+
+    &--like {
+      cursor: default;
+      display: none;
+      width: 16px;
+      height: 16px;
+      background-image: url(../../img/headerIcon/like.png);
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center;
+      margin: 16px;
+
+      @include onTablet {
+        margin: 16px;
+        display: block;
+      }
+
+      @include onDesktop {
+        margin: 24px;
+        display: block;
+      }
+    }
+
+    &--basket {
+      cursor: default;
+      display: none;
+      width: 16px;
+      height: 16px;
+      background-image: url(../../img/headerIcon/basket.png);
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center;
+      margin: 16px;
+
+      @include onTablet {
+        margin: 16px;
+        display: block;
+      }
+
+      @include onDesktop {
+        margin: 24px;
+        display: block;
+      }
+    }
+
+    &--menu {
+      cursor: default;
+      width: 16px;
+      height: 16px;
+      background-image: url(../../img/headerIcon/Menu.png);
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center;
+      margin: 16px;
+    }
+
+    &--close {
+      cursor: default;
+      width: 16px;
+      height: 16px;
+      background-image: url(../../img/closeButton/Close.png);
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center;
+      margin: 16px;
+    }
+  }
+
+  &__icon--like {
+    display: block;
+    border-right: 1px solid $elemnts-color;
+    border-left: 1px solid $elemnts-color;
+    display: none;
+
+    @include onTablet {
+      display: block;
+    }
+  }
+
+  &__icon--menu {
+    display: block;
+    border-right: 1px solid $elemnts-color;
+    border-left: 1px solid $elemnts-color;
+  }
+
+  &__icon--basket {
+    cursor: default;
+    position: relative;
+  }
+
+  &__icon--active {
+    &::after {
+      content: '';
+      position: absolute;
+      display: block;
+      width: 100%;
+      height: 3px;
+      background-color: #000;
+
+      @include onTablet {
+        bottom: -18px;
+      }
+      @include onDesktop {
+        bottom: 0px;
+      }
+    }
+  }
+
+  &__icon--close {
+    display: block;
+    border-right: 1px solid $elemnts-color;
+    border-left: 1px solid $elemnts-color;
+  }
+}
+
+.dropdown {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  z-index: 4;
+  background-color: $white-color;
+  flex-direction: column;
+  justify-content: space-between;
+
+  &-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 72px;
+  }
+
+  &-icons {
+    display: flex;
+    border-top: 1px solid $elemnts-color;
+  }
+
+  &__icons {
+    &--like {
+      cursor: default;
+      width: 16px;
+      height: 16px;
+      background-image: url(../../img/headerIcon/like.png);
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center;
+      margin: 16px 50%;
+    }
+
+    &--basket {
+      cursor: default;
+      width: 16px;
+      height: 16px;
+      background-image: url(../../img/headerIcon/basket.png);
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center;
+      margin: 16px 50%;
+    }
+  }
+
+  &__icon--like {
+    display: block;
+    border-right: 1px solid $elemnts-color;
+    width: 50%;
+  }
+
+  &__icon--basket {
+    display: block;
+    width: 50%;
+  }
+
+  &__icon--active {
+    &::after {
+      content: '';
+      position: absolute;
+      display: block;
+      width: 100%;
+      height: 3px;
+      background-color: #000;
+    }
+  }
+}
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 2c3eee8..d43e7a8 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { NavHeader } from './NavHeader';
 import styles from './Header.module.scss';
 import logo from '../../img/Logo.png';
@@ -9,33 +9,121 @@ import classNames from 'classnames';
 type Props = {};
 
 export const Header: React.FC<Props> = () => {
+  const [isMobileScreen, setIsMobileScreen] = useState(window.innerWidth < 640);
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  useEffect(() => {
+    const handleMenuOnResize = () => {
+      if (window.innerWidth > 639 && isMenuOpen) {
+        setIsMenuOpen(false);
+      }
+    };
+
+    window.addEventListener('resize', handleMenuOnResize);
+    return () => window.removeEventListener('resize', handleMenuOnResize);
+  }, [isMenuOpen]);
+
+  useEffect(() => {
+    const handleScreenSize = () => {
+      setIsMobileScreen(window.innerWidth < 640);
+    };
+
+    window.addEventListener('resize', handleScreenSize);
+    return () => window.removeEventListener('resize', handleScreenSize);
+  }, []);
+
+  const handleMenuOpen = () => {
+    setIsMenuOpen(!isMenuOpen);
+  };
+
   return (
-    <header className={styles.header}>
-      <div className={styles.header__menu}>
-        <NavLink to="/home">
-          <img className={styles.header__logo} src={logo} />
-        </NavLink>
-
-        <NavHeader />
-      </div>
-      <div className={styles.header__icons}>
-        <div className={styles['nav__icon--active']}>
-          <div className={styles['header__icons--like']}></div>
+    <>
+      <header className={styles.header}>
+        <div className={styles.header__menu}>
+          <NavLink to="/home" onClick={handleMenuOpen}>
+            <img
+              className={styles.header__logo}
+              src={logo}
+              alt="Nice Gadgets logo"
+            />
+          </NavLink>
+
+          {!isMobileScreen && <NavHeader handleMenuOpen={handleMenuOpen} />}
         </div>
-        <NavLink
-          to="/cart"
-          className={({ isActive }) =>
-            classNames([styles['header__icon--basket']], {
-              [styles['header__icon--active']]: isActive,
-            })
-          }
-        >
-          <div className={styles['header__icons--basket']}></div>
-        </NavLink>
-        <div className={styles['header__icon--menu']}>
-          <div className={styles['header__icons--menu']}></div>
+        <div className={styles.header__icons}>
+          {!isMobileScreen && (
+            <>
+              <div
+                className={classNames(
+                  styles['header__icon'],
+                  styles['header__icon--like'],
+                )}
+              >
+                <div className={styles['header__icons--like']}></div>
+              </div>
+              <NavLink
+                to="/cart"
+                onClick={handleMenuOpen}
+                className={({ isActive }) =>
+                  classNames([styles['header__icon--basket']], {
+                    [styles['header__icon--active']]: isActive,
+                  })
+                }
+              >
+                <div className={styles['header__icons--basket']}></div>
+              </NavLink>
+            </>
+          )}
+
+          {isMobileScreen && (
+            <div
+              className={
+                isMenuOpen
+                  ? styles['header__icon--close']
+                  : styles['header__icon--menu']
+              }
+              onClick={handleMenuOpen}
+            >
+              <div
+                className={
+                  isMenuOpen
+                    ? styles['header__icons--close']
+                    : styles['header__icons--menu']
+                }
+              ></div>
+            </div>
+          )}
+        </div>
+      </header>
+
+      {isMobileScreen && isMenuOpen && (
+        <div className={styles['dropdown']}>
+          <div className={styles['dropdown-content']}>
+            <NavHeader handleMenuOpen={handleMenuOpen} />
+          </div>
+          <div className={styles['dropdown-icons']}>
+            <div
+              className={classNames(
+                styles['dropdown__icon'],
+                styles['dropdown__icon--like'],
+              )}
+            >
+              <div className={styles['dropdown__icons--like']}></div>
+            </div>
+            <NavLink
+              to="/cart"
+              onClick={handleMenuOpen}
+              className={({ isActive }) =>
+                classNames([styles['dropdown__icon--basket']], {
+                  [styles['dropdown__icon--active']]: isActive,
+                })
+              }
+            >
+              <div className={styles['dropdown__icons--basket']}></div>
+            </NavLink>
+          </div>
         </div>
-      </div>
-    </header>
+      )}
+    </>
   );
 };
diff --git a/src/components/Header/NavHeader/NavHeader.module.scss b/src/components/Header/NavHeader/NavHeader.module.scss
index eb0cc32..371799c 100644
--- a/src/components/Header/NavHeader/NavHeader.module.scss
+++ b/src/components/Header/NavHeader/NavHeader.module.scss
@@ -1,10 +1,18 @@
 .nav {
-  display: none;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  padding-top: 24px;
+  align-items: center;
+  justify-content: flex-start;
 
   @include onTablet {
     display: flex;
     align-items: center;
     height: 48px;
+    gap: 0;
+    flex-direction: row;
+    padding-top: 0;
   }
 
   @include onDesktop {
@@ -45,6 +53,11 @@
       height: 3px;
       bottom: 0px;
       background-color: #000;
+      bottom: -8px;
+
+      @include onTablet {
+        bottom: 0;
+      }
     }
   }
 }
diff --git a/src/components/Header/NavHeader/NavHeader.tsx b/src/components/Header/NavHeader/NavHeader.tsx
index 5260e06..58ae7d8 100644
--- a/src/components/Header/NavHeader/NavHeader.tsx
+++ b/src/components/Header/NavHeader/NavHeader.tsx
@@ -3,23 +3,37 @@ import styles from './NavHeader.module.scss';
 import { NavLink } from 'react-router-dom';
 import classNames from 'classnames';
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
-type Props = {};
+type Props = {
+  handleMenuOpen: () => void;
+};
 
-export const NavHeader: React.FC<Props> = () => {
+export const NavHeader: React.FC<Props> = ({ handleMenuOpen }) => {
   const getNavLinkClass = ({ isActive }: { isActive: boolean }) =>
     classNames(styles.nav__icon, { [styles['nav__icon--active']]: isActive });
   return (
     <div className={styles.nav}>
-      <NavLink to="/" className={getNavLinkClass}>
+      <NavLink to="/" className={getNavLinkClass} onClick={handleMenuOpen}>
         Home
       </NavLink>
-      <NavLink to="/phones" className={getNavLinkClass}>
+      <NavLink
+        to="/phones"
+        className={getNavLinkClass}
+        onClick={handleMenuOpen}
+      >
         Phones
       </NavLink>
-      <NavLink to="/tablets" className={getNavLinkClass}>
+      <NavLink
+        to="/tablets"
+        className={getNavLinkClass}
+        onClick={handleMenuOpen}
+      >
         Tablets
       </NavLink>
-      <NavLink to="/accessories" className={getNavLinkClass}>
+      <NavLink
+        to="/accessories"
+        className={getNavLinkClass}
+        onClick={handleMenuOpen}
+      >
         Accessories
       </NavLink>
     </div>
diff --git a/src/components/OnlyMobile/Aside/Aside.scss b/src/components/OnlyMobile/Aside/Aside.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/OnlyMobile/Aside/AsideFooter/AsideFooter.scss b/src/components/OnlyMobile/Aside/AsideFooter/AsideFooter.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/OnlyMobile/Aside/AsideHeader/AsideHeader.scss b/src/components/OnlyMobile/Aside/AsideHeader/AsideHeader.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/OnlyMobile/Aside/AsideNav/AsideNav.scss b/src/components/OnlyMobile/Aside/AsideNav/AsideNav.scss
deleted file mode 100644
index e69de29..0000000