diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index af667d6..4fe8669 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -4,6 +4,7 @@ import { BackgroundComponent } from "../src/components";
 import { useEffect, useState } from "react";
 import { addons } from "@storybook/preview-api";
 import { DARK_MODE_EVENT_NAME } from "storybook-dark-mode";
+import { LayoutProvider } from "../src/hooks";
 
 /** @type { import('@storybook/react').Preview } */
 const preview = {
@@ -44,7 +45,7 @@ export default preview;
 export const decorators = [
   (renderStory) => (
     <BackgroundComponent className="storybook-background">
-      {renderStory()}
+      <LayoutProvider>{renderStory()}</LayoutProvider>
     </BackgroundComponent>
   ),
   (renderStory) => (
diff --git a/src/components/icons/burger-arrow-icon.component.tsx b/src/components/icons/burger-arrow-icon.component.tsx
new file mode 100644
index 0000000..6e9c6b7
--- /dev/null
+++ b/src/components/icons/burger-arrow-icon.component.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import { IconComponent } from "./icon.component";
+import type { IconProps } from "./icon.component";
+
+export const BurgerArrowIconComponent: React.FC<IconProps> = ({
+  fill = "white",
+  ...props
+}) => (
+  <IconComponent {...props}>
+    <path
+      d="M14.3491 3.45907C14.8495 3.07065 15.5725 3.11672 16.0191 3.58504C16.4953 4.08462 16.4765 4.87527 15.9771 5.35165L8.65187 12.335L15.9771 19.3194L16.065 19.4122C16.4771 19.8935 16.4657 20.6186 16.0191 21.087C15.5724 21.5552 14.8494 21.6005 14.3491 21.212L14.2515 21.129L5.97902 13.2403C5.73169 13.0045 5.59141 12.6778 5.59132 12.336C5.59132 11.9942 5.73162 11.6666 5.97902 11.4307L14.2515 3.54305L14.3491 3.45907Z"
+      fill={fill}
+    />
+  </IconComponent>
+);
diff --git a/src/components/icons/burger-cross-icon.component.tsx b/src/components/icons/burger-cross-icon.component.tsx
new file mode 100644
index 0000000..a24318f
--- /dev/null
+++ b/src/components/icons/burger-cross-icon.component.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import { IconComponent } from "./icon.component";
+import type { IconProps } from "./icon.component";
+
+export const BurgerCrossIconComponent: React.FC<IconProps> = ({
+  fill = "white",
+  ...props
+}) => (
+  <IconComponent {...props}>
+    <path
+      d="M3.7269 6.62755H20.2731M3.7269 12.1429H20.2731M3.7269 17.6583H20.2731"
+      stroke={fill}
+      strokeWidth="2.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </IconComponent>
+);
diff --git a/src/components/icons/burger-icon.component.tsx b/src/components/icons/burger-icon.component.tsx
new file mode 100644
index 0000000..4d7d08d
--- /dev/null
+++ b/src/components/icons/burger-icon.component.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import { IconComponent } from "./icon.component";
+import type { IconProps } from "./icon.component";
+
+export const BurgerIconComponent: React.FC<IconProps> = ({
+  fill = "white",
+  ...props
+}) => (
+  <IconComponent {...props}>
+    <path
+      d="M3.7269 6.62755H20.2731M3.7269 12.1429H20.2731M3.7269 17.6583H20.2731"
+      stroke={fill}
+      strokeWidth="2.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      fill={fill}
+    />
+  </IconComponent>
+);
diff --git a/src/components/icons/icons.stories.tsx b/src/components/icons/icons.stories.tsx
index 79667ec..8bb23a8 100644
--- a/src/components/icons/icons.stories.tsx
+++ b/src/components/icons/icons.stories.tsx
@@ -27,6 +27,9 @@ import { NetworkIconComponent } from "./network-icon.component";
 import { ForbiddenIconComponent } from "./forbidden-icon.component";
 import { AnalyticsIconComponent } from "./analytics-icon.component";
 import { KeysIconComponent } from "./keys-icon.component";
+import { BurgerIconComponent } from "./burger-icon.component";
+import { BurgerCrossIconComponent } from "./burger-cross-icon.component";
+import { BurgerArrowIconComponent } from "./burger-arrow-icon.component";
 
 export default {
   title: "Components/Icons",
@@ -55,6 +58,9 @@ export const Download = () => <DownloadIconComponent />;
 export const Forbidden = () => <ForbiddenIconComponent />;
 export const Analytics = () => <AnalyticsIconComponent />;
 export const Keys = () => <KeysIconComponent />;
+export const Burger = () => <BurgerIconComponent />;
+export const BurgerCross = () => <BurgerCrossIconComponent />;
+export const BurgerArrow = () => <BurgerArrowIconComponent />;
 
 export const CC = () => <CCIconComponent />;
 export const BY = () => <BYIconComponent />;
diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts
index aef8ae8..e85f159 100644
--- a/src/components/icons/index.ts
+++ b/src/components/icons/index.ts
@@ -18,6 +18,9 @@ export * from "./download-icon.component";
 export * from "./forbidden-icon.component";
 export * from "./analytics-icon.component";
 export * from "./keys-icon.component";
+export * from "./burger-icon.component";
+export * from "./burger-cross-icon.component";
+export * from "./burger-arrow-icon.component";
 
 export * from "./cc";
 export * from "./signal";
diff --git a/src/components/layout/footer/footer.module.scss b/src/components/layout/footer/footer.module.scss
index 344976c..0c7e3d2 100644
--- a/src/components/layout/footer/footer.module.scss
+++ b/src/components/layout/footer/footer.module.scss
@@ -5,7 +5,7 @@
   color: var(--text-0-c);
 
   display: flex;
-  padding: 4rem;
+  padding: 2rem;
   justify-content: space-between;
 
   text-align: center;
diff --git a/src/components/layout/header/header.component.tsx b/src/components/layout/header/header.component.tsx
index 319f55c..4ecec66 100644
--- a/src/components/layout/header/header.component.tsx
+++ b/src/components/layout/header/header.component.tsx
@@ -2,11 +2,27 @@ import * as React from "react";
 
 // @ts-ignore
 import styles from "./header.module.scss";
+import { useLayout } from "../../../hooks";
+import { useCallback } from "react";
+import { BurgerArrowIconComponent, BurgerIconComponent } from "../../icons";
 
 type Props = {
   children?: React.ReactNode;
 };
 
 export const HeaderComponent: React.FC<Props> = ({ children }) => {
-  return <header className={styles.header}>{children}</header>;
+  const { toggleNavigator, openNavigator } = useLayout();
+
+  const onClickBurger = useCallback(() => {
+    toggleNavigator();
+  }, [toggleNavigator]);
+
+  return (
+    <header className={styles.header}>
+      <div className={styles.burger} onClick={onClickBurger}>
+        {openNavigator ? <BurgerArrowIconComponent /> : <BurgerIconComponent />}
+      </div>
+      {children}
+    </header>
+  );
 };
diff --git a/src/components/layout/header/header.module.scss b/src/components/layout/header/header.module.scss
index 9b7c2c2..2894db1 100644
--- a/src/components/layout/header/header.module.scss
+++ b/src/components/layout/header/header.module.scss
@@ -1,3 +1,5 @@
+@use "../../../styles/all.module.scss" as *;
+
 .header {
   display: flex;
 
@@ -5,4 +7,14 @@
   align-items: center;
 
   padding: 1rem 1rem 1rem 0;
+
+  .burger {
+    display: none;
+    cursor: pointer;
+    margin-left: 2rem;
+
+    @include phone-only() {
+      display: inherit;
+    }
+  }
 }
diff --git a/src/components/layout/main-layout/main-layout.component.tsx b/src/components/layout/main-layout/main-layout.component.tsx
index 480c0bf..a6edb92 100644
--- a/src/components/layout/main-layout/main-layout.component.tsx
+++ b/src/components/layout/main-layout/main-layout.component.tsx
@@ -10,8 +10,10 @@ import {
   CardComponent,
   MainComponent,
   LicenseComponent,
+  HeaderComponent,
 } from "../../../components";
 import { cn } from "../../../utils";
+import { LayoutProvider } from "../../../hooks";
 
 type Props = {
   navigatorChildren?: React.ReactNode;
@@ -26,26 +28,28 @@ export const MainLayoutComponent: React.FC<Props> = ({
   footerChildren,
 }) => {
   return (
-    <BackgroundComponent>
-      <CardComponent className={styles.bigCard}>
-        <div className={styles.container}>
-          <NavigatorComponent children={navigatorChildren} />
-          <div className={styles.bigContainer}>
-            {/*{headerChildren && <HeaderComponent children={headerChildren} />}*/}
-            <MainComponent
-              className={cn(styles.main, {
-                [styles.headless]: !headerChildren,
-              })}
-              children={children}
-            />
+    <LayoutProvider>
+      <BackgroundComponent>
+        <CardComponent className={styles.bigCard}>
+          <div className={styles.container}>
+            <NavigatorComponent children={navigatorChildren} />
+            <div className={styles.bigContainer}>
+              <HeaderComponent children={headerChildren} />
+              <MainComponent
+                className={cn(styles.main, {
+                  [styles.headless]: !headerChildren,
+                })}
+                children={children}
+              />
+            </div>
           </div>
-        </div>
-        <FooterComponent>
-          <SocialComponent />
-          {footerChildren}
-          <LicenseComponent />
-        </FooterComponent>
-      </CardComponent>
-    </BackgroundComponent>
+          <FooterComponent>
+            <SocialComponent />
+            {footerChildren}
+            <LicenseComponent />
+          </FooterComponent>
+        </CardComponent>
+      </BackgroundComponent>
+    </LayoutProvider>
   );
 };
diff --git a/src/components/layout/main-layout/main-layout.stories.tsx b/src/components/layout/main-layout/main-layout.stories.tsx
index 1b12f21..86983a7 100644
--- a/src/components/layout/main-layout/main-layout.stories.tsx
+++ b/src/components/layout/main-layout/main-layout.stories.tsx
@@ -12,7 +12,7 @@ export default {
   component: MainLayoutComponent,
 };
 
-export const Primary = {
+export const MainLayout = {
   args: {
     headerChildren: (
       <>
@@ -96,3 +96,76 @@ export const Primary = {
     ),
   },
 };
+
+export const MainLayoutHeadless = {
+  args: {
+    navigatorChildren: (
+      <>
+        <NavItemComponent selected icon={<HomeIconComponent />}>
+          Home
+        </NavItemComponent>
+        <NavItemComponent icon={<HotelIconComponent />}>
+          Hotels
+        </NavItemComponent>
+        <NavItemComponent icon={<HotelIconComponent />}>
+          Hotels
+        </NavItemComponent>
+        <NavItemComponent icon={<HotelIconComponent />}>
+          Hotels or not hotels
+        </NavItemComponent>
+      </>
+    ),
+    children: (
+      <>
+        <div>content</div>
+        <br />
+        <div>content</div>
+        <br />
+        <div>content</div>
+        <br />
+        <div>content</div>
+        <br />
+        <div>content</div>
+        <br />
+        <div>
+          content1111111111111111111111111111111111111 1 1111kj hn1kjh1jkh
+          kjh1jkh 1hjk 1khj 1kjh1 hkj 1khjkh1j khj 1 sdf ;lkmjds fpkjlosdjklf
+          jklsdfjkl sdjklf jksldfj klsdfjklsdjlkf
+        </div>
+        <br />
+        <div>content</div>
+        <br />
+        <div>content</div>
+        <br />
+        <div>content</div>
+        <br />
+        <div>content</div>
+        <br />
+        <div>content</div>
+        <br />
+        <div>content</div>
+        <br />
+        <div>content</div>
+        <br />
+        <div>content</div>
+        <br />
+        <div>content</div>
+        <br />
+        <div>content</div>
+        <br />
+        <div>content</div>
+        <br />
+        <div>content</div>
+        <br />
+      </>
+    ),
+    footerChildren: (
+      <>
+        <a href="#">Manifest</a>
+        <a href="#">Report a bug</a>
+        <a href="#">Run your own hotel</a>
+        <a href="#">Terms and conditions</a>
+      </>
+    ),
+  },
+};
diff --git a/src/components/layout/navigation/nav-item/nav-item.component.tsx b/src/components/layout/navigation/nav-item/nav-item.component.tsx
index aa2a5b0..8ba5938 100644
--- a/src/components/layout/navigation/nav-item/nav-item.component.tsx
+++ b/src/components/layout/navigation/nav-item/nav-item.component.tsx
@@ -5,6 +5,7 @@ import styles from "./nav-item.module.scss";
 import { cn } from "../../../../utils";
 import type { BoxProps } from "../../../../components";
 import { ButtonComponent } from "../../../../components";
+import { useLayout } from "../../../../hooks";
 
 type Props = {
   className?: string;
@@ -20,11 +21,14 @@ export const NavItemComponent: React.FC<Props> = ({
   children,
   ...props
 }) => {
+  const { toggleNavigator } = useLayout();
+
   return (
     <ButtonComponent
       {...props}
       color={selected ? "blue" : "dark"}
       className={cn(className, styles.navItem, [styles.selected, selected])}
+      onClick={toggleNavigator}
     >
       {icon}
       <span className={styles.text}>{children}</span>
diff --git a/src/components/layout/navigation/navigator/navigator.component.tsx b/src/components/layout/navigation/navigator/navigator.component.tsx
index 7a04f6c..b5702e5 100644
--- a/src/components/layout/navigation/navigator/navigator.component.tsx
+++ b/src/components/layout/navigation/navigator/navigator.component.tsx
@@ -1,15 +1,22 @@
 import * as React from "react";
 
 // @ts-ignore
-import styles from "./navigation.module.scss";
+import styles from "./navigator.module.scss";
 // @ts-ignore
 import image from "../../../../../assets/logo.png";
+import { useLayout } from "../../../../hooks";
+import { cn } from "../../../../utils";
 
 type Props = {} & React.HTMLProps<HTMLDivElement>;
 
 export const NavigatorComponent: React.FC<Props> = ({ children }) => {
+  const { openNavigator } = useLayout();
   return (
-    <nav className={styles.navigator}>
+    <nav
+      className={cn(styles.navigator, {
+        [styles.open]: openNavigator,
+      })}
+    >
       <div className={styles.logo}>
         <img alt="logo" src={image} />
       </div>
diff --git a/src/components/layout/navigation/navigator/navigation.module.scss b/src/components/layout/navigation/navigator/navigator.module.scss
similarity index 76%
rename from src/components/layout/navigation/navigator/navigation.module.scss
rename to src/components/layout/navigation/navigator/navigator.module.scss
index 6ade1b1..a8c4249 100644
--- a/src/components/layout/navigation/navigator/navigation.module.scss
+++ b/src/components/layout/navigation/navigator/navigator.module.scss
@@ -1,9 +1,18 @@
+@use "../../../../styles/all.module" as *;
+
 .navigator {
   display: flex;
   flex-direction: column;
 
   padding: 1rem;
 
+  &.open {
+    display: flex !important;
+  }
+  @include phone-only() {
+    display: none;
+  }
+
   .logo {
     margin: 0 auto;
 
diff --git a/src/components/layout/navigation/navigator/navigator.stories.ts b/src/components/layout/navigation/navigator/navigator.stories.ts
index c95ce67..1833d21 100644
--- a/src/components/layout/navigation/navigator/navigator.stories.ts
+++ b/src/components/layout/navigation/navigator/navigator.stories.ts
@@ -1,10 +1,10 @@
 import { NavigatorComponent } from "./navigator.component";
 
 export default {
-  title: "Components/Layout/Navigation/Navigator",
+  title: "Components/Layout/Navigator",
   component: NavigatorComponent,
 };
 
-export const Primary = {
+export const Navigator = {
   args: {},
 };
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index 4f0eff0..98f47e7 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -1,3 +1,4 @@
 export * from "./use-click-outside";
 export * from "./use-modal";
 export * from "./use-theme";
+export * from "./use-layout";
diff --git a/src/hooks/use-layout.tsx b/src/hooks/use-layout.tsx
new file mode 100644
index 0000000..3a22c81
--- /dev/null
+++ b/src/hooks/use-layout.tsx
@@ -0,0 +1,35 @@
+import { createContext, useCallback, useContext, useState } from "react";
+import type React from "react";
+
+type LayoutState = {
+  openNavigator: boolean;
+  toggleNavigator: () => void;
+};
+
+const LayoutContext = createContext<LayoutState>(undefined);
+
+type LayoutProps = {
+  children: React.ReactNode;
+};
+
+export const LayoutProvider: React.FunctionComponent<LayoutProps> = ({
+  children,
+}) => {
+  const [openNavigator, setOpenNavigator] = useState<boolean>(false);
+
+  const toggleNavigator = useCallback(() => {
+    setOpenNavigator((open) => !open);
+  }, [setOpenNavigator]);
+
+  return (
+    <LayoutContext.Provider
+      value={{
+        openNavigator,
+        toggleNavigator,
+      }}
+      children={children}
+    />
+  );
+};
+
+export const useLayout = (): LayoutState => useContext(LayoutContext);